wini-web-components 1.6.1 → 1.6.2

package/dist/component/card/card-info.d.ts

@@ -0,0 +1,15 @@
+import React, { CSSProperties } from 'react';
+import './card-info.css';
+interface CardData {
+    Name: string;
+    Image: string;
+    Subtitle: string;
+    DateCreated: string;
+    Content: string;
+    style?: CSSProperties;
+    className?: string;
+    direction?: "col" | "row";
+    mediaType?: "contain" | "cover" | "hug";
+}
+export declare function CardInfo({ Name, Subtitle, Image, Content, className, style, direction }: CardData): React.JSX.Element;
+export {};

package/dist/component/card/card-info.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardInfo = void 0;
+var react_1 = __importDefault(require("react"));
+require("./card-info.css");
+function CardInfo(_a) {
+    var Name = _a.Name, Subtitle = _a.Subtitle, Image = _a.Image, Content = _a.Content, _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style, direction = _a.direction;
+    return react_1.default.createElement("div", { className: "card-media-position ".concat(className.split(' ').filter(function (e) { return e !== 'row' && e !== 'col'; }).join(' '), " ").concat(direction), style: style },
+        react_1.default.createElement("div", { className: "media-preview-card" }, Image !== null && Image !== void 0 ? Image : react_1.default.createElement("img", { className: "media-preview-child", src: Image !== null && Image !== void 0 ? Image : "https://via.placeholder.com/40x40" })),
+        react_1.default.createElement("div", { className: "des-info" },
+            react_1.default.createElement("div", { className: "content-title" },
+                react_1.default.createElement("div", { className: "content-title-parent" },
+                    react_1.default.createElement("div", { className: "content-title-text" },
+                        " ", Name !== null && Name !== void 0 ? Name : 'Lorem Ipsum is simply dummy text'),
+                    react_1.default.createElement("div", { className: "content-subtitle-text" }, Subtitle !== null && Subtitle !== void 0 ? Subtitle : 'Subtitle')),
+                react_1.default.createElement("div", { className: "body-content" }, Content !== null && Content !== void 0 ? Content : 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.')),
+            react_1.default.createElement("div", { className: "sub-content-list" }, Array.from({ length: 3 }).map(function (e, i) { return react_1.default.createElement("div", { className: "item-sub-content" },
+                react_1.default.createElement("div", { className: "media-sub-content" },
+                    react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                        react_1.default.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.7262 5.38462C11.9431 5.60157 11.9431 5.95333 11.7262 6.17029L7.28172 10.6147C7.06476 10.8317 6.713 10.8317 6.49605 10.6147L4.27382 8.39251C4.05687 8.17555 4.05687 7.8238 4.27382 7.60684C4.49078 7.38988 4.84254 7.38988 5.0595 7.60684L6.88888 9.43622L10.9405 5.38462C11.1574 5.16766 11.5092 5.16766 11.7262 5.38462Z", fill: "#61616B" }),
+                        react_1.default.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8 2.44412C4.93175 2.44412 2.44444 4.93143 2.44444 7.99967C2.44444 11.0679 4.93175 13.5552 8 13.5552C11.0682 13.5552 13.5555 11.0679 13.5555 7.99967C13.5555 4.93143 11.0682 2.44412 8 2.44412ZM1.33333 7.99967C1.33333 4.31778 4.3181 1.33301 8 1.33301C11.6819 1.33301 14.6667 4.31778 14.6667 7.99967C14.6667 11.6816 11.6819 14.6663 8 14.6663C4.3181 14.6663 1.33333 11.6816 1.33333 7.99967Z", fill: "#61616B" }))),
+                react_1.default.createElement("div", { className: "title-sub-content" }, "Graphic design ".concat(i))); })),
+            react_1.default.createElement("button", { type: 'button', className: "btn-seemore", onClick: function () { } },
+                react_1.default.createElement("div", { className: "button2" }, "See more"),
+                react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    react_1.default.createElement("path", { d: "M7.04222 3.27596C6.86471 3.09845 6.86471 2.81064 7.04222 2.63313C7.21974 2.45562 7.50754 2.45562 7.68505 2.63313L10.8665 5.81461L10.8698 5.81793C10.9503 5.89994 11 6.01235 11 6.13636C11 6.198 10.9877 6.25676 10.9655 6.31036C10.9433 6.36397 10.9104 6.4142 10.8669 6.45778L7.68505 9.6396C7.50754 9.81711 7.21974 9.81711 7.04222 9.6396C6.86471 9.46208 6.86471 9.17428 7.04222 8.99677L9.44809 6.59091H1.45455C1.20351 6.59091 1 6.3874 1 6.13636C1 5.88533 1.20351 5.68182 1.45455 5.68182H9.44808L7.04222 3.27596Z", fill: "#287CF0" }))),
+            react_1.default.createElement("div", { className: "number-card" }, Array.from({ length: 3 }).map(function (e, i) {
+                return react_1.default.createElement("div", { className: "card" },
+                    react_1.default.createElement("div", { className: "card-infomation" },
+                        react_1.default.createElement("div", { className: "content1" },
+                            react_1.default.createElement("div", { className: "content-title-parent" },
+                                react_1.default.createElement("div", { className: "content-title4" }, "".concat(e)),
+                                react_1.default.createElement("div", { className: "content-subtitle-text" }, "Time on desgin")))));
+            }))),
+        react_1.default.createElement("div", { className: "combo-action-view" },
+            react_1.default.createElement("div", { className: "combo" },
+                react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    react_1.default.createElement("path", { d: "M17.5261 1.67395C17.9407 1.73017 18.2312 2.11184 18.175 2.52645L17.5689 6.99614C17.5128 7.4101 17.1322 7.70049 16.7181 7.64528L12.1726 7.03922C11.7579 6.98393 11.4665 6.6029 11.5218 6.18817C11.5771 5.77344 11.9582 5.48207 12.3729 5.53736L15.2903 5.92636C14.0585 4.38085 12.1438 3.40919 10 3.40919C6.25174 3.40919 3.18182 6.47911 3.18182 10.2274C3.18182 10.6458 2.84265 10.985 2.42425 10.985C2.00585 10.985 1.66667 10.6458 1.66667 10.2274C1.66667 5.64231 5.41494 1.89404 10 1.89404C12.5318 1.89404 14.8177 3.00972 16.3361 4.81209L16.6736 2.32287C16.7298 1.90826 17.1115 1.61773 17.5261 1.67395Z", fill: "#61616B" }),
+                    react_1.default.createElement("path", { d: "M18.3333 10.2281C18.3333 9.80972 17.9941 9.47054 17.5757 9.47054C17.1573 9.47054 16.8182 9.80972 16.8182 10.2281C16.8182 13.9764 13.7482 17.0463 9.99997 17.0463C7.85595 17.0463 5.94105 16.0745 4.70926 14.5287L7.6271 14.9177C8.04182 14.973 8.42285 14.6816 8.47815 14.2669C8.53345 13.8522 8.24207 13.4712 7.82734 13.4159L3.28189 12.8098C2.86781 12.7546 2.48719 13.045 2.43106 13.4589L1.825 17.9286C1.76878 18.3432 2.05931 18.7249 2.47391 18.7811C2.88852 18.8373 3.27019 18.5468 3.32641 18.1322L3.66388 15.6433C5.18221 17.4458 7.46818 18.5615 9.99997 18.5615C14.585 18.5615 18.3333 14.8132 18.3333 10.2281Z", fill: "#61616B" }))),
+            react_1.default.createElement("div", { className: "combo-button" },
+                react_1.default.createElement("div", { className: "button3" },
+                    react_1.default.createElement("div", { className: "button4" },
+                        react_1.default.createElement("div", { className: "button5" }, "Button"))),
+                react_1.default.createElement("div", { className: "button6" },
+                    react_1.default.createElement("div", { className: "button4" },
+                        react_1.default.createElement("div", { className: "button5" }, "Button"))))));
+}
+exports.CardInfo = CardInfo;

package/dist/component/card/card.d.ts

@@ -9,5 +9,5 @@ interface cardInfoProps {
     style?: CSSProperties;
     className?: string;
 }
-export declare function CardInfo({ avatar, heading, subHeading, content, action, style, className }: cardInfoProps): React.JSX.Element;
+export declare function CardSimple({ avatar, heading, subHeading, content, action, style, className }: cardInfoProps): React.JSX.Element;
 export {};

package/dist/component/card/card.js

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardInfo = void 0;
+exports.CardSimple = void 0;
 var react_1 = __importDefault(require("react"));
 require("./card.css");
-function CardInfo(_a) {
+function CardSimple(_a) {
     var avatar = _a.avatar, heading = _a.heading, subHeading = _a.subHeading, content = _a.content, action = _a.action, style = _a.style, className = _a.className;
     return react_1.default.createElement("div", { className: "card-new-grid ".concat(className !== null && className !== void 0 ? className : ''), style: style },
         react_1.default.createElement("div", { className: "list-item" },
@@ -30,4 +30,4 @@ function CardInfo(_a) {
                 react_1.default.createElement("div", { className: "body-content" }, "content2")))),
         react_1.default.createElement("div", null, action !== null && action !== void 0 ? action : react_1.default.createElement("div", null)));
 }
-exports.CardInfo = CardInfo;
+exports.CardSimple = CardSimple;

package/dist/component/select1/select1.js

@@ -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: "".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 () {
+        return react_1.default.createElement("div", { id: this.props.id, 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() }));
@@ -297,7 +297,10 @@ var Select1 = /** @class */ (function (_super) {
                     if (_this.state.value)
                         _this.setState(__assign(__assign({}, _this.state), { isOpen: true, value: undefined }));
                 } },
-                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faXmarkCircle, style: { fontSize: '1.6rem', color: "var(--neutral-text-color-subtitle)" } })) : react_1.default.createElement("div", { className: 'row', style: { display: (!this.containerRef.current || this.containerRef.current.getBoundingClientRect().width >= 120) ? "flex" : "none" } },
+                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faXmarkCircle, style: { fontSize: '1.6rem', color: "var(--neutral-text-color-subtitle)" } })) : react_1.default.createElement("div", { ref: function (iconRef) {
+                    if ((iconRef === null || iconRef === void 0 ? void 0 : iconRef.parentElement) && iconRef.parentElement.getBoundingClientRect().width < 120)
+                        iconRef.style.display = "none";
+                }, className: 'row' },
                 react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: this.state.isOpen ? free_solid_svg_icons_1.faChevronUp : free_solid_svg_icons_1.faChevronDown, style: { fontSize: '1.1rem', color: "var(--neutral-text-color-subtitle)" } })),
             this.state.isOpen &&
                 react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "".concat(select1_module_css_1.default['select1-popup'], " col ").concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {

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

@@ -0,0 +1,17 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { ComponentStatus } from '../component-status';
+interface TagProps {
+    id?: string;
+    title: string;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    disabled?: boolean;
+    style?: CSSProperties;
+    className?: string;
+    status: ComponentStatus;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+export declare class Tag extends React.Component<TagProps> {
+    render(): React.JSX.Element;
+}
+export {};

package/dist/component/tag/tag.js

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

package/dist/index.d.ts

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