feat!: add support for shadow DOM styling

Close #41

Author: javier-godoy

pom.xml

@@ -4,7 +4,7 @@
 
     <groupId>com.flowingcode.addons.carousel</groupId>
     <artifactId>carousel-addon</artifactId>
-    <version>2.1.5-SNAPSHOT</version>
+    <version>3.0.0-SNAPSHOT</version>
     <name>Carousel Addon</name>
     <description>Integration of @xpertsea/paper-slider for Vaadin 14+</description>
 

src/main/java/com/flowingcode/vaadin/addons/carousel/Carousel.java

@@ -25,6 +25,7 @@
 import com.vaadin.flow.component.DomEvent;
 import com.vaadin.flow.component.EventData;
 import com.vaadin.flow.component.HasSize;
+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;
@@ -36,10 +37,10 @@
  * parameters, such as duration of transition, start position, maximum height and disabling swipe.
  */
 @SuppressWarnings("serial")
-@Tag("l2t-paper-slider")
+@Tag("fc-l2t-paper-slider")
 @NpmPackage(value = "@polymer/iron-a11y-keys-behavior", version = "3.0.1")
-@JsModule("./paper-slider/l2t-paper-slider.js")
-public class Carousel extends Component implements HasSize {
+@JsModule("./paper-slider/fc-l2t-paper-slider.js")
+public class Carousel extends Component implements HasSize, HasTheme {
 
   private static final String HIDE_NAV = "hideNav";
   private static final String DISABLE_SWIPE = "disableSwipe";

src/main/resources/META-INF/resources/frontend/paper-slider/fc-l2t-paper-slider.js

@@ -0,0 +1,34 @@
+/*-
+ * #%L
+ * Carousel Addon
+ * %%
+ * Copyright (C) 2024 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import './l2t-paper-slider.js';
+
+import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+class FCL2TPaperSlider extends ThemableMixin(customElements.get('l2t-paper-slider')) {
+    static get is() { return 'fc-l2t-paper-slider'; }
+
+    static get template() {
+      return html`${super.template}`;
+    }  
+};
+
+customElements.define(FCL2TPaperSlider.is, FCL2TPaperSlider);

src/main/resources/META-INF/resources/frontend/paper-slider/l2t-paper-slider.js

@@ -86,7 +86,6 @@ Polymer$0({
         display: box;
         display: -webkit-box;
         white-space: nowrap;
-        @apply --paper-slider-styles;
       }
 
       .slider__slides {
@@ -115,7 +114,6 @@ Polymer$0({
         left: 50%;
         -webkit-transform: translateX(-50%);
         transform: translateX(-50%);
-        @apply --paper-slider-dot-container-styles;
       }
 
       *[hidden] {
@@ -131,7 +129,6 @@ Polymer$0({
         background: var(--paper-slide-dot, rgba(255, 255, 255, .5));
         border-radius: 8px;
         cursor: pointer;
-        @apply --paper-slide-dot-styles;
       }
 
       .slider__dot:focus {

src/test/java/com/flowingcode/vaadin/addons/carousel/CarouselDemoView.java

@@ -37,6 +37,7 @@ public CarouselDemoView() {
     addDemo(ListenerDemo.class);
     addDemo(AutoProgressDemo.class);
     addDemo(SlideButtonsDemo.class);
+    addDemo(CustomThemeDemo.class);
     setSizeFull();
   }
 

src/test/java/com/flowingcode/vaadin/addons/carousel/CustomThemeDemo.java

@@ -0,0 +1,64 @@
+/*-
+ * #%L
+ * Carousel Addon
+ * %%
+ * Copyright (C) 2018 - 2024 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package com.flowingcode.vaadin.addons.carousel;
+
+import com.flowingcode.vaadin.addons.demo.DemoSource;
+import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+
+@PageTitle("Styling")
+@DemoSource
+@DemoSource("src/test/resources/META-INF/resources/frontend/carousel-demo-styles.css")
+@Route(value = "carousel/custom-theme", layout = CarouselDemoView.class)
+@SuppressWarnings("serial")
+@CssImport(value = "./carousel-demo-styles.css", themeFor = "fc-l2t-paper-slider")
+public class CustomThemeDemo extends VerticalLayout {
+
+  public CustomThemeDemo() {
+    Slide s1 =
+        new Slide(
+            CarouselDemoView.createSlideContent(
+                "Slide 1",
+                "https://www.flowingcode.com/wp-content/uploads/2018/04/birthday-3021071_640.jpg"));
+    Slide s2 =
+        new Slide(
+            CarouselDemoView.createSlideContent(
+                "Slide 2",
+                "https://2.bp.blogspot.com/-nvtIfgN8duc/XKUQh9VEyFI/AAAAAAAABT8/mE7P45E2uqwWlkKimAmes7fT2rdW9UDWwCEwYBhgL/s320/anniversary_1.jpg"));
+    Slide s3 =
+        new Slide(
+            CarouselDemoView.createSlideContent(
+                "Slide 3",
+                "https://www.flowingcode.com/wp-content/uploads/2020/04/photo4blog-300x300.jpg"));
+    Slide s4 =
+        new Slide(
+            CarouselDemoView.createSlideContent(
+                "Slide 4",
+                "https://www.flowingcode.com/wp-content/uploads/2021/03/happy_birthday_2.jpg"));
+
+    Carousel c = new Carousel(s1, s2, s3, s4);
+    c.setSizeFull();
+    c.setThemeName("custom-theme");
+
+    add(c);
+  }
+}

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

@@ -0,0 +1,3 @@
+:host([theme~="custom-theme"]) .slider__dots > span { 
+	background: purple;
+}