wini-web-components 0.5.0 → 0.5.2

package/dist/component/import-file/import-file.js

@@ -0,0 +1,117 @@
+"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.ImportFile = void 0;
+var react_1 = __importDefault(require("react"));
+require("./import-file.css");
+var index_1 = require("../../index");
+var cloudSvg = (react_1.default.createElement("svg", { width: '100%', height: '100%', style: { width: '3rem', height: '3rem' }, viewBox: '0 0 36 36', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    react_1.default.createElement("path", { d: 'M22.5312 6.51941C20.3258 6.12929 18.0555 6.35518 15.9702 7.1722C13.8849 7.98923 12.0654 9.36573 10.712 11.1502C9.53042 12.7081 8.74407 14.5243 8.41412 16.4432C6.99557 16.9154 5.7486 17.8144 4.85059 19.0274C3.77621 20.4786 3.27749 22.2764 3.45068 24.0737C3.62388 25.871 4.45672 27.5405 5.78845 28.7599C7.12018 29.9792 8.85639 30.6621 10.662 30.6766H13.1063C13.7786 30.6766 14.3236 30.1316 14.3236 29.4594C14.3236 28.7871 13.7786 28.2421 13.1063 28.2421H10.6769C9.47485 28.2313 8.31921 27.7762 7.43253 26.9643C6.54471 26.1514 5.98948 25.0384 5.87402 23.8402C5.75855 22.642 6.09103 21.4435 6.80729 20.476C7.52354 19.5085 8.57279 18.8406 9.75252 18.6013C10.2753 18.4952 10.6682 18.061 10.7216 17.5303C10.9012 15.7476 11.5691 14.049 12.6518 12.6214C13.7345 11.1938 15.1901 10.0926 16.8583 9.43899C18.5266 8.78536 20.3428 8.60466 22.1071 8.91675C23.8715 9.22884 25.5155 10.0216 26.8583 11.2079C28.2011 12.3941 29.1905 13.9278 29.7178 15.6402C30.2451 17.3526 30.2898 19.1772 29.8469 20.9134C29.404 22.6495 28.4907 24.2297 27.2075 25.4802C25.9244 26.7308 24.3211 27.603 22.5742 28.001C21.9187 28.1504 21.5084 28.8028 21.6577 29.4583C21.807 30.1138 22.4595 30.5241 23.115 30.3748C25.2987 29.8772 27.3028 28.7869 28.9067 27.2238C30.5107 25.6606 31.6523 23.6853 32.2059 21.5152C32.7595 19.345 32.7037 17.0642 32.0446 14.9237C31.3855 12.7833 30.1486 10.8661 28.4701 9.38333C26.7916 7.90052 24.7366 6.90953 22.5312 6.51941Z', fill: '#366AE2' }),
+    react_1.default.createElement("path", { d: 'M17.1146 17.6431C17.2313 17.5264 17.3658 17.4384 17.5094 17.379C17.6513 17.3201 17.8067 17.2874 17.9697 17.2866L17.9753 17.2866L17.9809 17.2866C18.2906 17.288 18.5998 17.4069 18.8361 17.6431L23.7052 22.5123C24.1806 22.9876 24.1806 23.7584 23.7052 24.2338C23.2298 24.7091 22.4591 24.7091 21.9837 24.2338L19.1926 21.4427V29.4594C19.1926 30.1317 18.6476 30.6767 17.9753 30.6767C17.303 30.6767 16.758 30.1317 16.758 29.4594V21.4427L13.9669 24.2338C13.4916 24.7091 12.7208 24.7091 12.2455 24.2338C11.7701 23.7584 11.7701 22.9876 12.2455 22.5123L17.1146 17.6431Z', fill: '#366AE2' })));
+var fileSvg = (react_1.default.createElement("svg", { className: 'preview-icon', width: '100%', height: '100%', style: { width: '3rem', height: '3rem' }, viewBox: '0 0 36 36', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    react_1.default.createElement("path", { d: 'M20.9163 3.41669H7.54829C7.22597 3.41669 6.91686 3.54472 6.68895 3.77263C6.46105 4.00054 6.33301 4.30965 6.33301 4.63196V31.3681C6.33301 31.6904 6.46105 31.9995 6.68895 32.2274C6.91686 32.4553 7.22597 32.5834 7.54829 32.5834H29.4233C29.7456 32.5834 30.0547 32.4553 30.2826 32.2274C30.5105 31.9995 30.6386 31.6904 30.6386 31.3681V13.1389H22.1316C21.8093 13.1389 21.5002 13.0109 21.2723 12.783C21.0444 12.5551 20.9163 12.2459 20.9163 11.9236V3.41669Z', fill: '#366AE2' }),
+    react_1.default.createElement("path", { d: 'M29.9264 10.7084H23.3469V4.12884L29.9264 10.7084Z', fill: '#366AE2' })));
+var closeSvg = (react_1.default.createElement("svg", { width: '100%', height: '100%', style: { width: '2.4rem', height: '2.4rem' }, fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    react_1.default.createElement("path", { d: 'M13.4144 12.0002L20.4144 5.00015L19.0002 3.58594L12.0002 10.5859L5.00015 3.58594L3.58594 5.00015L10.5859 12.0002L3.58594 19.0002L5.00015 20.4144L12.0002 13.4144L19.0002 20.4144L20.4144 19.0002L13.4144 12.0002Z', fill: '#E60012FF' })));
+var uploadSvg = (react_1.default.createElement("svg", { width: '100%', height: '100%', style: { width: '1.4rem', height: '1.4rem' }, fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    react_1.default.createElement("path", { d: 'M3.66732 3.88889L7.00065 0L10.334 3.88889H7.55621V8.88889H6.4451V3.88889H3.66732Z', fill: '#262626' }),
+    react_1.default.createElement("path", { d: 'M12.5562 11.1111H1.4451V7.77778H0.333984V11.6667C0.333984 11.9733 0.582873 12.2222 0.88954 12.2222H13.1118C13.4184 12.2222 13.6673 11.9733 13.6673 11.6667V7.77778H12.5562V11.1111Z', fill: '#262626' })));
+var ImportFile = /** @class */ (function (_super) {
+    __extends(ImportFile, _super);
+    function ImportFile(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            preview: _this.props.value
+        };
+        _this.fileRef = react_1.default.createRef();
+        return _this;
+    }
+    ImportFile.prototype.showFilePicker = function () {
+        var _a;
+        (_a = this.fileRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    ImportFile.prototype.componentDidUpdate = function (prevProps, prevState) {
+        if (prevProps.value !== this.props.value || prevProps.status !== this.props.status) {
+            this.setState(__assign(__assign({}, this.state), { status: this.props.status, preview: this.props.value }));
+        }
+    };
+    ImportFile.prototype.render = function () {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var sizeTitle;
+        if (this.props.maxSize) {
+            sizeTitle = this.props.maxSize > Math.pow(1024, 3) ? "".concat(Math.round(this.props.maxSize / Math.pow(1024, 3)), "TB") : this.props.maxSize > Math.pow(1024, 2) ? "".concat(Math.round(this.props.maxSize / Math.pow(1024, 2)), "GB") : this.props.maxSize > 1024 ? "".concat(Math.round(this.props.maxSize / 1024), "MB") : "".concat(this.props.maxSize, "KB");
+        }
+        return react_1.default.createElement("div", { className: "import-file-container ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'row', " ").concat(this.props.buttonOnly ? 'button-only' : ''), style: this.state.preview ? this.props.style : __assign({ cursor: 'pointer' }, this.props.style), onClick: function () {
+                if (!_this.state.preview && !_this.props.buttonOnly)
+                    _this.showFilePicker();
+            } },
+            react_1.default.createElement("input", { type: 'file', accept: ((_b = this.props.allowType) !== null && _b !== void 0 ? _b : []).join(','), ref: this.fileRef, onChange: function (ev) {
+                    var file;
+                    if (ev.target.files && ev.target.files[0]) {
+                        file = ev.target.files[0];
+                        if (_this.props.maxSize) {
+                            if (file.size > (_this.props.maxSize * 1024)) {
+                                index_1.ToastMessage.errors("T\u1EC7p ".concat(file.name, " v\u01B0\u1EE3t qua k\u00EDch th\u01B0\u1EDBc cho ph\u00E9p"));
+                                file = undefined;
+                            }
+                        }
+                    }
+                    if (file) {
+                        _this.setState(__assign(__assign({}, _this.state), { preview: file }));
+                        if (_this.props.onChange)
+                            _this.props.onChange(file);
+                    }
+                } }),
+            this.props.buttonOnly
+                ? null
+                : [
+                    react_1.default.createElement("div", { key: 'import-file-prefix', className: 'import-file-prefix row' }, this.state.preview ? ((_c = this.state.preview.type) === null || _c === void 0 ? void 0 : _c.includes('image')) ? react_1.default.createElement("img", { src: this.state.preview instanceof File ? URL.createObjectURL(this.state.preview) : this.state.preview.url }) : fileSvg : cloudSvg),
+                    react_1.default.createElement("div", { key: 'file-preview-content', className: 'file-preview-content col' },
+                        react_1.default.createElement(index_1.Text, { className: 'title-file heading-8', style: { maxWidth: '100%' } }, (_e = (_d = this.state.preview) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : ((_f = this.props.label) !== null && _f !== void 0 ? _f : 'Nhấp hoặc kéo tệp vào đây để tải lên')),
+                        react_1.default.createElement(index_1.Text, { className: 'subtitle-file subtitle-3', style: { maxWidth: '100%' } }, ((_g = this.state.preview) === null || _g === void 0 ? void 0 : _g.size)
+                            ? "".concat((_h = this.state.preview) === null || _h === void 0 ? void 0 : _h.size, "KB")
+                            : ((_j = this.props.subTitle) !== null && _j !== void 0 ? _j : (sizeTitle ? "K\u00EDch th\u01B0\u1EDBc t\u1EC7p nh\u1ECF h\u01A1n ".concat(sizeTitle, ".") : ''))))
+                ],
+            this.state.preview && this.props.buttonOnly ? (react_1.default.createElement("div", { className: 'row', style: {} },
+                react_1.default.createElement(index_1.Text, { className: 'preview-file-link' }, (_l = (_k = this.state.preview) === null || _k === void 0 ? void 0 : _k.name) !== null && _l !== void 0 ? _l : ''),
+                react_1.default.createElement("button", { type: 'button', className: 'remove-preview-file', onClick: function () {
+                        _this.setState(__assign(__assign({}, _this.state), { preview: null }));
+                    } }, closeSvg))) : (react_1.default.createElement("button", { type: 'button', className: 'import-file-suffix row', onClick: function () {
+                    if (_this.props.buttonOnly || _this.state.preview)
+                        _this.showFilePicker();
+                } },
+                this.props.buttonOnly ? uploadSvg : null,
+                react_1.default.createElement("span", null, this.state.preview ? 'Thay tệp' : 'Chọn tệp'))));
+    };
+    return ImportFile;
+}(react_1.default.Component));
+exports.ImportFile = ImportFile;

package/dist/component/infinite-scroll/infinite-scroll.d.ts

@@ -0,0 +1,16 @@
+import React, { CSSProperties, ReactNode } from 'react';
+interface InfiniteScrollProps {
+    className?: string;
+    style?: CSSProperties;
+    handleScroll?: (onLoadMore: boolean, ev: React.UIEvent<HTMLDivElement, UIEvent>) => Promise<any> | null;
+    children?: ReactNode;
+    totalCount?: number;
+}
+interface InfiniteScrollState {
+    loading: boolean;
+}
+export declare class InfiniteScroll extends React.Component<InfiniteScrollProps, InfiniteScrollState> {
+    state: Readonly<InfiniteScrollState>;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/component/infinite-scroll/infinite-scroll.js

@@ -0,0 +1,102 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfiniteScroll = void 0;
+var react_1 = __importDefault(require("react"));
+var InfiniteScroll = /** @class */ (function (_super) {
+    __extends(InfiniteScroll, _super);
+    function InfiniteScroll() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            loading: false
+        };
+        return _this;
+    }
+    InfiniteScroll.prototype.render = function () {
+        var _this = this;
+        var _a, _b;
+        return react_1.default.createElement("div", { onScroll: function (ev) { return __awaiter(_this, void 0, void 0, function () {
+                var scrollElement;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.props.handleScroll) return [3 /*break*/, 2];
+                            this.setState(__assign(__assign({}, this.state), { loading: true }));
+                            scrollElement = ev.target;
+                            return [4 /*yield*/, this.props.handleScroll(Math.round(scrollElement.offsetHeight + scrollElement.scrollTop) >= (scrollElement.scrollHeight - 1), ev)];
+                        case 1:
+                            _a.sent();
+                            this.setState({ loading: false });
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); }, className: "infinite-scroll ".concat(this.state.loading ? 'loading' : '', " ").concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'col'), style: (_b = this.props.style) !== null && _b !== void 0 ? _b : { 'overflow': 'hidden auto' } }, this.props.children);
+    };
+    return InfiniteScroll;
+}(react_1.default.Component));
+exports.InfiniteScroll = InfiniteScroll;

package/dist/component/input-multi-select/input-multi-select.d.ts

@@ -0,0 +1,39 @@
+import React, { CSSProperties } from 'react';
+import './input-multi-select.css';
+interface SelectMultipleProps {
+    value?: Array<string | number>;
+    options: Required<Array<{
+        id: string | number;
+        name: string;
+    }>>;
+    onChange?: (value?: Array<string | number>) => void;
+    placeholder?: string;
+    disabled: boolean;
+    className?: string;
+    helperText?: string;
+    helperTextColor?: string;
+    style?: CSSProperties;
+    handleSearch?: (e: string) => Promise<Array<{
+        id: string | number;
+        name: string;
+    }>>;
+}
+interface SelectMultipleState {
+    value: Array<string | number>;
+    offset: DOMRect;
+    isOpen: boolean;
+    onSelect: any;
+    search?: Array<{
+        id: string | number;
+        name: string;
+    }>;
+    style?: Object;
+}
+export declare class SelectMultiple extends React.Component<SelectMultipleProps, SelectMultipleState> {
+    constructor(props: SelectMultipleProps);
+    private onCheck;
+    private search;
+    componentDidUpdate(prevProps: SelectMultipleProps, prevState: SelectMultipleState): void;
+    render(): React.JSX.Element;
+}
+export {};

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

@@ -0,0 +1,249 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 = __importDefault(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+require("./input-multi-select.css");
+var index_1 = require("../../index");
+;
+var SelectMultiple = /** @class */ (function (_super) {
+    __extends(SelectMultiple, _super);
+    function SelectMultiple(props) {
+        var _this = this;
+        var _a;
+        _this = _super.call(this, props) || this;
+        _this.state = {
+            value: (_a = props.value) !== null && _a !== void 0 ? _a : [],
+            offset: {
+                x: 0,
+                y: 0,
+                height: 0,
+                width: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+                toJSON: function () {
+                    throw new Error('Function not implemented.');
+                }
+            },
+            isOpen: false,
+            onSelect: null,
+        };
+        _this.onCheck = _this.onCheck.bind(_this);
+        _this.search = _this.search.bind(_this);
+        return _this;
+    }
+    SelectMultiple.prototype.onCheck = function (item) {
+        var newValue = [];
+        if (this.state.value.includes(item.id)) {
+            newValue = this.state.value.filter(function (vl) { return vl !== item.id; });
+        }
+        else {
+            newValue = __spreadArray(__spreadArray([], this.state.value, true), [item.id], false);
+        }
+        this.setState(__assign(__assign({}, this.state), { value: newValue }));
+        if (this.props.onChange)
+            this.props.onChange(newValue);
+    };
+    SelectMultiple.prototype.search = function (ev) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var res;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!ev.target.value.trim().length) return [3 /*break*/, 4];
+                        if (!((_a = this.props) === null || _a === void 0 ? void 0 : _a.handleSearch)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.props.handleSearch(ev.target.value.trim())];
+                    case 1:
+                        res = _b.sent();
+                        this.setState(__assign(__assign({}, this.state), { search: res }));
+                        return [3 /*break*/, 3];
+                    case 2:
+                        this.setState(__assign(__assign({}, this.state), { search: this.props.options.filter(function (e) { return e.name.toLowerCase().includes(ev.target.value.trim().toLowerCase()); }) }));
+                        _b.label = 3;
+                    case 3: return [3 /*break*/, 5];
+                    case 4:
+                        this.setState(__assign(__assign({}, this.state), { search: undefined }));
+                        _b.label = 5;
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    SelectMultiple.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a, _b;
+        if (prevProps.value !== this.props.value) {
+            this.setState(__assign(__assign({}, this.state), { value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [] }));
+        }
+        if (prevState.isOpen !== this.state.isOpen && this.state.isOpen) {
+            var thisPopupRect = (_b = document.body.querySelector('.select-multi-popup')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            if (thisPopupRect) {
+                var style = void 0;
+                if (thisPopupRect.right > document.body.offsetWidth) {
+                    style = {
+                        top: this.state.offset.y + this.state.offset.height + 2 + 'px',
+                        width: "".concat(this.state.offset.width, "px"),
+                        right: document.body.offsetWidth - this.state.offset.right + 'px'
+                    };
+                }
+                if (thisPopupRect.bottom - 12 > document.body.offsetHeight) {
+                    style = style ? __assign(__assign({}, style), { top: undefined, bottom: document.body.offsetHeight - this.state.offset.bottom + 'px' }) : {
+                        left: this.state.offset.x + 'px',
+                        width: "".concat(this.state.offset.width, "px"),
+                        bottom: document.body.offsetHeight - this.state.offset.bottom + 'px'
+                    };
+                }
+                if (style)
+                    this.setState(__assign(__assign({}, this.state), { style: style }));
+            }
+        }
+    };
+    SelectMultiple.prototype.render = function () {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return react_1.default.createElement("div", { className: "select-multi-container row ".concat(this.props.disabled ? 'disabled' : '', " ").concat(((_a = this.props.helperText) === null || _a === void 0 ? void 0 : _a.length) && 'helper-text'), "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_b = this.props.helperTextColor) !== null && _b !== void 0 ? _b : '#e14337' }), this.props.style) : { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }, onClick: function (ev) {
+                var _a;
+                if (!_this.state.isOpen) {
+                    _this.setState(__assign(__assign({}, _this.state), { isOpen: true, style: undefined, offset: ((_a = ev.target.closest('.select-multi-container')) !== null && _a !== void 0 ? _a : ev.target).getBoundingClientRect() }));
+                }
+            } },
+            react_1.default.createElement("div", { className: 'row', style: { overflow: 'auto hidden', flex: 1, width: '100%', gap: '0.8rem' } }, ((_d = this.state.value) === null || _d === void 0 ? void 0 : _d.length) ? (this.state.value.map(function (item) {
+                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) {
+                        var _a;
+                        ev.stopPropagation();
+                        var newValue = _this.state.value.filter(function (vl) { return vl !== item; });
+                        _this.setState(__assign(__assign({}, _this.state), { value: newValue, isOpen: true, style: undefined, offset: ((_a = ev.target.closest('.select-multi-container')) !== null && _a !== void 0 ? _a : ev.target).getBoundingClientRect() }));
+                        if (_this.props.onChange)
+                            _this.props.onChange(newValue);
+                    } },
+                    react_1.default.createElement("div", { className: 'selected-value-title' }, 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("div", { className: 'select-multi-placeholder' }, this.props.placeholder))),
+            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.2rem', color: '#888' } }),
+            this.state.isOpen &&
+                react_dom_1.default.createPortal(react_1.default.createElement("div", { className: 'select-multi-popup col', style: (_e = this.state.style) !== null && _e !== void 0 ? _e : {
+                        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) {
+                        _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: 'row header-search' },
+                        react_1.default.createElement("input", { autoFocus: true, placeholder: 'Tìm kiếm', onChange: this.search, onBlur: function (ev) {
+                                if (_this.state.onSelect) {
+                                    ev.target.focus();
+                                }
+                                else {
+                                    _this.setState(__assign(__assign({}, _this.state), { isOpen: false, onSelect: null }));
+                                }
+                            } }),
+                        react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faSearch, style: { fontSize: '1.2rem', color: '#161D24D9' } })),
+                    react_1.default.createElement("div", { style: { padding: '1.2rem 1.6rem', width: '100%', borderTop: '1px solid #161D2414', borderBottom: '1px solid #161D2414' } }, (function () {
+                        var _a, _b;
+                        var _list = ((_b = (_a = _this.state.search) !== null && _a !== void 0 ? _a : _this.props.options) !== null && _b !== void 0 ? _b : []);
+                        var isSelectedAll = _list.every(function (item) { return _this.state.value.some(function (vl) { return vl === item.id; }); });
+                        return react_1.default.createElement(index_1.Text, { onClick: function () {
+                                var newValue = [];
+                                if (_list.length) {
+                                    if (isSelectedAll) {
+                                        newValue = _this.state.value.filter(function (vl) { return _list.every(function (item) { return vl !== item.id; }); });
+                                    }
+                                    else {
+                                        newValue = __spreadArray(__spreadArray([], _this.state.value, true), _list.filter(function (item) { return _this.state.value.every(function (vl) { return vl !== item.id; }); }).map(function (e) { return e.id; }), true);
+                                    }
+                                }
+                                _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(--primary-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 = (_f = this.state.search) !== null && _f !== void 0 ? _f : this.props.options) !== null && _g !== void 0 ? _g : []).map(function (item) { return (react_1.default.createElement("div", { key: item.id, className: 'select-tile row' },
+                            react_1.default.createElement(index_1.Checkbox, { value: _this.state.value.some(function (vl) { return vl === item.id; }), onChange: function () { _this.onCheck(item); }, size: '2rem' }),
+                            react_1.default.createElement("div", { className: 'label-3' }, item.name))); }),
+                        (((_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));
+    };
+    return SelectMultiple;
+}(react_1.default.Component));
+exports.SelectMultiple = SelectMultiple;

package/dist/component/pagination/pagination.d.ts

@@ -0,0 +1,11 @@
+import React, { CSSProperties } from "react";
+import './pagination.css';
+export declare function Pagination({ currentPage, itemPerPage, totalItem, onChangePage, hiddenPageSize, hiddenTotal, style }: {
+    currentPage: number;
+    itemPerPage: number;
+    totalItem: number;
+    onChangePage: Function;
+    hiddenPageSize: boolean;
+    hiddenTotal: boolean;
+    style: CSSProperties;
+}): React.JSX.Element;

package/dist/component/pagination/pagination.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+var react_1 = __importDefault(require("react"));
+var react_paginate_1 = __importDefault(require("react-paginate"));
+require("./pagination.css");
+var index_1 = require("../../index");
+function Pagination(_a) {
+    var currentPage = _a.currentPage, itemPerPage = _a.itemPerPage, totalItem = _a.totalItem, onChangePage = _a.onChangePage, _b = _a.hiddenPageSize, hiddenPageSize = _b === void 0 ? false : _b, _c = _a.hiddenTotal, hiddenTotal = _c === void 0 ? false : _c, style = _a.style;
+    if (currentPage > 1 && (totalItem === 0 || (Math.floor(totalItem / itemPerPage) + (totalItem % itemPerPage === 0 ? 0 : 1)) < currentPage)) {
+        onChangePage(1, itemPerPage);
+        return react_1.default.createElement("div", null);
+    }
+    if (totalItem > 0) {
+        return (react_1.default.createElement("div", { className: "row custom-pagination", style: style },
+            hiddenTotal ? null : react_1.default.createElement(index_1.Text, { className: "regular2" },
+                "Hi\u1EC3n th\u1ECB ",
+                itemPerPage * (currentPage - 1) + 1,
+                "-",
+                ((itemPerPage * (currentPage - 1) + itemPerPage) > totalItem) ? totalItem : (itemPerPage * (currentPage - 1) + itemPerPage),
+                " trong t\u1ED5ng s\u1ED1 ",
+                totalItem,
+                " b\u1EA3n ghi"),
+            react_1.default.createElement("div", { className: "row " },
+                hiddenPageSize ? null : react_1.default.createElement("div", { className: "row items-per-page-container" },
+                    react_1.default.createElement(index_1.Text, { className: "regular2" }, "Items/page"),
+                    react_1.default.createElement("div", { className: "row" },
+                        react_1.default.createElement(index_1.Select1, { searchPlaceholder: 'Search', style: { width: '8.6rem' }, placeholder: itemPerPage.toString(), options: [10, 20, 50, 100, 200].map(function (item, _) { return { id: item, name: item }; }), onChange: function (ev) {
+                                onChangePage(currentPage, isNaN(parseInt(ev.id)) ? itemPerPage : parseInt(ev.id));
+                            } }))),
+                react_1.default.createElement(react_paginate_1.default, { breakLabel: "...", nextLabel: "Next", onPageChange: function (ev) {
+                        onChangePage(ev.selected + 1, itemPerPage);
+                    }, forcePage: currentPage - 1, 
+                    // initialPage={currentPage - 1}
+                    pageCount: Math.ceil(totalItem / itemPerPage), previousLabel: "Previous", containerClassName: "pagination row", pageClassName: "", pageLinkClassName: "nav-link", previousClassName: "nav-link", previousLinkClassName: "nav-link", nextClassName: "nav-link regular2", nextLinkClassName: "nav-link", activeClassName: "active", hrefBuilder: function (pageIndex) {
+                        return pageIndex >= 1 && pageIndex <= Math.ceil(totalItem / itemPerPage) ? "/page/".concat(pageIndex) : '#';
+                    }, renderOnZeroPageCount: null }))));
+    }
+    else {
+        return (react_1.default.createElement("div", null));
+    }
+}
+exports.Pagination = Pagination;

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

@@ -0,0 +1,31 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import './popup.css';
+interface PopupState {
+    readonly open?: boolean;
+    heading?: ReactNode;
+    content?: ReactNode;
+    footer?: ReactNode;
+    clickOverlayClosePopup?: boolean;
+    style?: CSSProperties;
+    hideButtonClose?: boolean;
+}
+export declare const showPopup: ({ ref, heading, content, footer, clickOverlayClosePopup, style, hideButtonClose }: {
+    ref: React.MutableRefObject<Popup | undefined>;
+    heading?: ReactNode;
+    content?: ReactNode;
+    footer?: ReactNode;
+    clickOverlayClosePopup?: boolean | undefined;
+    style?: React.CSSProperties | undefined;
+    hideButtonClose?: boolean | undefined;
+}) => void;
+export declare const closePopup: (ref: React.MutableRefObject<Popup>) => void;
+export declare class Popup extends React.Component<Object, PopupState> {
+    private ref;
+    constructor(props: Object | Readonly<Object>);
+    state: Readonly<PopupState>;
+    onOpen(data: PopupState): void;
+    onClose(): void;
+    componentDidUpdate(prevProps: Readonly<Object>, prevState: Readonly<PopupState>): void;
+    render(): React.JSX.Element;
+}
+export {};