From b88beffe499249f9d2742802339bcf27c171087d Mon Sep 17 00:00:00 2001
From: Paola De Bartolo <paola.debartolo@gmail.com>
Date: Fri, 19 Apr 2024 12:41:06 -0300
Subject: [PATCH 1/3] feat: add label support

Close #19
---
 .../vaadin/addons/badgelist/BadgeList.java    | 14 ++++++-
 .../resources/frontend/src/fc-badge-list.ts   | 40 +++++++++++++++++--
 2 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java b/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java
index eca46dc..a66d963 100644
--- a/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java
+++ b/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java
@@ -20,6 +20,7 @@
 package com.flowingcode.vaadin.addons.badgelist;
 
 import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.HasLabel;
 import com.vaadin.flow.component.HasSize;
 import com.vaadin.flow.component.HasTheme;
 import com.vaadin.flow.component.Tag;
@@ -36,7 +37,7 @@
 @JsModule("@vaadin/vaadin-lumo-styles/badge-global.js")
 @JsModule("./src/fc-badge-list.ts")
 @Tag("fc-badge-list")
-public class BadgeList extends Component implements HasTheme, HasSize {
+public class BadgeList extends Component implements HasTheme, HasSize, HasLabel {
 
   private List<Badge> badges = new ArrayList<>();
   
@@ -44,6 +45,16 @@ public class BadgeList extends Component implements HasTheme, HasSize {
    * Creates a new instance of BadgeList.
    */
   public BadgeList() {}
+  
+  /**
+   * Creates a new instance of BadgeList with the given label.
+   * 
+   * @param label the BadgeList label
+   */
+  public BadgeList(String label) {
+    this();
+    this.setLabel(label);
+  }
 
   /**
    * Creates a new instance of BadgeList with the supplied list of {@link Badge badges}.
@@ -78,4 +89,5 @@ private void clearBadges() {
       badge.removeFromParent();
     });
   }
+
 }
diff --git a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts
index 928218a..624a10f 100644
--- a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts
+++ b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts
@@ -42,7 +42,10 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) {
 
   @property()
   theme : string | null = null;
-
+  
+  @property()
+  label : ''
+    
   @state()
   private overflowItems: ContextMenuItem[] = [];
 
@@ -52,11 +55,19 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) {
     
     :host {
       --badge-list-badges-margin: 0 calc(var(--lumo-space-s) / 2);
+      --badge-list-label-color: var(--lumo-secondary-text-color);
+      --badge-list-label-font-weight: 500;
+      --badge-list-label-font-size: var(--lumo-font-size-s);
+      --badge-list-label-margin-left: calc(var(--lumo-border-radius-m) / 4);
     }
     
     [part="container"] ::slotted(span[theme~="badge"]) {
 	    margin: var(--badge-list-badges-margin);
     }
+
+    [part="container"] ::slotted(span[theme~="badge"]:first-child) {
+	    margin-left: 0;
+    }
     
     [hidden] {
       display: none;
@@ -73,6 +84,26 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) {
     [part="overflow-badge"] {
       margin: var(--badge-list-badges-margin);
     }   
+
+    [part="label"] {
+      align-self: flex-start;
+      color: var(--badge-list-label-color);
+      font-weight: var(--badge-list-label-font-weight);
+      font-size: var(--badge-list-label-font-size);
+      margin-left: var(--badge-list-label-margin-left);
+      transition: color 0.2s;
+      line-height: inherit;
+      padding-right: 1em;
+      padding-bottom: 0.5em;
+      padding-top: 0.25em;
+      margin-top: -0.25em;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      position: relative;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
     `
   ];
 
@@ -185,8 +216,11 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) {
 
   render() {
     return html`
-      <div part="container" class="container">
-        <slot name="badges"></slot>
+      <div part="label">
+          <label for="container">${this.label}</label>
+      </div>
+      <div part="container" class="container" id="container">
+   	    <slot name="badges"></slot>
         <vaadin-context-menu open-on="click" .items=${this.overflowItems}>
         	<span part="overflow-badge" theme="badge ${this.theme}" class="overflow-badge" hidden>
             <vaadin-icon icon="lumo:plus" style="padding: var(--lumo-space-xs)"></vaadin-icon>

From 37afa30f56011671fcde8887835e11c6f15b4889 Mon Sep 17 00:00:00 2001
From: Paola De Bartolo <paola.debartolo@gmail.com>
Date: Fri, 19 Apr 2024 12:41:25 -0300
Subject: [PATCH 2/3] refactor(demo): update demo to use label support

---
 .../vaadin/addons/badgelist/ReadOnlyBinderDemo.java         | 5 +----
 .../META-INF/frontend/styles/badge-list-demo-styles.css     | 6 ------
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java
index 8d0c4d2..13ff8ca 100644
--- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java
+++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java
@@ -63,7 +63,7 @@ public ReadOnlyBinderDemo() {
         IntStream.rangeClosed(1, 12).mapToObj(i -> "ROLE" + i).collect(Collectors.toList());
     rolesComboBox.setItems(roles);
 
-    rolesBadgeList = new BadgeList();
+    rolesBadgeList = new BadgeList("Roles");
     readonlyBadgeList = new ReadOnlyHasValue<List<Badge>>(rolesBadgeList::setBadges);
 
     binder = new Binder<>();
@@ -81,9 +81,6 @@ public ReadOnlyBinderDemo() {
     buttonsLayout.setJustifyContentMode(JustifyContentMode.END);
 
     VerticalLayout layout = new VerticalLayout();
-    Span span = new Span("Roles");
-    span.addClassName("readonly-badge-list-label");
-    rolesBadgeListDiv.add(span);
     rolesBadgeListDiv.setWidth("450px");
     rolesBadgeListDiv.add(rolesBadgeList);
     layout.add(firstName, lastName, rolesComboBox, rolesBadgeListDiv);
diff --git a/src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css b/src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css
index 3474075..3feb0ee 100644
--- a/src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css
+++ b/src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css
@@ -36,9 +36,3 @@ fc-badge-list[class="styled-badges-second-example"]::part(overflow-badge), .cust
 	border: 1px green dashed;
 	border-radius: 0;
 }
-
-.readonly-badge-list-label {
-	color: var(--lumo-secondary-text-color);
-    font-weight: 500;
-    font-size: var(--lumo-font-size-s);
-}

From 99a4820322867d37b6f6658daf74128826d9ce2a Mon Sep 17 00:00:00 2001
From: Paola De Bartolo <paola.debartolo@gmail.com>
Date: Fri, 19 Apr 2024 12:41:56 -0300
Subject: [PATCH 3/3] build(demo): update commons-demo version to 3.9.0

---
 pom.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pom.xml b/pom.xml
index 34add2e..b5e9642 100644
--- a/pom.xml
+++ b/pom.xml
@@ -18,7 +18,7 @@
 		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 		<drivers.dir>${project.basedir}/drivers</drivers.dir>
 		<jetty.version>11.0.12</jetty.version>
-		<flowingcode.commons.demo.version>3.8.0</flowingcode.commons.demo.version>
+		<flowingcode.commons.demo.version>3.9.0</flowingcode.commons.demo.version>
 		<frontend.hotdeploy>true</frontend.hotdeploy>
 	</properties>