@nuralyui/radio-group 0.0.6

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from './radio-group.component.js';
+export * from './radio-group.types.js';
+//# sourceMappingURL=index.d.ts.map

package/index.js

@@ -0,0 +1,3 @@
+export * from './radio-group.component.js';
+export * from './radio-group.types.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/radio-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './radio-group.component.js';\nexport * from './radio-group.types.js';\n"]}

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@nuralyui/radio-group",
+    "version": "0.0.6",
+    "description": "",
+    "main": "index.js",
+    "type": "module",
+    "dependencies": {
+        "dayjs": "^1.11.7"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Labidi Aymen",
+    "license": "ISC",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "bundle.js",
+        "*.js",
+        "*.d.ts",
+        "*.js.map"
+    ]
+}

package/radio-group.component.d.ts

@@ -0,0 +1,149 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import '../icon/icon.component.js';
+import '../button/button.component.js';
+import '../radio/radio.component.js';
+import { RadioButtonType, RadioButtonOption } from './radio-group.types.js';
+declare const NrRadioGroupElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").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>
+ * ```
+ *
+ * @fires nr-change - Dispatched when the selected option changes
+ */
+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';
+    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;
+    /**
+     * 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").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=radio-group.component.d.ts.map

package/radio-group.component.js

@@ -0,0 +1,402 @@
+/**
+ * @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 dependencies
+import '../icon/icon.component.js';
+import '../button/button.component.js';
+import '../radio/radio.component.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+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>
+ * ```
+ *
+ * @fires nr-change - Dispatched when the selected option changes
+ */
+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';
+        // 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);
+    }
+    /**
+     * 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) => 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'}"
+              .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()],
+            ['button-slot', () => this.renderButtonsWithSlots()], // Special case for button with slots
+        ])} `;
+    }
+};
+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);
+NrRadioGroupElement = __decorate([
+    customElement('nr-radio-group')
+], NrRadioGroupElement);
+export { NrRadioGroupElement };
+//# sourceMappingURL=radio-group.component.js.map

package/radio-group.component.js.map

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

package/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