feat: add HasLabel support with label constructors

Author: ngonzalezpazFC

src/main/frontend/fc-toggle-button.js

@@ -7,6 +7,7 @@ import { LitElement, html, css } from 'lit';
 class FCToggleButton extends LitElement {
   static properties = {
     checked: { type: Boolean, reflect: true },
+    label: { type: String },
     leftLabel: { type: String },
     rightLabel: { type: String },
     disabled: { type: Boolean, reflect: true },
@@ -17,15 +18,23 @@ class FCToggleButton extends LitElement {
   static styles = css`
     :host {
       display: inline-flex;
-      align-items: center;
-      gap: var(--lumo-space-s, 8px);
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--lumo-space-xs, 4px);
       font-family: var(--lumo-font-family);
       color: var(--lumo-body-text-color);
       cursor: pointer;
       user-select: none;
       transition: opacity 0.2s;
     }
 
+    .field-label {
+      font-size: var(--lumo-font-size-s, 14px);
+      font-weight: 500;
+      color: var(--lumo-secondary-text-color);
+      line-height: 1;
+    }
+
     :host([disabled]) {
       opacity: 0.5;
       cursor: not-allowed;
@@ -239,6 +248,7 @@ class FCToggleButton extends LitElement {
   constructor() {
     super();
     this.checked = false;
+    this.label = '';
     this.leftLabel = '';
     this.rightLabel = '';
     this.disabled = false;
@@ -259,6 +269,7 @@ class FCToggleButton extends LitElement {
 
   render() {
     return html`
+      ${this.label ? html`<span class="field-label">${this.label}</span>` : ''}
       <div class="container">
         <slot name="left"></slot>
         ${this.leftLabel ? html`<span class="label ${this.highlightLabel && !this.checked ? 'active' : this.highlightLabel ? 'inactive' : ''}">${this.leftLabel}</span>` : ''}

src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java

@@ -23,6 +23,7 @@
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.HasAriaLabel;
 import com.vaadin.flow.component.HasComponents;
+import com.vaadin.flow.component.HasLabel;
 import com.vaadin.flow.component.HasSize;
 import com.vaadin.flow.component.ItemLabelGenerator;
 import com.vaadin.flow.component.Tag;
@@ -46,6 +47,7 @@
 public class FCToggleButton extends AbstractSinglePropertyField<FCToggleButton, Boolean>
     implements HasSize,
         HasComponents,
+        HasLabel,
         HasAriaLabel,
         HasTooltip,
         HasThemeVariant<FCToggleButtonVariant> {
@@ -61,6 +63,7 @@ public FCToggleButton() {
      * Creates a new toggle button with the given initial value.
      *
      * @param initialValue the initial checked state
+     * @since 1.0.0
      */
     public FCToggleButton(boolean initialValue) {
         super("checked", initialValue, false);
@@ -70,6 +73,29 @@ public FCToggleButton(boolean initialValue) {
         setSynchronizedEvent("checked-changed");
     }
 
+    /**
+     * Creates a new toggle button with the given label and an initial value of {@code false}.
+     *
+     * @param label the label text shown above the toggle
+     * @since 1.0.0
+     */
+    public FCToggleButton(String label) {
+        this(false);
+        setLabel(label);
+    }
+
+    /**
+     * Creates a new toggle button with the given label and initial value.
+     *
+     * @param label the label text shown above the toggle
+     * @param initialValue the initial checked state
+     * @since 1.0.0
+     */
+    public FCToggleButton(String label, boolean initialValue) {
+        this(initialValue);
+        setLabel(label);
+    }
+
     @Override
     public void setReadOnly(boolean readOnly) {
         getElement().setProperty("readonly", readOnly);