wini-web-components 0.5.0 → 0.5.2

package/dist/component/popup/popup.js

@@ -0,0 +1,105 @@
+"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.Popup = exports.closePopup = exports.showPopup = void 0;
+var react_1 = __importDefault(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+require("./popup.css");
+var showPopup = function (_a) {
+    var _b;
+    var ref = _a.ref, heading = _a.heading, content = _a.content, footer = _a.footer, clickOverlayClosePopup = _a.clickOverlayClosePopup, style = _a.style, hideButtonClose = _a.hideButtonClose;
+    (_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.onOpen({
+        heading: heading,
+        content: content,
+        footer: footer,
+        clickOverlayClosePopup: clickOverlayClosePopup,
+        style: style,
+        hideButtonClose: hideButtonClose
+    });
+};
+exports.showPopup = showPopup;
+var closePopup = function (ref) {
+    ref.current.onClose();
+};
+exports.closePopup = closePopup;
+var Popup = /** @class */ (function (_super) {
+    __extends(Popup, _super);
+    function Popup(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            open: false,
+        };
+        _this.ref = react_1.default.createRef();
+        return _this;
+    }
+    Popup.prototype.onOpen = function (data) {
+        this.setState(__assign({ open: true }, data));
+    };
+    Popup.prototype.onClose = function () {
+        this.setState({ open: false });
+    };
+    Popup.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
+        if (prevState.open !== this.state.open && this.state.open && this.state.style) {
+            var thisPopupRect = (_a = this.ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (thisPopupRect) {
+                var style = void 0;
+                if (thisPopupRect.right > document.body.offsetWidth) {
+                    style = __assign(__assign({}, this.state.style), { right: '0.4rem' });
+                    delete style.left;
+                }
+                if (thisPopupRect.bottom > document.body.offsetHeight) {
+                    style = style ? __assign(__assign({}, style), { bottom: '0.4rem' }) : __assign(__assign({}, this.state.style), { bottom: '0.4rem' });
+                    delete style.top;
+                }
+                if (style)
+                    this.setState(__assign(__assign({}, this.state), { style: style }));
+            }
+        }
+    };
+    Popup.prototype.render = function () {
+        var _this = this;
+        return (react_1.default.createElement(react_1.default.Fragment, null, this.state.open &&
+            react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "popup-overlay ".concat(this.state.clickOverlayClosePopup ? 'hidden-overlay' : ''), onClick: this.state.clickOverlayClosePopup ? function (ev) {
+                    if (ev.target.classList.contains('popup-overlay'))
+                        _this.onClose();
+                } : undefined },
+                react_1.default.createElement("div", { ref: this.ref, className: 'popup-container col', onClick: function (e) { return e.stopPropagation(); }, style: this.state.style },
+                    this.state.heading,
+                    this.state.content,
+                    this.state.footer,
+                    this.state.hideButtonClose ? null : react_1.default.createElement("button", { type: 'button', onClick: function () { return _this.onClose(); }, className: 'popup-close-btn row' },
+                        react_1.default.createElement("svg", { width: '100%', height: '100%', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: { width: '2rem', height: '2rem' } },
+                            react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M16.4223 4.7559C16.7477 4.43047 16.7477 3.90283 16.4223 3.57739C16.0968 3.25195 15.5692 3.25195 15.2438 3.57739L9.99967 8.82147L4.7556 3.57739C4.43016 3.25195 3.90252 3.25195 3.57709 3.57739C3.25165 3.90283 3.25165 4.43047 3.57709 4.7559L8.82116 9.99998L3.57709 15.2441C3.25165 15.5695 3.25165 16.0971 3.57709 16.4226C3.90252 16.748 4.43016 16.748 4.7556 16.4226L9.99967 11.1785L15.2438 16.4226C15.5692 16.748 16.0968 16.748 16.4223 16.4226C16.7477 16.0971 16.7477 15.5695 16.4223 15.2441L11.1782 9.99998L16.4223 4.7559Z', fill: '#00204D', fillOpacity: 0.6 }))))), document.body)));
+    };
+    return Popup;
+}(react_1.default.Component));
+exports.Popup = Popup;

package/dist/component/progress-bar/progress-bar.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from 'react';
+import './progress-bar.css';
+import React from 'react';
+import { ComponentStatus } from '../../index';
+export declare function ProgressBar({ status, percent, titleText, title, hideTitle, progressBarOnly, fullColor, percentColor, style, progressBarStyle }: {
+    percent: number;
+    titleText?: string;
+    title?: ReactNode;
+    hideTitle: boolean;
+    progressBarOnly: boolean;
+    fullColor: string;
+    percentColor: string;
+    style?: CSSProperties;
+    status: ComponentStatus;
+    progressBarStyle?: CSSProperties;
+}): React.JSX.Element;

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

@@ -0,0 +1,39 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBar = 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 _b = _a.status, status = _b === void 0 ? 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 _h = (0, react_1.useState)(true), openDetails = _h[0], setOpenDetails = _h[1];
+    return react_2.default.createElement("div", { 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" },
+            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 })))),
+        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 === 1 /* ComponentStatus.INFOR */ ? null : react_2.default.createElement("div", { className: 'status-icon' }, (0, index_1.getStatusIcon)(status)),
+            progressBarOnly ? null : react_2.default.createElement("div", { className: 'text-value' },
+                percent,
+                "/100")) : null);
+}
+exports.ProgressBar = ProgressBar;

package/dist/component/progress-circle/progress-circle.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import './progress-circle.css';
+import React from 'react';
+export declare function ProgressCircle({ percent, style, fillColor, percentColor, strokeWidth, strokeColor, textStyle }: {
+    /** value:  0 - 100 (%)*/
+    percent?: number;
+    style?: CSSProperties;
+    fillColor?: string;
+    percentColor?: string;
+    strokeWidth?: number;
+    strokeColor?: string;
+    textStyle?: CSSProperties;
+}): React.JSX.Element;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressCircle = void 0;
+require("./progress-circle.css");
+var react_1 = __importDefault(require("react"));
+function ProgressCircle(_a) {
+    var percent = _a.percent, style = _a.style, fillColor = _a.fillColor, percentColor = _a.percentColor, strokeWidth = _a.strokeWidth, strokeColor = _a.strokeColor, textStyle = _a.textStyle;
+    var radius = 30 - (strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : 4);
+    var diameter = Math.PI * 2 * radius;
+    var strokeOffset = (1 - ((percent !== null && percent !== void 0 ? percent : 0) / 100)) * diameter;
+    return react_1.default.createElement("svg", { 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("text", { x: "50%", y: "50%", fill: "#00204D", dy: ".3em", textAnchor: "middle", fontSize: 16, fontWeight: '600', style: textStyle }, percent !== null && percent !== void 0 ? percent : 0,
+            "%"));
+}
+exports.ProgressCircle = ProgressCircle;

package/dist/component/radio-button/radio-button.d.ts

@@ -0,0 +1,20 @@
+import React, { CSSProperties } from 'react';
+import './radio-button.css';
+import { UseFormRegister } from 'react-hook-form';
+interface RadioButtonProps {
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    value?: string | number | readonly string[];
+    disabled: false;
+    style: CSSProperties;
+    size?: number | string;
+    defaultChecked?: boolean;
+    name?: string;
+    activeColor?: string;
+    offColor?: string;
+    className?: string;
+    register?: UseFormRegister<{}>;
+}
+export declare class RadioButton extends React.Component<RadioButtonProps> {
+    render(): React.ReactNode;
+}
+export {};

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

@@ -0,0 +1,64 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButton = void 0;
+var react_1 = __importDefault(require("react"));
+require("./radio-button.css");
+var RadioButton = /** @class */ (function (_super) {
+    __extends(RadioButton, _super);
+    function RadioButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RadioButton.prototype.render = function () {
+        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)',
+            '--size': this.props.size ? (typeof this.props.size === 'number') ? "".concat(this.props.size, "px") : this.props.size : '20px'
+        };
+        if (this.props.style) {
+            delete this.props.style.width;
+            delete this.props.style.minWidth;
+            delete this.props.style.maxWidth;
+            delete this.props.style.height;
+            delete this.props.style.minHeight;
+            delete this.props.style.maxHeight;
+            convertStyle = __assign(__assign({}, this.props.style), convertStyle);
+        }
+        return react_1.default.createElement("label", { className: "radio-btn-container row ".concat((_c = this.props.className) !== null && _c !== void 0 ? _c : ''), style: convertStyle },
+            this.props.register ?
+                react_1.default.createElement("input", __assign({}, this.props.register, { type: "radio", value: this.props.value, disabled: this.props.disabled })) :
+                react_1.default.createElement("input", { type: "radio", name: this.props.name, value: this.props.value, defaultChecked: this.props.defaultChecked, disabled: this.props.disabled, onChange: this.props.onChange }),
+            react_1.default.createElement("span", { className: "checkmark" }));
+    };
+    return RadioButton;
+}(react_1.default.Component));
+exports.RadioButton = RadioButton;

package/dist/component/rating/rating.d.ts

@@ -0,0 +1,23 @@
+import React, { CSSProperties } from "react";
+import './rating.css';
+interface RatingProps {
+    /**
+    value: 0-5
+    */
+    value?: number;
+    size?: number | string;
+    onChange?: (e: number) => {};
+    className?: string;
+    style?: CSSProperties;
+    strokeColor?: string;
+    fillColor?: string;
+}
+interface RatingState {
+    value: number;
+}
+export declare class Rating extends React.Component<RatingProps, RatingState> {
+    state: Readonly<RatingState>;
+    componentDidUpdate(prevProps: Readonly<RatingProps>): void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/component/rating/rating.js

@@ -0,0 +1,76 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rating = void 0;
+var react_1 = __importDefault(require("react"));
+require("./rating.css");
+var autoKeyId = function () { return ("".concat(1e7 + -1e3 + -4e3 + -8e3 + -1e11)).replace(/[018]/g, function (c) {
+    return (parseFloat(c) ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (parseFloat(c) / 4)))).toString(16);
+}); };
+var Rating = /** @class */ (function (_super) {
+    __extends(Rating, _super);
+    function Rating() {
+        var _this = this;
+        var _a;
+        _this = _super.apply(this, arguments) || this;
+        _this.state = {
+            value: (_a = _this.props.value) !== null && _a !== void 0 ? _a : 0
+        };
+        return _this;
+    }
+    Rating.prototype.componentDidUpdate = function (prevProps) {
+        var _a;
+        if (prevProps.value !== this.props.value) {
+            this.setState({ value: (_a = this.props.value) !== null && _a !== void 0 ? _a : 0 });
+        }
+    };
+    Rating.prototype.render = function () {
+        var _this = this;
+        var _a;
+        return react_1.default.createElement("div", { className: "row rating-container ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : ''), style: this.props.style }, Array.from({ length: 5 }).map(function (_, i) {
+            var _a, _b, _c, _d, _e;
+            var uniqueId = 'rating-star-grad-0';
+            var stopValue = 0;
+            if (_this.state.value >= 5) {
+                uniqueId = 'rating-star-grad-5';
+                stopValue = 100;
+            }
+            else if (_this.state.value >= i) {
+                uniqueId = autoKeyId();
+                stopValue = (_this.state.value - i) * 100;
+            }
+            return react_1.default.createElement("svg", { onClick: function () {
+                    if (_this.props.onChange) {
+                        _this.setState({ value: i + 1 });
+                        _this.props.onChange(i + 1);
+                    }
+                }, key: 'rate-' + i, width: "100%", height: "100%", style: { width: (_a = _this.props.size) !== null && _a !== void 0 ? _a : '2rem', height: (_b = _this.props.size) !== null && _b !== void 0 ? _b : '2rem' }, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                react_1.default.createElement("defs", null,
+                    react_1.default.createElement("linearGradient", { id: uniqueId, x1: "0%", x2: "100%", y1: "0%", y2: "0%" },
+                        react_1.default.createElement("stop", { offset: "0%", stopColor: (_c = _this.props.fillColor) !== null && _c !== void 0 ? _c : '#FC6B03' }),
+                        react_1.default.createElement("stop", { offset: "".concat(stopValue, "%"), stopColor: (_d = _this.props.fillColor) !== null && _d !== void 0 ? _d : '#FC6B03' }),
+                        react_1.default.createElement("stop", { offset: "".concat(stopValue, "%"), stopColor: "#00000000" }))),
+                react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 1.66667C10.2884 1.66667 10.5518 1.82993 10.6794 2.0878L12.844 6.46194L17.6847 7.16325C17.97 7.20459 18.2071 7.4039 18.2962 7.67736C18.3853 7.95082 18.311 8.25101 18.1045 8.45172L14.6018 11.8563L15.4285 16.6636C15.4772 16.947 15.3604 17.2334 15.127 17.4024C14.8937 17.5714 14.5844 17.5937 14.3292 17.4599L10 15.1897L5.67081 17.4599C5.41557 17.5937 5.10627 17.5714 4.87295 17.4024C4.63964 17.2334 4.52278 16.947 4.57151 16.6636L5.39815 11.8563L1.89545 8.45172C1.68896 8.25101 1.61465 7.95082 1.70377 7.67736C1.79288 7.4039 2.02996 7.20459 2.31533 7.16325L7.15599 6.46194L9.32063 2.0878C9.44825 1.82993 9.71162 1.66667 10 1.66667ZM10 4.12915L8.33846 7.48665C8.22811 7.70963 8.01479 7.86418 7.76802 7.89993L4.05223 8.43827L6.74094 11.0517C6.91947 11.2252 7.00094 11.4752 6.95881 11.7203L6.3243 15.4102L9.64738 13.6676C9.86813 13.5519 10.1319 13.5519 10.3526 13.6676L13.6757 15.4102L13.0412 11.7203C12.9991 11.4752 13.0805 11.2252 13.2591 11.0517L15.9478 8.43827L12.232 7.89993C11.9852 7.86418 11.7719 7.70963 11.6615 7.48665L10 4.12915Z", fill: (_e = _this.props.strokeColor) !== null && _e !== void 0 ? _e : '#667994' }),
+                react_1.default.createElement("path", { d: "M17.738 7.18949L12.8212 6.47499L10.6249 2.02268C10.5611 1.91426 10.47 1.82438 10.3608 1.76194C10.2515 1.6995 10.1279 1.66666 10.0021 1.66666C9.87623 1.66666 9.75259 1.6995 9.64335 1.76194C9.53411 1.82438 9.44306 1.91426 9.37921 2.02268L7.17875 6.47499L2.26191 7.18949C2.13368 7.208 2.0132 7.26201 1.91406 7.34542C1.81493 7.42882 1.74111 7.5383 1.70095 7.66147C1.66078 7.78463 1.65588 7.91658 1.68678 8.04239C1.71769 8.1682 1.78317 8.28286 1.87583 8.3734L5.43449 11.8411L4.59499 16.7385C4.57311 16.8662 4.58739 16.9975 4.63622 17.1175C4.68505 17.2375 4.76648 17.3414 4.8713 17.4175C4.97612 17.4937 5.10016 17.539 5.22938 17.5483C5.3586 17.5577 5.48785 17.5306 5.60252 17.4704L9.99998 15.1588L14.3974 17.4704C14.5121 17.5306 14.6414 17.5577 14.7706 17.5483C14.8998 17.539 15.0238 17.4937 15.1286 17.4175C15.2335 17.3414 15.3149 17.2375 15.3637 17.1175C15.4126 16.9975 15.4268 16.8662 15.405 16.7385L14.5655 11.8411L18.1241 8.3734C18.2168 8.28295 18.2823 8.16841 18.3132 8.0427C18.3442 7.91699 18.3394 7.78512 18.2994 7.66199C18.2594 7.53886 18.1858 7.42937 18.0868 7.34587C17.9879 7.26238 17.8675 7.20822 17.7394 7.18949H17.738Z", fill: "url(#".concat(uniqueId, ")") }));
+        }));
+    };
+    return Rating;
+}(react_1.default.Component));
+exports.Rating = Rating;

package/dist/component/select1/select1.d.ts

@@ -0,0 +1,38 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import './select1.css';
+interface OptionsItem {
+    id: string | number;
+    name: string | ReactNode;
+    title?: string | ReactNode;
+}
+interface Select1Props {
+    value?: any;
+    options: Required<Array<OptionsItem>>;
+    onChange?: (value?: OptionsItem) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    helperText?: string;
+    helperTextColor?: string;
+    style?: CSSProperties;
+    searchPlaceholder?: string;
+    hideSearch?: boolean;
+    handleSearch?: (e: string) => Promise<Array<OptionsItem>>;
+}
+interface Select1State {
+    value?: string | number;
+    offset: DOMRect;
+    isOpen: boolean;
+    onSelect: any;
+    search?: Array<OptionsItem>;
+    style?: Object;
+}
+export declare class Select1 extends React.Component<Select1Props, Select1State> {
+    constructor(props: Select1Props);
+    private parseValue;
+    componentDidUpdate(prevProps: Select1Props, prevState: Select1State): void;
+    private onChangeValue;
+    private search;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/component/select1/select1.js

@@ -0,0 +1,185 @@
+"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.Select1 = void 0;
+var react_1 = __importDefault(require("react"));
+var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+var react_dom_1 = __importDefault(require("react-dom"));
+require("./select1.css");
+;
+;
+var Select1 = /** @class */ (function (_super) {
+    __extends(Select1, _super);
+    function Select1(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            value: _this.props.value,
+            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.parseValue = _this.parseValue.bind(_this);
+        _this.onChangeValue = _this.onChangeValue.bind(_this);
+        _this.search = _this.search.bind(_this);
+        return _this;
+    }
+    Select1.prototype.parseValue = function (value) {
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+        switch (typeof this.props.options[0].id) {
+            case 'number':
+                return parseFloat(value);
+            default:
+                return value;
+        }
+    };
+    Select1.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
+        if (prevProps.value !== this.props.value) {
+            this.setState(__assign(__assign({}, this.state), { value: this.props.value }));
+        }
+        if (prevState.isOpen !== this.state.isOpen && this.state.isOpen) {
+            var thisPopupRect = (_a = document.body.querySelector('.select1-popup')) === null || _a === void 0 ? void 0 : _a.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 > 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 }));
+            }
+        }
+    };
+    Select1.prototype.onChangeValue = function (ev) {
+        var _this = this;
+        var _a, _b;
+        if ((_b = (_a = this.state.onSelect) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('select1-tile')) {
+            var item = this.props.options.find(function (e) { return e.id === _this.parseValue(_this.state.onSelect.id); });
+            this.setState(__assign(__assign({}, this.state), { isOpen: false, onSelect: null, value: item === null || item === void 0 ? void 0 : item.id }));
+            if (this.props.onChange)
+                this.props.onChange(item);
+        }
+        else if (this.state.onSelect) {
+            ev.target.focus();
+        }
+        else {
+            this.setState(__assign(__assign({}, this.state), { isOpen: false, onSelect: null }));
+        }
+    };
+    Select1.prototype.search = function (ev) {
+        var _this = this;
+        if (ev.target.value.trim().length) {
+            if (this.props.handleSearch) {
+                this.props.handleSearch(ev.target.value.trim()).then(function (res) {
+                    _this.setState(__assign(__assign({}, _this.state), { search: res }));
+                });
+            }
+            else {
+                this.setState(__assign(__assign({}, this.state), { search: this.props.options.filter(function (e) { return typeof e.name === 'string' && e.name.toLowerCase().includes(ev.target.value.trim().toLowerCase()); }) }));
+            }
+        }
+        else {
+            this.setState(__assign(__assign({}, this.state), { search: undefined }));
+        }
+    };
+    Select1.prototype.render = function () {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var selectedValue = ((_a = this.props.options) !== null && _a !== void 0 ? _a : []).find(function (e) { return e.id === _this.state.value; });
+        return react_1.default.createElement("div", { className: "select1-container row ".concat((_b = this.props.className) !== null && _b !== void 0 ? _b : 'placeholder-2', " ").concat(this.props.disabled ? 'disabled' : '', " ").concat(((_c = this.props.helperText) === null || _c === void 0 ? void 0 : _c.length) && 'helper-text'), "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' }), this.props.style) : { '--helper-text-color': (_e = this.props.helperTextColor) !== null && _e !== void 0 ? _e : '#e14337' }, onClick: function (ev) {
+                var _a;
+                if (!_this.state.isOpen) {
+                    var _offset = ((_a = ev.target.closest('.select1-container')) !== null && _a !== void 0 ? _a : ev.target).getBoundingClientRect();
+                    if (_offset.bottom + 32 > document.body.offsetHeight) {
+                        _this.setState(__assign(__assign({}, _this.state), { isOpen: true, offset: _offset, style: {
+                                left: _offset.x + 'px',
+                                bottom: (document.body.offsetHeight - _offset.y) + 'px',
+                                width: "".concat(_offset.width / 10, "rem")
+                            } }));
+                    }
+                    else {
+                        _this.setState(__assign(__assign({}, _this.state), { isOpen: true, offset: _offset, style: undefined }));
+                    }
+                }
+            } },
+            (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.name) ? (react_1.default.createElement("div", { className: 'select1-value-name' }, selectedValue.name)) : (react_1.default.createElement("div", { className: 'select1-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: 'select1-popup col', 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) {
+                        _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', style: this.props.hideSearch ? { marginTop: '-4rem' } : undefined },
+                        react_1.default.createElement("input", { autoFocus: true, placeholder: (_g = this.props.searchPlaceholder) !== null && _g !== void 0 ? _g : 'Tìm kiếm', onChange: this.search, onBlur: function (ev) {
+                                _this.onChangeValue(ev);
+                            } }),
+                        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", { className: 'col select1-body' },
+                        react_1.default.createElement("div", { className: 'col select1-scroll-view' },
+                            ((_h = this.state.search) !== null && _h !== void 0 ? _h : this.props.options).map(function (item) {
+                                var _a;
+                                return (react_1.default.createElement("button", { type: 'button', key: item.id, className: 'select1-tile label-3 row', id: "".concat(item.id), style: { backgroundColor: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === item.id ? 'var(--selected-background)' : '#00000000' } }, (_a = item.title) !== null && _a !== void 0 ? _a : item.name));
+                            }),
+                            (((_j = this.state.search) === null || _j === void 0 ? void 0 : _j.length) === 0 || ((_k = this.props.options) === null || _k === void 0 ? void 0 : _k.length) === 0) && (react_1.default.createElement("div", { className: 'no-results-found' }, "No result found"))))), document.body));
+    };
+    return Select1;
+}(react_1.default.Component));
+exports.Select1 = Select1;