Add label support

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>
 

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,14 +37,24 @@
 @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<>();
 
   /**
    * 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();
     });
   }
+
 }

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>

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);

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);
-}