CSD-3571 [Feat] - search and filter

.eslintrc

@@ -0,0 +1,23 @@
+{
+  "extends": "fliplet",
+  "env": {
+    "node": true,
+    "es6": true,
+    "jasmine": true,
+    "browser": true,
+    "jquery": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "globals": {
+    "_": true,
+    "Fliplet": true,
+    "interfaceBrowser": true,
+    "buildBrowser": true,
+    "interfaceUrl": true,
+    "buildUrl": true,
+    "widgetInstance": true,
+    "buildSelector": true
+  }
+}

.jshintrc

@@ -0,0 +1,16 @@
+{
+  "esversion": 6,
+  "camelcase": true,
+  "curly": true,
+  "eqeqeq": true,
+  "freeze": true,
+  "indent": 2,
+  "newcap": true,
+  "quotmark": "single",
+  "maxdepth": 3,
+  "maxstatements": 15,
+  "maxlen": 80,
+  "eqnull": true,
+  "funcscope": true,
+  "node": true
+}

build.html

@@ -0,0 +1 @@
+<fl-helper name="search-and-filter" data-widget-name="search-and-filter" data-search-and-filter-id="{{id}}"></fl-helper>

css/build.css

@@ -0,0 +1,118 @@
+fl-helper[name="search-and-filter"] .sort-option-icon {
+  display: none;
+}
+
+fl-helper[name="search-and-filter"] .sort-option-icon.active {
+  display: block;
+}
+
+fl-helper[name="search-and-filter"] .sort-container {
+  display: inline-block;
+  position: relative;
+}
+
+fl-helper[name="search-and-filter"] .sort-container .sort-options-container {
+  min-width: 120px;
+  position: absolute;
+  background: #fff;
+  box-shadow: 0 0 14px 1px #e4e4e4;
+  border-radius: 4px;
+  right: 0;
+  top: 25px;
+  display: none;
+  z-index: 10;
+}
+
+fl-helper[name="search-and-filter"] .sort-container .sort-options-container ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+fl-helper[name="search-and-filter"] .sort-container .sort-options-container ul .sort-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  cursor: pointer;
+}
+
+fl-helper[name="search-and-filter"] .sort-container .sort-options-container ul .sort-option:hover {
+  background: #f8f8f8;
+  cursor: pointer;
+}
+
+fl-helper[name="search-and-filter"] .cursor-pointer {
+  cursor: pointer;
+}
+
+fl-helper[name="search-and-filter"] .bookmark-icon {
+  display: none;
+}
+
+fl-helper[name="search-and-filter"] .bookmark-icon.active {
+  display: inline-block;
+}
+
+fl-helper[name="search-and-filter"] .search-container {
+  user-select: none;
+  padding: 0 5px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+}
+
+fl-helper[name="search-and-filter"] .search-container .action-icons {
+  padding-top: 8px;
+}
+
+fl-helper[name="search-and-filter"] .search-container .action-icons i {
+  margin-left: 8px;
+}
+
+fl-helper[name="search-and-filter"] .search-filter-container {
+  display: flex;
+  align-items: center;
+  border: 1px solid #d5d5d5;
+  border-radius: 24px;
+  padding: 1px;
+  margin-top: 10px;
+  flex: 1 0 auto;
+}
+
+fl-helper[name="search-and-filter"] .search-filter-container .search-input {
+  flex: 1 0 auto;
+  border-color: transparent;
+  height: 42px;
+}
+
+fl-helper[name="search-and-filter"] .search-filter-container.search-input::placeholder {
+  color: #d5d5d5;
+  opacity: 1;
+}
+
+fl-helper[name="search-and-filter"] .search-input:focus {
+  border-color: transparent !important;
+  outline: none;
+}
+
+fl-helper[name="search-and-filter"] .search-input:focus-visible {
+  border-color: transparent !important;
+}
+
+fl-helper[name="search-and-filter"] .search-input:active {
+  border-color: transparent;
+}
+
+fl-helper[name="search-and-filter"] .search-button {
+  border-radius: 24px;
+  border-color: transparent;
+  background: #f2f0f0;
+  width: 80px;
+  height: 44px;
+}
+
+fl-helper[name="search-and-filter"] .fa-search {
+  padding: 0 5px;
+}

interface.html

@@ -0,0 +1 @@
+<!-- See js/interface.js for usage -->