@nova-design-system/nova-webcomponents 3.0.0-beta.20 → 3.0.0-beta.21

package/dist/components/nv-fieldmultiselect.js.map

@@ -1 +0,0 @@
-{"file":"nv-fieldmultiselect.js","mappings":";;;;;;;;;AAAA,MAAM,qBAAqB,GAAG,0iMAA0iM,CAAC;AACzkM,iCAAe,qBAAqB;;MCiCvBA,oBAAkB;;;;;;;;;;QA8SrB,8BAAyB,GAAG,CAAC,KAAiB;YACpD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,OAAO;aACR;YAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;;YAG3C,IAAI,MAAM,CAAC,OAAO,KAAK,GAAG,IAAI,MAAM,CAAC,OAAO,KAAK,MAAM,EAAE;gBACvD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;;gBAG3B,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAC1C,kBAAkB,CACJ,CAAC;gBACjB,IAAI,cAAc,EAAE;oBAClB,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;;oBAG7C,MAAM,iBAAiB,GAAG;wBACxB,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;qBACjD,CAAC;;oBAGF,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;iBACjE;aACF;SACF,CAAC;;;;;QAMM,gBAAW,GAAG,CAAC,KAAY;YACjC,IAAI,CAAC,IAAI,CAAC,UAAU;gBAAE,OAAO;YAC7B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,OAAO;aACR;YACD,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;YAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACpC,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB,CAAC;;;;QAyFM,qBAAgB,GAAG;YACzB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,OAAO;aACR;YACD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB,CAAC;;;;QAKM,oBAAe,GAAG;;YAExB,UAAU,CAAC;gBACT,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;oBAC7C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;oBAClB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;iBAC5B;aACF,EAAE,GAAG,CAAC,CAAC;SACT,CAAC;;;;;QAMM,kBAAa,GAAG;YACtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,OAAO;aACR;YAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;;gBAG3B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;oBACpB,IAAI,CAAC,cAAc,EAAE,CAAC;iBACvB;aACF;iBAAM;gBACL,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;aAC5B;SACF,CAAC;yBA/c2B,OAAO;8BAMT,EAAE;0BAMC,UAAU;uBAMoB,EAAE;yBAMhC,KAAK;uBASRC,EAAM,EAAE;;;;;oBAwCnB,KAAK;4BAS+B,KAAK;;wBAe5B,KAAK;qBAQR,KAAK;;wBAgBF,KAAK;wBAQL,KAAK;2BAMH,kBAAkB;0BAM5B,EAAE;0BAMD,KAAK;4BAGH,IAAI,CAAC,UAAU;;IAiBvC,iBAAiB,CAAC,KAA2B;QAC3C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;KAC1B;IAGD,sBAAsB,CAAC,QAAiB;QACtC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;QAC7B,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;KAC5B;IAGD,iBAAiB;;QAEf,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;;;;;;IAeD,iBAAiB,CACf,KAAmE;QAEnE,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE3C,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;;QAGxC,IAAI,KAAK,EAAE;YACT,IAAI,OAAO,EAAE;;gBAEX,IAAI,CAAC,cAAc,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;aACvD;iBAAM;;gBAEL,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,KAAK,KAAK,CAAC,CAAC;aACxE;SACF;;QAGD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAClD;;;;;;;IASD,iBAAiB;QACf,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;;QAGvE,IAAI,CAAC,mBAAmB,EAAE,CAAC;;QAG3B,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,EAAE;YACjC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;YAC3C,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;aAAM;;YAEL,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;;;;IAKO,mBAAmB;;QACzB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,CACb,CAAC;QAE3C,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAC7B,IAAI;;YACF,OAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,KAAK;gBACzC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,KAAK;gBACzC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,MAAK,IAAI,CAAC,KAAK,CAAA;SAAA,CAC1C,CAAC;;QAGF,KAAK,CAAC,OAAO,CAAC,IAAI;YAChB,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;SACnC,CAAC,CAAC;QAEH,IAAI,YAAY,EAAE;;YAEhB,YAAY,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YAC9C,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;;YAGvC,IAAI,CAAC,KAAK;gBACR,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC;oBAClC,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC;qBAClC,MAAA,YAAY,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAA;oBAChC,EAAE,CAAC;YACL,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;aACtC;SACF;KACF;;;;IAKD,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC3E;;;;;IAwDO,WAAW;;QACjB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,CACb,CAAC;;QAG3C,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAC7C,uCAAuC,CACxC,CAAC;QACF,IAAI,iBAAiB,EAAE;YACrB,iBAAiB,CAAC,MAAM,EAAE,CAAC;SAC5B;QAED,IAAI,eAAe,GAAG,KAAK,CAAC;;QAG5B,KAAK,CAAC,OAAO,CAAC,IAAI;;YAChB,MAAM,WAAW,GAAG,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,EAAE,KAAI,EAAE,CAAC;YAC1D,MAAM,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,EAAE,KAAI,EAAE,CAAC;;YAG9C,MAAM,UAAU,GACd,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;gBAC/B,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAExC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,GAAG,MAAM,CAAC;YAE9C,IAAI,UAAU,EAAE;gBACd,eAAe,GAAG,IAAI,CAAC;aACxB;SACF,CAAC,CAAC;;QAGH,IAAI,CAAC,eAAe,EAAE;YACpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;YACtE,SAAS,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;YAC7C,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YAC3C,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YACzC,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC,0CAAE,WAAW,CAAC,SAAS,CAAC,CAAC;SACrE;KACF;;;;IAKO,WAAW;QACjB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,CACb,CAAC;QAE3C,KAAK,CAAC,OAAO,CAAC,IAAI;YAChB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;SACzB,CAAC,CAAC;KACJ;;;;;IAOD,MAAM,aAAa;QACjB,OAAO,IAAI,CAAC,UAAU,CAAC;KACxB;;;;;IAMO,kBAAkB,CAAC,KAAiB;QAC1C,IACE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;aACrC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC,EACvE;;YAEA,OAAO;SACR;QAED,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;KAC5B;IAgDD,aAAa,CAAC,KAAoB;QAChC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;gBAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;;gBAG3B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;oBACpB,IAAI,CAAC,cAAc,EAAE,CAAC;iBACvB;gBAED,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YACD,OAAO;SACR;QAED,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,CACb,CAAC;QAE3C,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YACtB,OAAO,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC;YACpD,OAAO;SACR;QAED,IAAI,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,IACrC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CACvC,CAAC;QAEF,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,YAAY,GAAG,CAAC,YAAY,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC;YACjD,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;SACjD;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;YAClC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,YAAY,GAAG,CAAC,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC;YAChE,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;SACjD;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,YAAY,IAAI,CAAC,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAC;SAC7B;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YACjC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;aAC1B;SACF;KACF;IAEO,qBAAqB,CAC3B,KAGG,EACH,KAAa;QAEb,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC;YACpB,IAAI,CAAC,KAAK,KAAK,EAAE;gBACf,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;gBAClC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;gBAClC,IAAoB,CAAC,KAAK,EAAE,CAAC;aAC/B;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;gBACrC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;aACrC;SACF,CAAC,CAAC;KACJ;IAEO,cAAc;QACpB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CACrC,2BAA2B,CACW,CAAC;QAEzC,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;YACxC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;YACvC,SAAS,CAAC,KAAK,EAAE,CAAC;SACnB;aAAM;YACL,OAAO,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;SAC9C;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrD,8DAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAED,mEACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAA0B,CAAC,EAC7D,WAAW,EAAC,YAAY,EACxB,SAAS,EAAC,cAAc,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,IA2Df,4DAAK,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,SAAS,IACnD,6DAAM,IAAI,EAAC,cAAc,GAAQ,EAEjC,4DACE,KAAK,EAAC,6BAA6B,EACnC,OAAO,EAAE,IAAI,CAAC,yBAAyB,IAEvC,6DAAM,IAAI,EAAC,eAAe,GAAQ,EAEjC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAClD,aACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,SAAS,EAAE,IAAI,CAAC,aAAa,GAC7B,KAEF,SACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,yBAAyB,EACvC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAE9B,gBAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAQ,CAC3C,CACL,EAED,sEACE,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,aAAa,GAAG,cAAc,EAChD,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,OAAO,gBACJ,IAAI,CAAC,IAAI,GAAG,eAAe,GAAG,eAAe,kBAC3C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAClC,OAAO,EAAE,IAAI,CAAC,aAAa,GAC3B,CACE,EAEN,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,EAEN,6DAAM,IAAI,EAAC,SAAS,IAClB,6DACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtB,UACE,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI;gBACrB,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;aAC1D,mBACc,IAAI,CAAC,cAAc;iBAC/B,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;iBACtB,QAAQ,EAAE,EACb,IAAI,EAAC,QAAQ,IAEb,iCACE,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,GACnD,CACC,CACN,CAAC,CACC,CACA,CACI,EAGZ,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7C,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,EAGA,CAAC,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,4BAA4B,CAAC,MACnD,4DAAK,MAAM,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,mBAAmB,IACjD,6DAAM,IAAI,EAAC,mBAAmB,IAAE,IAAI,CAAC,gBAAgB,CAAQ,CACzD,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvFieldmultiselect","uuidv4"],"sources":["src/components/nv-fieldmultiselect/nv-fieldmultiselect.scss?tag=nv-fieldmultiselect","src/components/nv-fieldmultiselect/nv-fieldmultiselect.tsx"],"sourcesContent":["// // @import '../../styles/form-field';\n\n// // nv-fieldmultiselect {\n// //   @include form-field-variables();\n// //   @include form-field-root();\n\n// //   &[readonly]:not([readonly='false']) {\n// //     @include form-field-readonly-variables();\n// //   }\n\n// //   &[error]:not([error='false']) {\n// //     @include form-field-error-variables();\n// //   }\n\n// //   &[required]:not([required='false']) label {\n// //     @include form-field-label-required();\n// //   }\n\n// //   label {\n// //     @include form-field-label();\n// //   }\n\n// //   nv-popover {\n// //     width: 100%;\n// //     display: block;\n// //   }\n\n// //   .input-wrapper {\n// //     @include form-field-input-wrapper();\n// //     width: 100%;\n// //   }\n\n// //   // .input-container {\n// //   //   @include form-field-input-container();\n// //   //   display: flex;\n// //   //   align-items: center;\n// //   //   position: relative;\n// //   //   width: 100%;\n// //   //   min-height: 40px;\n\n// //   //   input,\n// //   //   p.non-filterable-text {\n// //   //     @include form-field-input();\n// //   //     width: 100%;\n// //   //     padding-right: 2rem;\n// //   //     flex-grow: 1;\n// //   //     margin: 0;\n// //   //     min-height: 100%;\n// //   //     box-sizing: border-box;\n// //   //   }\n\n// //   //   .toggle-dropdown-icon {\n// //   //     position: absolute;\n// //   //     right: 0;\n// //   //     top: 50%;\n// //   //     transform: translateY(-50%);\n// //   //     z-index: 2;\n// //   //   }\n\n// //   //   nv-icon.validation {\n// //   //     @include form-field-icon();\n// //   //     position: absolute;\n// //   //     right: 50px;\n// //   //   }\n\n// //   //   &.focus-within,\n// //   //   &:hover {\n// //   //     border-color: var(--nv-field-border-focus);\n// //   //     box-shadow: 0px 0px 0px var(--focus-field-stroke)\n// //   //       var(--nv-field-focus-box-shadow);\n// //   //   }\n// //   // }\n\n// //   .non-filterable-text {\n// //     display: block;\n// //     border-radius: var(--form-field-radius);\n// //     background-color: var(--nv-field-background);\n// //     color: var(--components-form-field-content-text);\n// //     font-size: var(--form-field-font-size);\n// //     font-weight: 500;\n// //     line-height: var(--form-field-line-height);\n// //     box-sizing: border-box;\n// //     cursor: pointer;\n// //     height: 100%;\n// //     min-height: 40px;\n\n// //     span {\n// //       display: inline-block;\n// //       width: 100%;\n// //       overflow: hidden;\n// //       text-overflow: ellipsis;\n// //     }\n// //   }\n\n// //   .dropdown-list {\n// //     max-height: var(--dropdown-max-height, 200px);\n// //     overflow-y: auto;\n// //     list-style: none;\n// //     margin: 0;\n// //     padding: 0;\n// //     background-color: var(--nv-field-background);\n// //     border: 1px solid var(--nv-field-border);\n// //     border-radius: var(--form-field-radius);\n\n// //     li {\n// //       padding: 0.5rem 1rem;\n// //       display: flex;\n// //       align-items: center;\n// //       cursor: pointer;\n// //       transition: background-color 0.2s ease;\n\n// //       &.dropdown-item {\n// //         &:hover {\n// //           background-color: rgba(var(--nv-primary-rgb), 0.1);\n// //         }\n\n// //         &.is-selected {\n// //           background-color: rgba(var(--nv-primary-rgb), 0.2);\n// //         }\n\n// //         // input[type='checkbox'] {\n// //         //   margin-right: 0.5rem;\n// //         // }\n// //       }\n\n// //       &.disabled {\n// //         color: var(--nv-field-disabled-text);\n// //         cursor: not-allowed;\n// //       }\n// //     }\n// //   }\n\n// //   // .badge {\n// //   //   display: inline-flex;\n// //   //   align-items: center;\n// //   //   background-color: var(--nv-primary);\n// //   //   color: var(--nv-field-background);\n// //   //   padding: 0.25rem 0.5rem;\n// //   //   border-radius: 12px;\n// //   //   font-size: 0.75rem;\n\n// //   //   .close-icon {\n// //   //     margin-left: 0.25rem;\n// //   //     cursor: pointer;\n\n// //   //     &:hover {\n// //   //       color: rgba(var(--nv-primary-rgb), 0.8);\n// //   //     }\n// //   //   }\n// //   // }\n\n// //   .description {\n// //     @include form-field-description();\n// //   }\n\n// //   .error-description {\n// //     @include form-field-error-description();\n// //   }\n\n// //   hr {\n// //     border: none;\n// //     border-top: 1px solid var(--dropdown-divider-color, #ccc);\n// //     margin: 0.5rem 0;\n// //   }\n// // }\n\n// // .input-container.focus-within,\n// // .input-container:hover {\n// //   border-color: var(--nv-field-border-focus);\n// //   box-shadow: 0px 0px 0px var(--focus-field-stroke)\n// //     var(--nv-field-focus-box-shadow);\n// // }\n\n// @import '../../styles/form-field';\n\n// nv-fieldmultiselect {\n//   @include form-field-variables();\n//   @include form-field-root();\n\n//   &[readonly]:not([readonly='false']) {\n//     @include form-field-readonly-variables();\n//   }\n\n//   &[error]:not([error='false']) {\n//     @include form-field-error-variables();\n//   }\n\n//   &[required]:not([required='false']) label {\n//     @include form-field-label-required();\n//   }\n\n//   label {\n//     @include form-field-label();\n//   }\n//   // display: flex;\n//   // align-items: center;\n//   // justify-content: space-between;\n//   // max-width: 300px;\n//   // width: 100%;\n//   // padding: var(--menu-contextual-item-padding-y)\n//   //   var(--menu-contextual-item-padding-x); //var(--components-list-custom-padding-y) var(--components-list-custom-padding-x);\n//   // font-size: var(--menu-contextual-item-font-size);\n//   // font-weight: var(--menu-contextual-item-font-weight);\n//   // color: var(--components-menu-contextual-item-content);\n//   // border-radius: var(--menu-contextual-item-radius);\n//   // transition: background-color 150ms ease-out, color 150ms ease-out;\n//   // cursor: pointer;\n\n//   // &:hover,\n//   // &:focus,\n//   // &:focus-within {\n//   //   background-color: var(--components-menu-contextual-item-background-hover);\n//   //   color: var(--components-menu-contextual-item-content-hover);\n//   // }\n\n//   // &.selected {\n//   //   background-color: var(\n//   //     --components-menu-contextual-item-background-selected\n//   //   );\n//   //   color: var(--components-menu-contextual-item-content-selected);\n//   // }\n\n//   // &[disabled]:not([disabled='false']) {\n//   //   cursor: not-allowed;\n//   //   background-color: unset;\n//   //   color: var(--components-menu-contextual-item-content-disabled);\n//   // }\n\n//   // [data-scope='text'] {\n//   //   flex-grow: 1;\n//   //   overflow: hidden;\n//   //   text-overflow: ellipsis;\n//   //   white-space: nowrap;\n//   // }\n\n//   // .selection-icon {\n//   //   padding-left: 10px;\n//   //   color: var(--components-menu-contextual-item-icon-selected);\n//   //   align-self: center;\n//   // }\n// }\n\n// :root {\n//   --components-menu-contextual-item-background-selected: #f5f6f7; // Couleur de fond pour l'élément sélectionné\n//   --components-menu-contextual-item-content-selected: #171f22; // Couleur du texte pour l'élément sélectionné\n//   --components-menu-contextual-item-icon-selected: #007f00; // Couleur de l'icône (coche) pour l'élément sélectionné\n//   --components-menu-contextual-item-background-hover: #f5f6f7; // Couleur de fond lors du hover\n//   --components-menu-contextual-item-content-hover: #171f22; // Couleur du texte lors du hover\n// }\n\n\n@import '../../styles/form-field';\n\nnv-fieldmultiselect {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  nv-popover {\n    width: 100%;\n    display: block;\n  }\n\n  .input-wrapper-multiselect {\n    @include form-field-input-wrapper();\n    width: 100%;\n  }\n\n  .input-container-multiselect {\n    @include form-field-input-container();\n    display: flex;\n    align-items: center;\n    position: relative;\n    width: 100%;\n    min-height: 40px;\n    input,\n    p.non-filterable-text {\n      @include form-field-input();\n      width: 100%;\n      padding-right: 2rem;\n      flex-grow: 1;\n      margin: 0;\n      min-height: 100%;\n      box-sizing: border-box;\n    }\n\n    .toggle-dropdown-icon {\n      position: absolute;\n      right: 0;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 2;\n    }\n\n    nv-icon.validation {\n      @include form-field-icon();\n      position: absolute;\n      right: 50px;\n    }\n\n    &.focus-within,\n    &:hover {\n      border-color: var(--nv-field-border-focus);\n      box-shadow: 0px 0px 0px var(--focus-field-stroke)\n        var(--nv-field-focus-box-shadow);\n    }\n  }\n\n  .non-filterable-text {\n    display: block;\n    border-radius: var(--form-field-radius);\n    background-color: var(--nv-field-background);\n    color: var(--components-form-field-content-text);\n    font-size: var(--form-field-font-size);\n    font-weight: 500;\n    line-height: var(--form-field-line-height);\n    box-sizing: border-box;\n    cursor: pointer;\n    height: 100%;\n    min-height: 40px;\n\n    span {\n      display: inline-block;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n\n  hr {\n    border: none;\n    border-top: 1px solid var(--dropdown-divider-color, #ccc);\n    margin: 0.5rem 0;\n  }\n}\n\n.input-container-multiselect.focus-within,\n.input-container-multiselect:hover {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke)\n    var(--nv-field-focus-box-shadow);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\n// import { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitemcheck/DropdownItemSelectedEventDetail';\n\n/**\n * @slot content - The content of the list.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n\n@Component({\n  tag: 'nv-fieldmultiselect',\n  styleUrl: 'nv-fieldmultiselect.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldmultiselect {\n  @Element() el: HTMLNvFieldmultiselectElement;\n  private inputElement!: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Maximum height of the dropdown list when open.\n   */\n  @Prop({ reflect: true })\n  readonly maxHeight: string = '200px';\n\n  /**\n   * List of selected values in the multiselect.\n   */\n  @State()\n  selectedValues: string[] = [];\n\n  /**\n   * Text for the badge showing the number of selected items.\n   */\n  @Prop({ reflect: true })\n  readonly badgeLabel: string = 'selected';\n\n  /**\n   * List of options available in the dropdown.\n   */\n  @Prop()\n  readonly options: Array<{ label: string; value: string }> = [];\n\n  /**\n   * Enables a clear-all button for the selection.\n   */\n  @Prop({ reflect: true })\n  readonly clearable: boolean = false;\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   * The placeholder is displayed only when the filterable option is enabled.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input’s data in form submissions. It should be\n   * unique within the form to avoid conflicts.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * State of the dropdown popover.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * The autocomplete prop helps users fill out the input field faster by\n   * suggesting entries they’ve used before, like their email or address.\n   * You can turn it on to make forms more convenient or off to ensure users\n   * always type in fresh data.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n  /**\n   * Specifies the value of the input field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the input’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the dropdown\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * The text to display when no items match the filter.\n   */\n  @Prop({ reflect: true })\n  readonly emptyresult: string = 'No results found';\n\n  /**\n   * The text entered by the user for filtering dropdown items.\n   */\n  @State()\n  filterText: string = '';\n\n  /**\n   * Enables or disables the filtering feature for the dropdown items.\n   */\n  @Prop({ reflect: true, mutable: true })\n  filterable: boolean = false;\n\n  @State()\n  isFilterable: boolean = this.filterable;\n\n  // @State()\n  // selectedValues: Set<string> = new Set();\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    this.open = event.detail; // Update `open` based on the popover state\n  }\n\n  @Watch('filterable')\n  watchFilterableHandler(newValue: boolean) {\n    this.isFilterable = newValue;\n    this.filterable = newValue;\n  }\n\n  @Watch('value')\n  watchValueHandler() {\n    // Handle value change and update the corresponding dropdown item if it exists\n    this.setInitialSelection();\n  }\n\n  /**\n   * Event emitted when the selection changes in the multiselect.\n   * Emits the current list of selected values.\n   */\n  @Event()\n  multiselectChange: EventEmitter<string[]>;\n\n  /**\n   * Listen for the `itemChecked` event emitted by child items.\n   * Updates the selected values accordingly.\n   * @param {CustomEvent<{ value: string; checked: boolean }>} event - The event object containing the selected value and its checked state.\n   */\n  @Listen('itemChecked')\n  handleItemChecked(\n    event: CustomEvent<{ value: string | undefined; checked: boolean }>,\n  ) {\n    if (this.disabled || this.readonly) return;\n\n    const { value, checked } = event.detail;\n\n    // Si une valeur est définie, met à jour `selectedValues`.\n    if (value) {\n      if (checked) {\n        // Ajoute la valeur si elle est cochée\n        this.selectedValues = [...this.selectedValues, value];\n      } else {\n        // Retire la valeur si elle est décochée\n        this.selectedValues = this.selectedValues.filter(val => val !== value);\n      }\n    }\n\n    // Émet l'événement `multiselectChange` avec la nouvelle liste des valeurs sélectionnées\n    this.multiselectChange.emit(this.selectedValues);\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Subscribe to click outside event.\n   */\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n\n    // Handle pre-selection during component initialization\n    this.setInitialSelection();\n\n    // Apply filtering if the dropdown is filterable and there is a value\n    if (this.filterable && this.value) {\n      this.filterText = this.value.toLowerCase();\n      this.filterItems(); // Update the visibility of items\n    } else {\n      // Ensure all items are visible if no filtering is applied\n      this.resetFilter();\n    }\n  }\n\n  /**\n   * Set the initial selection based on the current value and update the inputElement value.\n   */\n  private setInitialSelection() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    ) as HTMLNvFielddropdownitemcheckElement[];\n\n    const selectedItem = items.find(\n      item =>\n        item.getAttribute('label') === this.value ||\n        item.getAttribute('value') === this.value ||\n        item.textContent?.trim() === this.value,\n    );\n\n    // Remove 'selected' from all items first to reset the state\n    items.forEach(item => {\n      item.removeAttribute('selected');\n      item.classList.remove('selected');\n    });\n\n    if (selectedItem) {\n      // Add the `selected` attribute and `selected` class for visual styling\n      selectedItem.setAttribute('selected', 'true');\n      selectedItem.classList.add('selected');\n\n      // Update the value and inputElement value to reflect the pre-selected item\n      this.value =\n        selectedItem.getAttribute('label') ||\n        selectedItem.getAttribute('value') ||\n        selectedItem.textContent?.trim() ||\n        '';\n      if (this.inputElement) {\n        this.inputElement.value = this.value;\n      }\n    }\n  }\n\n  /**\n   * Unsubscribe from click outside event.\n   */\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  /**\n   * Handle click on the input container.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return; // Do nothing if the dropdown is disabled or read-only\n    }\n\n    const target = event.target as HTMLElement;\n\n    // Check if it is the paragraph or another part of the container\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\n      this.popoverElement.show();\n\n      // Simulate focus to trigger \"focus-within\" style\n      const inputContainer = this.el.querySelector(\n        '.input-container',\n      ) as HTMLElement;\n      if (inputContainer) {\n        inputContainer.classList.add('focus-within');\n\n        // Remove the \"focus-within\" class after a delay or when the popover is closed\n        const removeFocusWithin = () => {\n          inputContainer.classList.remove('focus-within');\n        };\n\n        // Or remove the class when the popover is closed\n        this.popoverElement.addEventListener('hide', removeFocusWithin);\n      }\n    }\n  };\n\n  /**\n   * Handle input change.\n   * @param {Event} event - The input event.\n   */\n  private handleInput = (event: Event) => {\n    if (!this.filterable) return; // Do not filter if `filterable` is false\n    if (this.disabled || this.readonly) {\n      return; // Do not toggle the state if the dropdown is disabled or read-only\n    }\n    const input = event.target as HTMLInputElement;\n    this.filterText = input.value.toLowerCase();\n    this.value = input.value; // Update the value\n    this.valueChanged.emit(input.value); // Emit an event if needed\n    this.filterItems(); // Update the visibility of items\n  };\n\n  /**\n   * Filter dropdown items based on the text entered by the user.\n   * If no items are found, display a message indicating no results.\n   */\n  private filterItems() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    ) as HTMLNvFielddropdownitemcheckElement[];\n\n    // Remove the \"no results found\" item if it exists\n    const existingEmptyItem = this.el.querySelector(\n      'nv-fielddropdownitemcheck[data-empty]',\n    );\n    if (existingEmptyItem) {\n      existingEmptyItem.remove();\n    }\n\n    let hasVisibleItems = false;\n\n    // Iterate over all items and adjust their visibility\n    items.forEach(item => {\n      const textContent = item.textContent?.toLowerCase() || ''; // Get the textual content of the slot\n      const value = item.value?.toLowerCase() || ''; // Get the value of the `value` attribute\n\n      // Check if the filtered text is present either in the value or in the textual content\n      const shouldShow =\n        value.includes(this.filterText) ||\n        textContent.includes(this.filterText);\n\n      item.style.display = shouldShow ? '' : 'none'; // Hide or show the item\n\n      if (shouldShow) {\n        hasVisibleItems = true;\n      }\n    });\n\n    // If no items are visible, add the \"no results found\" item\n    if (!hasVisibleItems) {\n      const emptyItem = document.createElement('nv-fielddropdownitemcheck');\n      emptyItem.setAttribute('data-empty', 'true');\n      emptyItem.setAttribute('disabled', 'true');\n      emptyItem.textContent = this.emptyresult;\n      this.el.querySelector('ul[slot=\"content\"]')?.appendChild(emptyItem);\n    }\n  }\n\n  /**\n   * Reset the filter and make all items visible.\n   */\n  private resetFilter() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    ) as HTMLNvFielddropdownitemcheckElement[];\n\n    items.forEach(item => {\n      item.style.display = '';\n    });\n  }\n\n  /**\n   * Retrieves the current filter text entered by the user.\n   * @returns {string} The filter text.\n   */\n  @Method()\n  async getFilterText(): Promise<string> {\n    return this.filterText;\n  }\n\n  /**\n   * Handle click outside the component.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleClickOutside(event: MouseEvent) {\n    if (\n      this.el.contains(event.target as Node) ||\n      (this.inputElement && this.inputElement.contains(event.target as Node))\n    ) {\n      // If the click is inside the component or on the input, do not close the popover\n      return;\n    }\n\n    this.popoverElement.hide(); // Close the popover if the click is outside the component\n  }\n\n  /**\n   * Handle input focus.\n   */\n  private handleInputFocus = () => {\n    if (this.disabled || this.readonly) {\n      return; // Do not toggle the state if the dropdown is disabled or read-only\n    }\n    this.open = true; // Force the popover to open\n  };\n\n  /**\n   * Handle input blur.\n   */\n  private handleInputBlur = () => {\n    // Use a delay to check if the focus is still within the popover\n    setTimeout(() => {\n      if (!this.el.contains(document.activeElement)) {\n        this.open = false;\n        this.popoverElement.hide(); // Close the popover if the focus is outside the component\n      }\n    }, 150);\n  };\n\n  /**\n   * Toggle the dropdown popover.\n   * @returns {void}\n   */\n  private togglePopover = (): void => {\n    if (this.disabled || this.readonly) {\n      return; // Do not toggle if disabled or read-only\n    }\n\n    this.open = !this.open;\n    if (this.open) {\n      this.popoverElement.show();\n\n      // Si le dropdown n'est pas filtrable, focus sur le premier élément\n      if (!this.filterable) {\n        this.focusFirstItem();\n      }\n    } else {\n      this.popoverElement.hide();\n    }\n  };\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n        this.popoverElement.show();\n\n        // Focus sur le premier élément si la liste n'est pas filtrable\n        if (!this.filterable) {\n          this.focusFirstItem();\n        }\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    ) as HTMLNvFielddropdownitemcheckElement[];\n\n    if (items.length === 0) {\n      console.warn('No dropdown items found to navigate');\n      return;\n    }\n\n    let currentIndex = items.findIndex(item =>\n      item.classList.contains('highlighted'),\n    );\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      currentIndex = (currentIndex + 1) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      currentIndex = (currentIndex - 1 + items.length) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'Enter' && currentIndex >= 0) {\n      event.preventDefault();\n      items[currentIndex].click();\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      this.open = false;\n      this.popoverElement.hide();\n      if (this.inputElement) {\n        this.inputElement.blur();\n      }\n    }\n  }\n\n  private updateHighlightedItem(\n    items: (\n      | HTMLNvFielddropdownitemcheckElement\n      | HTMLNvFielddropdownitemcheckElement\n    )[],\n    index: number,\n  ) {\n    items.forEach((item, i) => {\n      if (i === index) {\n        item.classList.add('highlighted');\n        item.setAttribute('tabindex', '0');\n        (item as HTMLElement).focus();\n      } else {\n        item.classList.remove('highlighted');\n        item.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  private focusFirstItem() {\n    const firstItem = this.el.querySelector(\n      'nv-fielddropdownitemcheck',\n    ) as HTMLNvFielddropdownitemcheckElement;\n\n    if (firstItem) {\n      firstItem.setAttribute('tabindex', '0');\n      firstItem.classList.add('highlighted');\n      firstItem.focus();\n    } else {\n      console.warn('No first item found to focus');\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <nv-popover\n          ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          {/* <div class=\"input-wrapper\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container\"\n              onClick={this.handleInputContainerClick}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              {this.isFilterable ? (\n                <input\n                  id={this.inputId}\n                  type=\"search\"\n                  ref={e => (this.inputElement = e)}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.filterText}\n                  onInput={this.handleInput}\n                  onFocus={this.handleInputFocus}\n                  onBlur={this.handleInputBlur}\n                  onKeyDown={this.handleKeyDown}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  required={this.required}\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  tabIndex={0}\n                  onClick={this.handleInputContainerClick}\n                  onFocus={this.handleInputFocus}\n                  onKeyDown={this.handleKeyDown}\n                >\n                  <span>\n                    {this.selectedValues.length > 0\n                      ? `${this.selectedValues.length} ${this.badgeLabel}`\n                      : this.placeholder}\n                  </span>\n                </p>\n              )}\n\n              <nv-iconbutton\n                class=\"toggle-dropdown-icon\"\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                aria-pressed={this.open.toString()}\n                onClick={this.togglePopover}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div> */}\n\n          <div class=\"input-wrapper-multiselect\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container-multiselect\"\n              onClick={this.handleInputContainerClick}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              {this.isFilterable || this.disabled || this.readonly ? (\n                <input\n                  id={this.inputId}\n                  type=\"search\"\n                  ref={e => (this.inputElement = e)}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.value}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInput}\n                  onFocus={this.handleInputFocus}\n                  onBlur={this.handleInputBlur}\n                  onKeyDown={this.handleKeyDown}\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClick}\n                  tabIndex={0}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.handleInputFocus}\n                >\n                  <span>{this.value || this.placeholder}</span>\n                </p>\n              )}\n\n              <nv-iconbutton\n                class=\"toggle-dropdown-icon\"\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                aria-pressed={this.open.toString()}\n                onClick={this.togglePopover}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <slot name=\"content\">\n            <ul>\n              {this.options.map(option => (\n                <li\n                  class={{\n                    'dropdown-item': true,\n                    'is-selected': this.selectedValues.includes(option.value),\n                  }}\n                  aria-selected={this.selectedValues\n                    .includes(option.value)\n                    .toString()}\n                  role=\"option\"\n                >\n                  <nv-fielddropdownitemcheck\n                    value={option.value}\n                    label={option.label}\n                    checked={this.selectedValues.includes(option.value)}\n                  />\n                </li>\n              ))}\n            </ul>\n          </slot>\n        </nv-popover>\n\n        {/* Description */}\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {/* Message d'erreur */}\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/p-1079b972.js

@@ -1,125 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-c434f2e5.js';
-import { c as clsx } from './p-8a1a6e56.js';
-import { v as v4 } from './p-f5ff676c.js';
-
-const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(--components-form-field-border-default);--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(--components-form-field-background-default);--nv-fieldcheckbox-background-checked:var(--components-form-field-background-checked);--nv-fieldcheckbox-background-disabled:var(--components-form-field-background-disabled);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(--components-form-shape-foreground-default);--nv-fieldcheckbox-color-disabled:var(--components-form-shape-foreground-disabled);--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error .input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(--components-form-shape-foreground-disabled-error);--nv-fieldcheckbox-background-checked:var(--components-form-field-background-error);--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]{opacity:0.5}nv-fieldcheckbox label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox .input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox .input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox .input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox .input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox .input-container input[type=checkbox]:focus,nv-fieldcheckbox .input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox .input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox .input-container input[type=checkbox]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox .input-container input[type=checkbox]:checked,nv-fieldcheckbox .input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox .input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox .input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox .input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox .input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldcheckbox .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
-const NvFieldcheckboxStyle0 = nvFieldcheckboxCss;
-
-const NvFieldcheckbox = /*@__PURE__*/ proxyCustomElement(class NvFieldcheckbox extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.checkedChanged = createEvent(this, "checkedChanged", 7);
-        this.message = undefined;
-        this.validation = undefined;
-        this.labelBefore = false;
-        this.inputId = v4();
-        this.name = undefined;
-        this.value = undefined;
-        this.label = undefined;
-        this.labelPlacement = undefined;
-        this.hideLabel = false;
-        this.description = undefined;
-        this.error = false;
-        this.errorDescription = undefined;
-        this.checked = false;
-        this.indeterminate = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-    }
-    componentWillRender() {
-        if (this.message) {
-            this.description = this.message;
-        }
-        if (this.labelBefore) {
-            this.labelPlacement = 'before';
-        }
-        if (this.validation) {
-            this.errorDescription = this.validation;
-        }
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
-    /**
-     * Watches for changes to the checked state and emits the new value.
-     * @param {boolean} checked - The new value of the checked state.
-     */
-    onCheckedChanged(checked) {
-        this.checkedChanged.emit(checked);
-    }
-    /**
-     * Listens for the change event on the checkbox input element and updates the
-     * checked state.
-     * @param {Event} event - The change event.
-     */
-    handleChange(event) {
-        const target = event.target;
-        if (target.type === 'checkbox' && target.id === this.inputId) {
-            if (this.readonly || this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            if (this.indeterminate) {
-                this.indeterminate = false;
-            }
-            this.checked = target.checked;
-        }
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (h(Host, { key: 'b927465541957ac5e40c6af190757ac44cf4a104', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("div", { key: 'a8a14a21f274f0ad1ebaecb4af0b6eeee73ad0bd', class: "input-container" }, h("input", { key: '1ca6af28c329360b9b919a65516b1f1573669881', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
-                if (el) {
-                    el.indeterminate = this.indeterminate;
-                }
-            } }), h("span", { key: 'ebdf5ba1086be1fed6c4364557c8c78c1b226333', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: '5722e106a2945a670ff93a49203f41dafafc230b', name: "checked-icon" }, h("svg", { key: 'ba9707c495766d7909f2f234f122a5eb1dd975a5', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: 'dea34c4e8dd9857321c1f5625fbb3d5b02aa42ca', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: 'd833f4c34381f2579a09049239b467e77f90ac45', name: "indeterminate-icon" }, h("svg", { key: 'c0555c3edaa8eaa841b36d90f2bbd7cee458007d', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: 'c5f4f39e6a4ae2bead864a3945a5f7b6b737f724', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '986f1a08c34f548675cf6d9872514445a36a07af', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '8a4925c138bc779af8df218c7a4bfaa290e71142', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '514f59b77e90d090b2459aaa65ffdab6e56158fc', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '569e7989c59ffed32610f88a01e75074520884c0', class: "description" }, h("slot", { key: '53eb9d3836b74e99e27a7b0ae6b4e91e6d4b16c6', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'ab1b17a3b93ec09021d16ece7d37bce578d20dcb', hidden: !this.error, class: "error-description" }, h("slot", { key: '7c183b11c038a45b8f5e4a78f268fefe1512b1eb', name: "error-description" }, this.errorDescription))))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "checked": ["onCheckedChanged"]
-    }; }
-    static get style() { return NvFieldcheckboxStyle0; }
-}, [4, "nv-fieldcheckbox", {
-        "message": [1],
-        "validation": [1],
-        "labelBefore": [4, "label-before"],
-        "inputId": [513, "input-id"],
-        "name": [513],
-        "value": [513],
-        "label": [513],
-        "labelPlacement": [1537, "label-placement"],
-        "hideLabel": [516, "hide-label"],
-        "description": [1537],
-        "error": [516],
-        "errorDescription": [1537, "error-description"],
-        "checked": [1540],
-        "indeterminate": [1540],
-        "disabled": [516],
-        "readonly": [516],
-        "required": [516]
-    }, [[0, "change", "handleChange"]], {
-        "checked": ["onCheckedChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nv-fieldcheckbox"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nv-fieldcheckbox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NvFieldcheckbox);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { NvFieldcheckbox as N, defineCustomElement as d };
-
-//# sourceMappingURL=p-1079b972.js.map

package/dist/components/p-1079b972.js.map

@@ -1 +0,0 @@
-{"file":"p-1079b972.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin fieldcheckbox-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-background-default: var(--components-form-field-background-default);\n  --nv-fieldcheckbox-background-checked: var(--components-form-field-background-checked);\n  --nv-fieldcheckbox-background-disabled: var(--components-form-field-background-disabled);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldcheckbox-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldcheckbox-color-disabled: var(--components-form-shape-foreground-disabled);\n  --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldcheckbox-color-disabled: var(--components-form-shape-foreground-disabled-error);\n  --nv-fieldcheckbox-background-checked: var(--components-form-field-background-error);\n  --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--nv-fieldcheckbox-color-checked);\n\n  input[type=checkbox][readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n    color: var(--nv-fieldcheckbox-color-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-checkbox-size);\n  height: var(--form-checkbox-size);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-checkbox-radius);\n  border-width: var(--form-checkbox-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldcheckbox-border-default);\n  background: var(--nv-fieldcheckbox-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldcheckbox-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldcheckbox-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n  &:checked,\n  &:indeterminate {\n    background: var(--nv-fieldcheckbox-background-checked);\n    border-color: var(--nv-fieldcheckbox-background-checked);\n  }\n\n  &:disabled:not([readonly]) {\n    background: var(--nv-fieldcheckbox-background-disabled);\n    border-color: var(--nv-fieldcheckbox-border-default);\n  }\n\n  &[readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n}\n\n@mixin icon-styles() {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    width: var(--form-checkbox-icon-size);\n    height: var(--form-checkbox-icon-size);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: var(--form-checkbox-icon-stroke);\n    flex-shrink: 0;\n  }\n}\n\nnv-fieldcheckbox {\n  @include fieldcheckbox-variables();\n  @include root-styles();\n\n  &.error .input-container {\n    @include fieldcheckbox-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n  label {\n    @include label-styles();\n  }\n\n  .input-container {\n    @include input-container-styles();\n\n    input[type=\"checkbox\"] {\n      @include input-styles();\n    }\n\n    .icon {\n      @include icon-styles();\n    }\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .error-description {\n    @include error-description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type FieldLabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n  tag: 'nv-fieldcheckbox',\n  styleUrl: 'nv-fieldcheckbox.scss',\n  shadow: false,\n})\nexport class NvFieldcheckbox {\n  @Element() el!: HTMLNvFieldcheckboxElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message define a 'hint ' message for the Field.\n   * @deprecated Use `description` instead.\n   * */\n  @Prop()\n  readonly message?: string;\n\n  /**\n   * The text for the validation message.\n   * @deprecated Use `errorDescription` instead.\n   * */\n  @Prop()\n  readonly validation?: string;\n\n  /**\n   * When true, the label will be placed before the checkbox.\n   * @deprecated Use `labelPlacement = end` instead.\n   * */\n  @Prop()\n  readonly labelBefore?: boolean = false;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the checkbox input, used to reference the form data\n   * after submission.\n   */\n  @Prop({ reflect: true })\n  readonly name?: string;\n\n  /**\n   * The value attribute of the checkbox input, representing the value sent on\n   * form submission when the checkbox is checked. When the form is submitted,\n   * the data will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed next to the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the checkbox, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true, mutable: true })\n  labelPlacement: `${FieldLabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Signals that there is an error associated with the checkbox, which can\n   * trigger visual cues.\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Indicates whether the checkbox is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates whether the checkbox is in an indeterminate state, typically used\n   * for hierarchical checkboxes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Disables the checkbox, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the checkbox to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the checkbox as required, indicating that it must be checked for\n   * form submission.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the checkbox input element and updates the\n   * checked state.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      if (this.indeterminate) {\n        this.indeterminate = false;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly && !this.required}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            ref={el => {\n              if (el) {\n                el.indeterminate = this.indeterminate;\n              }\n            }}\n          />\n          <span class=\"icon\">\n            {this.checked && !this.indeterminate && (\n              <slot name=\"checked-icon\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n            {this.indeterminate && (\n              <slot name=\"indeterminate-icon\">\n                <svg\n                  class=\"indeterminate-svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M2.9165 7H11.0832\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n          </span>\n        </div>\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label\n              htmlFor={this.inputId}\n              class={clsx(this.hideLabel && 'visually-hidden')}\n            >\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}