@nuralyui/radio-group 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.js +85 -1237
- package/package.json +1 -1
- package/radio-group.component.d.ts +0 -3
- package/radio-group.component.js +0 -4
- package/radio-group.component.js.map +1 -1
package/package.json
CHANGED
|
@@ -4,9 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: MIT
|
|
5
5
|
*/
|
|
6
6
|
import { LitElement } from 'lit';
|
|
7
|
-
import '../icon/icon.component.js';
|
|
8
|
-
import '../button/button.component.js';
|
|
9
|
-
import '../radio/radio.component.js';
|
|
10
7
|
import { RadioButtonType, RadioButtonOption } from './radio-group.types.js';
|
|
11
8
|
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;
|
|
12
9
|
/**
|
package/radio-group.component.js
CHANGED
|
@@ -13,10 +13,6 @@ import { LitElement, html, nothing } from 'lit';
|
|
|
13
13
|
import { customElement, property } from 'lit/decorators.js';
|
|
14
14
|
import { choose } from 'lit/directives/choose.js';
|
|
15
15
|
import { classMap } from 'lit/directives/class-map.js';
|
|
16
|
-
// Import dependencies
|
|
17
|
-
import '../icon/icon.component.js';
|
|
18
|
-
import '../button/button.component.js';
|
|
19
|
-
import '../radio/radio.component.js';
|
|
20
16
|
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
21
17
|
import { RadioGroupController, RadioKeyboardController, RadioFocusController, RadioValidationController, RadioRippleController } from './controllers/index.js';
|
|
22
18
|
import { styles } from './radio-group.style.js';
|
|
@@ -1 +1 @@
|
|
|
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 '@nuralyui/common/mixins';\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"]}
|
|
1
|
+
{"version":3,"file":"radio-group.component.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAqB,MAAM,wBAAwB,CAAC;AAG5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAtE;;QAGW,uBAAkB,GAAG,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAEtD,aAAa;QACc,YAAO,GAAwB,EAAE,CAAC;QACL,iBAAY,GAAW,EAAE,CAAC;QACtD,UAAK,GAAW,EAAE,CAAC;QACnB,SAAI,GAAW,YAAY,CAAC;QAC5B,cAAS,GAA8B,UAAU,CAAC;QAClD,SAAI,GAAoB,eAAe,CAAC,OAAO,CAAC;QAC/C,aAAQ,GAAY,KAAK,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAC3B,SAAI,GAAiC,QAAQ,CAAC;QAC9C,aAAQ,GAAqB,MAAM,CAAC;QAEhE,kDAAkD;QAC1C,oBAAe,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,CAAC;QACzD,0FAA0F;QAClF,uBAAkB,GAAG,IAAI,uBAAuB,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACrF,gDAAgD;QACxC,oBAAe,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,CAAC;QACjD,yBAAoB,GAAG,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAC3D,qBAAgB,GAAG,IAAI,qBAAqB,CAAC,IAAI,CAAC,CAAC;IA+T7D,CAAC;IA7TC;;OAEG;IACH,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,eAAe,CAAC,iBAAiB,EAAE,CAAC;IAClD,CAAC;IAED;;OAEG;IACH,gBAAgB,CAAC,MAAyB;QACxC,OAAO,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACvD,CAAC;IAED;;OAEG;IACH,gBAAgB,CAAC,MAAyB;QACxC,OAAO,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACvD,CAAC;IAED;;OAEG;IACH,qBAAqB,CAAC,MAAyB;QAC7C,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC;IAED;;OAEG;IACH,gBAAgB,CAAC,KAAa;QAC5B,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC;IAED;;OAEG;IACH,aAAa,CAAC,MAAqB;QACjC,2EAA2E;QAC3E,4EAA4E;IAC9E,CAAC;IAED;;OAEG;IACH,eAAe,CAAC,KAAY;QAC1B,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC;IAED;;OAEG;IACH,QAAQ;QACN,OAAO,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,CAAC;IAC9C,CAAC;IAED;;OAEG;IACH,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,CAAC;IAED;;OAEG;IACH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC;IAC3C,CAAC;IAED;;OAEG;IACH,WAAW;QACT,OAAO,IAAI,CAAC,oBAAoB,CAAC,WAAW,EAAE,CAAC;IACjD,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC;IAED;;OAEG;IACH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,EAAE,CAAC;IACvD,CAAC;IAED;;OAEG;IACH,aAAa;QACX,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;IACzB,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,OAAO,IAAI,CAAC,oBAAoB,CAAC,cAAc,EAAE,CAAC;IACpD,CAAC;IAED;;OAEG;IACM,KAAK;QACZ,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC;IAC/B,CAAC;IAED;;OAEG;IACM,IAAI;QACX,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED;;OAEG;IACK,mBAAmB;QACzB,OAAO,IAAI,CAAA;;;;6BAIc,IAAI,CAAC,SAAS;;UAEjC,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,CAAC,MAAyB,EAAE,KAAa,EAAE,EAAE,CAAC,IAAI,CAAA;;uBAErC,QAAQ,CAAC;YAChB,eAAe,EAAE,IAAI;YACrB,KAAK,EAAE,MAAM,CAAC,KAAK,KAAK,OAAO;YAC/B,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,SAAS;YACnC,CAAC,MAAM,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC;SACpD,CAAC;4BACY,IAAI,CAAC,YAAY;uBACtB,MAAM,CAAC,KAAK,IAAI,EAAE;uBAClB,MAAM,CAAC,KAAK,IAAI,EAAE;;;sBAGnB,MAAM,CAAC,EAAE,IAAI,MAAM,CAAC,KAAK;wBACvB,IAAI,CAAC,IAAI;yBACR,MAAM,CAAC,KAAK;wBACb,IAAI,CAAC,IAAI;4BACL,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;6BAC5B,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,QAAQ;6BAC9C,IAAI,CAAC,QAAQ;4BACd,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;2BAC3C,CAAC,CAAQ,EAAE,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;YACxB,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC;0BACS,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;;kBAE1C,MAAM,CAAC,KAAK;;gBAEd,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO;YAC9B,CAAC,CAAC,IAAI,CAAA,sCAAsC,MAAM,CAAC,KAAK;qCACnC,MAAM,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;4BACpE,MAAM,CAAC,OAAO;yBACjB;YACT,CAAC,CAAC,OAAO;;WAEd,CACF;;KAEJ,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,wBAAwB;QAC9B,OAAO,IAAI,CAAA;;;;;oBAKK,IAAI,CAAC,aAAa;;UAE5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,CAAC,MAAyB,EAAE,KAAa,EAAE,EAAE,CAAC,IAAI,CAAA;;uBAErC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;sBAChD,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,oCAAoB,CAAC,mCAAmB;;8BAE/D,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;kCACzB,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO;0BAC5E,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;uBAC7C,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;2BAC5B,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;wBAChC,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC;wBACxC,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;;gBAE1C,MAAM,CAAC,KAAK;;cAEd,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO;YAC9B,CAAC,CAAC,IAAI,CAAA,sCAAsC,MAAM,CAAC,KAAK;mCACnC,MAAM,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;0BACpE,MAAM,CAAC,OAAO;uBACjB;YACT,CAAC,CAAC,OAAO;WACZ,CACF;;KAEJ,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,sBAAsB;QAC5B,OAAO,IAAI,CAAA;;;;wCAIyB,IAAI,CAAC,SAAS;;UAE5C,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,CAAC,MAAyB,EAAE,KAAa,EAAE,EAAE,CAAC,IAAI,CAAA;;uBAErC,QAAQ,CAAC;YAChB,eAAe,EAAE,IAAI;YACrB,gBAAgB,EAAE,IAAI;YACtB,KAAK,EAAE,MAAM,CAAC,KAAK,KAAK,OAAO;YAC/B,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,SAAS;YACnC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;YACvC,CAAC,MAAM,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC;SACpD,CAAC;4BACY,IAAI,CAAC,YAAY;uBACtB,MAAM,CAAC,KAAK,IAAI,EAAE;uBAClB,MAAM,CAAC,KAAK,IAAI,EAAE;;kDAES,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC;;wBAElE,MAAM,CAAC,EAAE,IAAI,MAAM,CAAC,KAAK;0BACvB,IAAI,CAAC,IAAI;2BACR,MAAM,CAAC,KAAK;0BACb,IAAI,CAAC,IAAI;8BACL,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;+BAC5B,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,QAAQ;+BAC9C,IAAI,CAAC,QAAQ;8BACd,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;6BAC3C,CAAC,CAAQ,EAAE,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;YACxB,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC;4BACS,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;gCAI9B,MAAM,CAAC,KAAK;;;gBAG5B,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO;YAC9B,CAAC,CAAC,IAAI,CAAA,sCAAsC,MAAM,CAAC,KAAK;qCACnC,MAAM,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;4BACpE,MAAM,CAAC,OAAO;yBACjB;YACT,CAAC,CAAC,OAAO;;WAEd,CACF;;KAEJ,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,sBAAsB;QAC5B,OAAO,IAAI,CAAA;;;;;oBAKK,IAAI,CAAC,aAAa;;UAE5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,CAAC,MAAyB,EAAE,KAAa,EAAE,EAAE,CAAC,IAAI,CAAA;;uBAErC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;sBAChD,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,oCAAoB,CAAC,mCAAmB;;8BAE/D,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;kCACzB,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO;0BAC5E,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;2BACzC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;wBAChC,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC;wBACxC,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;;4BAE9B,MAAM,CAAC,KAAK;;cAE1B,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO;YAC9B,CAAC,CAAC,IAAI,CAAA,sCAAsC,MAAM,CAAC,KAAK;mCACnC,MAAM,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;0BACpE,MAAM,CAAC,OAAO;uBACjB;YACT,CAAC,CAAC,OAAO;WACZ,CACF;;KAEJ,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE;YAC9B,CAAC,eAAe,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3D,CAAC,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAC/D,CAAC,eAAe,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC3D,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,EAAE,qCAAqC;SAC5F,CAAC,GAAG,CAAC;IACR,CAAC;CACF,CAAA;AAtViB,0BAAM,GAAG,MAAO,CAAA;AAKL;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAmC;AACL;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;yDAA2B;AACtD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA6B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAmD;AAClD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAiD;AAC/C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAA2B;AAC1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAA2B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA+C;AAC9C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAqC;AAfrD,mBAAmB;IAD/B,aAAa,CAAC,gBAAgB,CAAC;GACnB,mBAAmB,CAuV/B;SAvVY,mBAAmB","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\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\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"]}
|