Fixed an invalid debounce property

packages/stencil-library/custom-elements.json

@@ -1680,12 +1680,21 @@
           "tagName": "dnn-searchbox",
           "description": "",
           "attributes": [
+            {
+              "name": "debounce-time",
+              "type": {
+                "text": "number"
+              },
+              "description": "How many milliseconds to wait before firing the queryChanged event.",
+              "default": "500",
+              "required": false
+            },
             {
               "name": "debounced",
               "type": {
                 "text": "boolean"
               },
-              "description": "Debounces the queryChanged by 500ms.",
+              "description": "",
               "default": "true",
               "required": false
             },

packages/stencil-library/src/components.d.ts

@@ -549,7 +549,11 @@ export namespace Components {
     }
     interface DnnSearchbox {
         /**
-          * Debounces the queryChanged by 500ms.
+          * How many milliseconds to wait before firing the queryChanged event.
+         */
+        "debounceTime": number;
+        /**
+          * @deprecated Use debounceTime (or debounce-time) instead. Will be removed in v0.25.0 Debounces the queryChanged by 500ms.
          */
         "debounced": boolean;
         /**
@@ -1831,7 +1835,11 @@ declare namespace LocalJSX {
     }
     interface DnnSearchbox {
         /**
-          * Debounces the queryChanged by 500ms.
+          * How many milliseconds to wait before firing the queryChanged event.
+         */
+        "debounceTime"?: number;
+        /**
+          * @deprecated Use debounceTime (or debounce-time) instead. Will be removed in v0.25.0 Debounces the queryChanged by 500ms.
          */
         "debounced"?: boolean;
         /**

packages/stencil-library/src/components/dnn-searchbox/dnn-searchbox.tsx

@@ -1,5 +1,5 @@
 import { Component, Host, h, Event, EventEmitter, Watch, Prop, State } from '@stencil/core';
-import { Debounce } from '../../utilities/debounce';
+
 @Component({
   tag: 'dnn-searchbox',
   styleUrl: 'dnn-searchbox.scss',
@@ -13,10 +13,16 @@ export class DnnSearchbox {
   @Prop() placeholder?: string = "";
 
   /**
+   * @deprecated Use debounceTime (or debounce-time) instead. Will be removed in v0.25.0
    * Debounces the queryChanged by 500ms.
    */
   @Prop() debounced: boolean = true;
 
+  /**
+   * How many milliseconds to wait before firing the queryChanged event.
+   */
+  @Prop() debounceTime: number = 500;
+
   /** Sets the query */
   @Prop({mutable: true}) query: string = "";
 
@@ -27,27 +33,18 @@ export class DnnSearchbox {
   @Event() queryChanged: EventEmitter<string>;
 
   @Watch('query')
-  fireQueryChanged(){
-    if (this.debounced){
-      this.debouncedHandleQueryChanged();
-    }
-    else{
-      this.handleQueryChanged();
-    }
+  handleQueryChanged(){
+    clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(() => {
+      this.queryChanged.emit(this.query);
+    }, this.debounceTime);
   }
 
   @State() focused: any;
 
   private inputField: HTMLInputElement;
 
-  private handleQueryChanged(){
-    this.queryChanged.emit(this.query);
-  }
-
-  @Debounce(500)
-  private debouncedHandleQueryChanged(){
-    this.handleQueryChanged();
-  }
+  private debounceTimer: any = null;
 
   render() {
     return (

packages/stencil-library/src/components/dnn-searchbox/readme.md

@@ -7,11 +7,12 @@
 
 ## Properties
 
-| Property      | Attribute     | Description                          | Type      | Default |
-| ------------- | ------------- | ------------------------------------ | --------- | ------- |
-| `debounced`   | `debounced`   | Debounces the queryChanged by 500ms. | `boolean` | `true`  |
-| `placeholder` | `placeholder` | Sets the field placeholder text.     | `string`  | `""`    |
-| `query`       | `query`       | Sets the query                       | `string`  | `""`    |
+| Property       | Attribute       | Description                                                                                                                                                            | Type      | Default |
+| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
+| `debounceTime` | `debounce-time` | How many milliseconds to wait before firing the queryChanged event.                                                                                                    | `number`  | `500`   |
+| `debounced`    | `debounced`     | <span style="color:red">**[DEPRECATED]**</span> Use debounceTime (or debounce-time) instead. Will be removed in v0.25.0 Debounces the queryChanged by 500ms.<br/><br/> | `boolean` | `true`  |
+| `placeholder`  | `placeholder`   | Sets the field placeholder text.                                                                                                                                       | `string`  | `""`    |
+| `query`        | `query`         | Sets the query                                                                                                                                                         | `string`  | `""`    |
 
 
 ## Events

packages/stencil-library/src/index.html

@@ -723,7 +723,7 @@ <h2>dnn-searchbox</h2>
     <br /><br />
 
     <div style="display:flex;justify-content: space-between;">
-      <dnn-searchbox id="not-debounced" debounced="false" placeholder="Not debounced..." style="width: 48%;"></dnn-searchbox>
+      <dnn-searchbox id="not-debounced" placeholder="Not debounced..." style="width: 48%;" debounce-time="0"></dnn-searchbox>
       <span style="width: 48%;"></span>
     </div>
     <br /><br />

packages/stencil-library/src/utilities/debounce.ts

@@ -15,8 +15,6 @@ export function Debounce(debounceTime: number = 500){
                     resolve(originalMethod.apply(this, args));
                 }, debounceTime);
             })
-
         }
-
     }
 }

packages/stencil-library/vscode-data.json

@@ -718,9 +718,13 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "debounce-time",
+          "description": "How many milliseconds to wait before firing the queryChanged event."
+        },
         {
           "name": "debounced",
-          "description": "Debounces the queryChanged by 500ms."
+          "description": ""
         },
         {
           "name": "placeholder",