Chip Javascript plugin usage added

materialize-css/index.d.ts

@@ -70,7 +70,7 @@ declare namespace Materialize {
          */
         outDuration?: number;
 
-        
+
         /**
          * If true, constrainWidth to the size of the dropdown activator.
          * Default: true
@@ -343,6 +343,35 @@ declare namespace Materialize {
         responsiveThreshold?: number;
     }
 
+    interface ChipDataObject {
+        tag: string,
+        image?: string,
+        id?: number
+    }
+
+    interface ChipOptions {
+        /**
+         * Set the chip data 
+         */
+        data?: Materialize.ChipDataObject[];
+        /**
+         * Set first placeholder when there are no tags
+         */
+        placeholder?: string;
+        /**
+         * Set second placeholder when adding additional tags.
+         */
+        secondaryPlaceholder?: string;
+        /**
+         * Set autocomplete data.
+         */
+        autocompleteData?: any;
+        /**
+         * Set autocomplete limit.
+         */
+        autocompleteLimit?: number;
+    }
+
 
     /**
      * The Materialize object
@@ -548,4 +577,18 @@ interface JQuery {
      * @name TabOptions options jQuery plugin options
      */
     tabs(options?: Materialize.TabOptions): JQuery;
+
+    /**
+     * Chip Initialization
+     * 
+     * @name ChipOptions options Material chip options
+     */
+    material_chip(options?: Materialize.ChipOptions): JQuery;
+
+    /**
+     * To access chip data
+     * 
+     * @name string method name of the method to invoke
+     */
+    material_chip(method: string): Materialize.ChipDataObject[] | Materialize.ChipDataObject;
 }

materialize-css/materialize-css-tests.ts

@@ -245,4 +245,34 @@ $(tabsHtml).tabs({ onShow: (currentTab: any) => { console.log(currentTab) }, swi
 // Transitions
 Materialize.showStaggeredList('#staggered-test');
 
-Materialize.updateTextFields();
+Materialize.updateTextFields();
+
+let chipsHTML = '<div class="chips"></div>' +
+  '<div class="chips chips-initial"></div>' +
+  '<div class="chips chips-placeholder"></div>' +
+  '<div class="chips chips-autocomplete"></div>';
+
+$(chipsHTML).material_chip();
+$(chipsHTML).material_chip({
+  data: [{
+    tag: 'Apple',
+  }, {
+    tag: 'Microsoft',
+  }, {
+    tag: 'Google',
+  }],
+});
+
+$('.chips-placeholder').material_chip({
+  placeholder: 'Enter a tag',
+  secondaryPlaceholder: '+Tag',
+});
+$('.chips-autocomplete').material_chip({
+  autocompleteData: {
+    'Apple': null,
+    'Microsoft': null,
+    'Google': null
+  }
+});
+
+let chipData: Materialize.ChipDataObject | Materialize.ChipDataObject[] = $('.chips-initial').material_chip('data');