wini-web-components 1.5.9 → 1.6.1

package/dist/component/dialog/dialog.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './dialog.css';
 import { ComponentStatus } from '../../index';
 export declare enum DialogAlignment {
     start = "start",
@@ -13,15 +12,17 @@ interface DialogState {
     content: string;
     onSubmit: Function;
     submitTitle?: string;
+    cancelTitle?: string;
     alignment?: DialogAlignment;
 }
-export declare const showDialog: ({ ref, title, status, content, onSubmit, submitTitle, alignment }: {
+export declare const showDialog: ({ ref, title, status, content, onSubmit, submitTitle, cancelTitle, alignment }: {
     ref: React.MutableRefObject<Dialog>;
     title?: string | undefined;
     status?: ComponentStatus | undefined;
     content?: string | undefined;
     onSubmit?: Function | undefined;
     submitTitle?: string | undefined;
+    cancelTitle?: string | undefined;
     alignment?: DialogAlignment | undefined;
 }) => void;
 export declare class Dialog extends React.Component<Object, DialogState> {

package/dist/component/dialog/dialog.js

@@ -32,7 +32,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = exports.showDialog = exports.DialogAlignment = void 0;
 var react_1 = __importDefault(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
-require("./dialog.css");
+var dialog_module_css_1 = __importDefault(require("./dialog.module.css"));
 var index_1 = require("../../index");
 var DialogAlignment;
 (function (DialogAlignment) {
@@ -41,13 +41,14 @@ var DialogAlignment;
     DialogAlignment["end"] = "end";
 })(DialogAlignment = exports.DialogAlignment || (exports.DialogAlignment = {}));
 var showDialog = function (_a) {
-    var ref = _a.ref, title = _a.title, status = _a.status, content = _a.content, onSubmit = _a.onSubmit, submitTitle = _a.submitTitle, alignment = _a.alignment;
+    var ref = _a.ref, title = _a.title, status = _a.status, content = _a.content, onSubmit = _a.onSubmit, submitTitle = _a.submitTitle, cancelTitle = _a.cancelTitle, alignment = _a.alignment;
     ref.current.showDialogNoti({
         title: title !== null && title !== void 0 ? title : '',
         status: status !== null && status !== void 0 ? status : index_1.ComponentStatus.INFOR,
         content: content !== null && content !== void 0 ? content : '',
         onSubmit: onSubmit !== null && onSubmit !== void 0 ? onSubmit : (function () { }),
         submitTitle: submitTitle,
+        cancelTitle: cancelTitle,
         alignment: alignment
     });
 };
@@ -73,23 +74,20 @@ var Dialog = /** @class */ (function (_super) {
     };
     Dialog.prototype.render = function () {
         var _this = this;
-        var _a;
+        var _a, _b;
         return (react_1.default.createElement(react_1.default.Fragment, null, this.state.open &&
-            react_dom_1.default.createPortal(react_1.default.createElement("div", { className: 'dialog-overlay' },
-                react_1.default.createElement("div", { className: 'dialog-container col', style: { width: '41.4rem', alignItems: this.state.alignment }, "dialog-type": this.state.status, onClick: function (e) { return e.stopPropagation(); } },
-                    react_1.default.createElement("div", { key: 'dialog-body', className: 'dialog-body col', style: { alignItems: 'inherit' } },
-                        react_1.default.createElement("div", { className: 'dialog-status row' }, (0, index_1.getStatusIcon)(this.state.status)),
-                        react_1.default.createElement("div", { className: 'dialog-title', style: { textAlign: this.state.alignment === DialogAlignment.center ? 'center' : 'start' } }, this.state.title),
-                        react_1.default.createElement("div", { className: 'dialog-content', style: { textAlign: this.state.alignment === DialogAlignment.center ? 'center' : 'start' } }, this.state.content)),
-                    react_1.default.createElement("div", { key: 'dialog-footer', className: 'dialog-footer row' },
-                        react_1.default.createElement("button", { type: 'button', style: this.state.alignment === DialogAlignment.center ? { flex: 1, width: '100%' } : undefined, onClick: function () { return _this.setState({ open: false }); }, className: 'dialog-action' }, "Quay l\u1EA1i"),
+            react_dom_1.default.createPortal(react_1.default.createElement("div", { className: dialog_module_css_1.default['dialog-overlay'] },
+                react_1.default.createElement("div", { className: "".concat(dialog_module_css_1.default['dialog-container'], " col"), style: { width: '41.4rem', alignItems: this.state.alignment }, "dialog-type": this.state.status, onClick: function (e) { return e.stopPropagation(); } },
+                    react_1.default.createElement("div", { key: 'dialog-body', className: "".concat(dialog_module_css_1.default['dialog-body'], " col"), style: { alignItems: 'inherit' } },
+                        react_1.default.createElement("div", { className: "".concat(dialog_module_css_1.default['dialog-status'], " row") }, (0, index_1.getStatusIcon)(this.state.status)),
+                        react_1.default.createElement("div", { className: dialog_module_css_1.default['dialog-title'], style: { textAlign: this.state.alignment === DialogAlignment.center ? 'center' : 'start' } }, this.state.title),
+                        react_1.default.createElement("div", { className: dialog_module_css_1.default['dialog-content'], style: { textAlign: this.state.alignment === DialogAlignment.center ? 'center' : 'start' } }, this.state.content)),
+                    react_1.default.createElement("div", { key: 'dialog-footer', className: "".concat(dialog_module_css_1.default['dialog-footer'], " row") },
+                        react_1.default.createElement("button", { type: 'button', style: this.state.alignment === DialogAlignment.center ? { flex: 1, width: '100%' } : undefined, onClick: function () { return _this.setState({ open: false }); }, className: dialog_module_css_1.default['dialog-action'] }, (_a = this.state.cancelTitle) !== null && _a !== void 0 ? _a : "Quay lại"),
                         react_1.default.createElement("button", { type: 'button', style: this.state.alignment === DialogAlignment.center ? { flex: 1, width: '100%' } : undefined, onClick: function () {
                                 _this.state.onSubmit();
                                 _this.setState({ open: false });
-                            }, className: 'dialog-action dialog-submit' }, (_a = this.state.submitTitle) !== null && _a !== void 0 ? _a : 'Xác nhận')),
-                    react_1.default.createElement("button", { type: 'button', onClick: function () { return _this.setState({ open: false }); }, className: 'dialog-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 }))))), document.body)));
+                            }, className: "".concat(dialog_module_css_1.default['dialog-action'], " ").concat(dialog_module_css_1.default['dialog-submit']) }, (_b = this.state.submitTitle) !== null && _b !== void 0 ? _b : 'Xác nhận')))), document.body)));
     };
     return Dialog;
 }(react_1.default.Component));

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(--background)' : _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-background-main)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--infor-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/select1/select1.d.ts

@@ -1,5 +1,4 @@
 import React, { CSSProperties, ReactNode } from 'react';
-import './select1.css';
 export interface OptionsItem {
     id: string | number;
     parentId?: string;

package/dist/component/select1/select1.js

@@ -89,11 +89,11 @@ 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"));
-require("./select1.css");
 var text_1 = require("../text/text");
 ;
 var Select1 = /** @class */ (function (_super) {
@@ -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: "select-tile row ".concat(item.disabled ? "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(--selected-background)" : 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)
@@ -245,7 +245,7 @@ var Select1 = /** @class */ (function (_super) {
             this.inputRef.current.value = "".concat((_d = (_c = this.state.options.find(function (e) { return e.id === _this.state.value; })) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : "");
         //
         if (this.state.isOpen && prevState.isOpen !== this.state.isOpen) {
-            var thisPopupRect = (_e = document.body.querySelector('.select1-popup')) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
+            var thisPopupRect = (_e = document.body.querySelector(':scope > .col[class*="select1-popup"]')) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
             if (thisPopupRect) {
                 var style = void 0;
                 if (thisPopupRect.right > document.body.offsetWidth) {
@@ -279,7 +279,7 @@ var Select1 = /** @class */ (function (_super) {
         var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         var _value = this.state.options.find(function (e) { return e.id === _this.state.value; });
-        return react_1.default.createElement("div", { id: this.props.id, ref: this.containerRef, className: "select1-container row ".concat(this.props.disabled ? 'disabled' : '', " ").concat(((_a = this.props.helperText) === null || _a === void 0 ? void 0 : _a.length) && 'helper-text', " ").concat((_b = this.props.className) !== null && _b !== void 0 ? _b : 'body-3'), "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' }, onClick: function () {
+        return react_1.default.createElement("div", { id: this.props.id, ref: this.containerRef, className: "".concat(select1_module_css_1.default['select1-container'], " row ").concat(this.props.disabled ? select1_module_css_1.default['disabled'] : '', " ").concat(((_a = this.props.helperText) === null || _a === void 0 ? void 0 : _a.length) && select1_module_css_1.default['helper-text'], " ").concat((_b = this.props.className) !== null && _b !== void 0 ? _b : 'body-3'), "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' }, onClick: function () {
                 var _a, _b, _c;
                 if (!_this.state.isOpen) {
                     _this.setState(__assign(__assign({}, _this.state), { isOpen: true, style: undefined, offset: (_b = (_a = _this.containerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect() }));
@@ -300,14 +300,14 @@ var Select1 = /** @class */ (function (_super) {
                 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)" } })),
             this.state.isOpen &&
-                react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "select1-popup col ".concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
+                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',
                         left: this.state.offset.x + 'px',
                         width: this.state.offset.width,
                     }, onMouseOver: function (ev) { return _this.setState(__assign(__assign({}, _this.state), { onSelect: ev.target })); }, onMouseOut: function () { return _this.setState(__assign(__assign({}, _this.state), { onSelect: null })); } },
-                    react_1.default.createElement("div", { className: 'col select-body' },
+                    react_1.default.createElement("div", { className: "col ".concat(select1_module_css_1.default['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); }),
-                        (((_h = this.state.search) === null || _h === void 0 ? void 0 : _h.length) === 0 || ((_j = this.props.options) === null || _j === void 0 ? void 0 : _j.length) === 0) && (react_1.default.createElement("div", { className: 'no-results-found' }, "No result found")))), document.body));
+                        (((_h = this.state.search) === null || _h === void 0 ? void 0 : _h.length) === 0 || ((_j = this.props.options) === null || _j === void 0 ? void 0 : _j.length) === 0) && (react_1.default.createElement("div", { className: select1_module_css_1.default['no-results-found'] }, "No result found")))), document.body));
     };
     return Select1;
 }(react_1.default.Component));

package/dist/component/switch/switch.js

@@ -52,7 +52,7 @@ 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(--background)',
+            '--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)',
             '--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/index.d.ts

@@ -1,4 +1,4 @@
-import './skin/color.css';
+import './skin/root.css';
 import './skin/layout.css';
 import './skin/typography.css';
 import { Checkbox } from './component/checkbox/checkbox';