@soyfri/template 1.0.1 → 1.0.4

package/dist/partials/layout/search/Search.js

@@ -1,42 +1,16 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Search = void 0;
-var react_1 = __importStar(require("react"));
-var components_1 = require("../../../assets/ts/components");
-var helpers_1 = require("../../../helpers");
-var Search = function () {
-    var _a = (0, react_1.useState)('main'), menuState = _a[0], setMenuState = _a[1];
-    var element = (0, react_1.useRef)(null);
-    var wrapperElement = (0, react_1.useRef)(null);
-    var resultsElement = (0, react_1.useRef)(null);
-    var suggestionsElement = (0, react_1.useRef)(null);
-    var emptyElement = (0, react_1.useRef)(null);
-    var processs = function (search) {
+import React, { useEffect, useRef, useState } from 'react';
+import { SearchComponent } from '../../../assets/ts/components';
+import { KTIcon, toAbsoluteUrl } from '../../../helpers';
+const Search = () => {
+    const [menuState, setMenuState] = useState('main');
+    const element = useRef(null);
+    const wrapperElement = useRef(null);
+    const resultsElement = useRef(null);
+    const suggestionsElement = useRef(null);
+    const emptyElement = useRef(null);
+    const processs = (search) => {
         setTimeout(function () {
-            var number = Math.floor(Math.random() * 6) + 1;
+            const number = Math.floor(Math.random() * 6) + 1;
             // Hide recently viewed
             suggestionsElement.current.classList.add('d-none');
             if (number === 3) {
@@ -55,7 +29,7 @@ var Search = function () {
             search.complete();
         }, 1500);
     };
-    var clear = function () {
+    const clear = () => {
         // Show recently viewed
         suggestionsElement.current.classList.remove('d-none');
         // Hide results
@@ -63,272 +37,272 @@ var Search = function () {
         // Hide empty message
         emptyElement.current.classList.add('d-none');
     };
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         // Initialize search handler
-        var searchObject = components_1.SearchComponent.createInsance('#kt_header_search');
+        const searchObject = SearchComponent.createInsance('#kt_header_search');
         // Search handler
         searchObject.on('kt.search.process', processs);
         // Clear handler
         searchObject.on('kt.search.clear', clear);
     }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { id: 'kt_header_search', className: 'd-flex align-items-stretch', "data-kt-search-keypress": 'true', "data-kt-search-min-length": '2', "data-kt-search-enter": 'enter', "data-kt-search-layout": 'menu', "data-kt-menu-trigger": 'auto', "data-kt-menu-overflow": 'false', "data-kt-menu-permanent": 'true', "data-kt-menu-placement": 'bottom-end', ref: element },
-            react_1.default.createElement("div", { className: 'd-flex align-items-center', "data-kt-search-element": 'toggle', id: 'kt_header_search_toggle' },
-                react_1.default.createElement("div", { className: 'btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px' },
-                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'magnifier', className: 'fs-2' }))),
-            react_1.default.createElement("div", { "data-kt-search-element": 'content', className: 'menu menu-sub menu-sub-dropdown p-7 w-325px w-md-375px' },
-                react_1.default.createElement("div", { className: "".concat(menuState === 'main' ? '' : 'd-none'), ref: wrapperElement, "data-kt-search-element": 'wrapper' },
-                    react_1.default.createElement("form", { "data-kt-search-element": 'form', className: 'w-100 position-relative mb-3', autoComplete: 'off' },
-                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'magnifier', className: 'fs-2 text-lg-1 text-gray-500 position-absolute top-50 translate-middle-y ms-0' }),
-                        react_1.default.createElement("input", { type: 'text', className: 'form-control form-control-flush ps-10', name: 'search', placeholder: 'Search...', "data-kt-search-element": 'input' }),
-                        react_1.default.createElement("span", { className: 'position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-1', "data-kt-search-element": 'spinner' },
-                            react_1.default.createElement("span", { className: 'spinner-border h-15px w-15px align-middle text-gray-500' })),
-                        react_1.default.createElement("span", { className: 'btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 d-none', "data-kt-search-element": 'clear' },
-                            react_1.default.createElement(helpers_1.KTIcon, { iconName: 'cross', className: 'fs-2 text-lg-1 me-0' })),
-                        react_1.default.createElement("div", { className: 'position-absolute top-50 end-0 translate-middle-y', "data-kt-search-element": 'toolbar' },
-                            react_1.default.createElement("div", { "data-kt-search-element": 'preferences-show', className: 'btn btn-icon w-20px btn-sm btn-active-color-primary me-1', "data-bs-toggle": 'tooltip', onClick: function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { id: 'kt_header_search', className: 'd-flex align-items-stretch', "data-kt-search-keypress": 'true', "data-kt-search-min-length": '2', "data-kt-search-enter": 'enter', "data-kt-search-layout": 'menu', "data-kt-menu-trigger": 'auto', "data-kt-menu-overflow": 'false', "data-kt-menu-permanent": 'true', "data-kt-menu-placement": 'bottom-end', ref: element },
+            React.createElement("div", { className: 'd-flex align-items-center', "data-kt-search-element": 'toggle', id: 'kt_header_search_toggle' },
+                React.createElement("div", { className: 'btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px' },
+                    React.createElement(KTIcon, { iconName: 'magnifier', className: 'fs-2' }))),
+            React.createElement("div", { "data-kt-search-element": 'content', className: 'menu menu-sub menu-sub-dropdown p-7 w-325px w-md-375px' },
+                React.createElement("div", { className: `${menuState === 'main' ? '' : 'd-none'}`, ref: wrapperElement, "data-kt-search-element": 'wrapper' },
+                    React.createElement("form", { "data-kt-search-element": 'form', className: 'w-100 position-relative mb-3', autoComplete: 'off' },
+                        React.createElement(KTIcon, { iconName: 'magnifier', className: 'fs-2 text-lg-1 text-gray-500 position-absolute top-50 translate-middle-y ms-0' }),
+                        React.createElement("input", { type: 'text', className: 'form-control form-control-flush ps-10', name: 'search', placeholder: 'Search...', "data-kt-search-element": 'input' }),
+                        React.createElement("span", { className: 'position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-1', "data-kt-search-element": 'spinner' },
+                            React.createElement("span", { className: 'spinner-border h-15px w-15px align-middle text-gray-500' })),
+                        React.createElement("span", { className: 'btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 d-none', "data-kt-search-element": 'clear' },
+                            React.createElement(KTIcon, { iconName: 'cross', className: 'fs-2 text-lg-1 me-0' })),
+                        React.createElement("div", { className: 'position-absolute top-50 end-0 translate-middle-y', "data-kt-search-element": 'toolbar' },
+                            React.createElement("div", { "data-kt-search-element": 'preferences-show', className: 'btn btn-icon w-20px btn-sm btn-active-color-primary me-1', "data-bs-toggle": 'tooltip', onClick: () => {
                                     setMenuState('preferences');
                                 }, title: 'Show search preferences' },
-                                react_1.default.createElement(helpers_1.KTIcon, { iconName: 'setting-2', className: 'fs-1' })),
-                            react_1.default.createElement("div", { "data-kt-search-element": 'advanced-options-form-show', className: 'btn btn-icon w-20px btn-sm btn-active-color-primary', "data-bs-toggle": 'tooltip', onClick: function () {
+                                React.createElement(KTIcon, { iconName: 'setting-2', className: 'fs-1' })),
+                            React.createElement("div", { "data-kt-search-element": 'advanced-options-form-show', className: 'btn btn-icon w-20px btn-sm btn-active-color-primary', "data-bs-toggle": 'tooltip', onClick: () => {
                                     setMenuState('advanced');
                                 }, title: 'Show more search options' },
-                                react_1.default.createElement(helpers_1.KTIcon, { iconName: 'down', className: 'fs-2' })))),
-                    react_1.default.createElement("div", { ref: resultsElement, "data-kt-search-element": 'results', className: 'd-none' },
-                        react_1.default.createElement("div", { className: 'scroll-y mh-200px mh-lg-350px' },
-                            react_1.default.createElement("h3", { className: 'fs-5 text-muted m-0 pb-5', "data-kt-search-element": 'category-title' }, "Users"),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)('media/avatars/300-6.jpg'), alt: '' })),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "Karina Clark"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Marketing Manager"))),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)('media/avatars/300-2.jpg'), alt: '' })),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "Olivia Bold"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Software Engineer"))),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)('media/avatars/300-9.jpg'), alt: '' })),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "Ana Clark"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "UI/UX Designer"))),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)('media/avatars/300-14.jpg'), alt: '' })),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "Nick Pitola"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Art Director"))),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)('media/avatars/300-11.jpg'), alt: '' })),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "Edward Kulnic"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "System Administrator"))),
-                            react_1.default.createElement("h3", { className: 'fs-5 text-muted m-0 pt-5 pb-5', "data-kt-search-element": 'category-title' }, "Customers"),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement("img", { className: 'w-20px h-20px', src: (0, helpers_1.toAbsoluteUrl)('media/svg/brand-logos/volicity-9.svg'), alt: '' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "Company Rbranding"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "UI Design"))),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement("img", { className: 'w-20px h-20px', src: (0, helpers_1.toAbsoluteUrl)('media/svg/brand-logos/tvit.svg'), alt: '' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "Company Re-branding"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Web Development"))),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement("img", { className: 'w-20px h-20px', src: (0, helpers_1.toAbsoluteUrl)('media/svg/misc/infography.svg'), alt: '' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "Business Analytics App"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Administration"))),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement("img", { className: 'w-20px h-20px', src: (0, helpers_1.toAbsoluteUrl)('media/svg/brand-logos/leaf.svg'), alt: '' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "EcoLeaf App Launch"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Marketing"))),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement("img", { className: 'w-20px h-20px', src: (0, helpers_1.toAbsoluteUrl)('media/svg/brand-logos/tower.svg'), alt: '' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "Tower Group Website"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Google Adwords"))),
-                            react_1.default.createElement("h3", { className: 'fs-5 text-muted m-0 pt-5 pb-5', "data-kt-search-element": 'category-title' }, "Projects"),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'document', className: 'fs-2 text-primary' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "Si-Fi Project by AU Themes"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "#45670"))),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'chart-simple', className: 'fs-2 text-primary' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "Shopix Mobile App Planning"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "#45690"))),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'message-text-2', className: 'fs-2 text-primary' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "Finance Monitoring SAAS Discussion"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "#21090"))),
-                            react_1.default.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'profile-circle', className: 'fs-2 text-primary' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column' },
-                                    react_1.default.createElement("span", { className: 'fs-6 fw-bold' }, "Dashboard Analitics Launch"),
-                                    react_1.default.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "#34560"))))),
-                    react_1.default.createElement("div", { ref: suggestionsElement, className: 'mb-4', "data-kt-search-element": 'main' },
-                        react_1.default.createElement("div", { className: 'd-flex flex-stack fw-bold mb-4' },
-                            react_1.default.createElement("span", { className: 'text-muted fs-6 me-2' }, "Recently Searched:")),
-                        react_1.default.createElement("div", { className: 'scroll-y mh-200px mh-lg-325px' },
-                            react_1.default.createElement("div", { className: 'd-flex align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'phone', className: 'fs-2 text-primary' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column' },
-                                    react_1.default.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "BoomApp by Keenthemes"),
-                                    react_1.default.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#45789"))),
-                            react_1.default.createElement("div", { className: 'd-flex align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'chart-simple', className: 'fs-2 text-primary' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column' },
-                                    react_1.default.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "\"Kept API Project Meeting"),
-                                    react_1.default.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#84050"))),
-                            react_1.default.createElement("div", { className: 'd-flex align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'chart', className: 'fs-2 text-primary' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column' },
-                                    react_1.default.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "\"KPI Monitoring App Launch"),
-                                    react_1.default.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#84250"))),
-                            react_1.default.createElement("div", { className: 'd-flex align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'chart-simple-3', className: 'fs-2 text-primary' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column' },
-                                    react_1.default.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "Project Reference FAQ"),
-                                    react_1.default.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#67945"))),
-                            react_1.default.createElement("div", { className: 'd-flex align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'sms', className: 'fs-2 text-primary' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column' },
-                                    react_1.default.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "\"FitPro App Development"),
-                                    react_1.default.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#84250"))),
-                            react_1.default.createElement("div", { className: 'd-flex align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'bank', className: 'fs-2 text-primary' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column' },
-                                    react_1.default.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "Shopix Mobile App"),
-                                    react_1.default.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#45690"))),
-                            react_1.default.createElement("div", { className: 'd-flex align-items-center mb-5' },
-                                react_1.default.createElement("div", { className: 'symbol symbol-40px me-4' },
-                                    react_1.default.createElement("span", { className: 'symbol-label bg-light' },
-                                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'chart-simple-3', className: 'fs-2 text-primary' }))),
-                                react_1.default.createElement("div", { className: 'd-flex flex-column' },
-                                    react_1.default.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "\"Landing UI Design\" Launch"),
-                                    react_1.default.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#24005"))))),
-                    react_1.default.createElement("div", { ref: emptyElement, "data-kt-search-element": 'empty', className: 'text-center d-none' },
-                        react_1.default.createElement("div", { className: 'pt-10 pb-10' },
-                            react_1.default.createElement(helpers_1.KTIcon, { iconName: 'search-list', className: 'fs-4x opacity-50' })),
-                        react_1.default.createElement("div", { className: 'pb-15 fw-bold' },
-                            react_1.default.createElement("h3", { className: 'text-gray-600 fs-5 mb-2' }, "No result found"),
-                            react_1.default.createElement("div", { className: 'text-muted fs-7' }, "Please try again with a different query")))),
-                react_1.default.createElement("form", { className: "pt-1 ".concat(menuState === 'advanced' ? '' : 'd-none') },
-                    react_1.default.createElement("h3", { className: 'fw-bold text-gray-900 mb-7' }, "Advanced Search"),
-                    react_1.default.createElement("div", { className: 'mb-5' },
-                        react_1.default.createElement("input", { type: 'text', className: 'form-control form-control-sm form-control-solid', placeholder: 'Contains the word', name: 'query' })),
-                    react_1.default.createElement("div", { className: 'mb-5' },
-                        react_1.default.createElement("div", { className: 'nav-group nav-group-fluid' },
-                            react_1.default.createElement("label", null,
-                                react_1.default.createElement("input", { type: 'radio', className: 'btn-check', name: 'type', value: 'has', defaultChecked: true }),
-                                react_1.default.createElement("span", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary' }, "All")),
-                            react_1.default.createElement("label", null,
-                                react_1.default.createElement("input", { type: 'radio', className: 'btn-check', name: 'type', value: 'users' }),
-                                react_1.default.createElement("span", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary px-4' }, "Users")),
-                            react_1.default.createElement("label", null,
-                                react_1.default.createElement("input", { type: 'radio', className: 'btn-check', name: 'type', value: 'orders' }),
-                                react_1.default.createElement("span", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary px-4' }, "Orders")),
-                            react_1.default.createElement("label", null,
-                                react_1.default.createElement("input", { type: 'radio', className: 'btn-check', name: 'type', value: 'projects' }),
-                                react_1.default.createElement("span", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary px-4' }, "Projects")))),
-                    react_1.default.createElement("div", { className: 'mb-5' },
-                        react_1.default.createElement("input", { type: 'text', name: 'assignedto', className: 'form-control form-control-sm form-control-solid', placeholder: 'Assigned to' })),
-                    react_1.default.createElement("div", { className: 'mb-5' },
-                        react_1.default.createElement("input", { type: 'text', name: 'collaborators', className: 'form-control form-control-sm form-control-solid', placeholder: 'Collaborators' })),
-                    react_1.default.createElement("div", { className: 'mb-5' },
-                        react_1.default.createElement("div", { className: 'nav-group nav-group-fluid' },
-                            react_1.default.createElement("label", null,
-                                react_1.default.createElement("input", { type: 'radio', className: 'btn-check', name: 'attachment', value: 'has', defaultChecked: true }),
-                                react_1.default.createElement("span", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary' }, "Has attachment")),
-                            react_1.default.createElement("label", null,
-                                react_1.default.createElement("input", { type: 'radio', className: 'btn-check', name: 'attachment', value: 'any' }),
-                                react_1.default.createElement("span", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary px-4' }, "Any")))),
-                    react_1.default.createElement("div", { className: 'mb-5' },
-                        react_1.default.createElement("select", { name: 'timezone', "aria-label": 'Select a Timezone', "data-control": 'select2', "data-placeholder": 'date_period', className: 'form-select form-select-sm form-select-solid' },
-                            react_1.default.createElement("option", { value: 'next' }, "Within the next"),
-                            react_1.default.createElement("option", { value: 'last' }, "Within the last"),
-                            react_1.default.createElement("option", { value: 'between' }, "Between"),
-                            react_1.default.createElement("option", { value: 'on' }, "On"))),
-                    react_1.default.createElement("div", { className: 'row mb-8' },
-                        react_1.default.createElement("div", { className: 'col-6' },
-                            react_1.default.createElement("input", { type: 'number', name: 'date_number', className: 'form-control form-control-sm form-control-solid', placeholder: 'Lenght' })),
-                        react_1.default.createElement("div", { className: 'col-6' },
-                            react_1.default.createElement("select", { name: 'date_typer', "aria-label": 'Select a Timezone', "data-control": 'select2', "data-placeholder": 'Period', className: 'form-select form-select-sm form-select-solid' },
-                                react_1.default.createElement("option", { value: 'days' }, "Days"),
-                                react_1.default.createElement("option", { value: 'weeks' }, "Weeks"),
-                                react_1.default.createElement("option", { value: 'months' }, "Months"),
-                                react_1.default.createElement("option", { value: 'years' }, "Years")))),
-                    react_1.default.createElement("div", { className: 'd-flex justify-content-end' },
-                        react_1.default.createElement("button", { onClick: function (e) {
+                                React.createElement(KTIcon, { iconName: 'down', className: 'fs-2' })))),
+                    React.createElement("div", { ref: resultsElement, "data-kt-search-element": 'results', className: 'd-none' },
+                        React.createElement("div", { className: 'scroll-y mh-200px mh-lg-350px' },
+                            React.createElement("h3", { className: 'fs-5 text-muted m-0 pb-5', "data-kt-search-element": 'category-title' }, "Users"),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("img", { src: toAbsoluteUrl('media/avatars/300-6.jpg'), alt: '' })),
+                                React.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "Karina Clark"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Marketing Manager"))),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("img", { src: toAbsoluteUrl('media/avatars/300-2.jpg'), alt: '' })),
+                                React.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "Olivia Bold"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Software Engineer"))),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("img", { src: toAbsoluteUrl('media/avatars/300-9.jpg'), alt: '' })),
+                                React.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "Ana Clark"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "UI/UX Designer"))),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("img", { src: toAbsoluteUrl('media/avatars/300-14.jpg'), alt: '' })),
+                                React.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "Nick Pitola"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Art Director"))),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("img", { src: toAbsoluteUrl('media/avatars/300-11.jpg'), alt: '' })),
+                                React.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "Edward Kulnic"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "System Administrator"))),
+                            React.createElement("h3", { className: 'fs-5 text-muted m-0 pt-5 pb-5', "data-kt-search-element": 'category-title' }, "Customers"),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement("img", { className: 'w-20px h-20px', src: toAbsoluteUrl('media/svg/brand-logos/volicity-9.svg'), alt: '' }))),
+                                React.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "Company Rbranding"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "UI Design"))),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement("img", { className: 'w-20px h-20px', src: toAbsoluteUrl('media/svg/brand-logos/tvit.svg'), alt: '' }))),
+                                React.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "Company Re-branding"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Web Development"))),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement("img", { className: 'w-20px h-20px', src: toAbsoluteUrl('media/svg/misc/infography.svg'), alt: '' }))),
+                                React.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "Business Analytics App"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Administration"))),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement("img", { className: 'w-20px h-20px', src: toAbsoluteUrl('media/svg/brand-logos/leaf.svg'), alt: '' }))),
+                                React.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "EcoLeaf App Launch"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Marketing"))),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement("img", { className: 'w-20px h-20px', src: toAbsoluteUrl('media/svg/brand-logos/tower.svg'), alt: '' }))),
+                                React.createElement("div", { className: 'd-flex flex-column justify-content-start fw-bold' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "Tower Group Website"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "Google Adwords"))),
+                            React.createElement("h3", { className: 'fs-5 text-muted m-0 pt-5 pb-5', "data-kt-search-element": 'category-title' }, "Projects"),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement(KTIcon, { iconName: 'document', className: 'fs-2 text-primary' }))),
+                                React.createElement("div", { className: 'd-flex flex-column' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "Si-Fi Project by AU Themes"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "#45670"))),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement(KTIcon, { iconName: 'chart-simple', className: 'fs-2 text-primary' }))),
+                                React.createElement("div", { className: 'd-flex flex-column' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "Shopix Mobile App Planning"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "#45690"))),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement(KTIcon, { iconName: 'message-text-2', className: 'fs-2 text-primary' }))),
+                                React.createElement("div", { className: 'd-flex flex-column' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "Finance Monitoring SAAS Discussion"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "#21090"))),
+                            React.createElement("a", { href: '/#', className: 'd-flex text-gray-900 text-hover-primary align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement(KTIcon, { iconName: 'profile-circle', className: 'fs-2 text-primary' }))),
+                                React.createElement("div", { className: 'd-flex flex-column' },
+                                    React.createElement("span", { className: 'fs-6 fw-bold' }, "Dashboard Analitics Launch"),
+                                    React.createElement("span", { className: 'fs-7 fw-bold text-muted' }, "#34560"))))),
+                    React.createElement("div", { ref: suggestionsElement, className: 'mb-4', "data-kt-search-element": 'main' },
+                        React.createElement("div", { className: 'd-flex flex-stack fw-bold mb-4' },
+                            React.createElement("span", { className: 'text-muted fs-6 me-2' }, "Recently Searched:")),
+                        React.createElement("div", { className: 'scroll-y mh-200px mh-lg-325px' },
+                            React.createElement("div", { className: 'd-flex align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement(KTIcon, { iconName: 'phone', className: 'fs-2 text-primary' }))),
+                                React.createElement("div", { className: 'd-flex flex-column' },
+                                    React.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "BoomApp by Keenthemes"),
+                                    React.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#45789"))),
+                            React.createElement("div", { className: 'd-flex align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement(KTIcon, { iconName: 'chart-simple', className: 'fs-2 text-primary' }))),
+                                React.createElement("div", { className: 'd-flex flex-column' },
+                                    React.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "\"Kept API Project Meeting"),
+                                    React.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#84050"))),
+                            React.createElement("div", { className: 'd-flex align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement(KTIcon, { iconName: 'chart', className: 'fs-2 text-primary' }))),
+                                React.createElement("div", { className: 'd-flex flex-column' },
+                                    React.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "\"KPI Monitoring App Launch"),
+                                    React.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#84250"))),
+                            React.createElement("div", { className: 'd-flex align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement(KTIcon, { iconName: 'chart-simple-3', className: 'fs-2 text-primary' }))),
+                                React.createElement("div", { className: 'd-flex flex-column' },
+                                    React.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "Project Reference FAQ"),
+                                    React.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#67945"))),
+                            React.createElement("div", { className: 'd-flex align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement(KTIcon, { iconName: 'sms', className: 'fs-2 text-primary' }))),
+                                React.createElement("div", { className: 'd-flex flex-column' },
+                                    React.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "\"FitPro App Development"),
+                                    React.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#84250"))),
+                            React.createElement("div", { className: 'd-flex align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement(KTIcon, { iconName: 'bank', className: 'fs-2 text-primary' }))),
+                                React.createElement("div", { className: 'd-flex flex-column' },
+                                    React.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "Shopix Mobile App"),
+                                    React.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#45690"))),
+                            React.createElement("div", { className: 'd-flex align-items-center mb-5' },
+                                React.createElement("div", { className: 'symbol symbol-40px me-4' },
+                                    React.createElement("span", { className: 'symbol-label bg-light' },
+                                        React.createElement(KTIcon, { iconName: 'chart-simple-3', className: 'fs-2 text-primary' }))),
+                                React.createElement("div", { className: 'd-flex flex-column' },
+                                    React.createElement("a", { href: '/#', className: 'fs-6 text-gray-800 text-hover-primary fw-bold' }, "\"Landing UI Design\" Launch"),
+                                    React.createElement("span", { className: 'fs-7 text-muted fw-bold' }, "#24005"))))),
+                    React.createElement("div", { ref: emptyElement, "data-kt-search-element": 'empty', className: 'text-center d-none' },
+                        React.createElement("div", { className: 'pt-10 pb-10' },
+                            React.createElement(KTIcon, { iconName: 'search-list', className: 'fs-4x opacity-50' })),
+                        React.createElement("div", { className: 'pb-15 fw-bold' },
+                            React.createElement("h3", { className: 'text-gray-600 fs-5 mb-2' }, "No result found"),
+                            React.createElement("div", { className: 'text-muted fs-7' }, "Please try again with a different query")))),
+                React.createElement("form", { className: `pt-1 ${menuState === 'advanced' ? '' : 'd-none'}` },
+                    React.createElement("h3", { className: 'fw-bold text-gray-900 mb-7' }, "Advanced Search"),
+                    React.createElement("div", { className: 'mb-5' },
+                        React.createElement("input", { type: 'text', className: 'form-control form-control-sm form-control-solid', placeholder: 'Contains the word', name: 'query' })),
+                    React.createElement("div", { className: 'mb-5' },
+                        React.createElement("div", { className: 'nav-group nav-group-fluid' },
+                            React.createElement("label", null,
+                                React.createElement("input", { type: 'radio', className: 'btn-check', name: 'type', value: 'has', defaultChecked: true }),
+                                React.createElement("span", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary' }, "All")),
+                            React.createElement("label", null,
+                                React.createElement("input", { type: 'radio', className: 'btn-check', name: 'type', value: 'users' }),
+                                React.createElement("span", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary px-4' }, "Users")),
+                            React.createElement("label", null,
+                                React.createElement("input", { type: 'radio', className: 'btn-check', name: 'type', value: 'orders' }),
+                                React.createElement("span", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary px-4' }, "Orders")),
+                            React.createElement("label", null,
+                                React.createElement("input", { type: 'radio', className: 'btn-check', name: 'type', value: 'projects' }),
+                                React.createElement("span", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary px-4' }, "Projects")))),
+                    React.createElement("div", { className: 'mb-5' },
+                        React.createElement("input", { type: 'text', name: 'assignedto', className: 'form-control form-control-sm form-control-solid', placeholder: 'Assigned to' })),
+                    React.createElement("div", { className: 'mb-5' },
+                        React.createElement("input", { type: 'text', name: 'collaborators', className: 'form-control form-control-sm form-control-solid', placeholder: 'Collaborators' })),
+                    React.createElement("div", { className: 'mb-5' },
+                        React.createElement("div", { className: 'nav-group nav-group-fluid' },
+                            React.createElement("label", null,
+                                React.createElement("input", { type: 'radio', className: 'btn-check', name: 'attachment', value: 'has', defaultChecked: true }),
+                                React.createElement("span", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary' }, "Has attachment")),
+                            React.createElement("label", null,
+                                React.createElement("input", { type: 'radio', className: 'btn-check', name: 'attachment', value: 'any' }),
+                                React.createElement("span", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary px-4' }, "Any")))),
+                    React.createElement("div", { className: 'mb-5' },
+                        React.createElement("select", { name: 'timezone', "aria-label": 'Select a Timezone', "data-control": 'select2', "data-placeholder": 'date_period', className: 'form-select form-select-sm form-select-solid' },
+                            React.createElement("option", { value: 'next' }, "Within the next"),
+                            React.createElement("option", { value: 'last' }, "Within the last"),
+                            React.createElement("option", { value: 'between' }, "Between"),
+                            React.createElement("option", { value: 'on' }, "On"))),
+                    React.createElement("div", { className: 'row mb-8' },
+                        React.createElement("div", { className: 'col-6' },
+                            React.createElement("input", { type: 'number', name: 'date_number', className: 'form-control form-control-sm form-control-solid', placeholder: 'Lenght' })),
+                        React.createElement("div", { className: 'col-6' },
+                            React.createElement("select", { name: 'date_typer', "aria-label": 'Select a Timezone', "data-control": 'select2', "data-placeholder": 'Period', className: 'form-select form-select-sm form-select-solid' },
+                                React.createElement("option", { value: 'days' }, "Days"),
+                                React.createElement("option", { value: 'weeks' }, "Weeks"),
+                                React.createElement("option", { value: 'months' }, "Months"),
+                                React.createElement("option", { value: 'years' }, "Years")))),
+                    React.createElement("div", { className: 'd-flex justify-content-end' },
+                        React.createElement("button", { onClick: (e) => {
                                 e.preventDefault();
                                 setMenuState('main');
                             }, className: 'btn btn-sm btn-light fw-bolder btn-active-light-primary me-2' }, "Cancel"),
-                        react_1.default.createElement("a", { href: '/#', className: 'btn btn-sm fw-bolder btn-primary', "data-kt-search-element": 'advanced-options-form-search' }, "Search"))),
-                react_1.default.createElement("form", { className: "pt-1 ".concat(menuState === 'preferences' ? '' : 'd-none') },
-                    react_1.default.createElement("h3", { className: 'fw-bold text-gray-900 mb-7' }, "Search Preferences"),
-                    react_1.default.createElement("div", { className: 'pb-4 border-bottom' },
-                        react_1.default.createElement("label", { className: 'form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack' },
-                            react_1.default.createElement("span", { className: 'form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2' }, "Projects"),
-                            react_1.default.createElement("input", { className: 'form-check-input', type: 'checkbox', value: '1', defaultChecked: true }))),
-                    react_1.default.createElement("div", { className: 'py-4 border-bottom' },
-                        react_1.default.createElement("label", { className: 'form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack' },
-                            react_1.default.createElement("span", { className: 'form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2' }, "Targets"),
-                            react_1.default.createElement("input", { className: 'form-check-input', type: 'checkbox', value: '1', defaultChecked: true }))),
-                    react_1.default.createElement("div", { className: 'py-4 border-bottom' },
-                        react_1.default.createElement("label", { className: 'form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack' },
-                            react_1.default.createElement("span", { className: 'form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2' }, "Affiliate Programs"),
-                            react_1.default.createElement("input", { className: 'form-check-input', type: 'checkbox', value: '1' }))),
-                    react_1.default.createElement("div", { className: 'py-4 border-bottom' },
-                        react_1.default.createElement("label", { className: 'form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack' },
-                            react_1.default.createElement("span", { className: 'form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2' }, "Referrals"),
-                            react_1.default.createElement("input", { className: 'form-check-input', type: 'checkbox', value: '1', defaultChecked: true }))),
-                    react_1.default.createElement("div", { className: 'py-4 border-bottom' },
-                        react_1.default.createElement("label", { className: 'form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack' },
-                            react_1.default.createElement("span", { className: 'form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2' }, "Users"),
-                            react_1.default.createElement("input", { className: 'form-check-input', type: 'checkbox' }))),
-                    react_1.default.createElement("div", { className: 'd-flex justify-content-end pt-7' },
-                        react_1.default.createElement("button", { onClick: function (e) {
+                        React.createElement("a", { href: '/#', className: 'btn btn-sm fw-bolder btn-primary', "data-kt-search-element": 'advanced-options-form-search' }, "Search"))),
+                React.createElement("form", { className: `pt-1 ${menuState === 'preferences' ? '' : 'd-none'}` },
+                    React.createElement("h3", { className: 'fw-bold text-gray-900 mb-7' }, "Search Preferences"),
+                    React.createElement("div", { className: 'pb-4 border-bottom' },
+                        React.createElement("label", { className: 'form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack' },
+                            React.createElement("span", { className: 'form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2' }, "Projects"),
+                            React.createElement("input", { className: 'form-check-input', type: 'checkbox', value: '1', defaultChecked: true }))),
+                    React.createElement("div", { className: 'py-4 border-bottom' },
+                        React.createElement("label", { className: 'form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack' },
+                            React.createElement("span", { className: 'form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2' }, "Targets"),
+                            React.createElement("input", { className: 'form-check-input', type: 'checkbox', value: '1', defaultChecked: true }))),
+                    React.createElement("div", { className: 'py-4 border-bottom' },
+                        React.createElement("label", { className: 'form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack' },
+                            React.createElement("span", { className: 'form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2' }, "Affiliate Programs"),
+                            React.createElement("input", { className: 'form-check-input', type: 'checkbox', value: '1' }))),
+                    React.createElement("div", { className: 'py-4 border-bottom' },
+                        React.createElement("label", { className: 'form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack' },
+                            React.createElement("span", { className: 'form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2' }, "Referrals"),
+                            React.createElement("input", { className: 'form-check-input', type: 'checkbox', value: '1', defaultChecked: true }))),
+                    React.createElement("div", { className: 'py-4 border-bottom' },
+                        React.createElement("label", { className: 'form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack' },
+                            React.createElement("span", { className: 'form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2' }, "Users"),
+                            React.createElement("input", { className: 'form-check-input', type: 'checkbox' }))),
+                    React.createElement("div", { className: 'd-flex justify-content-end pt-7' },
+                        React.createElement("button", { onClick: (e) => {
                                 e.preventDefault();
                                 setMenuState('main');
                             }, className: 'btn btn-sm btn-light fw-bolder btn-active-light-primary me-2' }, "Cancel"),
-                        react_1.default.createElement("button", { className: 'btn btn-sm fw-bolder btn-primary' }, "Save Changes")))))));
+                        React.createElement("button", { className: 'btn btn-sm fw-bolder btn-primary' }, "Save Changes")))))));
 };
-exports.Search = Search;
+export { Search };