@nuralyui/radio-group 0.0.6 → 0.0.7
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 +57 -29
- package/index.d.ts +0 -0
- package/index.js +0 -0
- package/index.js.map +0 -0
- package/package.json +1 -1
- package/radio-group.component.d.ts +1 -1
- package/radio-group.component.js +1 -1
- package/radio-group.component.js.map +1 -1
- package/radio-group.style.d.ts +0 -0
- package/radio-group.style.js +0 -0
- package/radio-group.style.js.map +0 -0
- package/radio-group.types.d.ts +0 -0
- package/radio-group.types.js +0 -0
- package/radio-group.types.js.map +0 -0
- package/radio.constant.d.ts +0 -0
- package/radio.constant.js +0 -0
- package/radio.constant.js.map +0 -0
- package/react.d.ts +0 -0
- package/react.js +0 -0
- package/react.js.map +0 -0
- package/radio.component.d.ts +0 -146
- package/radio.component.js +0 -394
- package/radio.component.js.map +0 -1
- package/radio.style.d.ts +0 -7
- package/radio.style.js +0 -339
- package/radio.style.js.map +0 -1
- package/radio.type.d.ts +0 -37
- package/radio.type.js +0 -28
- package/radio.type.js.map +0 -1
package/bundle.js
CHANGED
|
@@ -232,7 +232,7 @@ const jc=1;
|
|
|
232
232
|
|
|
233
233
|
/* Size properties with fallbacks */
|
|
234
234
|
--nuraly-icon-size-fallback: 18px;
|
|
235
|
-
--nuraly-icon-size-small-fallback:
|
|
235
|
+
--nuraly-icon-size-small-fallback: 14px;
|
|
236
236
|
--nuraly-icon-size-medium-fallback: 20px;
|
|
237
237
|
--nuraly-icon-size-large-fallback: 24px;
|
|
238
238
|
--nuraly-icon-size-xlarge-fallback: 32px;
|
|
@@ -366,7 +366,13 @@ var Fx=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.
|
|
|
366
366
|
>
|
|
367
367
|
<path d="${c}" />
|
|
368
368
|
</svg>
|
|
369
|
-
`}getIconPath(){if(!this.name)return console.warn("HyIconElement: Icon name is required"),"";const c="solid"==this.type?"fas":"far";try{const a=li.definitions;if(!a||!a[c])return console.warn(`HyIconElement: Icon pack "${c}" not found`),"";const e=a[c][this.name];if(!e)return console.warn(`HyIconElement: Icon "${this.name}" not found in ${c} pack`),"";const s=e[4];return s&&"string"==typeof s?s:(console.warn(`HyIconElement: Invalid path data for icon "${this.name}"`),"")}catch(c){return console.error(`HyIconElement: Error loading icon "${this.name}":`,c),""}}getIconRole(){return this.clickable?"button":this.alt?"img":"presentation"}getIconTabIndex(){return this.clickable&&!this.disabled?"0":"-1"}getAriaDisabled(){return this.disabled?"true":void 0}};Rx.styles=yx,Fx([Ic({type:String})],Rx.prototype,"name",void 0),Fx([Ic()],Rx.prototype,"type",void 0),Fx([Ic({type:String,attribute:"alt"})],Rx.prototype,"alt",void 0),Fx([Ic({type:String,reflect:!0})],Rx.prototype,"size",void 0),Fx([Ic({type:String})],Rx.prototype,"color",void 0),Fx([Ic({type:String})],Rx.prototype,"width",void 0),Fx([Ic({type:String})],Rx.prototype,"height",void 0),Rx=Fx([Uc("nr-icon")],Rx);
|
|
369
|
+
`}getIconPath(){if(!this.name)return console.warn("HyIconElement: Icon name is required"),"";const c="solid"==this.type?"fas":"far";try{const a=li.definitions;if(!a||!a[c])return console.warn(`HyIconElement: Icon pack "${c}" not found`),"";const e=a[c][this.name];if(!e)return console.warn(`HyIconElement: Icon "${this.name}" not found in ${c} pack`),"";const s=e[4];return s&&"string"==typeof s?s:(console.warn(`HyIconElement: Invalid path data for icon "${this.name}"`),"")}catch(c){return console.error(`HyIconElement: Error loading icon "${this.name}":`,c),""}}getIconRole(){return this.clickable?"button":this.alt?"img":"presentation"}getIconTabIndex(){return this.clickable&&!this.disabled?"0":"-1"}getAriaDisabled(){return this.disabled?"true":void 0}};Rx.styles=yx,Fx([Ic({type:String})],Rx.prototype,"name",void 0),Fx([Ic()],Rx.prototype,"type",void 0),Fx([Ic({type:String,attribute:"alt"})],Rx.prototype,"alt",void 0),Fx([Ic({type:String,reflect:!0})],Rx.prototype,"size",void 0),Fx([Ic({type:String})],Rx.prototype,"color",void 0),Fx([Ic({type:String})],Rx.prototype,"width",void 0),Fx([Ic({type:String})],Rx.prototype,"height",void 0),Rx=Fx([Uc("nr-icon")],Rx);
|
|
370
|
+
/**
|
|
371
|
+
* @license
|
|
372
|
+
* Copyright 2018 Google LLC
|
|
373
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
374
|
+
*/
|
|
375
|
+
const Dx=c=>null!=c?c:E,Ex="",qx=n`
|
|
370
376
|
:host {
|
|
371
377
|
display: inline-block;
|
|
372
378
|
vertical-align: middle;
|
|
@@ -441,6 +447,28 @@ var Fx=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.
|
|
|
441
447
|
color: inherit;
|
|
442
448
|
/* Override any size attribute with CSS variable */
|
|
443
449
|
font-size: var(--nuraly-button-icon-size, 1rem) !important;
|
|
450
|
+
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
451
|
+
/* Inherit cursor from button */
|
|
452
|
+
cursor: inherit;
|
|
453
|
+
/* Prevent icon from being focusable */
|
|
454
|
+
pointer-events: none;
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
/* Icon focus state */
|
|
458
|
+
&:focus:not(:disabled) nr-icon {
|
|
459
|
+
opacity: 1;
|
|
460
|
+
filter: brightness(1.1);
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
/* Icon active state */
|
|
464
|
+
&:active:not(:disabled) nr-icon {
|
|
465
|
+
opacity: 0.9;
|
|
466
|
+
transform: scale(0.95);
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
/* Icon hover state */
|
|
470
|
+
&:hover:not(:disabled) nr-icon {
|
|
471
|
+
opacity: 1;
|
|
444
472
|
}
|
|
445
473
|
|
|
446
474
|
/* Icon spacing - use gap for cleaner spacing */
|
|
@@ -837,32 +865,32 @@ var Fx=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.
|
|
|
837
865
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
838
866
|
* SPDX-License-Identifier: MIT
|
|
839
867
|
*/
|
|
840
|
-
class
|
|
868
|
+
class $x{constructor(c){this._host=c,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}handleError(c,a){console.error(`[ButtonController:${this.constructor.name}] Error in ${a}:`,c),this._host.dispatchEvent(new CustomEvent("nr-button-error",{detail:{error:c.message,context:a,controller:this.constructor.name},bubbles:!0,composed:!0}))}requestUpdate(){try{this._host.requestUpdate()}catch(c){this.handleError(c,"requestUpdate")}}dispatchEvent(c){try{return this._host.dispatchEvent(c)}catch(c){return this.handleError(c,"dispatchEvent"),!1}}}
|
|
841
869
|
/**
|
|
842
870
|
* @license
|
|
843
871
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
844
872
|
* SPDX-License-Identifier: MIT
|
|
845
|
-
*/class
|
|
873
|
+
*/class Ux extends $x{createRipple(c){try{if(!this.host.ripple||this.host.disabled)return;const a=c.currentTarget,e=a.getBoundingClientRect(),s=2*Math.max(e.width,e.height),i=c.clientX-e.left-s/2,n=c.clientY-e.top-s/2,l=document.createElement("span");l.className="ripple",l.style.width=l.style.height=s+"px",l.style.left=i+"px",l.style.top=n+"px";a.querySelectorAll(".ripple").forEach((c=>c.remove())),a.appendChild(l),setTimeout((()=>{l.remove()}),600)}catch(c){this.handleError(c,"createRipple")}}handleRippleClick(c){try{this.createRipple(c),this.dispatchEvent(new CustomEvent("button-click",{detail:{disabled:this.host.disabled,timestamp:Date.now(),coordinates:{x:c.clientX,y:c.clientY}},bubbles:!0,composed:!0}))}catch(c){this.handleError(c,"handleRippleClick")}}}
|
|
846
874
|
/**
|
|
847
875
|
* @license
|
|
848
876
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
849
877
|
* SPDX-License-Identifier: MIT
|
|
850
|
-
*/class
|
|
878
|
+
*/class Ox extends $x{handleKeyboardActivation(c){try{if(this.host.disabled)return;this.isActivationKey(c)&&(c.preventDefault(),this.host.click(),this.dispatchEvent(new CustomEvent("keyboard-activation",{detail:{key:c.key,timestamp:Date.now(),target:this.host},bubbles:!0,composed:!0})))}catch(c){this.handleError(c,"handleKeyboardActivation")}}handleKeydown(c){try{if(this.host.disabled){if(!this.isReadonlyKeyAllowed(c))return void c.preventDefault()}this.handleKeyboardActivation(c)}catch(c){this.handleError(c,"handleKeydown")}}isActivationKey(c){return"Enter"===c.key||" "===c.key}isReadonlyKeyAllowed(c){return["Tab","Shift","Escape","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End"].includes(c.key)}}
|
|
851
879
|
/**
|
|
852
880
|
* @license
|
|
853
881
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
854
882
|
* SPDX-License-Identifier: MIT
|
|
855
|
-
*/class
|
|
883
|
+
*/class Ix extends $x{isLinkType(){return"link"===this.host.type&&!!this.host.href}getElementTag(){return this.isLinkType()?"a":"button"}getLinkAttributes(){try{const c={};return this.isLinkType()?(c.href=this.host.href,this.host.target&&(c.target=this.host.target,"_blank"===this.host.target&&(c.rel="noopener noreferrer")),c.role="link"):c.role="button",c}catch(c){return this.handleError(c,"getLinkAttributes"),{role:"button"}}}handleLinkNavigation(c){try{this.isLinkType()&&this.dispatchEvent(new CustomEvent("link-navigation",{detail:{href:this.host.href,target:this.host.target,timestamp:Date.now(),originalEvent:c},bubbles:!0,composed:!0}))}catch(c){this.handleError(c,"handleLinkNavigation")}}}
|
|
856
884
|
/**
|
|
857
885
|
* @license
|
|
858
886
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
859
887
|
* SPDX-License-Identifier: MIT
|
|
860
|
-
*/var
|
|
861
|
-
name=${
|
|
862
|
-
type=${
|
|
863
|
-
alt=${
|
|
864
|
-
size=${
|
|
865
|
-
color=${
|
|
888
|
+
*/var Gx=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.getOwnPropertyDescriptor(a,e):s,o=c.length-1;o>=0;o--)(i=c[o])&&(l=(n<3?i(l):n>3?i(a,e,l):i(a,e))||l);return n>3&&l&&Object.defineProperty(a,e,l),l};let jx=class extends(Tx(qc)){constructor(){super(...arguments),this.disabled=!1,this.loading=!1,this.size=Ex,this.type="default",this.shape="default",this.block=!1,this.dashed=!1,this.icon=[],this.iconPosition="left",this.href=Ex,this.target=Ex,this.ripple=!0,this.buttonAriaLabel=Ex,this.ariaDescribedBy=Ex,this.htmlType=Ex,this.requiredComponents=["nr-icon"],this.rippleController=new Ux(this),this.keyboardController=new Ox(this),this.linkController=new Ix(this)}connectedCallback(){super.connectedCallback(),this.validateDependencies()}getCommonAttributes(){return{"data-type":this.type,"data-shape":this.shape,"data-size":this.size||Cc,"data-state":this.loading?"loading":Cc,"data-theme":this.currentTheme,"data-block":this.block?"true":Cc,class:this.dashed?"button-dashed":"","aria-disabled":this.disabled?"true":"false","aria-label":this.buttonAriaLabel||Cc,"aria-describedby":this.ariaDescribedBy||Cc,tabindex:this.disabled?"-1":"0"}}renderIcon(c){if(!this.isComponentAvailable("nr-icon")){const a="string"==typeof c?c:c.name;return console.warn(`[nr-button] Icon component 'nr-icon' not available. Icon "${a}" will not render. Ensure the icon component is imported and registered.`),Cc}const a=()=>{switch(this.size){case"small":return"small";case"medium":default:return"medium";case"large":return"large"}};if("string"==typeof c){const e=a();return dc`<nr-icon name=${c} size=${Dx(e)}></nr-icon>`}const{name:e,type:s="solid",size:i,color:n,alt:l}=c,o=i||a();return dc`<nr-icon
|
|
889
|
+
name=${e}
|
|
890
|
+
type=${s}
|
|
891
|
+
alt=${l||""}
|
|
892
|
+
size=${Dx(o)}
|
|
893
|
+
color=${n||""}
|
|
866
894
|
></nr-icon>`}handleClick(c){this.disabled?c.preventDefault():(this.rippleController.handleRippleClick(c),this.linkController.isLinkType()&&this.linkController.handleLinkNavigation(c),this.dispatchEventWithMetadata("button-clicked",{type:this.type,disabled:this.disabled,loading:this.loading,href:this.href||null}))}handleKeydown(c){this.keyboardController.handleKeydown(c)}getResolvedLeftIcon(){var c,a;return this.iconLeft?this.iconLeft:(null===(c=this.icons)||void 0===c?void 0:c.left)?this.icons.left:(null===(a=this.icon)||void 0===a?void 0:a.length)>0?this.icon[0]:void 0}getResolvedRightIcon(){var c,a;return this.iconRight?this.iconRight:(null===(c=this.icons)||void 0===c?void 0:c.right)?this.icons.right:2===(null===(a=this.icon)||void 0===a?void 0:a.length)?this.icon[1]:void 0}render(){const c=this.linkController.getElementTag(),a=this.getCommonAttributes(),e=this.linkController.getLinkAttributes(),s=this.getResolvedLeftIcon(),i=this.getResolvedRightIcon(),n=dc`
|
|
867
895
|
<span id="container" part="container">
|
|
868
896
|
${s?this.renderIcon(s):Cc}
|
|
@@ -912,13 +940,13 @@ class qx{constructor(c){this._host=c,this._host.addController(this)}get host(){r
|
|
|
912
940
|
>
|
|
913
941
|
${n}
|
|
914
942
|
</button>
|
|
915
|
-
`}};
|
|
943
|
+
`}};jx.styles=qx,Gx([Ic({type:Boolean})],jx.prototype,"disabled",void 0),Gx([Ic({type:Boolean})],jx.prototype,"loading",void 0),Gx([Ic({type:String})],jx.prototype,"size",void 0),Gx([Ic({type:String})],jx.prototype,"type",void 0),Gx([Ic({type:String})],jx.prototype,"shape",void 0),Gx([Ic({type:Boolean})],jx.prototype,"block",void 0),Gx([Ic({type:Boolean})],jx.prototype,"dashed",void 0),Gx([Ic({type:Array})],jx.prototype,"icon",void 0),Gx([Ic({type:Object})],jx.prototype,"iconLeft",void 0),Gx([Ic({type:Object})],jx.prototype,"iconRight",void 0),Gx([Ic({type:Object})],jx.prototype,"icons",void 0),Gx([Ic({reflect:!0})],jx.prototype,"iconPosition",void 0),Gx([Ic({type:String})],jx.prototype,"href",void 0),Gx([Ic({type:String})],jx.prototype,"target",void 0),Gx([Ic({type:Boolean})],jx.prototype,"ripple",void 0),Gx([Ic({type:String})],jx.prototype,"buttonAriaLabel",void 0),Gx([Ic({type:String})],jx.prototype,"ariaDescribedBy",void 0),Gx([Ic({type:String})],jx.prototype,"htmlType",void 0),jx=Gx([Uc("nr-button")],jx);
|
|
916
944
|
/**
|
|
917
945
|
* @license
|
|
918
946
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
919
947
|
* SPDX-License-Identifier: MIT
|
|
920
948
|
*/
|
|
921
|
-
const
|
|
949
|
+
const Wx=n`
|
|
922
950
|
:host {
|
|
923
951
|
display: inline-flex;
|
|
924
952
|
align-items: center;
|
|
@@ -1050,7 +1078,7 @@ const jx=n`
|
|
|
1050
1078
|
* @license
|
|
1051
1079
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1052
1080
|
* SPDX-License-Identifier: MIT
|
|
1053
|
-
*/;var
|
|
1081
|
+
*/;var _x;!function(c){c.Small="small",c.Medium="medium",c.Large="large"}(_x||(_x={}));var Kx=n`
|
|
1054
1082
|
${n`
|
|
1055
1083
|
:host {
|
|
1056
1084
|
/* Typography */
|
|
@@ -1148,18 +1176,18 @@ const jx=n`
|
|
|
1148
1176
|
:host(:focus-within) label:not([disabled]) {
|
|
1149
1177
|
opacity: 0.8;
|
|
1150
1178
|
}
|
|
1151
|
-
`,
|
|
1179
|
+
`,Yx=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.getOwnPropertyDescriptor(a,e):s,o=c.length-1;o>=0;o--)(i=c[o])&&(l=(n<3?i(l):n>3?i(a,e,l):i(a,e))||l);return n>3&&l&&Object.defineProperty(a,e,l),l};let Xx=class extends(Tx(qc)){constructor(){super(...arguments),this.size="medium",this.variant="default",this.required=!1,this.disabled=!1,this.value=""}connectedCallback(){super.connectedCallback(),this.updateDataTheme()}updated(){this.updateDataTheme()}updateDataTheme(){this.closest("[data-theme]")||this.setAttribute("data-theme",this.currentTheme)}render(){return dc`
|
|
1152
1180
|
<label for=${this.for||""}>
|
|
1153
1181
|
<slot></slot>
|
|
1154
1182
|
${this.required?dc`<span class="required-asterisk">*</span>`:""}
|
|
1155
1183
|
</label>
|
|
1156
|
-
`}};
|
|
1184
|
+
`}};Xx.styles=Kx,Yx([Ic({reflect:!0})],Xx.prototype,"size",void 0),Yx([Ic({reflect:!0})],Xx.prototype,"variant",void 0),Yx([Ic({type:Boolean,reflect:!0})],Xx.prototype,"required",void 0),Yx([Ic({type:Boolean,reflect:!0})],Xx.prototype,"disabled",void 0),Yx([Ic()],Xx.prototype,"for",void 0),Yx([Ic()],Xx.prototype,"value",void 0),Xx=Yx([Uc("nr-label")],Xx);
|
|
1157
1185
|
/**
|
|
1158
1186
|
* @license
|
|
1159
1187
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1160
1188
|
* SPDX-License-Identifier: MIT
|
|
1161
1189
|
*/
|
|
1162
|
-
var
|
|
1190
|
+
var Qx,Jx=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.getOwnPropertyDescriptor(a,e):s,o=c.length-1;o>=0;o--)(i=c[o])&&(l=(n<3?i(l):n>3?i(a,e,l):i(a,e))||l);return n>3&&l&&Object.defineProperty(a,e,l),l};let Zx=Qx=class extends(Tx(qc)){constructor(){super(...arguments),this.requiredComponents=["nr-label"],this.checked=!1,this.disabled=!1,this.size=_x.Medium,this.name="",this.value="",this.id="",this.tabIndex=0,this.required=!1,this._handleClick=c=>{if(this.disabled)return c.preventDefault(),void c.stopPropagation();this.checked||(this.checked=!0,this._uncheckSiblings(),this._dispatchChangeEvent())},this._handleInputChange=c=>{c.stopPropagation(),this.disabled||(this.checked=this.inputElement.checked,this.checked&&(this._uncheckSiblings(),this._dispatchChangeEvent()))},this._handleFocus=()=>{this.disabled||this.dispatchEvent(new CustomEvent("nr-focus",{bubbles:!0,composed:!0}))},this._handleBlur=()=>{this.disabled||this.dispatchEvent(new CustomEvent("nr-blur",{bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._handleClick)}_uncheckSiblings(){if(!this.name)return;this.getRootNode().querySelectorAll(`nr-radio[name="${this.name}"]`).forEach((c=>{c!==this&&c instanceof Qx&&(c.checked=!1)}))}_dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("nr-change",{detail:{value:this.value,checked:this.checked},bubbles:!0,composed:!0}))}focus(){var c;null===(c=this.inputElement)||void 0===c||c.focus()}blur(){var c;null===(c=this.inputElement)||void 0===c||c.blur()}render(){return dc`
|
|
1163
1191
|
<div class="radio-wrapper" data-theme="${this.currentTheme}">
|
|
1164
1192
|
<input
|
|
1165
1193
|
type="radio"
|
|
@@ -1181,34 +1209,34 @@ var Xx,Qx=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Obje
|
|
|
1181
1209
|
<slot></slot>
|
|
1182
1210
|
</nr-label>
|
|
1183
1211
|
</div>
|
|
1184
|
-
`}};
|
|
1212
|
+
`}};Zx.styles=Wx,Jx([Ic({type:Boolean,reflect:!0})],Zx.prototype,"checked",void 0),Jx([Ic({type:Boolean,reflect:!0})],Zx.prototype,"disabled",void 0),Jx([Ic({reflect:!0})],Zx.prototype,"size",void 0),Jx([Ic({type:String})],Zx.prototype,"name",void 0),Jx([Ic({type:String})],Zx.prototype,"value",void 0),Jx([Ic({type:String})],Zx.prototype,"id",void 0),Jx([Ic({type:Number})],Zx.prototype,"tabIndex",void 0),Jx([Ic({type:Boolean})],Zx.prototype,"required",void 0),Jx([
|
|
1185
1213
|
/**
|
|
1186
1214
|
* @license
|
|
1187
1215
|
* Copyright 2017 Google LLC
|
|
1188
1216
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1189
1217
|
*/
|
|
1190
|
-
function(c,a){return(({finisher:c,descriptor:a})=>(e,s)=>{var i;if(void 0===s){const s=null!==(i=e.originalKey)&&void 0!==i?i:e.key,n=null!=a?{kind:"method",placement:"prototype",key:s,descriptor:a(e.key)}:{...e,key:s};return null!=c&&(n.finisher=function(a){c(a,s)}),n}{const i=e.constructor;void 0!==a&&Object.defineProperty(e,s,a(s)),null==c||c(i,s)}})({descriptor:e=>{const s={get(){var a,e;return null!==(e=null===(a=this.renderRoot)||void 0===a?void 0:a.querySelector(c))&&void 0!==e?e:null},enumerable:!0,configurable:!0};if(a){const a="symbol"==typeof e?Symbol():"__"+e;s.get=function(){var e,s;return void 0===this[a]&&(this[a]=null!==(s=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(c))&&void 0!==s?s:null),this[a]}}return s}})}("input")],
|
|
1218
|
+
function(c,a){return(({finisher:c,descriptor:a})=>(e,s)=>{var i;if(void 0===s){const s=null!==(i=e.originalKey)&&void 0!==i?i:e.key,n=null!=a?{kind:"method",placement:"prototype",key:s,descriptor:a(e.key)}:{...e,key:s};return null!=c&&(n.finisher=function(a){c(a,s)}),n}{const i=e.constructor;void 0!==a&&Object.defineProperty(e,s,a(s)),null==c||c(i,s)}})({descriptor:e=>{const s={get(){var a,e;return null!==(e=null===(a=this.renderRoot)||void 0===a?void 0:a.querySelector(c))&&void 0!==e?e:null},enumerable:!0,configurable:!0};if(a){const a="symbol"==typeof e?Symbol():"__"+e;s.get=function(){var e,s;return void 0===this[a]&&(this[a]=null!==(s=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(c))&&void 0!==s?s:null),this[a]}}return s}})}("input")],Zx.prototype,"inputElement",void 0),Zx=Qx=Jx([Uc("nr-radio")],Zx);
|
|
1191
1219
|
/**
|
|
1192
1220
|
* @license
|
|
1193
1221
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1194
1222
|
* SPDX-License-Identifier: MIT
|
|
1195
1223
|
*/
|
|
1196
|
-
class
|
|
1224
|
+
class cN{constructor(c){this.host=c,c.addController(this)}hostConnected(){if(this.host.defaultValue&&!this.host.value){const c=this.host.options.find((c=>c.value===this.host.defaultValue));c&&!this.isOptionDisabled(c)&&this.selectOption(c)}}hostDisconnected(){}selectOption(c){if(this.isOptionDisabled(c))return;const a=this.host.value;this.host.value=c.value,this.dispatchChangeEvent(c,a),this.host.requestUpdate()}getSelectedOption(){return this.host.options.find((c=>c.value===this.host.value))}isOptionSelected(c){return c.value===this.host.value}isOptionDisabled(c){return this.host.disabled||Boolean(c.disabled)}getFormData(){return this.host.name?{[this.host.name]:this.host.value}:{}}reset(){this.host.value=this.host.defaultValue||"",this.host.requestUpdate()}getSelectedValue(){return this.host.value}dispatchChangeEvent(c,a){const e=new CustomEvent("nr-change",{detail:{value:c.value,option:c,oldValue:a},bubbles:!0,composed:!0});this.host.dispatchEvent(e)}}
|
|
1197
1225
|
/**
|
|
1198
1226
|
* @license
|
|
1199
1227
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1200
1228
|
* SPDX-License-Identifier: MIT
|
|
1201
|
-
*/class
|
|
1229
|
+
*/class aN{constructor(c,a){this.groupController=a,this.host=c,this.boundKeyDownHandler=this.handleKeyDown.bind(this),c.addController(this)}hostConnected(){this.host.addEventListener("keydown",this.boundKeyDownHandler)}hostDisconnected(){this.host.removeEventListener("keydown",this.boundKeyDownHandler)}handleKeyDown(c){const a=this.host.options;if(!a||0===a.length)return;const e=a.findIndex((c=>this.groupController.isOptionSelected(c)));switch(c.key){case"ArrowDown":case"ArrowRight":c.preventDefault(),this.selectNextOption(a,e);break;case"ArrowUp":case"ArrowLeft":c.preventDefault(),this.selectPreviousOption(a,e);break;case" ":case"Enter":c.preventDefault(),-1===e&&this.selectFirstEnabledOption(a);break;case"Home":c.preventDefault(),this.selectFirstEnabledOption(a);break;case"End":c.preventDefault(),this.selectLastEnabledOption(a)}}selectNextOption(c,a){const e=-1===a?0:a+1;for(let a=0;a<c.length;a++){const s=c[(e+a)%c.length];if(!this.groupController.isOptionDisabled(s)){this.groupController.selectOption(s);break}}}selectPreviousOption(c,a){const e=-1===a?c.length-1:a-1;for(let a=0;a<c.length;a++){const s=c[(e-a+c.length)%c.length];if(!this.groupController.isOptionDisabled(s)){this.groupController.selectOption(s);break}}}selectFirstEnabledOption(c){const a=c.find((c=>!this.groupController.isOptionDisabled(c)));a&&this.groupController.selectOption(a)}selectLastEnabledOption(c){const a=c.filter((c=>!this.groupController.isOptionDisabled(c))),e=a[a.length-1];e&&this.groupController.selectOption(e)}}
|
|
1202
1230
|
/**
|
|
1203
1231
|
* @license
|
|
1204
1232
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1205
1233
|
* SPDX-License-Identifier: MIT
|
|
1206
|
-
*/class
|
|
1234
|
+
*/class eN{constructor(c){this._focusedIndex=-1,this._hasFocus=!1,this.host=c,this.boundFocusInHandler=this.handleFocusIn.bind(this),this.boundFocusOutHandler=this.handleFocusOut.bind(this),c.addController(this)}hostConnected(){this.host.addEventListener("focusin",this.boundFocusInHandler),this.host.addEventListener("focusout",this.boundFocusOutHandler)}hostDisconnected(){this.host.removeEventListener("focusin",this.boundFocusInHandler),this.host.removeEventListener("focusout",this.boundFocusOutHandler)}get focusedIndex(){return this._focusedIndex}get hasFocus(){return this._hasFocus}setFocusedOption(c){const a=this._focusedIndex;this._focusedIndex=c,a!==c&&this.host.requestUpdate()}getFocusedIndex(){return this._focusedIndex}clearFocus(){this._focusedIndex=-1,this._hasFocus=!1,this.host.requestUpdate()}handleFocusIn(c){var a;this._hasFocus=!0;const e=c.target;if(e&&e.matches('input[type="radio"], nr-button[role="radio"]')){const c=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelectorAll('input[type="radio"], nr-button[role="radio"]');if(c){const a=Array.from(c).indexOf(e);-1!==a&&this.setFocusedOption(a)}}this.host.requestUpdate()}handleFocusOut(c){const a=c.relatedTarget,e=this.host;a&&e.contains(a)||(this._hasFocus=!1,this.host.requestUpdate())}focus(){const c=this.host.options,a=this.host.value,e=c.findIndex((c=>c.value===a));if(-1!==e)return void this.focusOptionAtIndex(e);const s=c.findIndex((c=>!c.disabled));-1!==s&&this.focusOptionAtIndex(s)}blur(){const c=this.host.shadowRoot;if(!c)return;const a=c.querySelector('input[type="radio"]:focus, nr-button[role="radio"]:focus');a&&"function"==typeof a.blur&&a.blur()}focusOptionAtIndex(c){const a=this.host.shadowRoot;if(!a)return;this.updateTabIndices(c);const e=a.querySelectorAll('input[type="radio"]');if(e[c])return void e[c].focus();const s=a.querySelectorAll('nr-button[role="radio"]');s[c]&&s[c].focus()}updateTabIndices(c){const a=this.host.shadowRoot;if(!a)return;const e=this.host.options,s=this.host.value;let i=c;if(void 0===i){const c=e.findIndex((c=>c.value===s));i=-1!==c?c:e.findIndex((c=>!c.disabled))}a.querySelectorAll('input[type="radio"]').forEach(((c,a)=>{c.tabIndex=a===i?0:-1}));a.querySelectorAll('nr-button[role="radio"]').forEach(((c,a)=>{c.tabIndex=a===i?0:-1}))}hostUpdated(){this.updateTabIndices()}}
|
|
1207
1235
|
/**
|
|
1208
1236
|
* @license
|
|
1209
1237
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1210
1238
|
* SPDX-License-Identifier: MIT
|
|
1211
|
-
*/class
|
|
1239
|
+
*/class sN{constructor(c){this._isValid=!0,this._validationMessage="",this.host=c,c.addController(this)}hostConnected(){}hostDisconnected(){}get isValid(){return this._isValid}get validationMessage(){return this._validationMessage}validate(){const c=this.host.required,a=this.host.value;return c&&!a?(this._isValid=!1,this._validationMessage="Please select an option",this.host.requestUpdate(),!1):(this._isValid=!0,this._validationMessage="",this.host.requestUpdate(),!0)}setCustomValidity(c){this._isValid=!c,this._validationMessage=c,this.host.requestUpdate()}clearValidation(){this._isValid=!0,this._validationMessage="",this.host.requestUpdate()}getFormData(){const c=this.host.name,a=this.host.value;return c?{[c]:a}:{}}checkValidity(){return this.validate()}reportValidity(){const c=this.validate();if(!c){const c=new CustomEvent("invalid",{detail:{message:this._validationMessage},bubbles:!0,composed:!0});this.host.dispatchEvent(c)}return c}reset(){this.clearValidation()}getFormDataObject(){const c=this.host.name,a=this.host.value;if(!c||!a)return null;const e=new FormData;return e.append(c,a),e}validateOnChange(){this._isValid||this.validate()}}
|
|
1212
1240
|
/**
|
|
1213
1241
|
* @license
|
|
1214
1242
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
@@ -1219,12 +1247,12 @@ class Zx{constructor(c){this.host=c,c.addController(this)}hostConnected(){if(thi
|
|
|
1219
1247
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1220
1248
|
* SPDX-License-Identifier: MIT
|
|
1221
1249
|
*/
|
|
1222
|
-
class
|
|
1250
|
+
class iN{constructor(c){this._rippleEnabled=!0,this.activeRipples=new Set,this.ripplePool=[],this.host=c,this.boundClickHandler=this.handleClick.bind(this),c.addController(this);const a=this.addRippleEffect.bind(this);this.addRippleEffect=function(c,a){let e;return function(...s){e||(c.apply(this,s),e=!0,setTimeout((()=>e=!1),a))}}(a,16)}hostConnected(){this.host.addEventListener("click",this.boundClickHandler)}hostDisconnected(){this.host.removeEventListener("click",this.boundClickHandler)}get rippleEnabled(){return this._rippleEnabled}set rippleEnabled(c){this._rippleEnabled=c}handleClick(c){if(!this._rippleEnabled)return;const a=c.target;a&&a.matches('input[type="radio"]')&&this.addRippleToElement(a),a&&a.matches('nr-button[role="radio"]')&&this.addButtonRippleEffect(a)}addRippleEffect(c){const a=c.target;a&&this.addRippleToElement(a)}addRippleToElement(c){c.style.animation="none",c.offsetHeight;const a=getComputedStyle(c).getPropertyValue("--nuraly-radio-ripple-duration")||getComputedStyle(c).getPropertyValue("--nuraly-radio-local-ripple-duration")||"300ms";c.style.animation=`radioRipple ${a} ease-out`;const e=this.parseDuration(a);setTimeout((()=>{c.style.animation=""}),e)}addButtonRippleEffect(c){const a=this.createRippleElement(c);a&&(c.appendChild(a),setTimeout((()=>{a.parentNode&&a.parentNode.removeChild(a)}),600))}createRippleElement(c){const a=this.getRippleElement(c);return a.style.animation="radioRippleSpread 600ms ease-out",a}parseDuration(c){const a=c.match(/^([\d.]+)(s|ms)$/);if(!a)return 300;const e=parseFloat(a[1]);return"s"===a[2]?1e3*e:e}triggerRipple(c){if(!this._rippleEnabled)return;const a=this.host.shadowRoot;if(!a)return;let e=null;e=c?a.querySelector(`input[type="radio"][value="${c}"]`):a.querySelector('input[type="radio"]:checked'),e&&this.addRippleToElement(e)}disableRipple(){this._rippleEnabled=!1}enableRipple(){this._rippleEnabled=!0}clearRipples(){this.activeRipples.forEach((c=>{c.parentNode&&c.parentNode.removeChild(c),this.ripplePool.length<10&&(c.style.animation="",c.style.transform="scale(0)",this.ripplePool.push(c))})),this.activeRipples.clear();const c=this.host.shadowRoot;if(c){c.querySelectorAll('input[type="radio"]').forEach((c=>{c.style.animation=""}))}}getRippleElement(c){let a=this.ripplePool.pop();a||(a=document.createElement("span"),a.className="radio-ripple",a.style.position="absolute",a.style.borderRadius="50%",a.style.background="currentColor",a.style.opacity="0.1",a.style.pointerEvents="none");const e=c.getBoundingClientRect(),s=Math.max(e.width,e.height);return a.style.width=`${s}px`,a.style.height=`${s}px`,a.style.left=-s/2+"px",a.style.top=-s/2+"px",a.style.transform="scale(0)",this.activeRipples.add(a),a}addRippleEffectToElement(c){this.addRippleToElement(c)}setRippleEnabled(c){this._rippleEnabled=c}}
|
|
1223
1251
|
/**
|
|
1224
1252
|
* @license
|
|
1225
1253
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1226
1254
|
* SPDX-License-Identifier: MIT
|
|
1227
|
-
*/const
|
|
1255
|
+
*/const nN=n`
|
|
1228
1256
|
:host {
|
|
1229
1257
|
/* ========================================
|
|
1230
1258
|
* CSS CUSTOM PROPERTIES - RADIO GROUP
|
|
@@ -1412,13 +1440,13 @@ class sN{constructor(c){this._rippleEnabled=!0,this.activeRipples=new Set,this.r
|
|
|
1412
1440
|
.slot-container.selected .slot-wrapper {
|
|
1413
1441
|
background-color: var(--nuraly-radio-group-slot-selected-bg);
|
|
1414
1442
|
}
|
|
1415
|
-
`;var
|
|
1443
|
+
`;var lN,oN,rN,tN,fN;!function(c){c.Horizontal="horizontal",c.Vertical="vertical"}(lN||(lN={})),function(c){c.Left="left",c.Right="right"}(oN||(oN={})),function(c){c.Default="default",c.Button="button",c.Slot="slot"}(rN||(rN={})),function(c){c.Small="small",c.Medium="medium",c.Large="large"}(tN||(tN={})),function(c){c.Default="default",c.Solid="solid"}(fN||(fN={}));
|
|
1416
1444
|
/**
|
|
1417
1445
|
* @license
|
|
1418
1446
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1419
1447
|
* SPDX-License-Identifier: MIT
|
|
1420
1448
|
*/
|
|
1421
|
-
var
|
|
1449
|
+
var zN=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.getOwnPropertyDescriptor(a,e):s,o=c.length-1;o>=0;o--)(i=c[o])&&(l=(n<3?i(l):n>3?i(a,e,l):i(a,e))||l);return n>3&&l&&Object.defineProperty(a,e,l),l};let mN=class extends(Tx(qc)){constructor(){super(...arguments),this.requiredComponents=["nr-icon","nr-radio"],this.options=[],this.defaultValue="",this.value="",this.name="radioGroup",this.direction="vertical",this.type=rN.Default,this.required=!1,this.disabled=!1,this.size="medium",this.position="left",this.groupController=new cN(this),this.keyboardController=new aN(this,this.groupController),this.focusController=new eN(this),this.validationController=new sN(this),this.rippleController=new iN(this)}get selectedOption(){return this.groupController.getSelectedOption()}isOptionSelected(c){return this.groupController.isOptionSelected(c)}isOptionDisabled(c){return this.groupController.isOptionDisabled(c)}handleSelectionChange(c){this.groupController.selectOption(c)}setFocusedOption(c){this.focusController.setFocusedOption(c)}handleKeyDown(c){}addRippleEffect(c){this.rippleController.addRippleEffect(c)}validate(){return this.validationController.validate()}get validationMessage(){return this.validationController.validationMessage}get isValid(){return this.validationController.isValid}getFormData(){return this.validationController.getFormData()}reset(){this.validationController.reset()}get formData(){return this.validationController.getFormDataObject()}checkValidity(){return this.validate()}reportValidity(){return this.validationController.reportValidity()}focus(){this.focusController.focus()}blur(){this.focusController.blur()}renderOptionDefault(){return dc`
|
|
1422
1450
|
<div
|
|
1423
1451
|
role="radiogroup"
|
|
1424
1452
|
aria-labelledby="radio-group-label"
|
|
@@ -1545,4 +1573,4 @@ var fN=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.
|
|
|
1545
1573
|
</div>`:Cc}
|
|
1546
1574
|
`))}
|
|
1547
1575
|
</div>
|
|
1548
|
-
`}render(){return dc`${((c,a,e)=>{for(const e of a)if(e[0]===c)return(0,e[1])();return null==e?void 0:e()})(this.type,[[
|
|
1576
|
+
`}render(){return dc`${((c,a,e)=>{for(const e of a)if(e[0]===c)return(0,e[1])();return null==e?void 0:e()})(this.type,[[rN.Default,()=>this.renderOptionDefault()],[rN.Button,()=>this.renderOptionsWithButtons()],[rN.Slot,()=>this.renderOptionsWithSlots()],["button-slot",()=>this.renderButtonsWithSlots()]])} `}};mN.styles=nN,zN([Ic({type:Array})],mN.prototype,"options",void 0),zN([Ic({type:String,attribute:"default-value"})],mN.prototype,"defaultValue",void 0),zN([Ic({type:String})],mN.prototype,"value",void 0),zN([Ic({type:String})],mN.prototype,"name",void 0),zN([Ic({type:String})],mN.prototype,"direction",void 0),zN([Ic({type:String})],mN.prototype,"type",void 0),zN([Ic({type:Boolean})],mN.prototype,"required",void 0),zN([Ic({type:Boolean})],mN.prototype,"disabled",void 0),zN([Ic({type:String})],mN.prototype,"size",void 0),zN([Ic({type:String})],mN.prototype,"position",void 0),mN=zN([Uc("nr-radio-group")],mN);export{mN as NrRadioGroupElement,lN as RadioButtonDirection,oN as RadioButtonPosition,tN as RadioButtonSize,rN as RadioButtonType,fN as RadioButtonVariant};
|
package/index.d.ts
CHANGED
|
File without changes
|
package/index.js
CHANGED
|
File without changes
|
package/index.js.map
CHANGED
|
File without changes
|
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@ import '../icon/icon.component.js';
|
|
|
8
8
|
import '../button/button.component.js';
|
|
9
9
|
import '../radio/radio.component.js';
|
|
10
10
|
import { RadioButtonType, RadioButtonOption } from './radio-group.types.js';
|
|
11
|
-
declare const NrRadioGroupElement_base: (new (...args: any[]) => import("
|
|
11
|
+
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
12
|
/**
|
|
13
13
|
* A radio button group component using Reactive Controllers architecture.
|
|
14
14
|
*
|
package/radio-group.component.js
CHANGED
|
@@ -17,7 +17,7 @@ import { classMap } from 'lit/directives/class-map.js';
|
|
|
17
17
|
import '../icon/icon.component.js';
|
|
18
18
|
import '../button/button.component.js';
|
|
19
19
|
import '../radio/radio.component.js';
|
|
20
|
-
import { NuralyUIBaseMixin } from '
|
|
20
|
+
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
21
21
|
import { RadioGroupController, RadioKeyboardController, RadioFocusController, RadioValidationController, RadioRippleController } from './controllers/index.js';
|
|
22
22
|
import { styles } from './radio-group.style.js';
|
|
23
23
|
import { RadioButtonType } from './radio-group.types.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 '../../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"]}
|
|
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"]}
|
package/radio-group.style.d.ts
CHANGED
|
File without changes
|
package/radio-group.style.js
CHANGED
|
File without changes
|
package/radio-group.style.js.map
CHANGED
|
File without changes
|
package/radio-group.types.d.ts
CHANGED
|
File without changes
|
package/radio-group.types.js
CHANGED
|
File without changes
|
package/radio-group.types.js.map
CHANGED
|
File without changes
|
package/radio.constant.d.ts
CHANGED
|
File without changes
|
package/radio.constant.js
CHANGED
|
File without changes
|
package/radio.constant.js.map
CHANGED
|
File without changes
|
package/react.d.ts
CHANGED
|
File without changes
|
package/react.js
CHANGED
|
File without changes
|
package/react.js.map
CHANGED
|
File without changes
|