@nuraly/lumenui 0.1.0

package/dist/src/components/radio-group/radio-group.component.d.ts

@@ -0,0 +1,165 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { RadioButtonType, RadioButtonOption } from './radio-group.types.js';
+declare const NrRadioGroupElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * 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
+ *
+ * @slot helper-text - Helper text displayed below the radio group
+ */
+export declare class NrRadioGroupElement extends NrRadioGroupElement_base {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    options: RadioButtonOption[];
+    defaultValue: string;
+    value: string;
+    name: string;
+    direction: 'horizontal' | 'vertical';
+    type: RadioButtonType;
+    required: boolean;
+    disabled: boolean;
+    size: 'small' | 'medium' | 'large';
+    position: 'left' | 'right';
+    autoWidth: boolean;
+    helper: string;
+    private groupController;
+    private keyboardController;
+    private focusController;
+    private validationController;
+    private rippleController;
+    /**
+     * Get the currently selected option - DELEGATES to controller
+     */
+    get selectedOption(): RadioButtonOption | undefined;
+    /**
+     * Check if an option is selected - DELEGATES to controller
+     */
+    isOptionSelected(option: RadioButtonOption): boolean;
+    /**
+     * Check if an option is disabled - DELEGATES to controller
+     */
+    isOptionDisabled(option: RadioButtonOption): boolean;
+    /**
+     * Check if an option is icon-only (has icon but no meaningful label)
+     */
+    isOptionIconOnly(option: RadioButtonOption): boolean;
+    /**
+     * Handle option selection change - DELEGATES to controller
+     */
+    handleSelectionChange(option: RadioButtonOption): void;
+    /**
+     * Set focused option by index - DELEGATES to controller
+     */
+    setFocusedOption(index: number): void;
+    /**
+     * Handle keyboard events - DELEGATES to controller
+     */
+    handleKeyDown(_event: KeyboardEvent): void;
+    /**
+     * Add ripple effect on radio input click - DELEGATES to controller
+     */
+    addRippleEffect(event: Event): void;
+    /**
+     * Validate the radio group - DELEGATES to controller
+     */
+    validate(): boolean;
+    /**
+     * Get validation message - DELEGATES to controller
+     */
+    get validationMessage(): string;
+    /**
+     * Check if the radio group is valid - DELEGATES to controller
+     */
+    get isValid(): boolean;
+    /**
+     * Get form data for form submission - DELEGATES to controller
+     */
+    getFormData(): {
+        [key: string]: string;
+    };
+    /**
+     * Reset the radio group - DELEGATES to controller
+     */
+    reset(): void;
+    /**
+     * FormData integration for native form submission - DELEGATES to controller
+     */
+    get formData(): FormData | null;
+    /**
+     * Check form validity (required for HTML5 form validation)
+     */
+    checkValidity(): boolean;
+    /**
+     * Report form validity (required for HTML5 form validation) - DELEGATES to controller
+     */
+    reportValidity(): boolean;
+    /**
+     * Programmatically focus the radio group - DELEGATES to controller
+     */
+    focus(): void;
+    /**
+     * Programmatically blur the radio group - DELEGATES to controller
+     */
+    blur(): void;
+    /**
+     * Render default radio button style using nr-radio component
+     */
+    private renderOptionDefault;
+    /**
+     * Render button style radio group
+     */
+    private renderOptionsWithButtons;
+    /**
+     * Render slot-based radio group (for custom HTML content) using nr-radio
+     */
+    private renderOptionsWithSlots;
+    /**
+     * Render button style with slots
+     */
+    private renderButtonsWithSlots;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=radio-group.component.d.ts.map

package/dist/src/components/radio-group/radio-group.component.js

@@ -0,0 +1,437 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 } from './radio-group.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
+ *
+ * @slot helper-text - Helper text displayed below the radio group
+ */
+let NrRadioGroupElement = class NrRadioGroupElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-icon', 'nr-radio'];
+        // Properties
+        this.options = [];
+        this.defaultValue = '';
+        this.value = '';
+        this.name = 'radioGroup';
+        this.direction = 'vertical';
+        this.type = RadioButtonType.Default;
+        this.required = false;
+        this.disabled = false;
+        this.size = 'medium';
+        this.position = 'left';
+        this.autoWidth = false;
+        this.helper = '';
+        // Reactive Controllers - PROPERLY implemented now
+        this.groupController = new RadioGroupController(this);
+        // @ts-ignore - Controller handles events through listeners, doesn't need direct reference
+        this.keyboardController = new RadioKeyboardController(this, this.groupController);
+        // Additional controllers for full functionality
+        this.focusController = new RadioFocusController(this);
+        this.validationController = new RadioValidationController(this);
+        this.rippleController = new RadioRippleController(this);
+    }
+    /**
+     * Get the currently selected option - DELEGATES to controller
+     */
+    get selectedOption() {
+        return this.groupController.getSelectedOption();
+    }
+    /**
+     * Check if an option is selected - DELEGATES to controller
+     */
+    isOptionSelected(option) {
+        return this.groupController.isOptionSelected(option);
+    }
+    /**
+     * Check if an option is disabled - DELEGATES to controller
+     */
+    isOptionDisabled(option) {
+        return this.groupController.isOptionDisabled(option);
+    }
+    /**
+     * Check if an option is icon-only (has icon but no meaningful label)
+     */
+    isOptionIconOnly(option) {
+        return !!(option.icon && (!option.label || option.label.trim() === ''));
+    }
+    /**
+     * Handle option selection change - DELEGATES to controller
+     */
+    handleSelectionChange(option) {
+        this.groupController.selectOption(option);
+    }
+    /**
+     * Set focused option by index - DELEGATES to controller
+     */
+    setFocusedOption(index) {
+        this.focusController.setFocusedOption(index);
+    }
+    /**
+     * Handle keyboard events - DELEGATES to controller
+     */
+    handleKeyDown(_event) {
+        // 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) {
+        this.rippleController.addRippleEffect(event);
+    }
+    /**
+     * Validate the radio group - DELEGATES to controller
+     */
+    validate() {
+        return this.validationController.validate();
+    }
+    /**
+     * Get validation message - DELEGATES to controller
+     */
+    get validationMessage() {
+        return this.validationController.validationMessage;
+    }
+    /**
+     * Check if the radio group is valid - DELEGATES to controller
+     */
+    get isValid() {
+        return this.validationController.isValid;
+    }
+    /**
+     * Get form data for form submission - DELEGATES to controller
+     */
+    getFormData() {
+        return this.validationController.getFormData();
+    }
+    /**
+     * Reset the radio group - DELEGATES to controller
+     */
+    reset() {
+        this.validationController.reset();
+    }
+    /**
+     * FormData integration for native form submission - DELEGATES to controller
+     */
+    get formData() {
+        return this.validationController.getFormDataObject();
+    }
+    /**
+     * Check form validity (required for HTML5 form validation)
+     */
+    checkValidity() {
+        return this.validate();
+    }
+    /**
+     * Report form validity (required for HTML5 form validation) - DELEGATES to controller
+     */
+    reportValidity() {
+        return this.validationController.reportValidity();
+    }
+    /**
+     * Programmatically focus the radio group - DELEGATES to controller
+     */
+    focus() {
+        this.focusController.focus();
+    }
+    /**
+     * Programmatically blur the radio group - DELEGATES to controller
+     */
+    blur() {
+        this.focusController.blur();
+    }
+    /**
+     * Render default radio button style using nr-radio component
+     */
+    renderOptionDefault() {
+        return html `
+      <div 
+        role="radiogroup" 
+        aria-labelledby="radio-group-label"
+        class="radio-group ${this.direction}"
+      >
+        ${this.options.map((option, index) => 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) => {
+            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
+     */
+    renderOptionsWithButtons() {
+        return html `
+      <div 
+        class="type-button" 
+        role="radiogroup" 
+        aria-labelledby="radio-group-label"
+        @keydown="${this.handleKeyDown}"
+      >
+        ${this.options.map((option, index) => {
+            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 ? "primary" /* ButtonType.Primary */ : "default" /* 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
+     */
+    renderOptionsWithSlots() {
+        return html `
+      <div 
+        role="radiogroup" 
+        aria-labelledby="radio-group-label"
+        class="radio-group slot-group ${this.direction}"
+      >
+        ${this.options.map((option, index) => 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) => {
+            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
+     */
+    renderButtonsWithSlots() {
+        return html `
+      <div 
+        class="type-button" 
+        role="radiogroup" 
+        aria-labelledby="radio-group-label"
+        @keydown="${this.handleKeyDown}"
+      >
+        ${this.options.map((option, index) => html `
+            <nr-button
+              class="${this.isOptionSelected(option) ? 'selected' : ''}"
+              type="${this.isOptionSelected(option) ? "primary" /* ButtonType.Primary */ : "default" /* 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>
+    `;
+    }
+    render() {
+        return html `
+      ${choose(this.type, [
+            [RadioButtonType.Default, () => this.renderOptionDefault()],
+            [RadioButtonType.Button, () => this.renderOptionsWithButtons()],
+            [RadioButtonType.Slot, () => this.renderOptionsWithSlots()],
+            [RadioButtonType.ButtonSlot, () => this.renderButtonsWithSlots()], // Special case for button with slots
+        ])}
+      <slot name="helper-text"></slot>
+    `;
+    }
+};
+NrRadioGroupElement.styles = styles;
+__decorate([
+    property({ type: Array })
+], NrRadioGroupElement.prototype, "options", void 0);
+__decorate([
+    property({ type: String, attribute: 'default-value' })
+], NrRadioGroupElement.prototype, "defaultValue", void 0);
+__decorate([
+    property({ type: String })
+], NrRadioGroupElement.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], NrRadioGroupElement.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], NrRadioGroupElement.prototype, "direction", void 0);
+__decorate([
+    property({ type: String })
+], NrRadioGroupElement.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrRadioGroupElement.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrRadioGroupElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], NrRadioGroupElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NrRadioGroupElement.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-width' })
+], NrRadioGroupElement.prototype, "autoWidth", void 0);
+__decorate([
+    property({ type: String })
+], NrRadioGroupElement.prototype, "helper", void 0);
+NrRadioGroupElement = __decorate([
+    customElement('nr-radio-group')
+], NrRadioGroupElement);
+export { NrRadioGroupElement };
+//# sourceMappingURL=radio-group.component.js.map

package/dist/src/components/radio-group/radio-group.style.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=radio-group.style.d.ts.map