@nova-design-system/nova-webcomponents 3.0.0-beta.41 → 3.0.0-beta.43

package/dist/collection/components/nv-fielddaterange/nv-fielddaterange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fielddaterange.js","sourceRoot":"","sources":["../../../src/components/nv-fielddaterange/nv-fielddaterange.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EAEL,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAGpC;;;;;;;;GAQG;AAMH,MAAM,OAAO,gBAAgB;IAL7B;QAQU,cAAS,GAAW,MAAM,EAAE,CAAC;QAErC,8EAA8E;QAC9E,oBAAoB;QAEpB;;;WAGG;QAEM,iBAAY,GAAW,MAAM,EAAE,CAAC;QAEzC;;;WAGG;QAEM,eAAU,GAAW,MAAM,EAAE,CAAC;QAsCvC;;WAEG;QAEM,aAAQ,GAAY,KAAK,CAAC;QAEnC;;WAEG;QAEM,aAAQ,GAAY,KAAK,CAAC;QAEnC;;WAEG;QAEM,aAAQ,GAAY,KAAK,CAAC;QAEnC;;WAEG;QAEM,UAAK,GAAY,KAAK,CAAC;QAQhC;;WAEG;QAEM,YAAO,GAAY,KAAK,CAAC;QAElC;;WAEG;QAEM,oBAAe,GAAY,KAAK,CAAC;QAE1C;;WAEG;QAEM,UAAK,GAAW,EAAE,CAAC;QAE5B;;WAEG;QAEH,eAAU,GAAW,EAAE,CAAC;QAExB;;WAEG;QAEH,aAAQ,GAAW,EAAE,CAAC;QAEtB;;WAEG;QAEH,SAAI,GAAY,KAAK,CAAC;QAEtB;;;WAGG;QAEM,mBAAc,GAAW,CAAC,CAAC;QAEpC;;;WAGG;QAEM,sBAAiB,GAAW,CAAC,CAAC;QAEvC;;WAEG;QAEM,QAAG,GAAY,EAAE,CAAC;QAE3B;;WAEG;QAEM,QAAG,GAAY,EAAE,CAAC;QAE3B;;WAEG;QAEM,WAAM,GAAW,OAAO,CAAC;QAElC;;WAEG;QAEM,eAAU,GAAW,YAAY,CAAC;QAE3C;;;WAGG;QAEM,uBAAkB,GAAgC,QAAQ,CAAC;QAEpE;;;WAGG;QAEM,gBAAW,GAAY,KAAK,CAAC;QAEtC;;;;;;WAMG;QAEM,cAAS,GAAW,IAAI,CAAC;QAElC;;;WAGG;QACH,+DAA+D;QAEtD,oBAAe,GAAY,IAAI,CAAC;QAEzC;;;WAGG;QAEM,kBAAa,GAAW,IAAI,CAAC;QA6BtC;;;WAGG;QACK,uBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACjD,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBACpE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAEF;;;WAGG;QACK,qBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;YAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxE,CAAC,CAAC;QAEF;;;WAGG;QACK,mBAAc,GAAG,CAAC,KAAY,EAAE,EAAE;YACxC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;YAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;QAC1E,CAAC,CAAC;QAEF;;;WAGG;QACK,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACtB,KAAK,CAAC,MAAsB,CAAC,IAAI,EAAE,CAAC;gBACrC,OAAO;YACT,CAAC;YAED,4CAA4C;YAC5C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;QAEF;;WAEG;QACK,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnC,OAAO;YACT,CAAC;YACD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACzB,CAAC,CAAC;KA0SH;IAlYC,uBAAuB;IACvB,8EAA8E;IAC9E,iBAAiB;IAEjB;;;;OAIG;IACK,wBAAwB,CAAC,MAAc;QAC7C,4EAA4E;QAC5E,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,YAAY,CAAC;QACtB,CAAC;QAED,yBAAyB;QACzB,MAAM,SAAS,GAAG;YAChB,YAAY,EAAE,YAAY;YAC1B,YAAY,EAAE,YAAY;YAC1B,YAAY,EAAE,YAAY;YAC1B,YAAY,EAAE,YAAY;YAC1B,UAAU,EAAE,UAAU;SACvB,CAAC;QAEF,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,YAAY,CAAC;IAC3C,CAAC;IAiED,oBAAoB;IACpB,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC9D,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC;gBACH,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAc,CAAC;gBAClD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;gBACpC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC;YAClC,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;gBACzC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;QAChE,MAAM,CAAC,OAAO,CAAC,CAAC,KAAuB,EAAE,EAAE;YACzC,MAAM,SAAS,GAAG,IAAI,SAAS,CAAC;gBAC9B,KAAK,EAAE,UAAU;gBACjB,WAAW,EAAE,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,UAAU,CAAC;gBAC3D,WAAW,EAAE,GAAG;gBAChB,eAAe,EAAE,KAAK;gBACtB,eAAe,EAAE,KAAK;gBACtB,eAAe,EAAE,KAAK;gBACtB,oBAAoB,EAAE,KAAK;gBAC3B,UAAU,EAAE,IAAI;gBAChB,UAAU,EAAE,KAAK;gBACjB,UAAU,EAAE,UAAU,CAAC;oBACrB,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;oBAC3C,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;oBAC1D,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAC7B,CAAC;aACF,CAAC,CAAC;YACH,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEtB,wCAAwC;YACxC,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACrD,qBAAqB,CAAC,GAAG,EAAE;oBACzB,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;oBAC9B,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;oBAC1D,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAC7B,CAAC,CAAC,CAAC;YACL,CAAC;iBAAM,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACxD,qBAAqB,CAAC,GAAG,EAAE;oBACzB,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;oBAC5B,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;oBAC1D,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAC7B,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,kBAAkB;QAChB,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;QAChE,MAAM,CAAC,OAAO,CAAC,CAAC,KAAuB,EAAE,EAAE;YACzC,MAAM,KAAK,GACT,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS;gBAC3B,CAAC,CAAC,IAAI,CAAC,UAAU;gBACjB,CAAC,CAAC,IAAI,CAAC,OAAO;oBACd,CAAC,CAAC,IAAI,CAAC,QAAQ;oBACf,CAAC,CAAC,EAAE,CAAC;YACT,IAAI,KAAK,EAAE,CAAC;gBACV,kEAAkE;gBAClE,qBAAqB,CAAC,GAAG,EAAE;oBACzB,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;oBACpB,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;gBACrC,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACjE,CAAC;IAYD;;;OAGG;IAEH,qBAAqB,CAAC,KAA6B;QACjD,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC;QAE1C,oCAAoC;QACpC,IAAI,KAAK,IAAI,GAAG,EAAE,CAAC;YACjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;YACpB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;gBACxB,KAAK,EAAE,IAAI,CAAC,UAAU;gBACtB,GAAG,EAAE,IAAI,CAAC,QAAQ;aACnB,CAAC,CAAC;YAEH,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;gBACtB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YACpB,CAAC;QACH,CAAC;IACH,CAAC;IAGD,kBAAkB;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAGD,oBAAoB;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED;;;OAGG;IAEH,aAAa,CAAC,KAAoB;QAChC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBAC9B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,OAAO,CAAC,IAAI,CAAC,qDAAqD,CAAC,CAAC;YACpE,OAAO;QACT,CAAC;IACH,CAAC;IAGD,iBAAiB,CAAC,QAAgB;QAChC,IAAI,CAAC;YACH,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAc,CAAC;YAChD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;YACpC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC;QAClC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;QAClD,CAAC;IACH,CAAC;IAED,mBAAmB;IACnB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;gBACrC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAC5C,8DAAO,OAAO,EAAE,IAAI,CAAC,YAAY;gBAC/B,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT;YAED,mEACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAA0B,CAAC,EAC7D,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,WAAW,EAAC,YAAY,EACxB,SAAS,EAAC,cAAc,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI;gBAEf,4DAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe;oBACvC,6DAAM,IAAI,EAAC,cAAc,GAAQ;oBAEjC,4DAAK,KAAK,EAAC,iBAAiB;wBAC1B,6DAAM,IAAI,EAAC,eAAe,GAAQ;wBAElC,4DAAK,KAAK,EAAC,cAAc;4BACvB,8DACE,EAAE,EAAE,IAAI,CAAC,YAAY,EACrB,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB;4BAEF,4DACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,EACvB,KAAK,EAAC,0EAA0E;gCAEhF,6DAAM,MAAM,EAAC,MAAM,EAAC,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG;gCACpD,6DAAM,CAAC,EAAC,gBAAgB,GAAG;gCAC3B,6DAAM,CAAC,EAAC,UAAU,GAAG;gCACrB,6DAAM,CAAC,EAAC,eAAe,GAAG;gCAC1B,6DAAM,CAAC,EAAC,SAAS,GAAG,CAChB;4BAEN,8DACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,IAAI,CAAC,cAAc,EAChC,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,QAAQ,EACpB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACE;wBAEN,sEACE,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,OAAO,gBACJ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,kBAC3C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAClC,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAChC,CACE;oBAEN,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B;gBAEN,4DAAK,IAAI,EAAC,SAAS;oBACjB,oEACE,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,UAAU,EACR,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ;4BAC9B,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;gCACb,KAAK,EAAE,IAAI,CAAC,UAAU;gCACtB,GAAG,EAAE,IAAI,CAAC,QAAQ;6BACnB,CAAC;4BACJ,CAAC,CAAC,EAAE,EAER,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAC,OAAO,GACR,CACX,CACK;YAEZ,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;gBACjD,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC,IAAI,CAClD,4DAAK,KAAK,EAAC,aAAa;gBACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP;YAEA,CAAC,IAAI,CAAC,gBAAgB;gBACrB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC,IAAI,CACxD,4DAAK,MAAM,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,mBAAmB,IAChD,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CACrD,YAAM,IAAI,EAAC,mBAAmB,GAAQ,CACvC,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,gBAAgB,CACtB,CACG,CACP;YAED,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\nimport { DateRange } from '../../interfaces/dateRange';\n\n/**\n * @slot default - Child content of the component.\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@Component({\n  tag: 'nv-fielddaterange',\n  styleUrl: 'styles/nv-fielddaterange.scss',\n  shadow: false,\n})\nexport class NvFielddaterange {\n  @Element() el!: HTMLNvFielddaterangeElement;\n  private popoverElement!: HTMLNvPopoverElement;\n  private popoverId: string = uuidv4();\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the start input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated.\n   */\n  @Prop({ reflect: true })\n  readonly startInputId: string = uuidv4();\n\n  /**\n   * Sets the ID for the end input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated.\n   */\n  @Prop({ reflect: true })\n  readonly endInputId: string = uuidv4();\n\n  /**\n   * Text displayed as label. A slot label can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Description displayed below the input. A slot description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Placeholder for the start input field.\n   */\n  @Prop({ reflect: true })\n  readonly startPlaceholder: string;\n\n  /**\n   * Placeholder for the end input field.\n   */\n  @Prop({ reflect: true })\n  readonly endPlaceholder: string;\n\n  /**\n   * Name attribute for the start input.\n   */\n  @Prop({ reflect: true })\n  readonly startName: string;\n\n  /**\n   * Name attribute for the end input.\n   */\n  @Prop({ reflect: true })\n  readonly endName: string;\n\n  /**\n   * Disables both input fields.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets both input fields as read-only.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks both input fields as required.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Indicates an error state.\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * Error description. A slot error-description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription?: string;\n\n  /**\n   * Indicates a success state.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Autofocus the start input when the component is mounted.\n   */\n  @Prop({ reflect: true })\n  readonly shouldAutoFocus: boolean = false;\n\n  /**\n   * The initial value of the date range (in string format).\n   */\n  @Prop({ reflect: true })\n  readonly value: string = '';\n\n  /**\n   * The current value of the start date in string format.\n   */\n  @State()\n  startValue: string = '';\n\n  /**\n   * The current value of the end date in string format.\n   */\n  @State()\n  endValue: string = '';\n\n  /**\n   * Controls the opening of the popover.\n   */\n  @State()\n  open: boolean = false;\n\n  /**\n   * First day of the week 0 = Sunday, 1 = Monday, etc.\n   * @default 1\n   */\n  @Prop({ reflect: true })\n  readonly firstDayOfWeek: number = 1;\n\n  /**\n   * Number of calendars to display\n   * @default 2\n   */\n  @Prop({ reflect: true })\n  readonly numberOfCalendars: number = 2;\n\n  /**\n   * Minimum date for selection ISO string format, ex: 2025-01-01\n   */\n  @Prop({ reflect: true })\n  readonly min?: string = '';\n\n  /**\n   * Maximum date for selection ISO string format, ex: 2025-12-31\n   */\n  @Prop({ reflect: true })\n  readonly max?: string = '';\n\n  /** Locale for date formatting\n   * @default 'en-BE'\n   */\n  @Prop({ reflect: true })\n  readonly locale: string = 'en-BE';\n\n  /** Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.\n   * @default 'YYYY-MM-DD'\n   */\n  @Prop({ reflect: true })\n  readonly dateFormat: string = 'YYYY-MM-DD';\n\n  /**\n   * Footer placement\n   * @default 'bottom'\n   */\n  @Prop({ reflect: true })\n  readonly shortcutsPlacement: 'bottom' | 'left' | 'right' = 'bottom';\n\n  /**\n   * Show action buttons\n   * @default false\n   */\n  @Prop({ reflect: true })\n  readonly showActions: boolean = false;\n\n  /**\n   * Custom actions to display in the footer\n   * JSON array of objects with the following properties:\n   * - label: string\n   * - onClick: function\n   * @default '[]'\n   */\n  @Prop({ reflect: true })\n  readonly shortcuts: string = '[]';\n\n  /**\n   * Show week numbers\n   * @default true\n   */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop({ reflect: true })\n  readonly showWeekNumbers: boolean = true;\n\n  /**\n   * Disabled dates ISO string array\n   * @default '[]'\n   */\n  @Prop({ reflect: true })\n  readonly disabledDates: string = '[]';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Converts the nv-calendar date format to the format expected by Inputmask.\n   * @param {string} format - The date format to convert\n   * @returns {string} The converted format for Inputmask\n   */\n  private convertToInputmaskFormat(format: string): string {\n    // Si le format n'est pas spécifié, utiliser le format par défaut YYYY-MM-DD\n    if (!format) {\n      return 'dd/mm/yyyy';\n    }\n\n    // Conversion des formats\n    const formatMap = {\n      'YYYY-MM-DD': 'yyyy-mm-dd',\n      'DD/MM/YYYY': 'dd/mm/yyyy',\n      'MM/DD/YYYY': 'mm/dd/yyyy',\n      'DD.MM.YYYY': 'dd.mm.yyyy',\n      'YYYYMMDD': 'yyyymmdd',\n    };\n\n    return formatMap[format] || 'dd/mm/yyyy';\n  }\n\n  /**\n   * Closes the popover when a click is detected outside the component.\n   * @param {MouseEvent} event - The mouse event\n   */\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.open && this.el && !this.el.contains(event.target as Node)) {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Handles the input event on the start input element.\n   * @param {Event} event - The input event\n   */\n  private handleStartInput = (event: Event) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const input = event.target as HTMLInputElement;\n    this.startValue = input.value;\n    this.dateRangeChange.emit({ start: input.value, end: this.endValue });\n  };\n\n  /**\n   * Handles the input event on the end input element.\n   * @param {Event} event - The input event\n   */\n  private handleEndInput = (event: Event) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const input = event.target as HTMLInputElement;\n    this.endValue = input.value;\n    this.dateRangeChange.emit({ start: this.startValue, end: input.value });\n  };\n\n  /**\n   * Handles focus events on the input elements.\n   * @param {FocusEvent} event - The focus event\n   */\n  private handleFocus = (event: FocusEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      (event.target as HTMLElement).blur();\n      return;\n    }\n\n    // Open the popover when an input is focused\n    this.open = true;\n  };\n\n  /**\n   * Toggles the opening/closing of the popover.\n   */\n  private toggleCalendar = () => {\n    if (this.readonly || this.disabled) {\n      return;\n    }\n    this.open = !this.open;\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      try {\n        const range = JSON.parse(this.value) as DateRange;\n        this.startValue = range.start || '';\n        this.endValue = range.end || '';\n      } catch (error) {\n        console.error('Invalid JSON for value:');\n        console.error(error);\n      }\n    }\n  }\n\n  componentDidLoad() {\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      const inputMask = new Inputmask({\n        alias: 'datetime',\n        inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n        placeholder: '_',\n        clearIncomplete: false,\n        showMaskOnHover: false,\n        showMaskOnFocus: false,\n        clearMaskOnLostFocus: false,\n        insertMode: true,\n        rightAlign: false,\n        oncomplete: function (e) {\n          const input = e.target as HTMLInputElement;\n          const event = new CustomEvent('input', { bubbles: true });\n          input.dispatchEvent(event);\n        },\n      });\n      inputMask.mask(input);\n\n      // Set the value after applying the mask\n      if (input.name === this.startName && this.startValue) {\n        requestAnimationFrame(() => {\n          input.value = this.startValue;\n          const event = new CustomEvent('input', { bubbles: true });\n          input.dispatchEvent(event);\n        });\n      } else if (input.name === this.endName && this.endValue) {\n        requestAnimationFrame(() => {\n          input.value = this.endValue;\n          const event = new CustomEvent('input', { bubbles: true });\n          input.dispatchEvent(event);\n        });\n      }\n    });\n  }\n\n  componentDidRender() {\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      const value =\n        input.name === this.startName\n          ? this.startValue\n          : this.endName\n          ? this.endValue\n          : '';\n      if (value) {\n        // Make sure the value is defined both as a property and attribute\n        requestAnimationFrame(() => {\n          input.value = value;\n          input.setAttribute('value', value);\n        });\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits an event when the date range changes.\n   */\n  @Event()\n  dateRangeChange: EventEmitter<DateRange>;\n\n  /**\n   * Handles the range date selection event from nv-calendar.\n   * @param {CustomEvent<DateRange>} event - The custom event\n   */\n  @Listen('rangeDateChange')\n  handleRangeDateChange(event: CustomEvent<DateRange>) {\n    const { start, end } = event.detail || {};\n\n    // Check that both dates are defined\n    if (start && end) {\n      this.startValue = start;\n      this.endValue = end;\n      this.dateRangeChange.emit({\n        start: this.startValue,\n        end: this.endValue,\n      });\n\n      if (!this.showActions) {\n        this.open = false;\n      }\n    }\n  }\n\n  @Listen('closePopover')\n  handleClosePopover() {\n    this.open = false;\n  }\n\n  @Listen('applyDateRange')\n  handleApplyDateRange() {\n    this.open = false;\n  }\n\n  /**\n   * Handles keyboard events.\n   * @param {KeyboardEvent} event - The keyboard event\n   */\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    if (!this.popoverElement) {\n      console.warn('nv-fielddaterange -> Popover element is not defined');\n      return;\n    }\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    try {\n      const range = JSON.parse(newValue) as DateRange;\n      this.startValue = range.start || '';\n      this.endValue = range.end || '';\n    } catch (error) {\n      console.error('Invalid JSON for value:', error);\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {((this.label && this.label.length > 0) ||\n          this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.startInputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <nv-popover\n          ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n          id={this.popoverId}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div slot=\"trigger\" class=\"input-wrapper\">\n            <slot name=\"before-input\"></slot>\n\n            <div class=\"input-container\">\n              <slot name=\"leading-input\"></slot>\n\n              <div class=\"range-inputs\">\n                <input\n                  id={this.startInputId}\n                  type=\"text\"\n                  placeholder={this.startPlaceholder}\n                  name={this.startName}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  required={this.required}\n                  autofocus={this.shouldAutoFocus}\n                  value={this.startValue}\n                  onInput={this.handleStartInput}\n                  onFocus={this.handleFocus}\n                />\n\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"24\"\n                  height=\"24\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal\"\n                >\n                  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n                  <path d=\"M18 9l3 3l-3 3\" />\n                  <path d=\"M15 12h6\" />\n                  <path d=\"M6 9l-3 3l3 3\" />\n                  <path d=\"M3 12h6\" />\n                </svg>\n\n                <input\n                  id={this.endInputId}\n                  type=\"text\"\n                  placeholder={this.endPlaceholder}\n                  name={this.endName}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  required={this.required}\n                  value={this.endValue}\n                  onInput={this.handleEndInput}\n                  onFocus={this.handleFocus}\n                />\n              </div>\n\n              <nv-iconbutton\n                class=\"toggle-calendar-icon\"\n                name=\"calendar\"\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide calendar' : 'Show calendar'}\n                aria-pressed={this.open.toString()}\n                onClick={this.toggleCalendar}\n                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div slot=\"content\">\n            <nv-calendar\n              dateFormat={this.dateFormat}\n              rangeValue={\n                this.startValue && this.endValue\n                  ? JSON.stringify({\n                      start: this.startValue,\n                      end: this.endValue,\n                    })\n                  : ''\n              }\n              firstDayOfWeek={this.firstDayOfWeek}\n              numberOfCalendars={this.numberOfCalendars}\n              min={this.min}\n              max={this.max}\n              locale={this.locale}\n              shortcutsPlacement={this.shortcutsPlacement}\n              showActions={this.showActions}\n              shortcuts={this.shortcuts}\n              showWeekNumbers={this.showWeekNumbers}\n              disabledDates={this.disabledDates}\n              selectionType=\"range\"\n            ></nv-calendar>\n          </div>\n        </nv-popover>\n\n        {((this.description && this.description.length > 0) ||\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            {this.el.querySelector('[slot=\"error-description\"]') ? (\n              <slot name=\"error-description\"></slot>\n            ) : (\n              this.errorDescription\n            )}\n          </div>\n        )}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-fielddaterange/styles/nv-fielddaterange.css

@@ -0,0 +1,192 @@
+nv-fielddaterange {
+  --nv-field-border-default: var(--components-form-field-border-default);
+  --nv-field-border-hover: var(--components-form-field-border-hover);
+  --nv-field-border-focus: var(--components-form-field-border-focus);
+  --nv-field-border-disabled: var(--components-form-field-border-default);
+  --nv-field-border-readonly: var(--components-form-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-brand);
+  --nv-field-background: var(--components-form-field-background-default);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--form-gap-y);
+  box-sizing: border-box;
+}
+nv-fielddaterange[readonly]:not([readonly=false]) {
+  --nv-field-border-default: var(--components-form-field-border-readonly);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--components-form-field-border-focus);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-background: var(--components-form-field-background-readonly);
+}
+nv-fielddaterange[error]:not([error=false]) {
+  --nv-field-border-default: var(--components-form-field-border-error);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--nv-field-border-default);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-destructive);
+}
+nv-fielddaterange[success]:not([success=false]) {
+  --nv-field-border-default: var(--components-form-field-border-success);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--nv-field-border-default);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-success);
+}
+nv-fielddaterange[required]:not([required=false]) label::after {
+  content: "*";
+  color: var(--components-form-text-required);
+  font-weight: 700;
+}
+nv-fielddaterange label {
+  display: flex;
+  align-items: center;
+  gap: var(--form-label-gap);
+  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: 500;
+  line-height: var(--form-label-line-height);
+}
+nv-fielddaterange nv-popover {
+  width: 100%;
+  display: block;
+}
+nv-fielddaterange nv-popover [data-scope=popover] {
+  padding: 0;
+  background-color: var(--components-list-dropdown-background);
+  border: 1px solid var(--components-list-dropdown-border);
+  width: auto;
+}
+nv-fielddaterange nv-popover [slot=content] {
+  display: block;
+  width: 100%;
+}
+nv-fielddaterange .input-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--form-gap-x);
+  align-items: stretch;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+nv-fielddaterange .input-wrapper .input-container {
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  border-radius: var(--form-field-radius);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--nv-field-border-default);
+  opacity: var(--components-form-opacity-default, 1);
+  background: var(--nv-field-background);
+  transition: all 150ms ease-out;
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  padding-right: 32px;
+}
+nv-fielddaterange .input-wrapper .input-container:hover {
+  border-color: var(--nv-field-border-hover);
+}
+nv-fielddaterange .input-wrapper .input-container:focus-within, nv-fielddaterange .input-wrapper .input-container:focus-within:hover, nv-fielddaterange .input-wrapper .input-container:focus, nv-fielddaterange .input-wrapper .input-container:focus:hover {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}
+nv-fielddaterange .input-wrapper .input-container:has(input:read-only) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-readonly);
+  border-color: var(--nv-field-border-readonly);
+}
+nv-fielddaterange .input-wrapper .input-container:has(input:disabled) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-disabled);
+  border-color: var(--nv-field-border-disabled);
+}
+nv-fielddaterange .input-wrapper .input-container input {
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  overflow: hidden;
+  background-color: transparent;
+  color: var(--components-form-field-content-text);
+  padding: var(--form-field-padding-y) var(--form-field-padding-x);
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-field-line-height);
+  width: 100%;
+}
+nv-fielddaterange .input-wrapper .input-container input:focus {
+  outline: none;
+}
+nv-fielddaterange .input-wrapper .input-container input::placeholder {
+  overflow: hidden;
+  color: var(--components-form-field-content-placeholder);
+  text-overflow: ellipsis;
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--form-field-line-height);
+}
+nv-fielddaterange .input-wrapper .input-container nv-icon.validation {
+  color: var(--nv-field-border-default);
+}
+nv-fielddaterange .input-wrapper .input-container .toggle-calendar-icon {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+nv-fielddaterange .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;
+  line-height: var(--form-description-line-height);
+}
+nv-fielddaterange .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;
+  line-height: var(--form-description-line-height);
+  color: var(--components-form-text-description-error);
+}
+nv-fielddaterange .range-inputs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+nv-fielddaterange .range-inputs input {
+  flex: 1;
+  border: none;
+  outline: none;
+  padding: 0;
+  font-size: var(--form-field-font-size);
+  color: var(--components-form-field-content-text);
+  background: transparent;
+  min-width: 0;
+  text-align: center;
+}
+nv-fielddaterange .range-inputs input::placeholder {
+  color: var(--components-form-field-content-placeholder);
+}
+nv-fielddaterange .range-inputs input:disabled {
+  cursor: not-allowed;
+  color: var(--components-form-field-content-text);
+  background-color: var(--components-form-field-background-disabled);
+}

package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js

@@ -109,13 +109,6 @@ export class NvFielddropdown {
             this.filterText = input.value.toLowerCase();
             this.filterItems();
         };
-        this.handleClickOutside = (event) => {
-            if (this.el.contains(event.target) ||
-                (this.inputElement && this.inputElement.contains(event.target))) {
-                return;
-            }
-            this.open = false;
-        };
         this.handleInputFocus = () => {
             if (this.disabled || this.readonly)
                 return;
@@ -137,6 +130,12 @@ export class NvFielddropdown {
                 ? (_c = (_a = matchingItem.label) !== null && _a !== void 0 ? _a : (_b = matchingItem.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : matchingItem.value
                 : '';
         };
+        this.clearFilter = () => {
+            this.filterText = '';
+            this.inputElement.value = '';
+            this.inputElement.focus();
+            this.filterItems();
+        };
     }
     handleDropdownItemSelected(event) {
         if (this.disabled || this.readonly)
@@ -164,6 +163,7 @@ export class NvFielddropdown {
         if (newValue) {
             this.updateSelectedItem(newValue);
         }
+        this.valueChanged.emit(newValue);
     }
     handleOptionsChange(newValue) {
         if (newValue) {
@@ -226,9 +226,6 @@ export class NvFielddropdown {
         else if (event.key === 'Escape') {
             event.preventDefault();
             this.open = false;
-            if (this.inputElement) {
-                this.inputElement.blur();
-            }
         }
     }
     //#endregion EVENTS
@@ -354,15 +351,12 @@ export class NvFielddropdown {
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
-    connectedCallback() {
-        document.addEventListener('click', this.handleClickOutside.bind(this));
+    componentWillLoad() {
         this.resetFilter();
         this.setInitialSelection();
         if (this.filterable && this.filterText) {
             this.filterItems();
         }
-    }
-    componentWillLoad() {
         if (this.options) {
             this.handleOptionsChange(this.options);
         }
@@ -371,22 +365,17 @@ export class NvFielddropdown {
         }
     }
     componentDidLoad() {
-        document.addEventListener('click', this.handleClickOutside.bind(this));
-        // Check again after complete rendering
         if (this.value) {
             this.updateSelectedItem(this.value);
         }
     }
-    disconnectedCallback() {
-        document.removeEventListener('click', this.handleClickOutside.bind(this));
-    }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b3cc49b47c0dcd67e058bef5c02bc3851905fdc1' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'e592ddf6330e6d560571cbb78a570cd27fd0a7f2', htmlFor: this.inputId }, h("slot", { key: 'e394206eb57ab9d078402cc0ce5d2ed921a48ce0', name: "label" }, this.label))), h("nv-popover", { key: '775efbae14c94b5e1abfcc31f309fe8cc6eec04e', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'cb9bbe88393f9274167b9dd9bbcc44902d196813', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '0e516182825b578180753e1c9d8529dabef5109c', name: "before-input" }), h("div", { key: 'aa330c457419c25a40cfb93bed35a5414a5d6f49', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'ec5beea4918f84b72f3cac6630ade387a1856f13', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, h("span", null, this.getSelectedLabel() || this.value || this.placeholder))), h("nv-iconbutton", { key: '84a2c30896184425581bc42878099203e9203f4f', class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '40dcd054448b5c344e1dd7991ab6364189d69060', name: "after-input" })), h("div", { key: 'ed603f53b7edc59fc0c4b6575e6adeed6f904359', slot: "content" }, this.parsedOptions.length > 0 ? (h("ul", null, this.parsedOptions.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (h("slot", { name: "content" })))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '5c544bc17cfd3ddcb5f1d30f87f09cd3c9b3f253', class: "description" }, h("slot", { key: 'b9cb63d0d32b0bff891b3fb2762934166dfe7e83', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '2fc5ba8b2441c75def091b2622d415110d10e1d9', hidden: !this.error, class: "error-description" }, h("slot", { key: '511d6db8b4c200d8fe75e6916791d91b09013c40', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '189f41e526d7245f4d5fae078d2bea1528a9a8d1' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '91d5c635c4d37f5d6d3fef0e6dd3212009d1be35', htmlFor: this.inputId }, h("slot", { key: 'e749e641f077753464eaa21289ebf71c0b6f673b', name: "label" }, this.label))), h("nv-popover", { key: 'c3c0456e9937745b4784c7b858b9cfadcf4e7240', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '1ad04f70880de711e371267859950d272f78902f', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '99ff9d306c69aba7e5eb033feae1a05f7dcb01f6', name: "before-input" }), h("div", { key: '7afb87ecb3eacaf7510abd5b6b02645ba355f719', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'fe3749cdf9f25f0b7fd52949c955b1804fd65630', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, h("span", null, this.getSelectedLabel() || this.value || this.placeholder))), this.isFilterable && this.filterText && this.open && (h("nv-iconbutton", { key: '9806da726e4dce22f0a73664b482a405cb7cc071', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (h("nv-icon", { key: '781fb90765533615737da8c294ce497f22dbd9c6', name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { key: '1060f3a91606d26c3368299623b0d8211df5f6ec', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: 'b123b91bb2c09f77010bef649d11a27bf16cb3ab', name: "after-input" })), h("div", { key: '94234acfe1881c11b3e6fadda0f234d036ea47ef', slot: "content" }, this.parsedOptions.length > 0 ? (h("ul", null, this.parsedOptions.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (h("slot", { name: "content" })))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '26de437b142f81e21145ac4f6a15c7e6aecfbfa7', class: "description" }, h("slot", { key: '6c95582790d276567ad9e1619a949419a72f54c1', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '6ac20b9462e708a456e61c8e3721a585b03e696e', hidden: !this.error, class: "error-description" }, h("slot", { key: '1def9c4e17495a831ea9702ae121c64e812df9b6', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fielddropdown"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-fielddropdown.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["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';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.\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@Component({\n  tag: 'nv-fielddropdown',\n  styleUrl: 'styles/nv-fielddropdown.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFielddropdown {\n  @Element() el: HTMLNvFielddropdownElement;\n  private inputElement!: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\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   * Enables or disables the filtering feature for the dropdown items.\n   */\n  @Prop({ reflect: true, mutable: true })\n  filterable: boolean = false;\n\n  /**\n   * List of options available in the dropdown. The options are passed as a JSON\n   * string.\n   *\n   * @example\n   * options=[{\n   *  \"label\": \"Option 1\",\n   *  \"value\": \"option1\",\n   *  \"selected\": true\n   * },\n   * {\n   *  \"label\": \"Option 2\",\n   *  \"value\": \"option2\"\n   * }]\n   */\n  @Prop({ reflect: true })\n  readonly options?: string;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n\n  /** The text entered by the user for filtering dropdown items. */\n  @State()\n  filterText: string = '';\n\n  @State()\n  isFilterable: boolean = this.filterable;\n\n  @State()\n  selectedValues: Set<string> = new Set();\n\n  /**\n   * Options configuration for the dropdown items.\n   */\n  @State()\n  parsedOptions: Array<{\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is disabled */\n    disabled?: boolean;\n    /** Whether this option is pre-selected */\n    selected?: boolean;\n  }> = [];\n\n  //#endregion STATE\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  /**\n   * Event emitted when an item is clicked.\n   */\n  @Event()\n  dropdownItemSelected: EventEmitter<\n    HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n  >;\n\n  @Listen('dropdownItemSelected')\n  handleDropdownItemSelected(\n    event: CustomEvent<\n      HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n    >,\n  ) {\n    if (this.disabled || this.readonly) return;\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    items.forEach(item => {\n      if (item !== event.target) {\n        item.removeAttribute('selected');\n      } else {\n        item.setAttribute('selected', 'true');\n      }\n    });\n\n    this.value = event.detail.value;\n    this.open = false;\n  }\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(newValue: string) {\n    if (newValue) {\n      this.updateSelectedItem(newValue);\n    }\n  }\n\n  @Watch('options')\n  handleOptionsChange(newValue: string) {\n    if (newValue) {\n      try {\n        const parsedOpts = JSON.parse(newValue);\n        this.parsedOptions = [...parsedOpts];\n        const selectedOption = this.parsedOptions.find(opt => opt.selected);\n\n        if (selectedOption) {\n          this.value = selectedOption.value;\n          requestAnimationFrame(() => {\n            // Wait for items to be rendered\n            this.updateSelectedItem(selectedOption.value);\n          });\n        }\n      } catch (error) {\n        console.error('nv-fielddropdown: error parsing options:', error);\n        this.parsedOptions = [];\n      }\n    } else {\n      this.parsedOptions = [];\n    }\n  }\n\n  @Listen('blur', { capture: true })\n  handleBlur(event: FocusEvent) {\n    const target = event.relatedTarget;\n\n    if (!(target instanceof Node) || !this.el.contains(target)) {\n      this.open = false;\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\n        if (!this.filterable) {\n          // Focus on the first item if it is not 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-fielddropdownitem:not([data-empty])'),\n    ) as HTMLNvFielddropdownitemElement[];\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 === 'Escape') {\n      event.preventDefault();\n      this.open = false;\n      if (this.inputElement) {\n        this.inputElement.blur();\n      }\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\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   * Set the initial selection based on the current value and update the\n   * inputElement value.\n   */\n  private setInitialSelection() {\n    if (!this.value) return;\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const selectedItem = items.find(\n      item => item.getAttribute('value') === this.value,\n    );\n\n    items.forEach(item => {\n      item.removeAttribute('selected');\n      item.classList.remove('selected');\n    });\n\n    if (selectedItem) {\n      selectedItem.setAttribute('selected', 'true');\n      selectedItem.classList.add('selected');\n      this.value = selectedItem.getAttribute('value');\n      if (this.inputElement) {\n        this.inputElement.value = this.value;\n      }\n    } else {\n      console.warn('No matching item found for value:', this.value);\n    }\n  }\n\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\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  private handleInput = (event: Event) => {\n    if (!this.filterable) return;\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const input = event.target as HTMLInputElement;\n    this.filterText = input.value.toLowerCase();\n    this.filterItems();\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-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Remove the \"no results found\" item if it exists\n    const existingEmptyItem = this.el.querySelector(\n      'nv-fielddropdownitem[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-fielddropdownitem');\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  /** Reset the filter and make all items visible. */\n  private resetFilter() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    items.forEach(item => {\n      item.style.display = '';\n    });\n  }\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      return;\n    }\n\n    this.open = false;\n  };\n\n  private handleInputFocus = () => {\n    if (this.disabled || this.readonly) return;\n\n    this.open = true;\n  };\n\n  private togglePopover = () => {\n    if (this.disabled || this.readonly) return;\n\n    this.open = !this.open;\n\n    if (this.open && !this.filterable) {\n      this.focusFirstItem();\n    }\n  };\n\n  private updateHighlightedItem(\n    items: HTMLNvFielddropdownitemElement[],\n    index: number,\n  ) {\n    items.forEach((item, i) => {\n      if (i === index) {\n        item.classList.add('highlighted');\n        item.focus();\n        item.scrollIntoView({ block: 'nearest' });\n      } else {\n        item.classList.remove('highlighted');\n      }\n    });\n  }\n\n  private focusFirstItem() {\n    const firstItem = this.el.querySelector('nv-fielddropdownitem');\n    if (firstItem) {\n      (firstItem as HTMLElement).focus();\n      this.updateHighlightedItem(\n        Array.from(\n          this.el.querySelectorAll('nv-fielddropdownitem'),\n        ) as HTMLNvFielddropdownitemElement[],\n        0,\n      );\n    } else {\n      console.warn('nv-fielddropdown: no first item found to focus');\n    }\n  }\n\n  private updateSelectedItem(value: string) {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const matchingItem = items.find(item => {\n      const itemLabel = item.getAttribute('label');\n      const itemValue = item.getAttribute('value');\n      const itemText = item.textContent?.trim();\n\n      return itemLabel === value || itemValue === value || itemText === value;\n    });\n\n    items.forEach(item => {\n      if (item === matchingItem) {\n        item.setAttribute('selected', '');\n      } else {\n        item.removeAttribute('selected');\n      }\n    });\n\n    if (matchingItem && this.inputElement) {\n      this.inputElement.value = value;\n    }\n  }\n\n  private getSelectedLabel = (): string => {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const matchingItem = items.find(\n      item => item.getAttribute('value') === this.value,\n    );\n    return matchingItem\n      ? matchingItem.label ??\n          matchingItem.textContent?.trim() ??\n          matchingItem.value\n      : '';\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n\n    this.resetFilter();\n    this.setInitialSelection();\n\n    if (this.filterable && this.filterText) {\n      this.filterItems();\n    }\n  }\n\n  componentWillLoad() {\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n\n    if (this.value) {\n      this.updateSelectedItem(this.value);\n    }\n  }\n\n  componentDidLoad() {\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n\n    // Check again after complete rendering\n    if (this.value) {\n      this.updateSelectedItem(this.value);\n    }\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  //#endregion LIFECYCLE\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 || this.disabled || this.readonly ? (\n                <input\n                  id={this.inputId}\n                  type=\"search\"\n                  ref={e => (this.inputElement = e)}\n                  autofocus={this.autofocus}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.getSelectedLabel()}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInput}\n                  onFocus={this.handleInputFocus}\n                  onKeyDown={this.handleKeyDown}\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClick}\n                  tabIndex={this.disabled ? -1 : 0}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.handleInputFocus}\n                >\n                  <span>\n                    {this.getSelectedLabel() || this.value || 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                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div slot=\"content\">\n            {this.parsedOptions.length > 0 ? (\n              <ul>\n                {this.parsedOptions.map(option => (\n                  <nv-fielddropdownitem\n                    label={option.label}\n                    value={option.value}\n                    disabled={option.disabled}\n                    selected={option.value === this.value}\n                  />\n                ))}\n              </ul>\n            ) : (\n              <slot name=\"content\"></slot>\n            )}\n          </div>\n        </nv-popover>\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      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-fielddropdown.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["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';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.\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@Component({\n  tag: 'nv-fielddropdown',\n  styleUrl: 'styles/nv-fielddropdown.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFielddropdown {\n  @Element() el: HTMLNvFielddropdownElement;\n  private inputElement!: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\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   * Enables or disables the filtering feature for the dropdown items.\n   */\n  @Prop({ reflect: true, mutable: true })\n  filterable: boolean = false;\n\n  /**\n   * List of options available in the dropdown. The options are passed as a JSON\n   * string.\n   *\n   * @example\n   * options=[{\n   *  \"label\": \"Option 1\",\n   *  \"value\": \"option1\",\n   *  \"selected\": true\n   * },\n   * {\n   *  \"label\": \"Option 2\",\n   *  \"value\": \"option2\"\n   * }]\n   */\n  @Prop({ reflect: true })\n  readonly options?: string;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n\n  /** The text entered by the user for filtering dropdown items. */\n  @State()\n  filterText: string = '';\n\n  @State()\n  isFilterable: boolean = this.filterable;\n\n  @State()\n  selectedValues: Set<string> = new Set();\n\n  /**\n   * Options configuration for the dropdown items.\n   */\n  @State()\n  parsedOptions: Array<{\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is disabled */\n    disabled?: boolean;\n    /** Whether this option is pre-selected */\n    selected?: boolean;\n  }> = [];\n\n  //#endregion STATE\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  /**\n   * Event emitted when an item is clicked.\n   */\n  @Event()\n  dropdownItemSelected: EventEmitter<\n    HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n  >;\n\n  @Listen('dropdownItemSelected')\n  handleDropdownItemSelected(\n    event: CustomEvent<\n      HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n    >,\n  ) {\n    if (this.disabled || this.readonly) return;\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    items.forEach(item => {\n      if (item !== event.target) {\n        item.removeAttribute('selected');\n      } else {\n        item.setAttribute('selected', 'true');\n      }\n    });\n\n    this.value = event.detail.value;\n    this.open = false;\n  }\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(newValue: string) {\n    if (newValue) {\n      this.updateSelectedItem(newValue);\n    }\n    this.valueChanged.emit(newValue);\n  }\n\n  @Watch('options')\n  handleOptionsChange(newValue: string) {\n    if (newValue) {\n      try {\n        const parsedOpts = JSON.parse(newValue);\n        this.parsedOptions = [...parsedOpts];\n        const selectedOption = this.parsedOptions.find(opt => opt.selected);\n\n        if (selectedOption) {\n          this.value = selectedOption.value;\n          requestAnimationFrame(() => {\n            // Wait for items to be rendered\n            this.updateSelectedItem(selectedOption.value);\n          });\n        }\n      } catch (error) {\n        console.error('nv-fielddropdown: error parsing options:', error);\n        this.parsedOptions = [];\n      }\n    } else {\n      this.parsedOptions = [];\n    }\n  }\n\n  @Listen('blur', { capture: true })\n  handleBlur(event: FocusEvent) {\n    const target = event.relatedTarget;\n\n    if (!(target instanceof Node) || !this.el.contains(target)) {\n      this.open = false;\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\n        if (!this.filterable) {\n          // Focus on the first item if it is not 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-fielddropdownitem:not([data-empty])'),\n    ) as HTMLNvFielddropdownitemElement[];\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 === 'Escape') {\n      event.preventDefault();\n      this.open = false;\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\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   * Set the initial selection based on the current value and update the\n   * inputElement value.\n   */\n  private setInitialSelection() {\n    if (!this.value) return;\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const selectedItem = items.find(\n      item => item.getAttribute('value') === this.value,\n    );\n\n    items.forEach(item => {\n      item.removeAttribute('selected');\n      item.classList.remove('selected');\n    });\n\n    if (selectedItem) {\n      selectedItem.setAttribute('selected', 'true');\n      selectedItem.classList.add('selected');\n      this.value = selectedItem.getAttribute('value');\n      if (this.inputElement) {\n        this.inputElement.value = this.value;\n      }\n    } else {\n      console.warn('No matching item found for value:', this.value);\n    }\n  }\n\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\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  private handleInput = (event: Event) => {\n    if (!this.filterable) return;\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const input = event.target as HTMLInputElement;\n    this.filterText = input.value.toLowerCase();\n    this.filterItems();\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-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Remove the \"no results found\" item if it exists\n    const existingEmptyItem = this.el.querySelector(\n      'nv-fielddropdownitem[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-fielddropdownitem');\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  /** Reset the filter and make all items visible. */\n  private resetFilter() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    items.forEach(item => {\n      item.style.display = '';\n    });\n  }\n\n  private handleInputFocus = () => {\n    if (this.disabled || this.readonly) return;\n\n    this.open = true;\n  };\n\n  private togglePopover = () => {\n    if (this.disabled || this.readonly) return;\n\n    this.open = !this.open;\n\n    if (this.open && !this.filterable) {\n      this.focusFirstItem();\n    }\n  };\n\n  private updateHighlightedItem(\n    items: HTMLNvFielddropdownitemElement[],\n    index: number,\n  ) {\n    items.forEach((item, i) => {\n      if (i === index) {\n        item.classList.add('highlighted');\n        item.focus();\n        item.scrollIntoView({ block: 'nearest' });\n      } else {\n        item.classList.remove('highlighted');\n      }\n    });\n  }\n\n  private focusFirstItem() {\n    const firstItem = this.el.querySelector('nv-fielddropdownitem');\n    if (firstItem) {\n      (firstItem as HTMLElement).focus();\n      this.updateHighlightedItem(\n        Array.from(\n          this.el.querySelectorAll('nv-fielddropdownitem'),\n        ) as HTMLNvFielddropdownitemElement[],\n        0,\n      );\n    } else {\n      console.warn('nv-fielddropdown: no first item found to focus');\n    }\n  }\n\n  private updateSelectedItem(value: string) {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const matchingItem = items.find(item => {\n      const itemLabel = item.getAttribute('label');\n      const itemValue = item.getAttribute('value');\n      const itemText = item.textContent?.trim();\n\n      return itemLabel === value || itemValue === value || itemText === value;\n    });\n\n    items.forEach(item => {\n      if (item === matchingItem) {\n        item.setAttribute('selected', '');\n      } else {\n        item.removeAttribute('selected');\n      }\n    });\n\n    if (matchingItem && this.inputElement) {\n      this.inputElement.value = value;\n    }\n  }\n\n  private getSelectedLabel = (): string => {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const matchingItem = items.find(\n      item => item.getAttribute('value') === this.value,\n    );\n    return matchingItem\n      ? matchingItem.label ??\n          matchingItem.textContent?.trim() ??\n          matchingItem.value\n      : '';\n  };\n\n  private clearFilter = () => {\n    this.filterText = '';\n    this.inputElement.value = '';\n    this.inputElement.focus();\n    this.filterItems();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.resetFilter();\n    this.setInitialSelection();\n\n    if (this.filterable && this.filterText) {\n      this.filterItems();\n    }\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n    if (this.value) {\n      this.updateSelectedItem(this.value);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.value) {\n      this.updateSelectedItem(this.value);\n    }\n  }\n\n  //#endregion LIFECYCLE\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 || this.disabled || this.readonly ? (\n                <input\n                  id={this.inputId}\n                  type=\"search\"\n                  ref={e => (this.inputElement = e)}\n                  autofocus={this.autofocus}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.getSelectedLabel()}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInput}\n                  onFocus={this.handleInputFocus}\n                  onKeyDown={this.handleKeyDown}\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClick}\n                  tabIndex={this.disabled ? -1 : 0}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.handleInputFocus}\n                >\n                  <span>\n                    {this.getSelectedLabel() || this.value || this.placeholder}\n                  </span>\n                </p>\n              )}\n\n              {this.isFilterable && this.filterText && this.open && (\n                <nv-iconbutton\n                  name=\"x\"\n                  size=\"md\"\n                  emphasis=\"lower\"\n                  class=\"clear-button\"\n                  onClick={this.clearFilter}\n                  aria-label=\"Clear input\"\n                />\n              )}\n\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n\n              <nv-iconbutton\n                data-scope=\"toggle-dropdown\"\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                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div slot=\"content\">\n            {this.parsedOptions.length > 0 ? (\n              <ul>\n                {this.parsedOptions.map(option => (\n                  <nv-fielddropdownitem\n                    label={option.label}\n                    value={option.value}\n                    disabled={option.disabled}\n                    selected={option.value === this.value}\n                  />\n                ))}\n              </ul>\n            ) : (\n              <slot name=\"content\"></slot>\n            )}\n          </div>\n        </nv-popover>\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      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-fielddropdown/styles/nv-fielddropdown.css

@@ -75,10 +75,8 @@ nv-fielddropdown .input-wrapper {
 nv-fielddropdown .input-container {
   display: flex;
   flex-grow: 1;
-  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);
   justify-content: center;
   align-items: center;
-  gap: var(--form-field-gap);
   align-self: stretch;
   border-radius: var(--form-field-radius);
   border-width: 1px;
@@ -108,6 +106,12 @@ nv-fielddropdown .input-container:has(input:disabled) {
   background-color: var(--components-form-field-background-disabled);
   border-color: var(--nv-field-border-disabled);
 }
+nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,
+nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,
+nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,
+nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
 nv-fielddropdown .input-container input,
 nv-fielddropdown .input-container p.non-filterable-text {
   display: flex;
@@ -116,17 +120,11 @@ nv-fielddropdown .input-container p.non-filterable-text {
   overflow: hidden;
   background-color: transparent;
   color: var(--components-form-field-content-text);
-  text-overflow: ellipsis;
+  padding: var(--form-field-padding-y) var(--form-field-padding-x);
   font-size: var(--form-field-font-size);
   font-style: normal;
   font-weight: 500;
   line-height: var(--form-field-line-height);
-  width: 100%;
-  padding-right: 2rem;
-  flex-grow: 1;
-  margin: 0;
-  min-height: 100%;
-  box-sizing: border-box;
 }
 nv-fielddropdown .input-container input:focus,
 nv-fielddropdown .input-container p.non-filterable-text:focus {
@@ -143,16 +141,16 @@ nv-fielddropdown .input-container p.non-filterable-text::placeholder {
   font-weight: 400;
   line-height: var(--form-field-line-height);
 }
-nv-fielddropdown .input-container .toggle-dropdown-icon {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
+nv-fielddropdown .input-container > nv-iconbutton {
+  border: 0px;
+  border-radius: 0px;
+}
+nv-fielddropdown .input-container > nv-iconbutton:focus-visible {
+  border-radius: var(--button-md-border-radius);
+  outline-offset: -3px;
 }
 nv-fielddropdown .input-container nv-icon.validation {
   color: var(--nv-field-border-default);
-  position: absolute;
-  right: 50px;
 }
 nv-fielddropdown .non-filterable-text {
   display: block;

package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.js

@@ -55,7 +55,7 @@ export class NvFielddropdownitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'aaa3f2ebc89268000413b1431fd69bf48a5270e0', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, h("slot", { key: '5ec8b34d1642c4978290db8e741d7b61db1166ef' }), !this.composed && (h("div", { key: '054bab6f0e0c1fe80666c115058d4adbbdfdef05', class: "text-wrapper" }, h("span", { key: 'eaba500c4e8cdc122a368e2329134c6499fa3827', "data-scope": "text" }, this.label))), this.selected && (h("nv-icon", { key: 'bdffe532360c437512485c93893c4fc0ecccb726', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+        return (h(Host, { key: '00b69c6a38cf852643a7e239bf07d7a123c84dc7', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, h("slot", { key: '4bd9cc35162030b57de567de4b824728c6d3c031' }), !this.composed && (h("div", { key: '17fde413045c683a09467037a4513649deda8eeb', class: "text-wrapper" }, h("span", { key: 'e4ae14322a14725d142ce57da45e50edff416935', "data-scope": "text" }, this.label))), this.selected && (h("nv-icon", { key: '95536cced4b7abeca334eee13e38870cd642ebc5', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
     }
     static get is() { return "nv-fielddropdownitem"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.css

@@ -1,4 +1,5 @@
 nv-fielddropdownitemcheck {
+  cursor: pointer;
   display: flex;
   padding: var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);
   border-radius: var(--list-dropdown-item-radius);