@nuralyui/radio-group 0.0.6 → 0.0.7

package/radio.component.d.ts

@@ -1,146 +0,0 @@
-/**
- * @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 { RadioButtonType, RadioButtonOption } from './radio.type.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 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;
-    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
-     */
-    private renderOptionDefault;
-    /**
-     * Render button style radio group
-     */
-    private renderOptionsWithButtons;
-    /**
-     * Render slot-based radio group (for custom HTML content)
-     */
-    private renderOptionsWithSlots;
-    /**
-     * Render button style with slots
-     */
-    private renderButtonsWithSlots;
-    protected render(): import("lit").TemplateResult<1>;
-}
-export {};
-//# sourceMappingURL=radio.component.d.ts.map

package/radio.component.js

@@ -1,394 +0,0 @@
-/**
- * @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 { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
-import { RadioGroupController, RadioKeyboardController, RadioFocusController, RadioValidationController, RadioRippleController } from './controllers/index.js';
-import { styles } from './radio.style.js';
-import { RadioButtonType } from './radio.type.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 change - Dispatched when the selected option changes
- */
-let NrRadioGroupElement = class NrRadioGroupElement extends NuralyUIBaseMixin(LitElement) {
-    constructor() {
-        super(...arguments);
-        this.requiredComponents = ['nr-icon'];
-        // Properties
-        this.options = [];
-        this.defaultValue = '';
-        this.value = '';
-        this.name = '';
-        this.direction = 'vertical';
-        this.type = RadioButtonType.Default;
-        this.required = false;
-        this.disabled = false;
-        // 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
-     */
-    renderOptionDefault() {
-        return html `
-      <div 
-        role="radiogroup" 
-        aria-labelledby="radio-group-label"
-        class="radio-group"
-      >
-        ${this.options.map((option, index) => html `
-            <div
-              class="${classMap({
-            'radio-container': true,
-            error: option.state === 'error',
-            warning: option.state === 'warning',
-            [option.className || '']: Boolean(option.className)
-        })}"
-              data-theme="${this.currentTheme}"
-              style="${option.style || ''}"
-              title="${option.title || ''}"
-            >
-              <label class="radio" id="${option.id || option.value}-label">
-                <div class="input-container">
-                  <input
-                    class="radio-input"
-                    type="radio"
-                    role="radio"
-                    name="radioGroup"
-                    .value="${option.value}"
-                    aria-labelledby="${option.value}-label"
-                    aria-describedby="${option.state && option.message ? `${option.value}-message` : nothing}"
-                    tabindex="${this.isOptionSelected(option) ? '0' : '-1'}"
-                    @change="${(e) => { this.addRippleEffect(e); this.handleSelectionChange(option); }}"
-                    @focus="${() => this.setFocusedOption(index)}"
-                    ?checked="${this.isOptionSelected(option)}"
-                    ?disabled="${this.isOptionDisabled(option)}"
-                  />
-                </div>
-                <span>${option.label}</span>
-              </label>
-              ${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)
-     */
-    renderOptionsWithSlots() {
-        return html `
-      <div 
-        role="radiogroup" 
-        aria-labelledby="radio-group-label"
-        class="radio-group slot-group"
-      >
-        ${this.options.map((option, index) => html `
-            <div
-              class="${classMap({
-            'radio-container': 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 || ''}"
-              @click="${() => this.handleSelectionChange(option)}"
-            >
-              <label class="radio slot-radio" id="${option.value}-label">
-                <input
-                  class="radio-input"
-                  type="radio"
-                  role="radio"
-                  name="radioGroup"
-                  .value="${option.value}"
-                  aria-labelledby="${option.value}-label"
-                  aria-describedby="${option.state && option.message ? `${option.value}-message` : nothing}"
-                  tabindex="${this.isOptionSelected(option) ? '0' : '-1'}"
-                  @change="${(e) => { this.addRippleEffect(e); this.handleSelectionChange(option); }}"
-                  @focus="${() => this.setFocusedOption(index)}"
-                  ?checked="${this.isOptionSelected(option)}"
-                  ?disabled="${this.isOptionDisabled(option)}"
-                />
-                <div class="slot-content">
-                  <slot name="${option.value}"></slot>
-                </div>
-              </label>
-              ${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);
-NrRadioGroupElement = __decorate([
-    customElement('nr-radio-group')
-], NrRadioGroupElement);
-export { NrRadioGroupElement };
-//# sourceMappingURL=radio.component.js.map

package/radio.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio.component.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio.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';\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.style.js';\nimport { RadioButtonType, RadioButtonOption } from './radio.type.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 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'];\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 = '';\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\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\n   */\n  private renderOptionDefault() {\n    return html`\n      <div \n        role=\"radiogroup\" \n        aria-labelledby=\"radio-group-label\"\n        class=\"radio-group\"\n      >\n        ${this.options.map(\n          (option: RadioButtonOption, index: number) => html`\n            <div\n              class=\"${classMap({\n                'radio-container': 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              <label class=\"radio\" id=\"${option.id || option.value}-label\">\n                <div class=\"input-container\">\n                  <input\n                    class=\"radio-input\"\n                    type=\"radio\"\n                    role=\"radio\"\n                    name=\"radioGroup\"\n                    .value=\"${option.value}\"\n                    aria-labelledby=\"${option.value}-label\"\n                    aria-describedby=\"${option.state && option.message ? `${option.value}-message` : nothing}\"\n                    tabindex=\"${this.isOptionSelected(option) ? '0' : '-1'}\"\n                    @change=\"${(e: Event) => { this.addRippleEffect(e); this.handleSelectionChange(option); }}\"\n                    @focus=\"${() => this.setFocusedOption(index)}\"\n                    ?checked=\"${this.isOptionSelected(option)}\"\n                    ?disabled=\"${this.isOptionDisabled(option)}\"\n                  />\n                </div>\n                <span>${option.label}</span>\n              </label>\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)\n   */\n  private renderOptionsWithSlots() {\n    return html`\n      <div \n        role=\"radiogroup\" \n        aria-labelledby=\"radio-group-label\"\n        class=\"radio-group slot-group\"\n      >\n        ${this.options.map(\n          (option: RadioButtonOption, index: number) => html`\n            <div\n              class=\"${classMap({\n                'radio-container': 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              @click=\"${() => this.handleSelectionChange(option)}\"\n            >\n              <label class=\"radio slot-radio\" id=\"${option.value}-label\">\n                <input\n                  class=\"radio-input\"\n                  type=\"radio\"\n                  role=\"radio\"\n                  name=\"radioGroup\"\n                  .value=\"${option.value}\"\n                  aria-labelledby=\"${option.value}-label\"\n                  aria-describedby=\"${option.state && option.message ? `${option.value}-message` : nothing}\"\n                  tabindex=\"${this.isOptionSelected(option) ? '0' : '-1'}\"\n                  @change=\"${(e: Event) => { this.addRippleEffect(e); this.handleSelectionChange(option); }}\"\n                  @focus=\"${() => this.setFocusedOption(index)}\"\n                  ?checked=\"${this.isOptionSelected(option)}\"\n                  ?disabled=\"${this.isOptionDisabled(option)}\"\n                />\n                <div class=\"slot-content\">\n                  <slot name=\"${option.value}\"></slot>\n                </div>\n              </label>\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.style.d.ts

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