@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/radio-group/interfaces/ripple-controller.interface.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { RadioBaseController } from './base-controller.interface.js';
+
+/**
+ * Interface for controllers that handle visual effects like ripples
+ */
+export interface RippleController extends RadioBaseController {
+  /**
+   * Add a ripple effect at the event location
+   * @param event - The event that triggered the ripple (click, touch, etc.)
+   */
+  addRippleEffect(event: Event): void;
+
+  /**
+   * Add a ripple effect at a specific element
+   * @param element - The element to add ripple effect to
+   */
+  addRippleEffectToElement(element: HTMLElement): void;
+
+  /**
+   * Clear all active ripple effects
+   */
+  clearRipples(): void;
+
+  /**
+   * Set whether ripple effects are enabled
+   * @param enabled - True to enable ripple effects
+   */
+  setRippleEnabled(enabled: boolean): void;
+}

package/components/ui/nuraly-ui/src/components/radio-group/interfaces/selection-controller.interface.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { RadioBaseController } from './base-controller.interface.js';
+import { RadioButtonOption } from '../radio-group.types.js';
+
+/**
+ * Interface for controllers that handle radio button selection logic
+ */
+export interface SelectionController extends RadioBaseController {
+  /**
+   * Select a radio option programmatically
+   * @param option - The option to select
+   * @throws {Error} When option is disabled or invalid
+   */
+  selectOption(option: RadioButtonOption): void;
+
+  /**
+   * Get the currently selected option
+   * @returns The selected option or undefined if none selected
+   */
+  getSelectedOption(): RadioButtonOption | undefined;
+
+  /**
+   * Check if a specific option is currently selected
+   * @param option - The option to check
+   * @returns True if the option is selected
+   */
+  isOptionSelected(option: RadioButtonOption): boolean;
+
+  /**
+   * Check if a specific option is disabled
+   * @param option - The option to check
+   * @returns True if the option is disabled
+   */
+  isOptionDisabled(option: RadioButtonOption): boolean;
+
+  /**
+   * Get the current selected value as a string
+   * @returns The selected value or empty string
+   */
+  getSelectedValue(): string;
+
+  /**
+   * Reset the selection to no option selected
+   */
+  reset(): void;
+}

package/components/ui/nuraly-ui/src/components/radio-group/interfaces/validation-controller.interface.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { RadioBaseController } from './base-controller.interface.js';
+
+/**
+ * Interface for controllers that handle form validation
+ */
+export interface ValidationController extends RadioBaseController {
+  /**
+   * Validate the current radio group state
+   * @returns True if the radio group passes validation
+   */
+  validate(): boolean;
+
+  /**
+   * Get the current validation message
+   * @returns The validation message or empty string if valid
+   */
+  get validationMessage(): string;
+
+  /**
+   * Check if the radio group is currently valid
+   * @returns True if the radio group is valid
+   */
+  get isValid(): boolean;
+
+  /**
+   * Get form data for form submission
+   * @returns Object with name-value pairs for form submission
+   */
+  getFormData(): { [key: string]: string };
+
+  /**
+   * Get FormData object for native form submission
+   * @returns FormData object or null if no data to submit
+   */
+  getFormDataObject(): FormData | null;
+
+  /**
+   * Reset validation state and clear any validation messages
+   */
+  reset(): void;
+
+  /**
+   * Report validation state (HTML5 form validation API)
+   * @returns True if valid, dispatches invalid event if not
+   */
+  reportValidity(): boolean;
+}

package/components/ui/nuraly-ui/src/components/radio-group/radio-group.component.ts

@@ -0,0 +1,426 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { choose } from 'lit/directives/choose.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import {
+  RadioGroupController,
+  RadioKeyboardController,
+  RadioFocusController,
+  RadioValidationController,
+  RadioRippleController
+} from './controllers/index.js';
+import { styles } from './radio-group.style.js';
+import { RadioButtonType, RadioButtonOption } from './radio-group.types.js';
+import { ButtonType } from '../button/button.types.js';
+
+/**
+ * A radio button group component using Reactive Controllers architecture.
+ * 
+ * Supports multiple display modes:
+ * - Default: Traditional radio buttons with labels
+ * - Button: Button-style radio group
+ * - Slot: Custom HTML content with radio selection
+ * 
+ * Features:
+ * - Theme-aware styling with light/dark mode support
+ * - Keyboard navigation (arrow keys, space, enter)
+ * - Accessibility compliance
+ * - Form validation and integration
+ * - Ripple effects on interaction
+ * - Modular controller-based architecture
+ * 
+ * @example
+ * ```html
+ * <nr-radio-group
+ *   .options='[
+ *     { value: "option1", label: "Option 1" },
+ *     { value: "option2", label: "Option 2" }
+ *   ]'
+ *   default-value="option1"
+ *   direction="horizontal">
+ * </nr-radio-group>
+ * 
+ * <!-- Button style with auto-width -->
+ * <nr-radio-group
+ *   type="button"
+ *   auto-width
+ *   .options='[
+ *     { value: "yes", label: "Yes" },
+ *     { value: "no", label: "No" },
+ *     { value: "maybe", label: "Maybe" }
+ *   ]'>
+ * </nr-radio-group>
+ * ```
+ * 
+ * @fires nr-change - Dispatched when the selected option changes
+ */
+@customElement('nr-radio-group')
+export class NrRadioGroupElement extends NuralyUIBaseMixin(LitElement) {
+  static override styles = styles;
+
+  override requiredComponents = ['nr-icon', 'nr-radio'];
+
+  // Properties
+  @property({ type: Array }) options: RadioButtonOption[] = [];
+  @property({ type: String, attribute: 'default-value' }) defaultValue: string = '';
+  @property({ type: String }) value: string = '';
+  @property({ type: String }) name: string = 'radioGroup';
+  @property({ type: String }) direction: 'horizontal' | 'vertical' = 'vertical';
+  @property({ type: String }) type: RadioButtonType = RadioButtonType.Default;
+  @property({ type: Boolean }) required: boolean = false;
+  @property({ type: Boolean }) disabled: boolean = false;
+  @property({ type: String }) size: 'small' | 'medium' | 'large' = 'medium';
+  @property({ type: String }) position: 'left' | 'right' = 'left';
+  @property({ type: Boolean, attribute: 'auto-width' }) autoWidth: boolean = false;
+
+  // Reactive Controllers - PROPERLY implemented now
+  private groupController = new RadioGroupController(this);
+  // @ts-ignore - Controller handles events through listeners, doesn't need direct reference
+  private keyboardController = new RadioKeyboardController(this, this.groupController);
+  // Additional controllers for full functionality
+  private focusController = new RadioFocusController(this);
+  private validationController = new RadioValidationController(this);
+  private rippleController = new RadioRippleController(this);
+
+  /**
+   * Get the currently selected option - DELEGATES to controller
+   */
+  get selectedOption(): RadioButtonOption | undefined {
+    return this.groupController.getSelectedOption();
+  }
+
+  /**
+   * Check if an option is selected - DELEGATES to controller
+   */
+  isOptionSelected(option: RadioButtonOption): boolean {
+    return this.groupController.isOptionSelected(option);
+  }
+
+  /**
+   * Check if an option is disabled - DELEGATES to controller
+   */
+  isOptionDisabled(option: RadioButtonOption): boolean {
+    return this.groupController.isOptionDisabled(option);
+  }
+
+  /**
+   * Check if an option is icon-only (has icon but no meaningful label)
+   */
+  isOptionIconOnly(option: RadioButtonOption): boolean {
+    return !!(option.icon && (!option.label || option.label.trim() === ''));
+  }
+
+  /**
+   * Handle option selection change - DELEGATES to controller
+   */
+  handleSelectionChange(option: RadioButtonOption): void {
+    this.groupController.selectOption(option);
+  }
+
+  /**
+   * Set focused option by index - DELEGATES to controller
+   */
+  setFocusedOption(index: number): void {
+    this.focusController.setFocusedOption(index);
+  }
+
+  /**
+   * Handle keyboard events - DELEGATES to controller
+   */
+  handleKeyDown(_event: KeyboardEvent): void {
+    // Controller handles keyboard navigation automatically via event listeners
+    // This method exists for template compatibility but delegates to controller
+  }
+
+  /**
+   * Add ripple effect on radio input click - DELEGATES to controller
+   */
+  addRippleEffect(event: Event): void {
+    this.rippleController.addRippleEffect(event);
+  }
+
+  /**
+   * Validate the radio group - DELEGATES to controller
+   */
+  validate(): boolean {
+    return this.validationController.validate();
+  }
+
+  /**
+   * Get validation message - DELEGATES to controller
+   */
+  get validationMessage(): string {
+    return this.validationController.validationMessage;
+  }
+
+  /**
+   * Check if the radio group is valid - DELEGATES to controller
+   */
+  get isValid(): boolean {
+    return this.validationController.isValid;
+  }
+
+  /**
+   * Get form data for form submission - DELEGATES to controller
+   */
+  getFormData(): { [key: string]: string } {
+    return this.validationController.getFormData();
+  }
+
+  /**
+   * Reset the radio group - DELEGATES to controller
+   */
+  reset(): void {
+    this.validationController.reset();
+  }
+
+  /**
+   * FormData integration for native form submission - DELEGATES to controller
+   */
+  get formData(): FormData | null {
+    return this.validationController.getFormDataObject();
+  }
+
+  /**
+   * Check form validity (required for HTML5 form validation)
+   */
+  checkValidity(): boolean {
+    return this.validate();
+  }
+
+  /**
+   * Report form validity (required for HTML5 form validation) - DELEGATES to controller
+   */
+  reportValidity(): boolean {
+    return this.validationController.reportValidity();
+  }
+
+  /**
+   * Programmatically focus the radio group - DELEGATES to controller
+   */
+  override focus(): void {
+    this.focusController.focus();
+  }
+
+  /**
+   * Programmatically blur the radio group - DELEGATES to controller
+   */
+  override blur(): void {
+    this.focusController.blur();
+  }
+
+  /**
+   * Render default radio button style using nr-radio component
+   */
+  private renderOptionDefault() {
+    return html`
+      <div 
+        role="radiogroup" 
+        aria-labelledby="radio-group-label"
+        class="radio-group ${this.direction}"
+      >
+        ${this.options.map(
+          (option: RadioButtonOption, index: number) => html`
+            <div
+              class="${classMap({
+                'radio-wrapper': true,
+                error: option.state === 'error',
+                warning: option.state === 'warning',
+                [option.className || '']: Boolean(option.className)
+              })}"
+              data-theme="${this.currentTheme}"
+              style="${option.style || ''}"
+              title="${option.title || ''}"
+            >
+              <nr-radio
+                id="${option.id || option.value}"
+                name="${this.name}"
+                value="${option.value}"
+                size="${this.size}"
+                ?checked="${this.isOptionSelected(option)}"
+                ?disabled="${this.isOptionDisabled(option) || this.disabled}"
+                ?required="${this.required}"
+                tabindex="${this.isOptionSelected(option) ? '0' : '-1'}"
+                @change="${(e: Event) => { 
+                  this.addRippleEffect(e); 
+                  this.handleSelectionChange(option); 
+                }}"
+                @focus="${() => this.setFocusedOption(index)}"
+              >
+                ${option.label}
+              </nr-radio>
+              ${option.state && option.message
+                ? html`<div class="message-container" id="${option.value}-message">
+                    <nr-icon name="${option.state === 'error' ? 'exclamation-circle' : 'warning'}"></nr-icon>
+                    <span>${option.message}</span>
+                  </div>`
+                : nothing}
+            </div>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  /**
+   * Render button style radio group
+   */
+  private renderOptionsWithButtons() {
+    return html`
+      <div 
+        class="type-button" 
+        role="radiogroup" 
+        aria-labelledby="radio-group-label"
+        @keydown="${this.handleKeyDown}"
+      >
+        ${this.options.map(
+          (option: RadioButtonOption, index: number) => {
+            const isSelected = this.isOptionSelected(option);
+            const isIconOnly = this.isOptionIconOnly(option);
+            const classes = [
+              isSelected ? 'selected' : '',
+              isIconOnly && this.autoWidth ? 'icon-only' : ''
+            ].filter(Boolean).join(' ');
+
+            return html`
+            <nr-button
+              class="${classes}"
+              type="${isSelected ? ButtonType.Primary : ButtonType.Default}"
+              size="${this.size}"
+              role="radio"
+              aria-checked="${isSelected}"
+              aria-describedby="${option.state && option.message ? `${option.value}-message` : nothing}"
+              tabindex="${isSelected ? '0' : '-1'}"
+              .icon="${option.icon ? [option.icon] : []}"
+              .disabled="${this.isOptionDisabled(option)}"
+              @click="${() => this.handleSelectionChange(option)}"
+              @focus="${() => this.setFocusedOption(index)}"
+            >
+              ${option.label}
+            </nr-button>
+            ${option.state && option.message
+              ? html`<div class="message-container" id="${option.value}-message">
+                  <nr-icon name="${option.state === 'error' ? 'exclamation-circle' : 'warning'}"></nr-icon>
+                  <span>${option.message}</span>
+                </div>`
+              : nothing}
+          `}
+        )}
+      </div>
+    `;
+  }
+
+  /**
+   * Render slot-based radio group (for custom HTML content) using nr-radio
+   */
+  private renderOptionsWithSlots() {
+    return html`
+      <div 
+        role="radiogroup" 
+        aria-labelledby="radio-group-label"
+        class="radio-group slot-group ${this.direction}"
+      >
+        ${this.options.map(
+          (option: RadioButtonOption, index: number) => html`
+            <div
+              class="${classMap({
+                'radio-wrapper': true,
+                'slot-container': true,
+                error: option.state === 'error',
+                warning: option.state === 'warning',
+                selected: this.isOptionSelected(option),
+                [option.className || '']: Boolean(option.className)
+              })}"
+              data-theme="${this.currentTheme}"
+              style="${option.style || ''}"
+              title="${option.title || ''}"
+            >
+              <div class="slot-wrapper" @click="${() => this.handleSelectionChange(option)}">
+                <nr-radio
+                  id="${option.id || option.value}"
+                  name="${this.name}"
+                  value="${option.value}"
+                  size="${this.size}"
+                  ?checked="${this.isOptionSelected(option)}"
+                  ?disabled="${this.isOptionDisabled(option) || this.disabled}"
+                  ?required="${this.required}"
+                  tabindex="${this.isOptionSelected(option) ? '0' : '-1'}"
+                  @change="${(e: Event) => { 
+                    this.addRippleEffect(e); 
+                    this.handleSelectionChange(option); 
+                  }}"
+                  @focus="${() => this.setFocusedOption(index)}"
+                >
+                </nr-radio>
+                <div class="slot-content">
+                  <slot name="${option.value}"></slot>
+                </div>
+              </div>
+              ${option.state && option.message
+                ? html`<div class="message-container" id="${option.value}-message">
+                    <nr-icon name="${option.state === 'error' ? 'exclamation-circle' : 'warning'}"></nr-icon>
+                    <span>${option.message}</span>
+                  </div>`
+                : nothing}
+            </div>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  /**
+   * Render button style with slots
+   */
+  private renderButtonsWithSlots() {
+    return html`
+      <div 
+        class="type-button" 
+        role="radiogroup" 
+        aria-labelledby="radio-group-label"
+        @keydown="${this.handleKeyDown}"
+      >
+        ${this.options.map(
+          (option: RadioButtonOption, index: number) => html`
+            <nr-button
+              class="${this.isOptionSelected(option) ? 'selected' : ''}"
+              type="${this.isOptionSelected(option) ? ButtonType.Primary : ButtonType.Default}"
+              role="radio"
+              aria-checked="${this.isOptionSelected(option)}"
+              aria-describedby="${option.state && option.message ? `${option.value}-message` : nothing}"
+              tabindex="${this.isOptionSelected(option) ? '0' : '-1'}"
+              .disabled="${this.isOptionDisabled(option)}"
+              @click="${() => this.handleSelectionChange(option)}"
+              @focus="${() => this.setFocusedOption(index)}"
+            >
+              <slot name="${option.value}" slot="default"></slot>
+            </nr-button>
+            ${option.state && option.message
+              ? html`<div class="message-container" id="${option.value}-message">
+                  <nr-icon name="${option.state === 'error' ? 'exclamation-circle' : 'warning'}"></nr-icon>
+                  <span>${option.message}</span>
+                </div>`
+              : nothing}
+          `
+        )}
+      </div>
+    `;
+  }
+
+  protected override render() {
+    return html`${choose(this.type, [
+      [RadioButtonType.Default, () => this.renderOptionDefault()],
+      [RadioButtonType.Button, () => this.renderOptionsWithButtons()],
+      [RadioButtonType.Slot, () => this.renderOptionsWithSlots()],
+      ['button-slot', () => this.renderButtonsWithSlots()], // Special case for button with slots
+    ])} `;
+  }
+}