wini-web-components 1.8.4 → 1.9.0

package/dist/component/calendar/calendar.js

@@ -32,9 +32,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Calendar = exports.CalendarType = exports.inRangeTime = exports.endDate = exports.startDate = exports.today = void 0;
 var react_1 = __importDefault(require("react"));
 var calendar_module_css_1 = __importDefault(require("./calendar.module.css"));
-var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 var date_fns_1 = require("date-fns");
+var winicon_1 = require("../wini-icon/winicon");
 exports.today = new Date();
 exports.startDate = new Date(exports.today.getFullYear() - 100, exports.today.getMonth(), exports.today.getDate());
 exports.endDate = new Date(exports.today.getFullYear() + 100, exports.today.getMonth(), exports.today.getDate());
@@ -323,7 +322,7 @@ var Calendar = /** @class */ (function (_super) {
                                             break;
                                     }
                                 } },
-                                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faAngleDoubleLeft })),
+                                react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/double-arrow-left", size: '1.6rem' })),
                             react_1.default.createElement("button", { type: 'button', onClick: function () {
                                     switch (_this.state.type) {
                                         case CalendarType.YEAR:
@@ -345,7 +344,7 @@ var Calendar = /** @class */ (function (_super) {
                                             break;
                                     }
                                 } },
-                                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faAngleLeft })),
+                                react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/left-arrow", size: '1.6rem' })),
                             react_1.default.createElement("span", { className: "heading-7", onClick: function () {
                                     if (_this.state.type !== CalendarType.YEAR)
                                         _this.setState(__assign(__assign({}, _this.state), { type: _this.state.type === CalendarType.DATE ? CalendarType.MONTH : CalendarType.YEAR }));
@@ -371,7 +370,7 @@ var Calendar = /** @class */ (function (_super) {
                                             break;
                                     }
                                 } },
-                                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faAngleRight })),
+                                react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/double-arrow-right", size: '1.6rem' })),
                             react_1.default.createElement("button", { type: 'button', onClick: function () {
                                     switch (_this.state.type) {
                                         case CalendarType.YEAR:
@@ -395,7 +394,7 @@ var Calendar = /** @class */ (function (_super) {
                                             break;
                                     }
                                 } },
-                                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faAngleDoubleRight }))),
+                                react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/right-arrow", size: '1.6rem' }))),
                         react_1.default.createElement("div", { className: "".concat(calendar_module_css_1.default['picker-date-body'], " row") }, this.state.type === CalendarType.YEAR ? this.showYearInRange() : this.state.type === CalendarType.MONTH ? this.showMonthInYear() : this.showDateInMonth())),
                     this.props.type === CalendarType.DATETIME ? react_1.default.createElement("div", { className: "".concat(calendar_module_css_1.default['picker-time-container'], " col") },
                         react_1.default.createElement("div", { className: "heading-7" },

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

@@ -98,13 +98,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectMultiple = void 0;
-var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 require("./input-multi-select.css");
 var checkbox_1 = require("../checkbox/checkbox");
 var text_1 = require("../text/text");
+var winicon_1 = require("../wini-icon/winicon");
 ;
 var SelectMultiple = /** @class */ (function (_super) {
     __extends(SelectMultiple, _super);
@@ -213,7 +212,7 @@ var SelectMultiple = /** @class */ (function (_super) {
                             }) }));
                     }
                 } : undefined },
-                ((_b = this.state.search) !== null && _b !== void 0 ? _b : this.state.options).some(function (e) { return e.parentId; }) && react_1.default.createElement("div", { className: 'row', style: { width: '1.4rem', height: '1.4rem' } }, children.length ? react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: item.isOpen ? free_solid_svg_icons_1.faCaretDown : free_solid_svg_icons_1.faCaretRight, style: { fontSize: '1.2rem', color: '#161C2499' } }) : null),
+                ((_b = this.state.search) !== null && _b !== void 0 ? _b : this.state.options).some(function (e) { return e.parentId; }) && react_1.default.createElement("div", { className: 'row', style: { width: '1.4rem', height: '1.4rem' } }, children.length ? react_1.default.createElement(winicon_1.Winicon, { src: item.isOpen ? 'fill/arrows/triangle-down' : 'fill/arrows/triangle-right', size: '1.2rem' }) : null),
                 react_1.default.createElement(checkbox_1.Checkbox, { disabled: item.disabled, value: children.length ? (children.every(function (e) { return _this.state.value.includes(e.id); }) ? true : children.some(function (e) { return _this.state.value.includes(e.id); }) ? undefined : false) : this.state.value.includes(item.id), onChange: function (v) { _this.onCheck(v, __spreadArray([item], children, true)); }, size: '2rem' }),
                 react_1.default.createElement(text_1.Text, { className: 'body-3' }, item.name)),
             react_1.default.createElement("div", { className: 'col', style: { display: item.isOpen ? "flex" : "none", width: '100%' } }, children.map(function (e) { return _this.renderOptions(e); })));
@@ -267,7 +266,7 @@ var SelectMultiple = /** @class */ (function (_super) {
                     var optionItem = _this.props.options.find(function (e) { return e.id === item; });
                     return react_1.default.createElement("div", { key: item, className: 'selected-item-value row', onClick: function (ev) { return _this.onClickItem(ev, item); } },
                         react_1.default.createElement(text_1.Text, { style: { color: '#161D24E5', fontSize: '1.2rem', lineHeight: '1.4rem' } }, optionItem === null || optionItem === void 0 ? void 0 : optionItem.name),
-                        react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faClose, style: { color: '#161D24E5', fontSize: '1.2rem' } }));
+                        react_1.default.createElement(winicon_1.Winicon, { src: "outline/user interface/e-remove", size: '1.2rem' }));
                 }),
                 (!this.state.value.length || this.state.isOpen) && react_1.default.createElement("input", { autoFocus: this.state.isOpen, onChange: this.search, placeholder: this.state.value.length ? undefined : this.props.placeholder, onBlur: function (ev) {
                         if (_this.state.onSelect)
@@ -280,8 +279,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-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)" } })),
+                react_1.default.createElement(winicon_1.Winicon, { src: "outline/user interface/c-remove", size: '1.6rem' })) : react_1.default.createElement("div", { className: 'row', style: { display: (this.containerRef.current && this.containerRef.current.getBoundingClientRect().width >= 120) ? "flex" : "none" } },
+                react_1.default.createElement(winicon_1.Winicon, { src: this.state.isOpen ? "fill/arrows/up-arrow" : "fill/arrows/down-arrow", size: '1.2rem' })),
             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',

package/dist/component/pagination/pagination.js

@@ -30,11 +30,10 @@ exports.Pagination = void 0;
 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 react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 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");
 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)();
@@ -64,7 +63,7 @@ function Pagination(_a) {
                     onChangePage(ev.selected + 1, itemPerPage);
                 }, forcePage: currentPage - 1, 
                 // initialPage={currentPage - 1}
-                breakClassName: "row button-text-3", breakLabel: "...", pageCount: Math.ceil(totalItem / itemPerPage), previousClassName: "row", previousLabel: react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronLeft, style: { fontSize: '1.4rem' } }), nextClassName: "row", nextLabel: react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight, style: { fontSize: '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) {
+                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 }),
             hideGoToPage ? null : react_1.default.createElement(react_1.default.Fragment, null,

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

@@ -18,8 +18,6 @@ exports.ProgressBar = void 0;
 var react_1 = require("react");
 require("./progress-bar.css");
 var react_2 = __importDefault(require("react"));
-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-main-background-color)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--infor-main-color)' : _g, style = _a.style, progressBarStyle = _a.progressBarStyle;
@@ -28,7 +26,7 @@ function ProgressBar(_a) {
         (hideTitle || progressBarOnly) ? null : (title !== null && title !== void 0 ? title : react_2.default.createElement("div", { className: "progress-bar-title row" },
             react_2.default.createElement("div", { className: "heading-text" }, titleText),
             react_2.default.createElement("button", { type: "button", className: "suffix-action", onClick: function () { setOpenDetails(!openDetails); } },
-                react_2.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: openDetails ? free_solid_svg_icons_1.faChevronDown : free_solid_svg_icons_1.faChevronUp })))),
+                react_2.default.createElement(index_1.Winicon, { src: openDetails ? "fill/arrows/down-arrow" : "fill/arrows/up-arrow" })))),
         openDetails ? react_2.default.createElement("div", { className: 'progress-bar-tile row' },
             react_2.default.createElement("div", { className: "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: 'status-icon' }, (0, index_1.getStatusIcon)(status)),

package/dist/component/select1/select1.js

@@ -90,11 +90,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select1 = void 0;
 var select1_module_css_1 = __importDefault(require("./select1.module.css"));
-var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var text_1 = require("../text/text");
+var winicon_1 = require("../wini-icon/winicon");
 ;
 var Select1 = /** @class */ (function (_super) {
     __extends(Select1, _super);
@@ -227,7 +226,7 @@ var Select1 = /** @class */ (function (_super) {
                 } : function () {
                     _this.onSelect(item);
                 } },
-                ((_b = this.state.search) !== null && _b !== void 0 ? _b : this.state.options).some(function (e) { return e.parentId; }) && react_1.default.createElement("div", { className: 'row', style: { width: '1.4rem', height: '1.4rem' } }, children.length ? react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: item.isOpen ? free_solid_svg_icons_1.faCaretDown : free_solid_svg_icons_1.faCaretRight, style: { fontSize: '1.2rem', color: '#161C2499' } }) : null),
+                ((_b = this.state.search) !== null && _b !== void 0 ? _b : this.state.options).some(function (e) { return e.parentId; }) && react_1.default.createElement("div", { className: 'row', style: { width: '1.4rem', height: '1.4rem' } }, children.length ? react_1.default.createElement(winicon_1.Winicon, { src: item.isOpen ? "fill/arrows/triangle-down" : "fill/arrows/triangle-right", size: "1.2rem" }) : null),
                 react_1.default.createElement(text_1.Text, { className: 'body-3' }, item.name)),
             react_1.default.createElement("div", { className: 'col', style: { display: item.isOpen ? "flex" : "none", width: '100%' } }, children.map(function (e) { return _this.renderOptions(e); })));
     };
@@ -297,7 +296,7 @@ var Select1 = /** @class */ (function (_super) {
                     if ((iconRef === null || iconRef === void 0 ? void 0 : iconRef.parentElement) && iconRef.parentElement.getBoundingClientRect().width < 100)
                         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-subtitle-color)" } })),
+                react_1.default.createElement(winicon_1.Winicon, { src: this.state.isOpen ? "fill/arrows/up-arrow" : "fill/arrows/down-arrow", size: "1.2rem" })),
             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/slider/slider.js

@@ -22,8 +22,7 @@ exports.CustomSlider = void 0;
 var react_1 = __importDefault(require("react"));
 var react_awesome_slider_1 = __importDefault(require("react-awesome-slider"));
 require("./slider.css");
-var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+var winicon_1 = require("../wini-icon/winicon");
 var CustomSlider = /** @class */ (function (_super) {
     __extends(CustomSlider, _super);
     function CustomSlider(props) {
@@ -74,8 +73,8 @@ var CustomSlider = /** @class */ (function (_super) {
             clearInterval(this.intervalPlay);
     };
     CustomSlider.prototype.render = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return react_1.default.createElement(react_awesome_slider_1.default, { style: this.props.style, className: "custom-slider-container ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : ''), selected: this.state.page, bullets: false, buttons: this.props.buttons ? (this.props.children && ((_b = this.props.children) === null || _b === void 0 ? void 0 : _b.length) > 1) : false, organicArrows: false, buttonContentLeft: (_c = this.props.prevButton) !== null && _c !== void 0 ? _c : react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCircleChevronLeft, style: { color: (_d = this.props.iconColor) !== null && _d !== void 0 ? _d : '#ffffff', fontSize: (_e = this.props.iconSize) !== null && _e !== void 0 ? _e : '2.4rem' } }), buttonContentRight: (_f = this.props.nextButton) !== null && _f !== void 0 ? _f : react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCircleChevronRight, style: { color: (_g = this.props.iconColor) !== null && _g !== void 0 ? _g : '#ffffff', fontSize: (_h = this.props.iconSize) !== null && _h !== void 0 ? _h : '2.4rem' } }) }, this.props.children);
+        var _a, _b, _c, _d, _e, _f;
+        return react_1.default.createElement(react_awesome_slider_1.default, { style: this.props.style, className: "custom-slider-container ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : ''), selected: this.state.page, bullets: false, buttons: this.props.buttons ? (this.props.children && ((_b = this.props.children) === null || _b === void 0 ? void 0 : _b.length) > 1) : false, organicArrows: false, buttonContentLeft: (_c = this.props.prevButton) !== null && _c !== void 0 ? _c : react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/circle-ctrl-left", size: "2.4rem", color: (_d = this.props.iconColor) !== null && _d !== void 0 ? _d : "var(--neutral-absolute-background-color)" }), buttonContentRight: (_e = this.props.nextButton) !== null && _e !== void 0 ? _e : react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/circle-ctrl-right", size: "2.4rem", color: (_f = this.props.iconColor) !== null && _f !== void 0 ? _f : "var(--neutral-absolute-background-color)" }) }, this.props.children);
     };
     return CustomSlider;
 }(react_1.default.Component));