feat: add named part in shadow DOM

.gitignore

@@ -8,3 +8,13 @@
 /package-lock.json
 /webpack.config.js
 /package.json
+/tsconfig.json
+/types.d.ts
+/vite.generated.ts
+/vite.config.ts
+/src/main/dev-bundle
+/src/main/bundles
+/src/main/frontend/generated
+/src/main/frontend/index.html
+/frontend/generated
+/frontend/index.html

pom.xml

@@ -4,19 +4,20 @@
 
     <groupId>com.flowingcode.addons</groupId>
     <artifactId>granite-alert</artifactId>
-    <version>2.0.1-SNAPSHOT</version>
+    <version>2.1.0-SNAPSHOT</version>
     <name>Granite Alert</name>
     <description>Integration of granite-alert for Vaadin Flow</description>
 
     <properties>
-        <vaadin.version>14.8.1</vaadin.version>
+        <vaadin.version>14.11.14</vaadin.version>
 
         <maven.compiler.source>1.8</maven.compiler.source>
         <maven.compiler.target>1.8</maven.compiler.target>
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
         <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 
         <jetty.version>9.4.36.v20210114</jetty.version>
+        <flowingcode.commons.demo.version>3.10.0</flowingcode.commons.demo.version>
     </properties>
 
 	<scm>
@@ -132,7 +133,7 @@
 		<dependency>
 			<groupId>com.flowingcode.vaadin.addons.demo</groupId>
 			<artifactId>commons-demo</artifactId>
-			<version>3.5.0</version>
+			<version>${flowingcode.commons.demo.version}</version>
 			<scope>test</scope>
 		</dependency>
     </dependencies>
@@ -377,6 +378,7 @@
 				<maven.compiler.target>17</maven.compiler.target>
 				<vaadin.version>24.2.6</vaadin.version>
 				<jetty.version>11.0.12</jetty.version>
+				<flowingcode.commons.demo.version>5.2.0</flowingcode.commons.demo.version>
 			</properties>
 		</profile>
 
@@ -387,15 +389,8 @@
 				<maven.compiler.target>21</maven.compiler.target>
 				<vaadin.version>25.0.0-beta5</vaadin.version>
 				<jetty.version>11.0.26</jetty.version>
+				<flowingcode.commons.demo.version>5.2.0</flowingcode.commons.demo.version>
 			</properties>
-			<dependencies>
-				<dependency>
-					<groupId>com.flowingcode.vaadin.addons.demo</groupId>
-					<artifactId>commons-demo</artifactId>
-					<version>5.0.0</version>
-					<scope>test</scope>
-				</dependency>
-			</dependencies>
 		</profile>
 
     </profiles>

src/main/resources/META-INF/frontend/granite-alert/granite-alert.js

@@ -2,7 +2,7 @@
  * #%L
  * Granite Alert
  * %%
- * Copyright (C) 2018 - 2020 Flowing Code
+ * Copyright (C) 2018 - 2026 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -72,7 +72,7 @@ class GraniteAlert extends PolymerElement {
           border-color: #ebccd1;
        }
       </style>
-      <div class$="alert {{level}} {{_hidden}}">
+      <div class$="alert {{level}} {{_hidden}}" part="alert">
         <slot></slot>
       </div>
     `;}

src/test/java/com/flowingcode/vaadin/addons/granitealert/GranitealertDemo.java

@@ -2,7 +2,7 @@
  * #%L
  * Granite Alert
  * %%
- * Copyright (C) 2018 - 2020 Flowing Code
+ * Copyright (C) 2018 - 2026 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,6 @@
 import com.flowingcode.vaadin.addons.granitealert.GraniteAlert.GraniteAlertLevel;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.dependency.CssImport;
-import com.vaadin.flow.component.dependency.StyleSheet;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.icon.VaadinIcon;
@@ -34,9 +33,9 @@
 @SuppressWarnings("serial")
 @PageTitle("Granite Alert Demo")
 @DemoSource
+@DemoSource(value = "/src/test/resources/META-INF/resources/frontend/styles/granitealert/demo-styles.css")
 @Route(value = "granite-alert/granite-alert", layout = GranitealertDemoView.class)
-@StyleSheet("context://frontend/styles/granitealert/demo-styles.css")
-@CssImport(value = "./styles/granitealert/custom-granite-styles.css", themeFor = "granite-alert-mixin")
+@CssImport("./styles/granitealert/demo-styles.css")
 public class GranitealertDemo extends Div {
 
 	private Div container = new Div();

src/test/java/com/flowingcode/vaadin/addons/granitealert/GranitealertDemoView.java

@@ -2,7 +2,7 @@
  * #%L
  * Granite Alert
  * %%
- * Copyright (C) 2018 - 2020 Flowing Code
+ * Copyright (C) 2018 - 2026 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,15 +23,13 @@
 import com.flowingcode.vaadin.addons.GithubLink;
 import com.flowingcode.vaadin.addons.demo.TabbedDemo;
 import com.vaadin.flow.component.dependency.CssImport;
-import com.vaadin.flow.component.dependency.StyleSheet;
 import com.vaadin.flow.router.ParentLayout;
 import com.vaadin.flow.router.Route;
 
 @SuppressWarnings("serial")
 @ParentLayout(DemoLayout.class)
 @Route("granite-alert")
-@StyleSheet("context://frontend/styles/granitealert/demo-styles.css")
-@CssImport(value = "./styles/granitealert/custom-granite-styles.css", themeFor = "granite-alert-mixin")
+@CssImport(value = "./styles/granitealert/demo-styles.css")
 @GithubLink("https://github.com/FlowingCode/GraniteAlertAddon")
 public class GranitealertDemoView extends TabbedDemo {
 

src/test/resources/META-INF/resources/frontend/styles/granitealert/demo-styles.css

@@ -2,7 +2,7 @@
  * #%L
  * Granite Alert
  * %%
- * Copyright (C) 2018 - 2020 Flowing Code
+ * Copyright (C) 2018 - 2026 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,6 +17,22 @@
  * limitations under the License.
  * #L%
  */
+granite-alert-mixin.boring::part(alert) {
+    color: var(--lumo-body-text-color);
+    background-color: white;
+    border-color: grey;
+}
+
+granite-alert-mixin.funny::part(alert) {
+    background: purple; 
+   	background: -webkit-linear-gradient(left, orange, yellow, green, cyan, blue, violet);
+   	background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
+   	background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
+   	background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
+   	color: black;
+   	border: none;
+}
+
 granite-alert-mixin vaadin-button {
 	background-color: transparent;
 	float: right;