@ludo.ninja/components 1.7.4 → 1.7.6

package/dist/components/favoriteList/add/addCollectionToFavoriteList/{index.jsx → index.js}

@@ -1,3 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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) {
@@ -34,19 +58,23 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import React, { useState } from 'react';
-import ChooseGalleryItems from '@/modules/gallery/ui/chooseGalleryItems';
-import CreateGalleryForm from '@/modules/gallery/ui/createGalleryForm';
-import { useUiStore } from '@/store/ui';
-import { useAddCollectionsToGalleryV2 } from '@/api/server-galleries/mutations/useAddCollectionsToGallery';
-import { useCreateFavoriteListV2 } from '@/api/server-galleries/mutations/useCreateFavorites';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var chooseGalleryItems_1 = __importDefault(require("@/modules/gallery/ui/chooseGalleryItems"));
+var createGalleryForm_1 = __importDefault(require("@/modules/gallery/ui/createGalleryForm"));
+var ui_1 = require("@/store/ui");
+var useAddCollectionsToGallery_1 = require("@/api/server-galleries/mutations/useAddCollectionsToGallery");
+var useCreateFavorites_1 = require("@/api/server-galleries/mutations/useCreateFavorites");
 // Component
 var AddCollectionToFavoriteList = function (_a) {
     var ids = _a.ids;
-    var _b = useState(false), isNeedAddFavList = _b[0], setAddFavList = _b[1];
-    var _c = useCreateFavoriteListV2(), createFavorites = _c.createFavorites, errorCreateFavorites = _c.errorCreateFavorites;
-    var _d = useAddCollectionsToGalleryV2(), addCollectionToGallery = _d.addCollectionToGallery, isAdded = _d.isAdded, error = _d.error;
-    var closeModalSidebarPortal = useUiStore(function (state) { return state.closeModalSidebarPortal; });
+    var _b = (0, react_1.useState)(false), isNeedAddFavList = _b[0], setAddFavList = _b[1];
+    var _c = (0, useCreateFavorites_1.useCreateFavoriteListV2)(), createFavorites = _c.createFavorites, errorCreateFavorites = _c.errorCreateFavorites;
+    var _d = (0, useAddCollectionsToGallery_1.useAddCollectionsToGalleryV2)(), addCollectionToGallery = _d.addCollectionToGallery, isAdded = _d.isAdded, error = _d.error;
+    var closeModalSidebarPortal = (0, ui_1.useUiStore)(function (state) { return state.closeModalSidebarPortal; });
     var addMethod = function (galleryId, ids) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -58,9 +86,7 @@ var AddCollectionToFavoriteList = function (_a) {
             }
         });
     }); };
-    return (<div>
-      {isNeedAddFavList ? (<CreateGalleryForm setAddGallery={setAddFavList} title={'Create Favourite List'} inputPlaceHolderText={'List Name'} createMethod={createFavorites} error={errorCreateFavorites}/>) : (<ChooseGalleryItems setAddGallery={setAddFavList} title={'Add to Favourite List'} titleBtn={'+ New Favourite List'} ids={ids} addMethod={addMethod} isAdded={isAdded} error={error}/>)}
-    </div>);
+    return (react_1.default.createElement("div", null, isNeedAddFavList ? (react_1.default.createElement(createGalleryForm_1.default, { setAddGallery: setAddFavList, title: 'Create Favourite List', inputPlaceHolderText: 'List Name', createMethod: createFavorites, error: errorCreateFavorites })) : (react_1.default.createElement(chooseGalleryItems_1.default, { setAddGallery: setAddFavList, title: 'Add to Favourite List', titleBtn: '+ New Favourite List', ids: ids, addMethod: addMethod, isAdded: isAdded, error: error }))));
 };
 // Export
-export default AddCollectionToFavoriteList;
+exports.default = AddCollectionToFavoriteList;

package/dist/components/favoriteList/add/addCreationToFavoriteList/{index.jsx → index.js}

@@ -1,3 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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) {
@@ -34,19 +58,23 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import React, { useState } from 'react';
-import ChooseGalleryItems from '@/modules/gallery/ui/chooseGalleryItems';
-import CreateGalleryForm from '@/modules/gallery/ui/createGalleryForm';
-import { useUiStore } from '@/store/ui';
-import { useAddCreationsToGalleryV2 } from '@/api/server-galleries/mutations/useAddCreationsToGallery';
-import { useCreateFavoriteListV2 } from '@/api/server-galleries/mutations/useCreateFavorites';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var chooseGalleryItems_1 = __importDefault(require("@/modules/gallery/ui/chooseGalleryItems"));
+var createGalleryForm_1 = __importDefault(require("@/modules/gallery/ui/createGalleryForm"));
+var ui_1 = require("@/store/ui");
+var useAddCreationsToGallery_1 = require("@/api/server-galleries/mutations/useAddCreationsToGallery");
+var useCreateFavorites_1 = require("@/api/server-galleries/mutations/useCreateFavorites");
 // Component
 var AddCreationToFavoriteList = function (_a) {
     var ids = _a.ids, currentMyGalleryId = _a.currentMyGalleryId;
-    var _b = useState(false), isNeedAddFavList = _b[0], setAddFavList = _b[1];
-    var closeModalSidebarPortal = useUiStore(function (state) { return state.closeModalSidebarPortal; });
-    var _c = useCreateFavoriteListV2(), createFavorites = _c.createFavorites, errorCreateFavorites = _c.errorCreateFavorites;
-    var _d = useAddCreationsToGalleryV2(), addCreationsToGallery = _d.addCreationsToGallery, isAdded = _d.isAdded, error = _d.error;
+    var _b = (0, react_1.useState)(false), isNeedAddFavList = _b[0], setAddFavList = _b[1];
+    var closeModalSidebarPortal = (0, ui_1.useUiStore)(function (state) { return state.closeModalSidebarPortal; });
+    var _c = (0, useCreateFavorites_1.useCreateFavoriteListV2)(), createFavorites = _c.createFavorites, errorCreateFavorites = _c.errorCreateFavorites;
+    var _d = (0, useAddCreationsToGallery_1.useAddCreationsToGalleryV2)(), addCreationsToGallery = _d.addCreationsToGallery, isAdded = _d.isAdded, error = _d.error;
     var addMethod = function (galleryId, ids) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -58,11 +86,9 @@ var AddCreationToFavoriteList = function (_a) {
             }
         });
     }); };
-    return (<div>
-      {isNeedAddFavList ? (<CreateGalleryForm setAddGallery={setAddFavList} title={'Create Favourite List'} inputPlaceHolderText={'List Name'} 
+    return (react_1.default.createElement("div", null, isNeedAddFavList ? (react_1.default.createElement(createGalleryForm_1.default, { setAddGallery: setAddFavList, title: 'Create Favourite List', inputPlaceHolderText: 'List Name', 
         // ids={ids}
-        createMethod={createFavorites} error={errorCreateFavorites}/>) : (<ChooseGalleryItems setAddGallery={setAddFavList} title={'Add to Favourite List'} titleBtn={'+ New Favourite List'} ids={ids} addMethod={addMethod} isAdded={isAdded} error={error} currentMyGalleryId={currentMyGalleryId}/>)}
-    </div>);
+        createMethod: createFavorites, error: errorCreateFavorites })) : (react_1.default.createElement(chooseGalleryItems_1.default, { setAddGallery: setAddFavList, title: 'Add to Favourite List', titleBtn: '+ New Favourite List', ids: ids, addMethod: addMethod, isAdded: isAdded, error: error, currentMyGalleryId: currentMyGalleryId }))));
 };
 // Export
-export default AddCreationToFavoriteList;
+exports.default = AddCreationToFavoriteList;

package/dist/components/filters/applyResetBtns/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@/styles/colors");
+var z_indexes_1 = require("@/styles/mixins/z-indexes");
+var MainButton_1 = __importDefault(require("@/system/Buttons/MainButton"));
+// Styles
+var StyledApplyResetButtons = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: ", ";\n  display: flex;\n  gap: 24px;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  padding: 20px 24px;\n  height: 80px;\n  background-color: ", ";\n\n  .reset_btn,\n  .apply_btn {\n    width: 144px;\n    height: 100%;\n    button {\n      height: 100%;\n      width: 100%;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 80px;\n    display: block;\n    height: 60px;\n    background: linear-gradient(\n      180deg,\n      rgba(255, 255, 255, 0) 0%,\n      ", " 100%\n    );\n  }\n"], ["\n  z-index: ", ";\n  display: flex;\n  gap: 24px;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  padding: 20px 24px;\n  height: 80px;\n  background-color: ", ";\n\n  .reset_btn,\n  .apply_btn {\n    width: 144px;\n    height: 100%;\n    button {\n      height: 100%;\n      width: 100%;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 80px;\n    display: block;\n    height: 60px;\n    background: linear-gradient(\n      180deg,\n      rgba(255, 255, 255, 0) 0%,\n      ", " 100%\n    );\n  }\n"])), z_indexes_1.zIndexApplyResetBtns.toString(), colors_1.WhiteColor, colors_1.WhiteColor);
+// Component
+var ApplyResetButtons = function (_a) {
+    var onReset = _a.onReset, onApply = _a.onApply;
+    return (react_1.default.createElement(StyledApplyResetButtons, null,
+        react_1.default.createElement("div", { className: 'reset_btn' },
+            react_1.default.createElement(MainButton_1.default, { text: 'Reset', variant: "outline", onClick: function () { return onReset(); } })),
+        react_1.default.createElement("div", { className: 'apply_btn' },
+            react_1.default.createElement(MainButton_1.default, { text: 'Apply', variant: "primaryL", onClick: function () { return onApply(); } }))));
+};
+// Export
+exports.default = ApplyResetButtons;
+var templateObject_1;

package/dist/components/filters/galleriesFiltersForm/index.js

@@ -0,0 +1,90 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var DropDown_1 = __importDefault(require("@/system/DropDown"));
+var RadioInput_1 = __importDefault(require("@/system/Forms/RadioInput"));
+// Styles
+var StyledNtfsFiltersForm = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+// Component
+var GalleryFiltersForm = function (_a) {
+    var selectTypeSearchResult = _a.selectTypeSearchResult, selectBlockchainSearchResult = _a.selectBlockchainSearchResult, selectBlockchainCategoryResult = _a.selectBlockchainCategoryResult, selectBlockchainTimeResult = _a.selectBlockchainTimeResult, handleNeedShowButtons = _a.handleNeedShowButtons, handleFiltersCount = _a.handleFiltersCount;
+    var _b = (0, react_1.useState)(null), selectedSearchResult = _b[0], setSelectedSearchResult = _b[1];
+    var _c = (0, react_1.useState)(null), selectedBlockchainResult = _c[0], setSelectedBlockchainResult = _c[1];
+    var _d = (0, react_1.useState)(null), selectedBlockchainCategoryResult = _d[0], setSelectedBlockchainCategoryResult = _d[1];
+    var _e = (0, react_1.useState)(null), selectedBlockchainTimeResult = _e[0], setSelectedBlockchainTimeResult = _e[1];
+    (0, react_1.useEffect)(function () {
+        if (selectedSearchResult ||
+            selectedBlockchainResult ||
+            selectedBlockchainCategoryResult ||
+            selectedBlockchainTimeResult) {
+            handleNeedShowButtons(true);
+        }
+        else {
+            handleNeedShowButtons(false);
+        }
+        var arr = [
+            selectedSearchResult,
+            selectedBlockchainResult,
+            selectedBlockchainCategoryResult,
+            selectedBlockchainTimeResult,
+        ];
+        var count = arr.filter(function (value) { return value; }).length;
+        handleFiltersCount(count);
+    }, [
+        selectedSearchResult,
+        selectedBlockchainResult,
+        selectedBlockchainCategoryResult,
+        selectedBlockchainTimeResult,
+    ]);
+    var handleChangeSearchResult = function (value) {
+        setSelectedSearchResult(value);
+    };
+    var handleChangeBlockchainResult = function (value) {
+        setSelectedBlockchainResult(value);
+    };
+    var handleChangeBlockchainCategoryResult = function (value) {
+        setSelectedBlockchainCategoryResult(value);
+    };
+    var handleChangeBlockchainTimeResult = function (value) {
+        setSelectedBlockchainTimeResult(value);
+    };
+    return (react_1.default.createElement(StyledNtfsFiltersForm, null,
+        react_1.default.createElement(DropDown_1.default, { caption: 'Type', fallBackOnClose: handleChangeSearchResult }, selectTypeSearchResult.map(function (select) { return (react_1.default.createElement(RadioInput_1.default, { key: select.id, radioLabel: select.label, radioValue: select.id, handleChange: handleChangeSearchResult, radioChecked: selectedBlockchainResult === select.id })); })),
+        react_1.default.createElement(DropDown_1.default, { caption: 'BlockChainEntity', fallBackOnClose: handleChangeBlockchainResult }, selectBlockchainSearchResult.map(function (select) { return (react_1.default.createElement(RadioInput_1.default, { key: select.id, radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainResult, radioChecked: selectedBlockchainResult === select.id })); })),
+        react_1.default.createElement(DropDown_1.default, { caption: 'Category', fallBackOnClose: handleChangeBlockchainCategoryResult }, selectBlockchainCategoryResult.map(function (select) { return (react_1.default.createElement(RadioInput_1.default, { key: select.id, radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainCategoryResult, radioChecked: selectedBlockchainResult === select.id })); })),
+        react_1.default.createElement(DropDown_1.default, { caption: 'Time', fallBackOnClose: handleChangeBlockchainTimeResult }, selectBlockchainTimeResult.map(function (select) { return (react_1.default.createElement(RadioInput_1.default, { key: select.id, radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainTimeResult, radioChecked: selectedBlockchainResult === select.id })); }))));
+};
+// Export
+exports.default = GalleryFiltersForm;
+var templateObject_1;

package/dist/components/filters/index.js

@@ -0,0 +1,112 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ui_1 = require("@/store/ui");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var applyResetBtns_1 = __importDefault(require("@/components/filters/applyResetBtns"));
+var mobileFilters_1 = __importDefault(require("@/components/filters/mobileFilters"));
+var sidebarFilters_1 = __importDefault(require("@/components/sidebar/sidebarFilters"));
+var DesktopSelect_1 = __importDefault(require("@/system/Forms/Selects/DesktopSelect"));
+var MobileSelect_1 = __importDefault(require("@/system/Forms/Selects/MobileSelect"));
+// Styles
+var StyledFilters = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n  }\n\n  .type {\n    width: 154px;\n  }\n\n  .blockchain {\n    width: 163px;\n  }\n\n  .category {\n    width: 156px;\n  }\n\n  .time {\n    width: 125px;\n  }\n\n  .status {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    button {\n      position: relative;\n      width: 100%;\n      border: 1px solid transparent;\n      outline: none;\n      background-color: white;\n      padding: 10px 85px;\n      border-radius: 6px;\n      min-height: 40px;\n      font-size: 1.4em;\n      color: ", ";\n      font-weight: 500;\n      transition: all 0.3s ease-in;\n\n      &:hover {\n        transition: all 0.3s ease-in-out;\n        background: ", ";\n        color: ", ";\n        border: 1px solid ", ";\n      }\n\n      .counter {\n        position: absolute;\n        background-color: ", ";\n        color: white;\n        right: -5px;\n        padding: 8px;\n        font-size: 0.86em;\n        font-weight: 500;\n        border-radius: 50%;\n        top: -10px;\n        width: 16px;\n        height: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  ", " {\n    .select {\n      margin-right: ", ";\n      margin-top: ", ";\n    }\n    .type {\n      width: ", ";\n    }\n    .blockchain {\n      width: ", ";\n    }\n    .category {\n      width: ", ";\n    }\n    .time {\n      width: ", ";\n    }\n    .status {\n      width: ", ";\n      margin-right: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n  }\n\n  .type {\n    width: 154px;\n  }\n\n  .blockchain {\n    width: 163px;\n  }\n\n  .category {\n    width: 156px;\n  }\n\n  .time {\n    width: 125px;\n  }\n\n  .status {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    button {\n      position: relative;\n      width: 100%;\n      border: 1px solid transparent;\n      outline: none;\n      background-color: white;\n      padding: 10px 85px;\n      border-radius: 6px;\n      min-height: 40px;\n      font-size: 1.4em;\n      color: ", ";\n      font-weight: 500;\n      transition: all 0.3s ease-in;\n\n      &:hover {\n        transition: all 0.3s ease-in-out;\n        background: ", ";\n        color: ", ";\n        border: 1px solid ", ";\n      }\n\n      .counter {\n        position: absolute;\n        background-color: ", ";\n        color: white;\n        right: -5px;\n        padding: 8px;\n        font-size: 0.86em;\n        font-weight: 500;\n        border-radius: 50%;\n        top: -10px;\n        width: 16px;\n        height: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  ", " {\n    .select {\n      margin-right: ", ";\n      margin-top: ", ";\n    }\n    .type {\n      width: ", ";\n    }\n    .blockchain {\n      width: ", ";\n    }\n    .category {\n      width: ", ";\n    }\n    .time {\n      width: ", ";\n    }\n    .status {\n      width: ", ";\n      margin-right: ", ";\n    }\n  }\n"])), colors_1.BlackColor, colors_1.InactiveButtonColor, colors_1.AccentColor, colors_1.BorderColorLight, colors_1.AccentColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(154), (0, _4k_1.adaptiveValueCalc)(163), (0, _4k_1.adaptiveValueCalc)(156), (0, _4k_1.adaptiveValueCalc)(125), (0, _4k_1.adaptiveValueCalc)(135), (0, _4k_1.adaptiveValueCalc)(24));
+// Component
+var Filters = function (_a) {
+    var filterInputHandler = _a.filterInputHandler, handleResetFilter = _a.handleResetFilter, selectData = _a.selectData, filterInput = _a.filterInput, handleMobileFilterInput = _a.handleMobileFilterInput, isMobile = _a.isMobile;
+    var _b = (0, react_1.useState)(false), isSideBarOpen = _b[0], setSidebarOpen = _b[1];
+    var selectedFiltersCount = (0, react_1.useState)(0)[0];
+    var _c = (0, ui_1.useUiStore)(function (state) { return ({
+        openOverLay: state.openOverLay,
+        closeOverlay: state.closeOverlay,
+    }); }), openOverLay = _c.openOverLay, closeOverlay = _c.closeOverlay;
+    var _d = (0, react_1.useState)(filterInput), mobileFilterInput = _d[0], setMobileFilterInput = _d[1];
+    (0, react_1.useEffect)(function () {
+        if (JSON.stringify(mobileFilterInput) !== JSON.stringify(filterInput)) {
+            setMobileFilterInput(filterInput);
+        }
+    }, [filterInput]);
+    var handleMobileFilters = function (fieldName, fieldValue) {
+        setMobileFilterInput(function (prevFilters) {
+            var _a;
+            return (__assign(__assign({}, prevFilters), (_a = {}, _a[fieldName] = fieldValue, _a)));
+        });
+    };
+    var closeFiltersMobile = function () {
+        closeOverlay();
+        setSidebarOpen(false);
+    };
+    return (react_1.default.createElement(StyledFilters, null,
+        !isMobile &&
+            selectData.map(function (select) { return (react_1.default.createElement("div", { key: select.id, className: "select ".concat(select.data.selectName) },
+                react_1.default.createElement(DesktopSelect_1.default, { defaultOptionValue: filterInput[select.data.selectName], options: select.data.selectOptions, isLoading: false, onChangeHandler: filterInputHandler, name: select.data.selectName }))); }),
+        isMobile && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: 'filterButton' },
+                react_1.default.createElement("button", { onClick: function (e) {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        openOverLay();
+                        setSidebarOpen(true);
+                    } },
+                    "Filters",
+                    selectedFiltersCount ? (react_1.default.createElement("span", { className: 'counter' }, selectedFiltersCount)) : null)),
+            react_1.default.createElement(sidebarFilters_1.default, { isOpen: isSideBarOpen, handleClose: function () {
+                    setMobileFilterInput(filterInput);
+                    closeFiltersMobile();
+                } },
+                react_1.default.createElement(mobileFilters_1.default, null, selectData.map(function (select) { return (react_1.default.createElement(MobileSelect_1.default, { key: select.id, defaultOptionValue: mobileFilterInput[select.data
+                        .selectName], options: select.data.selectOptions, name: select.data.selectName, onChangeHandler: handleMobileFilters })); })),
+                react_1.default.createElement(applyResetBtns_1.default, { onReset: function () {
+                        handleResetFilter();
+                        closeFiltersMobile();
+                    }, onApply: function () {
+                        handleMobileFilterInput(mobileFilterInput);
+                        closeFiltersMobile();
+                    } }))))));
+};
+// Export
+exports.default = Filters;
+var templateObject_1;

package/dist/components/filters/mobileFilters/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+var StyledMobileFilters = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n  padding: 0 32px;\n\n  & > div:last-child {\n    margin-bottom: 30px;\n    border-bottom: unset;\n  }\n"], ["\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n  padding: 0 32px;\n\n  & > div:last-child {\n    margin-bottom: 30px;\n    border-bottom: unset;\n  }\n"])));
+// Component
+var MobileFilters = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement(StyledMobileFilters, null, children);
+};
+// Export
+exports.default = MobileFilters;
+var templateObject_1;

package/dist/components/filters/setsFiltersForm/index.js

@@ -0,0 +1,82 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var DropDown_1 = __importDefault(require("@/system/DropDown"));
+var RadioInput_1 = __importDefault(require("@/system/Forms/RadioInput"));
+// Styles
+var StyledSetsFiltersForm = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+// Component
+var SetsFiltersForm = function (_a) {
+    var selectTypeSearchResult = _a.selectTypeSearchResult, selectBlockchainCategoryResult = _a.selectBlockchainCategoryResult, selectBlockchainTimeResult = _a.selectBlockchainTimeResult, handleNeedShowButtons = _a.handleNeedShowButtons, handleFiltersCount = _a.handleFiltersCount;
+    var _b = (0, react_1.useState)(null), selectedSearchResult = _b[0], setSelectedSearchResult = _b[1];
+    var _c = (0, react_1.useState)(null), selectedBlockchainCategoryResult = _c[0], setSelectedBlockchainCategoryResult = _c[1];
+    var _d = (0, react_1.useState)(null), selectedBlockchainTimeResult = _d[0], setSelectedBlockchainTimeResult = _d[1];
+    (0, react_1.useEffect)(function () {
+        if (selectedSearchResult ||
+            selectedBlockchainCategoryResult ||
+            selectedBlockchainTimeResult) {
+            handleNeedShowButtons(true);
+        }
+        else {
+            handleNeedShowButtons(false);
+        }
+        var arr = [
+            selectedSearchResult,
+            selectedBlockchainCategoryResult,
+            selectedBlockchainTimeResult,
+        ];
+        var count = arr.filter(function (value) { return value; }).length;
+        handleFiltersCount(count);
+    }, [
+        selectedSearchResult,
+        selectedBlockchainCategoryResult,
+        selectedBlockchainTimeResult,
+    ]);
+    var handleChangeSearchResult = function (value) {
+        setSelectedSearchResult(value);
+    };
+    var handleChangeBlockchainCategoryResult = function (value) {
+        setSelectedBlockchainCategoryResult(value);
+    };
+    var handleChangeBlockchainTimeResult = function (value) {
+        setSelectedBlockchainTimeResult(value);
+    };
+    return (react_1.default.createElement(StyledSetsFiltersForm, null,
+        react_1.default.createElement(DropDown_1.default, { caption: 'Type', fallBackOnClose: handleChangeSearchResult }, selectTypeSearchResult.map(function (select) { return (react_1.default.createElement(RadioInput_1.default, { key: select.id, radioLabel: select.label, radioValue: select.id, handleChange: handleChangeSearchResult, radioChecked: selectedSearchResult === select.id })); })),
+        react_1.default.createElement(DropDown_1.default, { caption: 'Category', fallBackOnClose: handleChangeBlockchainCategoryResult }, selectBlockchainCategoryResult.map(function (select) { return (react_1.default.createElement(RadioInput_1.default, { key: select.id, radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainCategoryResult, radioChecked: selectedSearchResult === select.id })); })),
+        react_1.default.createElement(DropDown_1.default, { caption: 'Time', fallBackOnClose: handleChangeBlockchainTimeResult }, selectBlockchainTimeResult.map(function (select) { return (react_1.default.createElement(RadioInput_1.default, { key: select.id, radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainTimeResult, radioChecked: selectedSearchResult === select.id })); }))));
+};
+// Export
+exports.default = SetsFiltersForm;
+var templateObject_1;