feat: add theme support

Close #55

Author: paodb

src/main/java/com/flowingcode/vaadin/addons/chipfield/Chip.java

@@ -20,6 +20,8 @@
 package com.flowingcode.vaadin.addons.chipfield;
 
 import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.HasStyle;
+import com.vaadin.flow.component.HasTheme;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.dependency.NpmPackage;
@@ -39,7 +41,7 @@
 @NpmPackage(value = "@polymer/paper-ripple", version = "^3.0.1")
 @NpmPackage(value = "@polymer/paper-styles", version = "^3.0.1")
 @JsModule("./paper-chip.js")
-public class Chip extends Component {
+public class Chip extends Component implements HasTheme, HasStyle {
 
   public static final String CHIP_LABEL = "event.detail.chipLabel";
   private String label;
@@ -49,7 +51,7 @@ public class Chip extends Component {
   public Chip(String label, boolean closable, Icon icon) {
     this.setLabel(label);
     this.setClosable(closable);
-    this.setIcon(icon);
+    this.setIcon(icon); 
   }
 
   public Chip(String chipText) {

src/main/java/com/flowingcode/vaadin/addons/chipfield/ChipField.java

@@ -19,6 +19,13 @@
  */
 package com.flowingcode.vaadin.addons.chipfield;
 
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Iterator;
+import java.util.List;
+import java.util.Optional;
+import java.util.concurrent.atomic.AtomicInteger;
+import java.util.stream.Stream;
 import com.vaadin.flow.component.AbstractField;
 import com.vaadin.flow.component.AttachEvent;
 import com.vaadin.flow.component.ComponentEvent;
@@ -27,6 +34,7 @@
 import com.vaadin.flow.component.EventData;
 import com.vaadin.flow.component.HasSize;
 import com.vaadin.flow.component.HasStyle;
+import com.vaadin.flow.component.HasTheme;
 import com.vaadin.flow.component.ItemLabelGenerator;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.dependency.JsModule;
@@ -40,13 +48,6 @@
 import elemental.json.JsonArray;
 import elemental.json.JsonObject;
 import elemental.json.impl.JreJsonFactory;
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.Iterator;
-import java.util.List;
-import java.util.Optional;
-import java.util.concurrent.atomic.AtomicInteger;
-import java.util.stream.Stream;
 
 @SuppressWarnings("serial")
 @Tag("paper-chip-input-autocomplete")
@@ -62,7 +63,7 @@
 @NpmPackage(value = "@polymer/paper-styles", version = "^3.0.1")
 @JsModule("./paper-chip-input-autocomplete.js")
 public class ChipField<T> extends AbstractField<ChipField<T>, List<T>>
-    implements HasStyle, HasItemsAndComponents<T>, HasDataProvider<T>, HasSize {
+    implements HasStyle, HasItemsAndComponents<T>, HasDataProvider<T>, HasSize, HasTheme {
 
   public static final String CHIP_LABEL = "event.detail.chipLabel";
 

src/main/resources/META-INF/frontend/paper-chip-input-autocomplete.js

@@ -39,8 +39,9 @@ import '@polymer/paper-ripple/paper-ripple.js';
 import '@polymer/paper-styles/default-theme.js';
 import './paper-chip-input.js';
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-class PaperChipInputAutocomplete extends PolymerElement {
+class PaperChipInputAutocomplete extends ThemableMixin(PolymerElement) {
 
     static get is() {
 				return 'paper-chip-input-autocomplete';
@@ -280,15 +281,17 @@ class PaperChipInputAutocomplete extends PolymerElement {
                         pattern="[[pattern]]"
                         required$="[[required]]"
                         auto-validate$="[[autoValidate]]"
-                        error-message="[[errorMessage]]">
+                        error-message="[[errorMessage]]"
+        				theme$="[[theme]]">
                         <div id="slot2" slot="prefix">
                             <dom-repeat items="[[items]]">
                                 <template>
                                     [[item.name]]
                                     <paper-chip id="paper-chip-[[item]]-[[index]]"
                                                 label="[[item]]"
                                                 closable="[[_isClosable(closable,readonly)]]"
-                                                on-chip-removed="_removeChip">
+                                                on-chip-removed="_removeChip"
+        										theme$="[[theme]]">
                                     </paper-chip>
                                 </template>
                             </dom-repeat>
@@ -310,7 +313,7 @@ class PaperChipInputAutocomplete extends PolymerElement {
                     </paper-listbox>
                 </paper-material>
             </template>
-        </dom-if>`
+        </dom-if>`;
     }
 
     connectedCallback() {

src/main/resources/META-INF/frontend/paper-chip-input.js

@@ -32,8 +32,9 @@ import '@polymer/paper-input/paper-input.js';
 import '@polymer/paper-styles/default-theme.js';
 import './paper-chip.js';
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-class PaperChipInput extends PolymerElement {
+class PaperChipInput extends ThemableMixin(PolymerElement) {
 
     static get is() {
 				return 'paper-chip-input';
@@ -72,7 +73,8 @@ class PaperChipInput extends PolymerElement {
                     label="[[label]]"
                     allowed-pattern="[[allowedPattern]]"
                     pattern="[[pattern]]"
-                    error-message="[[errorMessage]]">
+                    error-message="[[errorMessage]]"
+        			theme$="[[theme]]">
                     <slot id="slot" name="input" slot="prefix"></slot>
                     <div id="slot2" slot="prefix">
                         <dom-repeat items="[[items]]">
@@ -81,7 +83,8 @@ class PaperChipInput extends PolymerElement {
                                 <paper-chip id="paper-chip-[[item]]-[[index]]" 
                                             label="[[item]]" 
                                             closable$="[[closable]]" 
-                                            on-chip-removed="_removeChip">
+                                            on-chip-removed="_removeChip"
+        									theme$="[[theme]]">
                                 </paper-chip>
                             </template>
                         </dom-repeat>

src/main/resources/META-INF/frontend/paper-chip.js

@@ -31,8 +31,9 @@ import './skip-loading-font-roboto.js';
 import '@polymer/paper-styles/paper-styles.js';
 import '@polymer/iron-icons/iron-icons.js';
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-class PaperChip extends PolymerElement {
+class PaperChip extends ThemableMixin(PolymerElement) {
 
     static get is() {
 				return 'paper-chip';