feat(demo): add new demo with theme support

Author: paodb

src/test/java/com/flowingcode/vaadin/addons/chipfield/ChipfieldDemoView.java

@@ -36,6 +36,7 @@ public class ChipfieldDemoView extends TabbedDemo {
   private static final String DISABLED_DEMO = "Disabled";
   private static final String BINDER_DEMO = "Binder";
   private static final String READONLY_DEMO = "Readonly";
+  private static final String STYLED_DEMO = "Styled";
   private static final String DATAPROVIDER_SOURCE =
       "https://github.com/FlowingCode/ChipFieldAddon/blob/master/src/test/java/com/flowingcode/vaadin/addons/chipfield/DataProviderDemo.java";
   private static final String RESTRICTED_SOURCE =
@@ -46,6 +47,8 @@ public class ChipfieldDemoView extends TabbedDemo {
       "https://github.com/FlowingCode/ChipFieldAddon/blob/master/src/test/java/com/flowingcode/vaadin/addons/chipfield/BinderDemo.java";
   private static final String READONLY_SOURCE =
       "https://github.com/FlowingCode/ChipFieldAddon/blob/master/src/test/java/com/flowingcode/vaadin/addons/chipfield/ReadonlyDemo.java";
+  private static final String STYLED_SOURCE =
+      "https://github.com/FlowingCode/ChipFieldAddon/blob/master/src/test/java/com/flowingcode/vaadin/addons/chipfield/StyledDemo.java";
 
   public ChipfieldDemoView() {
 
@@ -54,5 +57,6 @@ public ChipfieldDemoView() {
     addDemo(new DisabledDemo(), DISABLED_DEMO, DISABLED_SOURCE);
     addDemo(new BinderDemo(), BINDER_DEMO, BINDER_SOURCE);
     addDemo(new ReadonlyDemo(), READONLY_DEMO, READONLY_SOURCE);
+    addDemo(new StyledDemo(), STYLED_DEMO, STYLED_SOURCE);
   }
 }

src/test/java/com/flowingcode/vaadin/addons/chipfield/StyledDemo.java

@@ -0,0 +1,28 @@
+package com.flowingcode.vaadin.addons.chipfield;
+
+import java.util.Arrays;
+import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+
+@CssImport(value = "./styles/paper-chip-styles.css", themeFor = "paper-chip")
+@CssImport(value = "./styles/paper-chip-input-autocomplete-styles.css", themeFor = "paper-chip-input-autocomplete")
+public class StyledDemo extends VerticalLayout {
+
+  public StyledDemo() {
+    ChipField<String> chf =
+        new ChipField<>("Select some planets (Allowed pattern [a-zA-Z])");
+    chf.setWidth("90%");
+    chf.setAvailableItems(
+        Arrays.asList(
+            "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"));
+    chf.setAllowedPattern("[a-zA-Z]");
+    chf.addSelectedItem("Mercury");
+    chf.addSelectedItem("Venus");
+    chf.setClosable(true);
+    
+    chf.setThemeName("styled-demo");
+    
+    add(chf);
+  }
+  
+}

src/test/resources/META-INF/resources/frontend/styles/paper-chip-input-autocomplete-styles.css

@@ -0,0 +1,25 @@
+:host([theme~="styled-demo"]) {
+	border: 1px solid #c1c1c1;
+    border-radius: 0.5em;
+    padding-left: 10px;
+    padding-bottom: 10px;
+}
+
+:host([theme~="styled-demo"]) paper-input {
+	
+	/* disable underline*/
+	--paper-input-container-underline: {
+	  	display: none;
+	};
+	   
+	/* disable on focus*/
+	--paper-input-container-underline-focus: {
+	  display: none;
+	};
+	
+	/* disable on input-disable*/
+	--paper-input-container-underline-disabled: {
+	  display: none;
+	};
+    
+}

src/test/resources/META-INF/resources/frontend/styles/paper-chip-styles.css

@@ -0,0 +1,14 @@
+:host([theme~="styled-demo"]) .chip {
+	border-radius: 4px;
+	background-color: #e9e9e9;
+}
+
+:host([theme~="styled-demo"]) .chip .label {
+	color: var(--lumo-primary-text-color);
+	font-size: 15px;	
+}
+
+:host([theme~="styled-demo"]) .chip .close {
+	color: var(--lumo-body-text-color);
+	background-color: transparent;
+}