@verdocs/web-sdk 1.0.15 → 1.0.19

package/dist/collection/components/elements/search-box/search-box.js

@@ -1,26 +1,36 @@
-import { Component, Host, h, State, Event, Prop } from '@stencil/core';
+import { Component, Host, h, Event, Prop } from '@stencil/core';
 import SearchIcon from './search.svg';
 import CloseIcon from './close.svg';
 export class SearchBox {
   constructor() {
+    /**
+     * If set to a value other than 'all', a removeable filter indicator will be displayed.
+     */
     this.type = 'all';
+    /**
+     * The text search string entered by the user.
+     */
+    this.query = '';
   }
-  handleSubmit(e) {
+  handleSearch(e) {
     e.preventDefault();
-    this.search.emit({ type: this.type, q: this.q });
+    this.search.emit({ type: this.type, query: this.query });
   }
-  handleChange(event) {
-    this.q = event.target.value;
+  handleChange(e) {
+    this.queryChanged.emit(e.target.value);
+  }
+  handleClearFilter() {
+    this.typeChanged.emit('all');
   }
   render() {
     return (h(Host, null,
-      h("form", { onSubmit: e => this.handleSubmit(e) },
+      h("form", { onSubmit: e => this.handleSearch(e) },
         this.type !== undefined && this.type !== 'all' && (h("span", { class: "type" },
           this.type,
           "s ",
-          h("button", { class: "remove", innerHTML: CloseIcon }))),
-        h("input", { type: "text", placeholder: "search documents, templates, people...", value: this.q, onInput: e => this.handleChange(e) }),
-        h("button", { onClick: e => this.handleSubmit(e), class: "search" },
+          h("button", { class: "remove", innerHTML: CloseIcon, onClick: this.handleClearFilter }))),
+        h("input", { type: "text", placeholder: "search documents, templates, people...", value: this.query, onInput: e => this.handleChange(e) }),
+        h("button", { onClick: e => this.handleSearch(e), class: "search" },
           h("span", { innerHTML: SearchIcon }),
           "Search"))));
   }
@@ -48,16 +58,31 @@ export class SearchBox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "If set to a value other than 'all', a removeable filter indicator will be displayed."
       },
       "attribute": "type",
       "reflect": false,
       "defaultValue": "'all'"
+    },
+    "query": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The text search string entered by the user."
+      },
+      "attribute": "query",
+      "reflect": false,
+      "defaultValue": "''"
     }
   }; }
-  static get states() { return {
-    "q": {}
-  }; }
   static get events() { return [{
       "method": "search",
       "name": "search",
@@ -66,7 +91,7 @@ export class SearchBox {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Event fired when the query value has changed."
+        "text": "Event fired when the user changes the type."
       },
       "complexType": {
         "original": "ISearchEvent",
@@ -77,5 +102,39 @@ export class SearchBox {
           }
         }
       }
+    }, {
+      "method": "typeChanged",
+      "name": "typeChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the user changes the type."
+      },
+      "complexType": {
+        "original": "TContentType",
+        "resolved": "\"all\" | \"document\" | \"organization\" | \"template\"",
+        "references": {
+          "TContentType": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "queryChanged",
+      "name": "queryChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the user changes the query string."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
     }]; }
 }

package/dist/collection/components/elements/search-box/search-box.stories.js

@@ -7,7 +7,9 @@ export default {
   },
   argTypes: {
     search: { action: 'search' },
+    typeChanged: { action: 'typeChanged' },
+    queryChanged: { action: 'queryChanged' },
     type: { type: 'string', control: 'radio', options: ['all', 'document', 'template', 'organization'] },
   },
 };
-export const Default = ({ type, search }) => html `<search-box .type=${type} @search=${search} />`;
+export const Default = ({ type, search, typeChanged, queryChanged }) => html `<search-box .type=${type} @search=${search} @typeChanged=${typeChanged} @queryChanged=${queryChanged} />`;