npm - @nanoporetech-digital/components - Versions diffs - 3.13.0 → 4.0.0 - Mend

@nanoporetech-digital/components 3.13.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (374) hide show

package/dist/esm/nano-range.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-range.entry.js","mappings":";;;;;;;;AAAO,MAAM,iBAAiB,GAAG,CAC/B,SAAsB,EACtB,IAAY,EACZ,KAAgC,EAChC,QAAiB;EAEjB,IAAI,KAAK,GAAG,SAAS,CAAC,aAAa,CACjC,iBAAiB,CACS,CAAC;EAC7B,IAAI,CAAC,KAAK,EAAE;IACV,KAAK,GAAG,SAAS,CAAC,aAAc,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACxD,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;IACtB,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACjC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;GAC9B;EACD,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;EAC1B,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;EAClB,KAAK,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;AAC5B,CAAC;;AClBD,MAAM,QAAQ,GAAG,8jLAA8jL;;MCyClkL,KAAK;;;;;;;IACR,aAAQ,GAAG,KAAK,CAAC;IAEjB,aAAQ,GAAG,KAAK,CAAC;IA6GjB,gBAAW,GAAG,CAAC,KAAU;MAC/B,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACzC,CAAC;IAEM,wBAAmB,GAAG,CAAC,KAAU;MACvC,IAAI,IAAI,CAAC,SAAS,EAAE;QAClB,OAAO;UACL,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC;UACpC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC;SACrC,CAAC;OACH;WAAM;QACL,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;OAChC;KACF,CAAC;IAoDM,mBAAc,GAAG,CAAC,IAAc,EAAE,UAAmB;MAC3D,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;MACrB,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;MAC3B,IAAI,GAAG,IAAI,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;MACpC,IAAI,CAAC,UAAU,EAAE;QACf,IAAI,IAAI,CAAC,CAAC,CAAC;OACZ;MACD,IAAI,IAAI,KAAK,GAAG,EAAE;QAChB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;OAC/C;WAAM;QACL,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;OAC/C;MACD,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB,CAAC;IAiJM,WAAM,GAAG;MACf,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,EAAE,CAAC;OAClB;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACtB,IAAI,CAAC,SAAS,EAAE,CAAC;OAClB;KACF,CAAC;kBApVwB,CAAC;kBACD,CAAC;;;oBAaR,CAAC;gBAUL,EAAE;qBAKG,KAAK;eAKX,CAAC;eAWD,GAAG;eAYH,KAAK;iBAMH,KAAK;gBAKN,CAAC;iBAMA,KAAK;oBAKF,KAAK;iBAYqB,CAAC;;EA1EpC,eAAe;IACvB,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;GACjE;EAiBS,UAAU;IAClB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;GACF;EAOS,UAAU;IAClB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;GACF;EA8BS,eAAe;IACvB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;IACD,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAOS,YAAY,CAAC,KAAiB;IACtC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAExC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACjC;EAsCD,iBAAiB;IACf,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,IAAI,CAAC,eAAe,EAAE,CAAC;IACvB,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;MACvB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;KAC1B;GACF;EAED,MAAM,gBAAgB;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,IAAI,WAAW,EAAE;MACf,IAAI,CAAC,OAAO,GAAG,CAAC,MAAM,OAAO,qBAA2B,CAAC,EAAE,aAAa,CAAC;QACvE,EAAE,EAAE,WAAW;QACf,WAAW,EAAE,OAAO;QACpB,eAAe,EAAE,GAAG;QACpB,SAAS,EAAE,CAAC;QACZ,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;QAC/B,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;OAC9B,CAAC,CAAC;MACH,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;GACF;EAiBO,QAAQ;IACd,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;IAC9B,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAC;OACd;MACD,OAAO;QACL,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,KAAK;OACb,CAAC;KACH;SAAM;MACL,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAC,KAAK,CAAC;OACpB;MACD,OAAO,KAAK,CAAC;KACd;GACF;EAEO,SAAS;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,WAAW,EAAE,IAAI;MACjB,sBAAsB,EAAE,IAAI,CAAC,QAAQ;KACtC,CAAC,CAAC;GACJ;EAEO,OAAO,CAAC,MAAqB;IACnC,MAAM,IAAI,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAY,CAAC,qBAAqB,EAAS,CAAC,CAAC;IAC5E,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;;IAGjC,IAAI,KAAK,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC7D,IAAI,QAAQ,CAAC,GAAG,KAAK,KAAK,EAAE;MAC1B,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC;KACnB;IAED,IAAI,CAAC,WAAW;MACd,CAAC,IAAI,CAAC,SAAS;QACf,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;UACzD,GAAG;UACH,GAAG,CAAC;IAEV,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;;IAGhC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;GACvB;EAEO,MAAM,CAAC,MAAqB;IAClC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;GAC9B;EAEO,KAAK,CAAC,MAAqB;IACjC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;GAC9B;EAEO,MAAM,CAAC,QAAgB;;;IAG7B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,KAAK,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC7D,IAAI,QAAQ,CAAC,GAAG,KAAK,KAAK,EAAE;MAC1B,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC;KACnB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE;;MAEd,KAAK,GAAG,YAAY,CAClB,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,EAClD,IAAI,CAAC,GAAG,EACR,IAAI,CAAC,GAAG,CACT,CAAC;KACH;;IAGD,IAAI,IAAI,CAAC,WAAW,KAAK,GAAG,EAAE;MAC5B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;;IAGD,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,IAAY,IAAI;IACd,OAAO,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;GACjE;EAED,IAAY,IAAI;IACd,OAAO,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;GACjE;EAED,IAAY,UAAU;IACpB,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KAC3C;IACD,OAAO,CAAC,CAAC;GACV;EAED,IAAY,UAAU;IACpB,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KAC3C;IACD,OAAO,IAAI,CAAC,MAAM,CAAC;GACpB;EAEO,WAAW;IACjB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAS,CAAC;IACrC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAC1B,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;MAClD,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;KACnD;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;KAC7C;GACF;EAEO,WAAW;IACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAErB,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,SAAS;QACxB,IAAI;QACJ;QACE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;QAC3B,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;OAC5B,CAAC;IAEN,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;GACvB;EAEO,QAAQ,CAAC,IAAc;IAC7B,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE;MACtB,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAC7C,IAAI,KAAK,GAAG,GAAG,eAAe,GAAG,eAAe,CACtB,CAAC;MAC7B,IAAI,MAAM,EAAE;QACV,MAAM,CAAC,KAAK,EAAE,CAAC;OAChB;KACF;GACF;EAkBD,MAAM;IACJ,MAAM,EACJ,GAAG,EACH,GAAG,EACH,IAAI,EACJ,EAAE,EACF,cAAc,EACd,WAAW,EACX,QAAQ,EACR,GAAG,EACH,UAAU,EACV,UAAU,GACX,GAAG,IAAI,CAAC;IAET,MAAM,QAAQ,GAAG,GAAG,UAAU,GAAG,GAAG,GAAG,CAAC;IACxC,MAAM,MAAM,GAAG,GAAG,GAAG,GAAG,UAAU,GAAG,GAAG,GAAG,CAAC;IAE5C,MAAM,GAAG,GAAG,QAAQ,CAAC;IACrB,MAAM,KAAK,GAAG,GAAG,CAAC,GAAG,KAAK,KAAK,CAAC;IAChC,MAAM,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IACvC,MAAM,GAAG,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAErC,MAAM,SAAS,GAAG,CAAC,IAAS;MAC1B,OAAO;QACL,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;OACrB,CAAC;KACH,CAAC;IAEF,MAAM,QAAQ,GAAG;MACf,CAAC,KAAK,GAAG,QAAQ;MACjB,CAAC,GAAG,GAAG,MAAM;KACd,CAAC;IAEF,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;MAC5B,KAAK,IAAI,KAAK,GAAG,GAAG,EAAE,KAAK,IAAI,GAAG,EAAE,KAAK,IAAI,IAAI,EAAE;QACjD,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAE5C,MAAM,IAAI,GAAQ;UAChB,KAAK;UACL,MAAM,EAAE,KAAK,IAAI,UAAU,IAAI,KAAK,IAAI,UAAU;SACnD,CAAC;QAEF,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC;QAEhC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAClB;KACF;IAED,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;IAE5E,QACE,EAAC,IAAI,IACH,SAAS,EAAE,IAAI,CAAC,OAAO,EACvB,UAAU,EAAE,IAAI,CAAC,MAAM,EACvB,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,KAAK,EAAE;QACpC,gBAAgB,EAAE,QAAQ;QAC1B,eAAe,EAAE,WAAW,KAAK,SAAS;QAC1C,eAAe,EAAE,GAAG;QACpB,aAAa,EAAE,IAAI,CAAC,KAAK;OAC1B,CAAC,IAEF,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,WACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,IAE7C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACd,YACE,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,EACtB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,mBAAmB,EAAE,IAAI,CAAC,MAAM;OACjC,EACD,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,MAAM,GAC1C,CACH,CAAC,EAEF,WAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,KAAK,GAAG,EACxD,WACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,QAAQ,EACf,IAAI,EAAC,YAAY,GACjB,EAED,UAAU,CAAC,KAAK,EAAE;MACjB,IAAI,EAAE,GAAG;MACT,OAAO,EAAE,WAAW,KAAK,GAAG;MAC5B,KAAK,EAAE,IAAI,CAAC,IAAI;MAChB,KAAK,EAAE,IAAI,CAAC,MAAM;MAClB,GAAG;MACH,QAAQ;MACR,cAAc;MACd,GAAG;MACH,GAAG;KACJ,CAAC,EAED,IAAI,CAAC,SAAS;MACb,UAAU,CAAC,KAAK,EAAE;QAChB,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,WAAW,KAAK,GAAG;QAC5B,KAAK,EAAE,IAAI,CAAC,IAAI;QAChB,KAAK,EAAE,IAAI,CAAC,MAAM;QAClB,GAAG;QACH,QAAQ;QACR,cAAc;QACd,GAAG;QACH,GAAG;OACJ,CAAC,CACA,EACN,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACD,EACP;GACH;;;;;;;;;;AAgBH,MAAM,UAAU,GAAG,CACjB,KAAc,EACd,EACE,IAAI,EACJ,KAAK,EACL,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,OAAO,EACP,GAAG,EACH,cAAc,GACJ;EAEZ,MAAM,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;EAEvC,MAAM,SAAS,GAAG;IAChB,MAAM,KAAK,GAAQ,EAAE,CAAC;IACtB,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC;IACjC,OAAO,KAAK,CAAC;GACd,CAAC;EAEF,QACE,WACE,SAAS,EAAE,CAAC,EAAiB;MAC3B,MAAM,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;MACnB,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,WAAW,EAAE;QAC9C,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC5B,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,EAAE,CAAC,eAAe,EAAE,CAAC;OACtB;WAAM,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,SAAS,EAAE;QACpD,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC3B,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,EAAE,CAAC,eAAe,EAAE,CAAC;OACtB;KACF,EACD,KAAK,EAAE;MACL,mBAAmB,EAAE,IAAI;MACzB,cAAc,EAAE,IAAI,KAAK,GAAG;MAC5B,cAAc,EAAE,IAAI,KAAK,GAAG;MAC5B,oBAAoB,EAAE,OAAO;MAC7B,gBAAgB,EAAE,KAAK,KAAK,GAAG;MAC/B,gBAAgB,EAAE,KAAK,KAAK,GAAG;KAChC,EACD,KAAK,EAAE,SAAS,EAAE,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,mBACZ,GAAG,mBACH,GAAG,mBACH,QAAQ,GAAG,MAAM,GAAG,IAAI,mBACxB,KAAK,IAEnB,GAAG,KACF,WAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,KAAK,IAClD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CACd,CACP,EACD,WAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAG,CACtD,EACN;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,KAAa,EACb,GAAW,EACX,GAAW,EACX,IAAY;EAEZ,IAAI,KAAK,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,KAAK,CAAC;EAChC,IAAI,IAAI,GAAG,CAAC,EAAE;IACZ,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,GAAG,CAAC;GAC/C;EACD,OAAO,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;EAC3D,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;AAClD,CAAC,CAAC;;;;;","names":[],"sources":["./src/utils/form.ts","./src/components/range/range.scss?tag=nano-range&encapsulation=scoped","./src/components/range/range.tsx"],"sourcesContent":["export const renderHiddenInput = (\n container: HTMLElement,\n name: string,\n value: string \| undefined \| null,\n disabled: boolean\n) => {\n let input = container.querySelector(\n 'input.aux-input'\n ) as HTMLInputElement \| null;\n if (!input) {\n input = container.ownerDocument!.createElement('input');\n input.type = 'hidden';\n input.classList.add('aux-input');\n container.appendChild(input);\n }\n input.disabled = disabled;\n input.name = name;\n input.value = value \|\| '';\n};\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n /*\n @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n * @prop --bar-height: Height of the range bar; Defaults to 8px;\n * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n * @prop --height: Height of the range. Defaults to 42px;\n * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n * @prop --knob-size: Size of the range knob; Defaults to 30px;\n * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n /\n --knob-handle-size: (var(--knob-size) 2);\n --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n --knob-border-radius: 50%;\n --knob-background: #{nano-color(primary, base)};\n --knob-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%);\n --knob-size: 30px;\n --bar-height: 8px;\n --bar-background: #e2e1e0;\n --bar-background-active: #a5a5a5;\n --bar-border-radius: 4px;\n --height: 42px;\n --pin-background: #{nano-color(primary, base)};\n --pin-color: #{nano-color(primary, contrast)};\n --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n display: flex;\n position: relative;\n flex: 3;\n align-items: center;\n user-select: none;\n\n ::slotted(ion-icon[slot]) {\n font-size: 1.5em;\n }\n\n ::slotted([slot='start']) {\n margin-inline: 0 14px;\n margin-block: 0;\n font-size: 0.9em;\n }\n\n ::slotted([slot='end']) {\n margin-inline: 14px 0;\n margin-block: 0;\n font-size: 0.9em;\n }\n}\n\n.range-slider {\n position: relative;\n flex: 1;\n width: 100%;\n height: var(--height);\n contain: size layout style;\n cursor: grab;\n touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n border-radius: var(--bar-border-radius);\n inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n inset-inline-start: 0;\n position: absolute;\n width: 100%;\n height: var(--bar-height);\n background: var(--bar-background);\n pointer-events: none;\n\n :host(.range-snaps) & {\n border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n }\n}\n\n.range-bar-active {\n inset-block-end: 0;\n width: auto;\n background: var(--bar-background-active);\n\n :host(.range-pressed) {\n will-change: left, right;\n }\n}\n\n// knob\n\n.range-knob {\n border-radius: var(--knob-border-radius);\n inset-block-start: calc(50% - var(--knob-size) / 2);\n inset-inline-start: calc(50% - var(--knob-size) / 2);\n position: absolute;\n width: var(--knob-size);\n height: var(--knob-size);\n background: var(--knob-background);\n box-shadow: var(--knob-box-shadow);\n z-index: 2;\n pointer-events: none;\n transform: scale(0.67);\n transition-duration: 120ms;\n transition-property: transform, background-color, border;\n transition-timing-function: ease;\n\n :host(:not(.range-has-pin)) .range-knob-pressed & {\n transform: scale(1);\n }\n}\n\n.range-knob-handle {\n inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);\n inset-inline-start: 0;\n margin-inline-start: calc(0px - var(--knob-handle-size) / 2);\n position: absolute;\n width: calc(var(--knob-handle-size));\n height: calc(var(--knob-handle-size));\n text-align: center;\n\n &:active,\n &:focus {\n outline: none;\n\n .range-knob {\n box-shadow: var(--knob-box-shadow), var(--focus-style);\n }\n }\n}\n\n// ticks\n\n.range-tick {\n position: absolute;\n inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n width: var(--bar-height);\n height: var(--bar-height);\n background: var(--bar-background-active);\n z-index: 1;\n pointer-events: none;\n\n &:first-of-type {\n border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n }\n\n &:last-of-type {\n border-radius: 0 var(--bar-border-radius) var(--bar-border-radius) 0;\n }\n\n &-active {\n background: transparent;\n }\n}\n\n// pin\n\n.range-pin {\n transform: translate3d(0, 0, 0) scale(0.01);\n transform-origin: center top;\n padding: 0.66em 0;\n border-radius: 50%;\n text-align: center;\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n min-width: 2.33em;\n height: 2.33em;\n transition: transform 120ms ease, background 120ms ease;\n background: var(--pin-background);\n color: var(--pin-color);\n font-size: 0.75em;\n\n &::before {\n inset-block-start: 0.25em;\n inset-inline-start: 50%;\n margin-inline-start: -1.08em;\n border-radius: 50% 50% 50% 0;\n position: absolute;\n width: 2.16em;\n height: 2.16em;\n transform: rotate(-45deg);\n transition: background 120ms ease;\n background: var(--pin-background);\n content: '';\n z-index: -1;\n }\n\n .range-knob-pressed & {\n transform: translate3d(0, -50%, 0) scale(1);\n transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n }\n}\n\n// disabled\n\n:host(.range-disabled) {\n pointer-events: none;\n\n .range-bar-active,\n .range-bar,\n .range-tick {\n background-color: rgb(var(--rgb-inactive) / 50%);\n }\n\n .range-knob {\n transform: scale(0.55);\n outline: 5px solid #fff;\n background-color: rgb(var(--rgb-inactive) / 50%);\n }\n}\n\n// theme\n\n:host(.nano-color) {\n .range-bar-active,\n .range-knob,\n .range-pin,\n .range-pin::before,\n .range-tick {\n background: current-color(base);\n color: current-color(contrast);\n }\n\n .range-bar {\n background: current-color(base, 0.26);\n }\n\n .range-knob-handle {\n &:active,\n &:focus {\n .range-knob {\n box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n }\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport type {\n Color,\n Gesture,\n GestureDetail,\n KnobName,\n RangeChangeEventDetail,\n RangeValue,\n StyleEventDetail,\n} from '../../interface';\n\n/*\n The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n \n Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n \n @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n /\n@Component({\n tag: 'nano-range',\n styleUrl: 'range.scss',\n scoped: true,\n})\nexport class Range implements ComponentInterface {\n private noUpdate = false;\n private rect!: ClientRect;\n private hasFocus = false;\n private rangeSlider?: HTMLElement;\n private gesture?: Gesture;\n\n @Element() el!: HTMLNanoRangeElement;\n\n @State() private ratioA = 0;\n @State() private ratioB = 0;\n @State() private pressedKnob: KnobName;\n\n /\n The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n /\n @Prop() color?: Color;\n\n /\n How long, in milliseconds, to wait to trigger the\n * `nanoChange` event after each change in the range value.\n /\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n }\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = '';\n\n /\n Show two knobs.\n /\n @Prop() dualKnobs = false;\n\n /\n Minimum integer value of the range.\n /\n @Prop() min = 0;\n @Watch('min')\n protected minChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /\n Maximum integer value of the range.\n /\n @Prop() max = 100;\n @Watch('max')\n protected maxChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /\n If `true`, a pin with integer value is shown when the knob\n * is pressed.\n /\n @Prop() pin = false;\n\n /\n If `true`, the knob snaps to tick marks evenly spaced based\n * on the step property value.\n /\n @Prop() snaps = false;\n\n /\n Specifies the value granularity.\n /\n @Prop() step = 1;\n\n /\n If `true`, tick marks are displayed based on the step value.\n * Only applies when `snaps` is `true`.\n /\n @Prop() ticks = false;\n\n /\n If `true`, the user cannot interact with the range.\n /\n @Prop() disabled = false;\n @Watch('disabled')\n protected disabledChanged() {\n if (this.gesture) {\n this.gesture.enable(!this.disabled);\n }\n this.emitStyle();\n }\n\n /\n the value of the range.\n /\n @Prop({ mutable: true }) value: RangeValue = 0;\n @Watch('value')\n protected valueChanged(value: RangeValue) {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n\n value = this.ensureValueInBounds(value);\n\n this.nanoChange.emit({ value });\n }\n\n private clampBounds = (value: any): number => {\n return clamp(this.min, value, this.max);\n };\n\n private ensureValueInBounds = (value: any) => {\n if (this.dualKnobs) {\n return {\n lower: this.clampBounds(value.lower),\n upper: this.clampBounds(value.upper),\n };\n } else {\n return this.clampBounds(value);\n }\n };\n\n /\n Emitted when the value property has changed.\n /\n @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n /\n Emitted when the styles change.\n * @internal\n /\n @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n /\n Emitted when the range has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Emitted when the range loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n connectedCallback() {\n this.updateRatio();\n this.debounceChanged();\n this.disabledChanged();\n }\n\n disconnectedCallback() {\n if (this.gesture) {\n this.gesture.destroy();\n this.gesture = undefined;\n }\n }\n\n async componentDidLoad() {\n const rangeSlider = this.rangeSlider;\n if (rangeSlider) {\n this.gesture = (await import('../../utils/gesture/index')).createGesture({\n el: rangeSlider,\n gestureName: 'range',\n gesturePriority: 100,\n threshold: 0,\n onStart: (ev) => this.onStart(ev),\n onMove: (ev) => this.onMove(ev),\n onEnd: (ev) => this.onEnd(ev),\n });\n this.gesture.enable(!this.disabled);\n }\n }\n\n private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n let step = this.step;\n step = step > 0 ? step : 1;\n step = step / (this.max - this.min);\n if (!isIncrease) {\n step = -1;\n }\n if (knob === 'A') {\n this.ratioA = clamp(0, this.ratioA + step, 1);\n } else {\n this.ratioB = clamp(0, this.ratioB + step, 1);\n }\n this.updateValue();\n };\n\n private getValue(): RangeValue {\n const value = this.value \|\| 0;\n if (this.dualKnobs) {\n if (typeof value === 'object') {\n return value;\n }\n return {\n lower: 0,\n upper: value,\n };\n } else {\n if (typeof value === 'object') {\n return value.upper;\n }\n return value;\n }\n }\n\n private emitStyle() {\n this.nanoStyle.emit({\n interactive: true,\n 'interactive-disabled': this.disabled,\n });\n }\n\n private onStart(detail: GestureDetail) {\n const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n const currentX = detail.currentX;\n\n // figure out which knob they started closer to\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n this.pressedKnob =\n !this.dualKnobs \|\|\n Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n ? 'A'\n : 'B';\n\n this.setFocus(this.pressedKnob);\n\n // update the active knob's position\n this.update(currentX);\n }\n\n private onMove(detail: GestureDetail) {\n this.update(detail.currentX);\n }\n\n private onEnd(detail: GestureDetail) {\n this.update(detail.currentX);\n this.pressedKnob = undefined;\n }\n\n private update(currentX: number) {\n // figure out where the pointer is currently at\n // update the knob being interacted with\n const rect = this.rect;\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n if (this.snaps) {\n // snaps the ratio to the current value\n ratio = valueToRatio(\n ratioToValue(ratio, this.min, this.max, this.step),\n this.min,\n this.max\n );\n }\n\n // update which knob is pressed\n if (this.pressedKnob === 'A') {\n this.ratioA = ratio;\n } else {\n this.ratioB = ratio;\n }\n\n // Update input value\n this.updateValue();\n }\n\n private get valA() {\n return ratioToValue(this.ratioA, this.min, this.max, this.step);\n }\n\n private get valB() {\n return ratioToValue(this.ratioB, this.min, this.max, this.step);\n }\n\n private get ratioLower() {\n if (this.dualKnobs) {\n return Math.min(this.ratioA, this.ratioB);\n }\n return 0;\n }\n\n private get ratioUpper() {\n if (this.dualKnobs) {\n return Math.max(this.ratioA, this.ratioB);\n }\n return this.ratioA;\n }\n\n private updateRatio() {\n const value = this.getValue() as any;\n const { min, max } = this;\n if (this.dualKnobs) {\n this.ratioA = valueToRatio(value.lower, min, max);\n this.ratioB = valueToRatio(value.upper, min, max);\n } else {\n this.ratioA = valueToRatio(value, min, max);\n }\n }\n\n private updateValue() {\n this.noUpdate = true;\n\n const { valA, valB } = this;\n this.value = !this.dualKnobs\n ? valA\n : {\n lower: Math.min(valA, valB),\n upper: Math.max(valA, valB),\n };\n\n this.noUpdate = false;\n }\n\n private setFocus(knob: KnobName) {\n if (this.el.shadowRoot) {\n const knobEl = this.el.shadowRoot.querySelector(\n knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n ) as HTMLElement \| undefined;\n if (knobEl) {\n knobEl.focus();\n }\n }\n }\n\n private onBlur = () => {\n if (this.hasFocus) {\n this.hasFocus = false;\n this.nanoBlur.emit();\n this.emitStyle();\n }\n };\n\n private onFocus = () => {\n if (!this.hasFocus) {\n this.hasFocus = true;\n this.nanoFocus.emit();\n this.emitStyle();\n }\n };\n\n render() {\n const {\n min,\n max,\n step,\n el,\n handleKeyboard,\n pressedKnob,\n disabled,\n pin,\n ratioLower,\n ratioUpper,\n } = this;\n\n const barStart = `${ratioLower * 100}%`;\n const barEnd = `${100 - ratioUpper * 100}%`;\n\n const doc = document;\n const isRTL = doc.dir === 'rtl';\n const start = isRTL ? 'right' : 'left';\n const end = isRTL ? 'left' : 'right';\n\n const tickStyle = (tick: any) => {\n return {\n [start]: tick[start],\n };\n };\n\n const barStyle = {\n [start]: barStart,\n [end]: barEnd,\n };\n\n const ticks = [];\n if (this.snaps && this.ticks) {\n for (let value = min; value <= max; value += step) {\n const ratio = valueToRatio(value, min, max);\n\n const tick: any = {\n ratio,\n active: ratio >= ratioLower && ratio <= ratioUpper,\n };\n\n tick[start] = `${ratio * 100}%`;\n\n ticks.push(tick);\n }\n }\n\n renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);\n\n return (\n <Host\n onFocusin={this.onFocus}\n onFocusout={this.onBlur}\n class={createColorClasses(this.color, {\n 'range-disabled': disabled,\n 'range-pressed': pressedKnob !== undefined,\n 'range-has-pin': pin,\n 'range-snaps': this.snaps,\n })}\n >\n <div class=\"range-wrap\">\n <slot name=\"start\"></slot>\n <div\n class=\"range-slider\"\n ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n >\n {ticks.map((tick) => (\n <span\n style={tickStyle(tick)}\n role=\"presentation\"\n class={{\n 'range-tick': true,\n 'range-tick-active': tick.active,\n }}\n part={tick.active ? 'tick-active' : 'tick'}\n />\n ))}\n\n <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n <div\n class=\"range-bar range-bar-active\"\n role=\"presentation\"\n style={barStyle}\n part=\"bar-active\"\n />\n\n {renderKnob(isRTL, {\n knob: 'A',\n pressed: pressedKnob === 'A',\n value: this.valA,\n ratio: this.ratioA,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n\n {this.dualKnobs &&\n renderKnob(isRTL, {\n knob: 'B',\n pressed: pressedKnob === 'B',\n value: this.valB,\n ratio: this.ratioB,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n </div>\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n\ninterface RangeKnob {\n knob: KnobName;\n value: number;\n ratio: number;\n min: number;\n max: number;\n disabled: boolean;\n pressed: boolean;\n pin: boolean;\n\n handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n isRTL: boolean,\n {\n knob,\n value,\n ratio,\n min,\n max,\n disabled,\n pressed,\n pin,\n handleKeyboard,\n }: RangeKnob\n) => {\n const start = isRTL ? 'right' : 'left';\n\n const knobStyle = () => {\n const style: any = {};\n style[start] = `${ratio * 100}%`;\n return style;\n };\n\n return (\n <div\n onKeyDown={(ev: KeyboardEvent) => {\n const key = ev.key;\n if (key === 'ArrowLeft' \|\| key === 'ArrowDown') {\n handleKeyboard(knob, false);\n ev.preventDefault();\n ev.stopPropagation();\n } else if (key === 'ArrowRight' \|\| key === 'ArrowUp') {\n handleKeyboard(knob, true);\n ev.preventDefault();\n ev.stopPropagation();\n }\n }}\n class={{\n 'range-knob-handle': true,\n 'range-knob-a': knob === 'A',\n 'range-knob-b': knob === 'B',\n 'range-knob-pressed': pressed,\n 'range-knob-min': value === min,\n 'range-knob-max': value === max,\n }}\n style={knobStyle()}\n role=\"slider\"\n tabindex={disabled ? -1 : 0}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-disabled={disabled ? 'true' : null}\n aria-valuenow={value}\n >\n {pin && (\n <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n {Math.round(value)}\n </div>\n )}\n <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n </div>\n );\n};\n\nconst ratioToValue = (\n ratio: number,\n min: number,\n max: number,\n step: number\n): number => {\n let value = (max - min) * ratio;\n if (step > 0) {\n value = Math.round(value / step) * step + min;\n }\n return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n return clamp(0, (value - min) / (max - min), 1);\n};\n"],"version":3}
1	+ {"file":"nano-range.entry.js","mappings":";;;;;;;;AAAO,MAAM,iBAAiB,GAAG,CAC/B,SAAsB,EACtB,IAAY,EACZ,KAAgC,EAChC,QAAiB;EAEjB,IAAI,KAAK,GAAG,SAAS,CAAC,aAAa,CACjC,iBAAiB,CACS,CAAC;EAC7B,IAAI,CAAC,KAAK,EAAE;IACV,KAAK,GAAG,SAAS,CAAC,aAAc,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACxD,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;IACtB,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACjC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;GAC9B;EACD,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;EAC1B,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;EAClB,KAAK,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;AAC5B,CAAC;;AClBD,MAAM,QAAQ,GAAG,8jLAA8jL;;MCyClkL,KAAK;;;;;;;IACR,aAAQ,GAAG,KAAK,CAAC;IAEjB,aAAQ,GAAG,KAAK,CAAC;IA6GjB,gBAAW,GAAG,CAAC,KAAU;MAC/B,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACzC,CAAC;IAEM,wBAAmB,GAAG,CAAC,KAAU;MACvC,IAAI,IAAI,CAAC,SAAS,EAAE;QAClB,OAAO;UACL,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC;UACpC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC;SACrC,CAAC;OACH;WAAM;QACL,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;OAChC;KACF,CAAC;IAoDM,mBAAc,GAAG,CAAC,IAAc,EAAE,UAAmB;MAC3D,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;MACrB,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;MAC3B,IAAI,GAAG,IAAI,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;MACpC,IAAI,CAAC,UAAU,EAAE;QACf,IAAI,IAAI,CAAC,CAAC,CAAC;OACZ;MACD,IAAI,IAAI,KAAK,GAAG,EAAE;QAChB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;OAC/C;WAAM;QACL,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;OAC/C;MACD,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB,CAAC;IAiJM,WAAM,GAAG;MACf,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,EAAE,CAAC;OAClB;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACtB,IAAI,CAAC,SAAS,EAAE,CAAC;OAClB;KACF,CAAC;kBApVwB,CAAC;kBACD,CAAC;;;oBAaR,CAAC;gBAUL,EAAE;qBAKG,KAAK;eAKX,CAAC;eAWD,GAAG;eAYH,KAAK;iBAMH,KAAK;gBAKN,CAAC;iBAMA,KAAK;oBAKF,KAAK;iBAYqB,CAAC;;EA1EpC,eAAe;IACvB,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;GACjE;EAiBS,UAAU;IAClB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;GACF;EAOS,UAAU;IAClB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;GACF;EA8BS,eAAe;IACvB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;IACD,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAOS,YAAY,CAAC,KAAiB;IACtC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAExC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACjC;EAsCD,iBAAiB;IACf,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,IAAI,CAAC,eAAe,EAAE,CAAC;IACvB,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;MACvB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;KAC1B;GACF;EAED,MAAM,gBAAgB;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,IAAI,WAAW,EAAE;MACf,IAAI,CAAC,OAAO,GAAG,CAAC,MAAM,OAAO,qBAA2B,CAAC,EAAE,aAAa,CAAC;QACvE,EAAE,EAAE,WAAW;QACf,WAAW,EAAE,OAAO;QACpB,eAAe,EAAE,GAAG;QACpB,SAAS,EAAE,CAAC;QACZ,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;QAC/B,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;OAC9B,CAAC,CAAC;MACH,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;GACF;EAiBO,QAAQ;IACd,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;IAC9B,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAC;OACd;MACD,OAAO;QACL,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,KAAK;OACb,CAAC;KACH;SAAM;MACL,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAC,KAAK,CAAC;OACpB;MACD,OAAO,KAAK,CAAC;KACd;GACF;EAEO,SAAS;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,WAAW,EAAE,IAAI;MACjB,sBAAsB,EAAE,IAAI,CAAC,QAAQ;KACtC,CAAC,CAAC;GACJ;EAEO,OAAO,CAAC,MAAqB;IACnC,MAAM,IAAI,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAY,CAAC,qBAAqB,EAAS,CAAC,CAAC;IAC5E,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;;IAGjC,IAAI,KAAK,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC7D,IAAI,QAAQ,CAAC,GAAG,KAAK,KAAK,EAAE;MAC1B,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC;KACnB;IAED,IAAI,CAAC,WAAW;MACd,CAAC,IAAI,CAAC,SAAS;QACf,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;UACzD,GAAG;UACH,GAAG,CAAC;IAEV,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;;IAGhC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;GACvB;EAEO,MAAM,CAAC,MAAqB;IAClC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;GAC9B;EAEO,KAAK,CAAC,MAAqB;IACjC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;GAC9B;EAEO,MAAM,CAAC,QAAgB;;;IAG7B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,KAAK,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC7D,IAAI,QAAQ,CAAC,GAAG,KAAK,KAAK,EAAE;MAC1B,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC;KACnB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE;;MAEd,KAAK,GAAG,YAAY,CAClB,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,EAClD,IAAI,CAAC,GAAG,EACR,IAAI,CAAC,GAAG,CACT,CAAC;KACH;;IAGD,IAAI,IAAI,CAAC,WAAW,KAAK,GAAG,EAAE;MAC5B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;;IAGD,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,IAAY,IAAI;IACd,OAAO,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;GACjE;EAED,IAAY,IAAI;IACd,OAAO,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;GACjE;EAED,IAAY,UAAU;IACpB,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KAC3C;IACD,OAAO,CAAC,CAAC;GACV;EAED,IAAY,UAAU;IACpB,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KAC3C;IACD,OAAO,IAAI,CAAC,MAAM,CAAC;GACpB;EAEO,WAAW;IACjB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAS,CAAC;IACrC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAC1B,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;MAClD,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;KACnD;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;KAC7C;GACF;EAEO,WAAW;IACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAErB,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,SAAS;QACxB,IAAI;QACJ;QACE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;QAC3B,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;OAC5B,CAAC;IAEN,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;GACvB;EAEO,QAAQ,CAAC,IAAc;IAC7B,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE;MACtB,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAC7C,IAAI,KAAK,GAAG,GAAG,eAAe,GAAG,eAAe,CACtB,CAAC;MAC7B,IAAI,MAAM,EAAE;QACV,MAAM,CAAC,KAAK,EAAE,CAAC;OAChB;KACF;GACF;EAkBD,MAAM;IACJ,MAAM,EACJ,GAAG,EACH,GAAG,EACH,IAAI,EACJ,EAAE,EACF,cAAc,EACd,WAAW,EACX,QAAQ,EACR,GAAG,EACH,UAAU,EACV,UAAU,GACX,GAAG,IAAI,CAAC;IAET,MAAM,QAAQ,GAAG,GAAG,UAAU,GAAG,GAAG,GAAG,CAAC;IACxC,MAAM,MAAM,GAAG,GAAG,GAAG,GAAG,UAAU,GAAG,GAAG,GAAG,CAAC;IAE5C,MAAM,GAAG,GAAG,QAAQ,CAAC;IACrB,MAAM,KAAK,GAAG,GAAG,CAAC,GAAG,KAAK,KAAK,CAAC;IAChC,MAAM,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IACvC,MAAM,GAAG,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAErC,MAAM,SAAS,GAAG,CAAC,IAAS;MAC1B,OAAO;QACL,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;OACrB,CAAC;KACH,CAAC;IAEF,MAAM,QAAQ,GAAG;MACf,CAAC,KAAK,GAAG,QAAQ;MACjB,CAAC,GAAG,GAAG,MAAM;KACd,CAAC;IAEF,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;MAC5B,KAAK,IAAI,KAAK,GAAG,GAAG,EAAE,KAAK,IAAI,GAAG,EAAE,KAAK,IAAI,IAAI,EAAE;QACjD,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAE5C,MAAM,IAAI,GAAQ;UAChB,KAAK;UACL,MAAM,EAAE,KAAK,IAAI,UAAU,IAAI,KAAK,IAAI,UAAU;SACnD,CAAC;QAEF,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC;QAEhC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAClB;KACF;IAED,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;IAE5E,QACE,EAAC,IAAI,IACH,SAAS,EAAE,IAAI,CAAC,OAAO,EACvB,UAAU,EAAE,IAAI,CAAC,MAAM,EACvB,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,KAAK,EAAE;QACpC,gBAAgB,EAAE,QAAQ;QAC1B,eAAe,EAAE,WAAW,KAAK,SAAS;QAC1C,eAAe,EAAE,GAAG;QACpB,aAAa,EAAE,IAAI,CAAC,KAAK;OAC1B,CAAC,IAEF,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,WACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,IAE7C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACd,YACE,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,EACtB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,mBAAmB,EAAE,IAAI,CAAC,MAAM;OACjC,EACD,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,MAAM,GAC1C,CACH,CAAC,EAEF,WAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,KAAK,GAAG,EACxD,WACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,QAAQ,EACf,IAAI,EAAC,YAAY,GACjB,EAED,UAAU,CAAC,KAAK,EAAE;MACjB,IAAI,EAAE,GAAG;MACT,OAAO,EAAE,WAAW,KAAK,GAAG;MAC5B,KAAK,EAAE,IAAI,CAAC,IAAI;MAChB,KAAK,EAAE,IAAI,CAAC,MAAM;MAClB,GAAG;MACH,QAAQ;MACR,cAAc;MACd,GAAG;MACH,GAAG;KACJ,CAAC,EAED,IAAI,CAAC,SAAS;MACb,UAAU,CAAC,KAAK,EAAE;QAChB,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,WAAW,KAAK,GAAG;QAC5B,KAAK,EAAE,IAAI,CAAC,IAAI;QAChB,KAAK,EAAE,IAAI,CAAC,MAAM;QAClB,GAAG;QACH,QAAQ;QACR,cAAc;QACd,GAAG;QACH,GAAG;OACJ,CAAC,CACA,EACN,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACD,EACP;GACH;;;;;;;;;;AAgBH,MAAM,UAAU,GAAG,CACjB,KAAc,EACd,EACE,IAAI,EACJ,KAAK,EACL,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,OAAO,EACP,GAAG,EACH,cAAc,GACJ;EAEZ,MAAM,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;EAEvC,MAAM,SAAS,GAAG;IAChB,MAAM,KAAK,GAAQ,EAAE,CAAC;IACtB,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC;IACjC,OAAO,KAAK,CAAC;GACd,CAAC;EAEF,QACE,WACE,SAAS,EAAE,CAAC,EAAiB;MAC3B,MAAM,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;MACnB,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,WAAW,EAAE;QAC9C,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC5B,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,EAAE,CAAC,eAAe,EAAE,CAAC;OACtB;WAAM,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,SAAS,EAAE;QACpD,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC3B,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,EAAE,CAAC,eAAe,EAAE,CAAC;OACtB;KACF,EACD,KAAK,EAAE;MACL,mBAAmB,EAAE,IAAI;MACzB,cAAc,EAAE,IAAI,KAAK,GAAG;MAC5B,cAAc,EAAE,IAAI,KAAK,GAAG;MAC5B,oBAAoB,EAAE,OAAO;MAC7B,gBAAgB,EAAE,KAAK,KAAK,GAAG;MAC/B,gBAAgB,EAAE,KAAK,KAAK,GAAG;KAChC,EACD,KAAK,EAAE,SAAS,EAAE,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,mBACZ,GAAG,mBACH,GAAG,mBACH,QAAQ,GAAG,MAAM,GAAG,IAAI,mBACxB,KAAK,IAEnB,GAAG,KACF,WAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,KAAK,IAClD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CACd,CACP,EACD,WAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAG,CACtD,EACN;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,KAAa,EACb,GAAW,EACX,GAAW,EACX,IAAY;EAEZ,IAAI,KAAK,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,KAAK,CAAC;EAChC,IAAI,IAAI,GAAG,CAAC,EAAE;IACZ,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,GAAG,CAAC;GAC/C;EACD,OAAO,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;EAC3D,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;AAClD,CAAC,CAAC;;;;;","names":[],"sources":["./src/utils/form.ts","./src/components/range/range.scss?tag=nano-range&encapsulation=scoped","./src/components/range/range.tsx"],"sourcesContent":["export const renderHiddenInput = (\n container: HTMLElement,\n name: string,\n value: string \| undefined \| null,\n disabled: boolean\n) => {\n let input = container.querySelector(\n 'input.aux-input'\n ) as HTMLInputElement \| null;\n if (!input) {\n input = container.ownerDocument!.createElement('input');\n input.type = 'hidden';\n input.classList.add('aux-input');\n container.appendChild(input);\n }\n input.disabled = disabled;\n input.name = name;\n input.value = value \|\| '';\n};\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n /*\n @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n * @prop --bar-height: Height of the range bar; Defaults to 8px;\n * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n * @prop --height: Height of the range. Defaults to 42px;\n * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgb(0 0 0 / 30%);\n * @prop --knob-size: Size of the range knob; Defaults to 30px;\n * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n /\n --knob-handle-size: (var(--knob-size) 2);\n --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n --knob-border-radius: 50%;\n --knob-background: #{nano-color(primary, base)};\n --knob-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%);\n --knob-size: 30px;\n --bar-height: 8px;\n --bar-background: #e2e1e0;\n --bar-background-active: #a5a5a5;\n --bar-border-radius: 4px;\n --height: 42px;\n --pin-background: #{nano-color(primary, base)};\n --pin-color: #{nano-color(primary, contrast)};\n --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n display: flex;\n position: relative;\n flex: 3;\n align-items: center;\n user-select: none;\n\n ::slotted(ion-icon[slot]) {\n font-size: 1.5em;\n }\n\n ::slotted([slot='start']) {\n margin-inline: 0 14px;\n margin-block: 0;\n font-size: 0.9em;\n }\n\n ::slotted([slot='end']) {\n margin-inline: 14px 0;\n margin-block: 0;\n font-size: 0.9em;\n }\n}\n\n.range-slider {\n position: relative;\n flex: 1;\n width: 100%;\n height: var(--height);\n contain: size layout style;\n cursor: grab;\n touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n border-radius: var(--bar-border-radius);\n inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n inset-inline-start: 0;\n position: absolute;\n width: 100%;\n height: var(--bar-height);\n background: var(--bar-background);\n pointer-events: none;\n\n :host(.range-snaps) & {\n border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n }\n}\n\n.range-bar-active {\n inset-block-end: 0;\n width: auto;\n background: var(--bar-background-active);\n\n :host(.range-pressed) {\n will-change: left, right;\n }\n}\n\n// knob\n\n.range-knob {\n border-radius: var(--knob-border-radius);\n inset-block-start: calc(50% - var(--knob-size) / 2);\n inset-inline-start: calc(50% - var(--knob-size) / 2);\n position: absolute;\n width: var(--knob-size);\n height: var(--knob-size);\n background: var(--knob-background);\n box-shadow: var(--knob-box-shadow);\n z-index: 2;\n pointer-events: none;\n transform: scale(0.67);\n transition-duration: 120ms;\n transition-property: transform, background-color, border;\n transition-timing-function: ease;\n\n :host(:not(.range-has-pin)) .range-knob-pressed & {\n transform: scale(1);\n }\n}\n\n.range-knob-handle {\n inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);\n inset-inline-start: 0;\n margin-inline-start: calc(0px - var(--knob-handle-size) / 2);\n position: absolute;\n width: calc(var(--knob-handle-size));\n height: calc(var(--knob-handle-size));\n text-align: center;\n\n &:active,\n &:focus {\n outline: none;\n\n .range-knob {\n box-shadow: var(--knob-box-shadow), var(--focus-style);\n }\n }\n}\n\n// ticks\n\n.range-tick {\n position: absolute;\n inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n width: var(--bar-height);\n height: var(--bar-height);\n background: var(--bar-background-active);\n z-index: 1;\n pointer-events: none;\n\n &:first-of-type {\n border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n }\n\n &:last-of-type {\n border-radius: 0 var(--bar-border-radius) var(--bar-border-radius) 0;\n }\n\n &-active {\n background: transparent;\n }\n}\n\n// pin\n\n.range-pin {\n transform: translate3d(0, 0, 0) scale(0.01);\n transform-origin: center top;\n padding: 0.66em 0;\n border-radius: 50%;\n text-align: center;\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n min-width: 2.33em;\n height: 2.33em;\n transition: transform 120ms ease, background 120ms ease;\n background: var(--pin-background);\n color: var(--pin-color);\n font-size: 0.75em;\n\n &::before {\n inset-block-start: 0.25em;\n inset-inline-start: 50%;\n margin-inline-start: -1.08em;\n border-radius: 50% 50% 50% 0;\n position: absolute;\n width: 2.16em;\n height: 2.16em;\n transform: rotate(-45deg);\n transition: background 120ms ease;\n background: var(--pin-background);\n content: '';\n z-index: -1;\n }\n\n .range-knob-pressed & {\n transform: translate3d(0, -50%, 0) scale(1);\n transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n }\n}\n\n// disabled\n\n:host(.range-disabled) {\n pointer-events: none;\n\n .range-bar-active,\n .range-bar,\n .range-tick {\n background-color: rgb(var(--rgb-inactive) / 50%);\n }\n\n .range-knob {\n transform: scale(0.55);\n outline: 5px solid #fff;\n background-color: rgb(var(--rgb-inactive) / 50%);\n }\n}\n\n// theme\n\n:host(.nano-color) {\n .range-bar-active,\n .range-knob,\n .range-pin,\n .range-pin::before,\n .range-tick {\n background: current-color(base);\n color: current-color(contrast);\n }\n\n .range-bar {\n background: current-color(base, 0.26);\n }\n\n .range-knob-handle {\n &:active,\n &:focus {\n .range-knob {\n box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n }\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport type {\n Color,\n Gesture,\n GestureDetail,\n KnobName,\n RangeChangeEventDetail,\n RangeValue,\n StyleEventDetail,\n} from '../../interface';\n\n/*\n The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n \n Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n \n @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n /\n@Component({\n tag: 'nano-range',\n styleUrl: 'range.scss',\n scoped: true,\n})\nexport class Range implements ComponentInterface {\n private noUpdate = false;\n private rect!: ClientRect;\n private hasFocus = false;\n private rangeSlider?: HTMLElement;\n private gesture?: Gesture;\n\n @Element() el!: HTMLNanoRangeElement;\n\n @State() private ratioA = 0;\n @State() private ratioB = 0;\n @State() private pressedKnob: KnobName;\n\n /\n The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n /\n @Prop() color?: Color;\n\n /\n How long, in milliseconds, to wait to trigger the\n * `nanoChange` event after each change in the range value.\n /\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n }\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = '';\n\n /\n Show two knobs.\n /\n @Prop() dualKnobs = false;\n\n /\n Minimum integer value of the range.\n /\n @Prop() min = 0;\n @Watch('min')\n protected minChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /\n Maximum integer value of the range.\n /\n @Prop() max = 100;\n @Watch('max')\n protected maxChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /\n If `true`, a pin with integer value is shown when the knob\n * is pressed.\n /\n @Prop() pin = false;\n\n /\n If `true`, the knob snaps to tick marks evenly spaced based\n * on the step property value.\n /\n @Prop() snaps = false;\n\n /\n Specifies the value granularity.\n /\n @Prop() step = 1;\n\n /\n If `true`, tick marks are displayed based on the step value.\n * Only applies when `snaps` is `true`.\n /\n @Prop() ticks = false;\n\n /\n If `true`, the user cannot interact with the range.\n /\n @Prop() disabled = false;\n @Watch('disabled')\n protected disabledChanged() {\n if (this.gesture) {\n this.gesture.enable(!this.disabled);\n }\n this.emitStyle();\n }\n\n /\n the value of the range.\n /\n @Prop({ mutable: true }) value: RangeValue = 0;\n @Watch('value')\n protected valueChanged(value: RangeValue) {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n\n value = this.ensureValueInBounds(value);\n\n this.nanoChange.emit({ value });\n }\n\n private clampBounds = (value: any): number => {\n return clamp(this.min, value, this.max);\n };\n\n private ensureValueInBounds = (value: any) => {\n if (this.dualKnobs) {\n return {\n lower: this.clampBounds(value.lower),\n upper: this.clampBounds(value.upper),\n };\n } else {\n return this.clampBounds(value);\n }\n };\n\n /\n Emitted when the value property has changed.\n /\n @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n /\n Emitted when the styles change.\n * @internal\n /\n @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n /\n Emitted when the range has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Emitted when the range loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n connectedCallback() {\n this.updateRatio();\n this.debounceChanged();\n this.disabledChanged();\n }\n\n disconnectedCallback() {\n if (this.gesture) {\n this.gesture.destroy();\n this.gesture = undefined;\n }\n }\n\n async componentDidLoad() {\n const rangeSlider = this.rangeSlider;\n if (rangeSlider) {\n this.gesture = (await import('../../utils/gesture/index')).createGesture({\n el: rangeSlider,\n gestureName: 'range',\n gesturePriority: 100,\n threshold: 0,\n onStart: (ev) => this.onStart(ev),\n onMove: (ev) => this.onMove(ev),\n onEnd: (ev) => this.onEnd(ev),\n });\n this.gesture.enable(!this.disabled);\n }\n }\n\n private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n let step = this.step;\n step = step > 0 ? step : 1;\n step = step / (this.max - this.min);\n if (!isIncrease) {\n step = -1;\n }\n if (knob === 'A') {\n this.ratioA = clamp(0, this.ratioA + step, 1);\n } else {\n this.ratioB = clamp(0, this.ratioB + step, 1);\n }\n this.updateValue();\n };\n\n private getValue(): RangeValue {\n const value = this.value \|\| 0;\n if (this.dualKnobs) {\n if (typeof value === 'object') {\n return value;\n }\n return {\n lower: 0,\n upper: value,\n };\n } else {\n if (typeof value === 'object') {\n return value.upper;\n }\n return value;\n }\n }\n\n private emitStyle() {\n this.nanoStyle.emit({\n interactive: true,\n 'interactive-disabled': this.disabled,\n });\n }\n\n private onStart(detail: GestureDetail) {\n const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n const currentX = detail.currentX;\n\n // figure out which knob they started closer to\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n this.pressedKnob =\n !this.dualKnobs \|\|\n Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n ? 'A'\n : 'B';\n\n this.setFocus(this.pressedKnob);\n\n // update the active knob's position\n this.update(currentX);\n }\n\n private onMove(detail: GestureDetail) {\n this.update(detail.currentX);\n }\n\n private onEnd(detail: GestureDetail) {\n this.update(detail.currentX);\n this.pressedKnob = undefined;\n }\n\n private update(currentX: number) {\n // figure out where the pointer is currently at\n // update the knob being interacted with\n const rect = this.rect;\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n if (this.snaps) {\n // snaps the ratio to the current value\n ratio = valueToRatio(\n ratioToValue(ratio, this.min, this.max, this.step),\n this.min,\n this.max\n );\n }\n\n // update which knob is pressed\n if (this.pressedKnob === 'A') {\n this.ratioA = ratio;\n } else {\n this.ratioB = ratio;\n }\n\n // Update input value\n this.updateValue();\n }\n\n private get valA() {\n return ratioToValue(this.ratioA, this.min, this.max, this.step);\n }\n\n private get valB() {\n return ratioToValue(this.ratioB, this.min, this.max, this.step);\n }\n\n private get ratioLower() {\n if (this.dualKnobs) {\n return Math.min(this.ratioA, this.ratioB);\n }\n return 0;\n }\n\n private get ratioUpper() {\n if (this.dualKnobs) {\n return Math.max(this.ratioA, this.ratioB);\n }\n return this.ratioA;\n }\n\n private updateRatio() {\n const value = this.getValue() as any;\n const { min, max } = this;\n if (this.dualKnobs) {\n this.ratioA = valueToRatio(value.lower, min, max);\n this.ratioB = valueToRatio(value.upper, min, max);\n } else {\n this.ratioA = valueToRatio(value, min, max);\n }\n }\n\n private updateValue() {\n this.noUpdate = true;\n\n const { valA, valB } = this;\n this.value = !this.dualKnobs\n ? valA\n : {\n lower: Math.min(valA, valB),\n upper: Math.max(valA, valB),\n };\n\n this.noUpdate = false;\n }\n\n private setFocus(knob: KnobName) {\n if (this.el.shadowRoot) {\n const knobEl = this.el.shadowRoot.querySelector(\n knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n ) as HTMLElement \| undefined;\n if (knobEl) {\n knobEl.focus();\n }\n }\n }\n\n private onBlur = () => {\n if (this.hasFocus) {\n this.hasFocus = false;\n this.nanoBlur.emit();\n this.emitStyle();\n }\n };\n\n private onFocus = () => {\n if (!this.hasFocus) {\n this.hasFocus = true;\n this.nanoFocus.emit();\n this.emitStyle();\n }\n };\n\n render() {\n const {\n min,\n max,\n step,\n el,\n handleKeyboard,\n pressedKnob,\n disabled,\n pin,\n ratioLower,\n ratioUpper,\n } = this;\n\n const barStart = `${ratioLower * 100}%`;\n const barEnd = `${100 - ratioUpper * 100}%`;\n\n const doc = document;\n const isRTL = doc.dir === 'rtl';\n const start = isRTL ? 'right' : 'left';\n const end = isRTL ? 'left' : 'right';\n\n const tickStyle = (tick: any) => {\n return {\n [start]: tick[start],\n };\n };\n\n const barStyle = {\n [start]: barStart,\n [end]: barEnd,\n };\n\n const ticks = [];\n if (this.snaps && this.ticks) {\n for (let value = min; value <= max; value += step) {\n const ratio = valueToRatio(value, min, max);\n\n const tick: any = {\n ratio,\n active: ratio >= ratioLower && ratio <= ratioUpper,\n };\n\n tick[start] = `${ratio * 100}%`;\n\n ticks.push(tick);\n }\n }\n\n renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);\n\n return (\n <Host\n onFocusin={this.onFocus}\n onFocusout={this.onBlur}\n class={createColorClasses(this.color, {\n 'range-disabled': disabled,\n 'range-pressed': pressedKnob !== undefined,\n 'range-has-pin': pin,\n 'range-snaps': this.snaps,\n })}\n >\n <div class=\"range-wrap\">\n <slot name=\"start\"></slot>\n <div\n class=\"range-slider\"\n ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n >\n {ticks.map((tick) => (\n <span\n style={tickStyle(tick)}\n role=\"presentation\"\n class={{\n 'range-tick': true,\n 'range-tick-active': tick.active,\n }}\n part={tick.active ? 'tick-active' : 'tick'}\n />\n ))}\n\n <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n <div\n class=\"range-bar range-bar-active\"\n role=\"presentation\"\n style={barStyle}\n part=\"bar-active\"\n />\n\n {renderKnob(isRTL, {\n knob: 'A',\n pressed: pressedKnob === 'A',\n value: this.valA,\n ratio: this.ratioA,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n\n {this.dualKnobs &&\n renderKnob(isRTL, {\n knob: 'B',\n pressed: pressedKnob === 'B',\n value: this.valB,\n ratio: this.ratioB,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n </div>\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n\ninterface RangeKnob {\n knob: KnobName;\n value: number;\n ratio: number;\n min: number;\n max: number;\n disabled: boolean;\n pressed: boolean;\n pin: boolean;\n\n handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n isRTL: boolean,\n {\n knob,\n value,\n ratio,\n min,\n max,\n disabled,\n pressed,\n pin,\n handleKeyboard,\n }: RangeKnob\n) => {\n const start = isRTL ? 'right' : 'left';\n\n const knobStyle = () => {\n const style: any = {};\n style[start] = `${ratio * 100}%`;\n return style;\n };\n\n return (\n <div\n onKeyDown={(ev: KeyboardEvent) => {\n const key = ev.key;\n if (key === 'ArrowLeft' \|\| key === 'ArrowDown') {\n handleKeyboard(knob, false);\n ev.preventDefault();\n ev.stopPropagation();\n } else if (key === 'ArrowRight' \|\| key === 'ArrowUp') {\n handleKeyboard(knob, true);\n ev.preventDefault();\n ev.stopPropagation();\n }\n }}\n class={{\n 'range-knob-handle': true,\n 'range-knob-a': knob === 'A',\n 'range-knob-b': knob === 'B',\n 'range-knob-pressed': pressed,\n 'range-knob-min': value === min,\n 'range-knob-max': value === max,\n }}\n style={knobStyle()}\n role=\"slider\"\n tabindex={disabled ? -1 : 0}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-disabled={disabled ? 'true' : null}\n aria-valuenow={value}\n >\n {pin && (\n <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n {Math.round(value)}\n </div>\n )}\n <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n </div>\n );\n};\n\nconst ratioToValue = (\n ratio: number,\n min: number,\n max: number,\n step: number\n): number => {\n let value = (max - min) * ratio;\n if (step > 0) {\n value = Math.round(value / step) * step + min;\n }\n return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n return clamp(0, (value - min) / (max - min), 1);\n};\n"],"version":3}

package/dist/esm/nano-rating.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-52b0408e.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-dad5627b.js';
 import { f as focusVisible } from './focus-visible-8b2c14da.js';
 import { c as clamp } from './math-c02ddfda.js';

package/dist/esm/nano-resize-observe_2.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { r as registerInstance, c as createEvent, d as readTask, h, a as Host, g as getElement } from './index-52b0408e.js';
+import { r as registerInstance, c as createEvent, d as readTask, h, a as Host, g as getElement } from './index-dad5627b.js';
 const ResizeObserve = class {
   constructor(hostRef) {
@@ -40,7 +40,7 @@ const ResizeObserve = class {
       if (hasChanged)
         this.applyChanges(changedStates);
       else if (!this.classNames.includes('is-ready'))
-        this.classNames = ['is-ready'];
+        this.classNames = [...this.classNames, 'is-ready'];
     };
     this.currentWidth = undefined;
     this.currentHeight = undefined;
@@ -181,10 +181,10 @@ const ResizeObserve = class {
     this.ro.observe(this.host);
   }
   componentWillLoad() {
+    this.classNames = Array.from(this.host.classList);
     this.statesChanged();
     // set all class as 'not-' by deafult
     this.applyChanges(this.appliedStates);
-    this.classNames = Array.from(this.host.classList);
     if (!this.currentWidth && !this.currentHeight) {
       readTask(() => {
         const { width, height } = this.host.getBoundingClientRect();
@@ -219,7 +219,7 @@ const ResizeObserve = class {
     "currentWidth": ["dimensionChanged"]
   }; }
 };
-ResizeObserve.style = "nano-resize-observe { display: block }";
+ResizeObserve.style = "nano-resize-observe { display: contents }";
 const skeletonCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-rgb, 228 230 232);--color:var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));--tint:var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;animation:loader 6s ease-in-out infinite}@keyframes loader{0%{background-position:200% 0}100%{background-position:-200% 0}}";

package/dist/esm/nano-resize-observe_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-resize-observe.nano-skeleton.entry.js","mappings":"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","names":[],"sources":["./src/components/resize-observe/resize-observe.tsx","./src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","./src/components/skeleton/skeleton.tsx"],"sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n ComponentInterface,\n Event,\n EventEmitter,\n readTask,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n h: Map<number, ResizeObserverState>;\n w: Map<number, ResizeObserverState>;\n}\n\n/*\n A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n /\n@Component({\n tag: 'nano-resize-observe',\n styles: `nano-resize-observe { display: block }`,\n shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n private ro: ResizeObserver;\n private appliedStates: StateMaps;\n private isReady = false;\n\n @Element() host: HTMLNanoResizeObserveElement;\n @State() currentWidth: number;\n @State() currentHeight: number;\n @State() classNames: string[] = [];\n @State() contentFitX = null;\n @State() contentFitY = null;\n\n @Watch('classNames')\n classNameChange() {\n this.host.className = this.classNames.join(' ');\n if (!this.isReady && this.classNames.includes('is-ready')) {\n this.isReady = true;\n this.nanoResizeObserverReady.emit();\n }\n }\n\n /* Fire `nanoResizeContentFitChange` events notifying\n * whether content currently fits or does not on the x, y or both axis'.\n * Also makes the `content-fit-...` slots available /\n @Prop() notifyContentFit: 'x' \| 'y' \| 'xy';\n\n /* string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n * Format: `states=\"800w, 300h class1 class2\"` /\n @Prop() states: string;\n\n @Watch('states')\n newStatesProp() {\n this.statesChanged();\n }\n\n /* A resize break point is switched on or off /\n @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n /* Fires after the initial loading and assessment /\n @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n /* Fires when the content either begins or stops to fit. Will only work when `notifyContentFit` is set. /\n @Event() nanoResizeContentFitChange!: EventEmitter<{\n x: boolean;\n y: boolean;\n }>;\n\n @Watch('currentHeight')\n @Watch('currentWidth')\n dimensionChanged() {\n this.assessChanges();\n }\n\n @Watch('states')\n statesChanged() {\n if (!this.states) return;\n\n const toBpDir = (bpDir: string) => {\n const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n };\n this.appliedStates = { h: new Map(), w: new Map() };\n\n // parse state string\n this.states.split(',').map((st) => {\n st = st.trim();\n if (st.includes(' ')) {\n const [key, ...classes] = st.split(' ');\n const { bp, dir } = toBpDir(key);\n this.appliedStates[dir as keyof StateMaps].set(bp, {\n states: classes,\n applied: false,\n });\n } else {\n const { bp, dir } = toBpDir(st);\n this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n }\n });\n }\n\n private assesContentFit() {\n if (!this.notifyContentFit) return;\n\n const findNonContentsEle = (ele: Element) => {\n if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n const recurse = (e: Element): Element \| null => {\n return Array.from(e.children).find((cEle: HTMLElement) => {\n if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n recurse(cEle);\n });\n };\n return recurse(ele);\n };\n\n let didChange = false;\n const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n if (measureEle) {\n if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n if (\n this.currentWidth < measureEle.scrollWidth &&\n this.contentFitX !== false\n ) {\n didChange = true;\n this.contentFitX = false;\n } else if (\n this.currentWidth >= measureEle.scrollWidth &&\n this.contentFitX !== true\n ) {\n didChange = true;\n this.contentFitX = true;\n }\n }\n\n if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n if (\n this.currentHeight < measureEle.scrollHeight &&\n this.contentFitY !== false\n ) {\n didChange = true;\n this.contentFitY = false;\n } else if (\n this.currentHeight >= measureEle.scrollHeight &&\n this.contentFitY !== true\n ) {\n didChange = true;\n this.contentFitY = true;\n }\n }\n\n if (didChange) {\n this.nanoResizeContentFitChange.emit({\n x: this.contentFitX,\n y: this.contentFitY,\n });\n }\n }\n }\n\n private assessChanges = () => {\n if (!this.currentWidth && !this.currentHeight) return;\n readTask(() => this.assesContentFit());\n\n if (!this.states \|\| !this.appliedStates) return;\n\n const changedStates: StateMaps = { h: new Map(), w: new Map() };\n let hasChanged = false;\n\n Object.keys(this.appliedStates).forEach((dimType) => {\n let dim: number;\n if (dimType === 'h') dim = this.currentHeight;\n else dim = this.currentWidth;\n\n this.appliedStates[dimType].forEach(\n (state: ResizeObserverState, bp: number) => {\n if (dim >= bp && state.applied === false) {\n state.applied = true;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n } else if (dim < bp && state.applied === true) {\n state.applied = false;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n }\n }\n );\n });\n if (hasChanged) this.applyChanges(changedStates);\n else if (!this.classNames.includes('is-ready'))\n this.classNames = ['is-ready'];\n };\n\n private applyChanges(changes: StateMaps) {\n if (!this.states) return;\n\n let classNames = [...this.classNames];\n Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n changes[dimType].forEach((state) => {\n if (!state.states) return;\n state.states.map((st) => {\n if (state.applied) {\n classNames.push(st);\n classNames = classNames.filter((cl) => cl !== 'not-' + st);\n } else {\n classNames.push('not-' + st);\n classNames = classNames.filter((cl) => cl !== st);\n }\n });\n });\n });\n this.classNames = ['is-ready', ...classNames];\n this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n }\n\n private toSimpleObj(stateMaps: StateMaps) {\n const retObj = {};\n Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n retObj[bp + dimType] = state.applied;\n });\n });\n return retObj;\n }\n\n private attachRO() {\n if (!window['ResizeObserver']) return;\n\n this.ro = new ResizeObserver(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n });\n this.ro.observe(this.host);\n }\n\n componentWillLoad() {\n this.statesChanged();\n // set all class as 'not-' by deafult\n this.applyChanges(this.appliedStates);\n\n this.classNames = Array.from(this.host.classList);\n\n if (!this.currentWidth && !this.currentHeight) {\n readTask(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n });\n } else {\n this.assessChanges();\n }\n }\n\n connectedCallback() {\n if (!this.ro) this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host>\n <slot />\n {!!this.notifyContentFit &&\n (this.contentFitX !== null \|\| this.contentFitY !== null) && [\n !!this.contentFitX ? (\n <slot name=\"content-fit-x\" />\n ) : (\n <slot name=\"content-nofit-x\" />\n ),\n !!this.contentFitY ? (\n <slot name=\"content-fit-y\" />\n ) : (\n <slot name=\"content-nofit-y\" />\n ),\n ]}\n </Host>\n );\n }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n /\n @prop --base-color-rgb: default #{$skeleton-color-rgb};\n * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n /\n\n --base-color-rgb: #{$skeleton-color-rgb};\n --color: var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));\n --tint: var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));\n\n display: block;\n position: relative;\n border-radius: 0.25rem;\n min-block-size: 1em;\n line-height: inherit;\n}\n\n.skeleton {\n display: flex;\n min-inline-size: 100%;\n min-block-size: 100%;\n border-radius: inherit;\n line-height: inherit;\n}\n\n.skeleton__indicator {\n flex: 1 1 auto;\n background: var(--color);\n border-radius: inherit;\n line-height: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n background:\n linear-gradient(\n 270deg,\n var(--tint),\n var(--color),\n var(--color),\n var(--tint)\n );\n background-size: 400% 100%;\n animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n 0% {\n background-position: 200% 0;\n }\n\n 100% {\n background-position: -200% 0;\n }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/\n Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n /\n@Component({\n tag: 'nano-skeleton',\n styleUrl: 'skeleton.scss',\n shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n /* When `true`, the skeleton will animate. */\n @Prop() animated = true;\n\n render() {\n return (\n <div\n class={{\n skeleton: true,\n animate: this.animated,\n }}\n >\n <div class=\"skeleton__indicator\"> </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-resize-observe.nano-skeleton.entry.js","mappings":"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","names":[],"sources":["./src/components/resize-observe/resize-observe.tsx","./src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","./src/components/skeleton/skeleton.tsx"],"sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n ComponentInterface,\n Event,\n EventEmitter,\n readTask,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n h: Map<number, ResizeObserverState>;\n w: Map<number, ResizeObserverState>;\n}\n\n/*\n A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n /\n@Component({\n tag: 'nano-resize-observe',\n styles: `nano-resize-observe { display: contents }`,\n shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n private ro: ResizeObserver;\n private appliedStates: StateMaps;\n private isReady = false;\n\n @Element() host: HTMLNanoResizeObserveElement;\n @State() currentWidth: number;\n @State() currentHeight: number;\n @State() classNames: string[] = [];\n @State() contentFitX = null;\n @State() contentFitY = null;\n\n @Watch('classNames')\n classNameChange() {\n this.host.className = this.classNames.join(' ');\n if (!this.isReady && this.classNames.includes('is-ready')) {\n this.isReady = true;\n this.nanoResizeObserverReady.emit();\n }\n }\n\n /* Fire `nanoResizeContentFitChange` events notifying\n * whether content currently fits or does not on the x, y or both axis'.\n * Also makes the `content-fit-...` slots available /\n @Prop() notifyContentFit: 'x' \| 'y' \| 'xy';\n\n /* string list of sizes and optional class-names.\n * Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n * Format: `states=\"800w, 300h class1 class2\"` /\n @Prop() states: string;\n\n @Watch('states')\n newStatesProp() {\n this.statesChanged();\n }\n\n /* A resize break point is switched on or off /\n @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n /* Fires after the initial loading and assessment /\n @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n /* Fires when the content either begins or stops fitting.\n * Will only work when `notifyContentFit` is set. /\n @Event() nanoResizeContentFitChange!: EventEmitter<{\n x: boolean;\n y: boolean;\n }>;\n\n @Watch('currentHeight')\n @Watch('currentWidth')\n dimensionChanged() {\n this.assessChanges();\n }\n\n @Watch('states')\n statesChanged() {\n if (!this.states) return;\n\n const toBpDir = (bpDir: string) => {\n const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n };\n this.appliedStates = { h: new Map(), w: new Map() };\n\n // parse state string\n this.states.split(',').map((st) => {\n st = st.trim();\n if (st.includes(' ')) {\n const [key, ...classes] = st.split(' ');\n const { bp, dir } = toBpDir(key);\n this.appliedStates[dir as keyof StateMaps].set(bp, {\n states: classes,\n applied: false,\n });\n } else {\n const { bp, dir } = toBpDir(st);\n this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n }\n });\n }\n\n private assesContentFit() {\n if (!this.notifyContentFit) return;\n\n const findNonContentsEle = (ele: Element) => {\n if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n const recurse = (e: Element): Element \| null => {\n return Array.from(e.children).find((cEle: HTMLElement) => {\n if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n recurse(cEle);\n });\n };\n return recurse(ele);\n };\n\n let didChange = false;\n const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n if (measureEle) {\n if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n if (\n this.currentWidth < measureEle.scrollWidth &&\n this.contentFitX !== false\n ) {\n didChange = true;\n this.contentFitX = false;\n } else if (\n this.currentWidth >= measureEle.scrollWidth &&\n this.contentFitX !== true\n ) {\n didChange = true;\n this.contentFitX = true;\n }\n }\n\n if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n if (\n this.currentHeight < measureEle.scrollHeight &&\n this.contentFitY !== false\n ) {\n didChange = true;\n this.contentFitY = false;\n } else if (\n this.currentHeight >= measureEle.scrollHeight &&\n this.contentFitY !== true\n ) {\n didChange = true;\n this.contentFitY = true;\n }\n }\n\n if (didChange) {\n this.nanoResizeContentFitChange.emit({\n x: this.contentFitX,\n y: this.contentFitY,\n });\n }\n }\n }\n\n private assessChanges = () => {\n if (!this.currentWidth && !this.currentHeight) return;\n readTask(() => this.assesContentFit());\n\n if (!this.states \|\| !this.appliedStates) return;\n\n const changedStates: StateMaps = { h: new Map(), w: new Map() };\n let hasChanged = false;\n\n Object.keys(this.appliedStates).forEach((dimType) => {\n let dim: number;\n if (dimType === 'h') dim = this.currentHeight;\n else dim = this.currentWidth;\n\n this.appliedStates[dimType].forEach(\n (state: ResizeObserverState, bp: number) => {\n if (dim >= bp && state.applied === false) {\n state.applied = true;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n } else if (dim < bp && state.applied === true) {\n state.applied = false;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n }\n }\n );\n });\n if (hasChanged) this.applyChanges(changedStates);\n else if (!this.classNames.includes('is-ready'))\n this.classNames = [...this.classNames, 'is-ready'];\n };\n\n private applyChanges(changes: StateMaps) {\n if (!this.states) return;\n\n let classNames = [...this.classNames];\n Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n changes[dimType].forEach((state) => {\n if (!state.states) return;\n state.states.map((st) => {\n if (state.applied) {\n classNames.push(st);\n classNames = classNames.filter((cl) => cl !== 'not-' + st);\n } else {\n classNames.push('not-' + st);\n classNames = classNames.filter((cl) => cl !== st);\n }\n });\n });\n });\n this.classNames = ['is-ready', ...classNames];\n this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n }\n\n private toSimpleObj(stateMaps: StateMaps) {\n const retObj = {};\n Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n retObj[bp + dimType] = state.applied;\n });\n });\n return retObj;\n }\n\n private attachRO() {\n if (!window['ResizeObserver']) return;\n\n this.ro = new ResizeObserver(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n });\n this.ro.observe(this.host);\n }\n\n componentWillLoad() {\n this.classNames = Array.from(this.host.classList);\n\n this.statesChanged();\n // set all class as 'not-' by deafult\n this.applyChanges(this.appliedStates);\n\n if (!this.currentWidth && !this.currentHeight) {\n readTask(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n });\n } else {\n this.assessChanges();\n }\n }\n\n connectedCallback() {\n if (!this.ro) this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host>\n <slot />\n {!!this.notifyContentFit &&\n (this.contentFitX !== null \|\| this.contentFitY !== null) && [\n !!this.contentFitX ? (\n <slot name=\"content-fit-x\" />\n ) : (\n <slot name=\"content-nofit-x\" />\n ),\n !!this.contentFitY ? (\n <slot name=\"content-fit-y\" />\n ) : (\n <slot name=\"content-nofit-y\" />\n ),\n ]}\n </Host>\n );\n }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n /\n @prop --base-color-rgb: default #{$skeleton-color-rgb};\n * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n /\n\n --base-color-rgb: #{$skeleton-color-rgb};\n --color: var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));\n --tint: var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));\n\n display: block;\n position: relative;\n border-radius: 0.25rem;\n min-block-size: 1em;\n line-height: inherit;\n}\n\n.skeleton {\n display: flex;\n min-inline-size: 100%;\n min-block-size: 100%;\n border-radius: inherit;\n line-height: inherit;\n}\n\n.skeleton__indicator {\n flex: 1 1 auto;\n background: var(--color);\n border-radius: inherit;\n line-height: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n background:\n linear-gradient(\n 270deg,\n var(--tint),\n var(--color),\n var(--color),\n var(--tint)\n );\n background-size: 400% 100%;\n animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n 0% {\n background-position: 200% 0;\n }\n\n 100% {\n background-position: -200% 0;\n }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/\n Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n /\n@Component({\n tag: 'nano-skeleton',\n styleUrl: 'skeleton.scss',\n shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n /* When `true`, the skeleton will animate. */\n @Prop() animated = true;\n\n render() {\n return (\n <div\n class={{\n skeleton: true,\n animate: this.animated,\n }}\n >\n <div class=\"skeleton__indicator\"> </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/nano-slide.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { r as registerInstance, c as createEvent, h, a as Host } from './index-52b0408e.js';
+import { r as registerInstance, c as createEvent, h, a as Host } from './index-dad5627b.js';
 const slideCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:flex;align-items:center;justify-content:center;inline-size:100%;min-block-size:100%;font-size:18px;text-align:center;box-sizing:border-box;overflow:hidden;transition:opacity 0.2s;opacity:0;flex-direction:column}:host([ready]){opacity:1}";

package/dist/esm/nano-slides.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-52b0408e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-dad5627b.js';
 import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-e401b2a2.js';
 var evEmitter = createCommonjsModule(function (module) {
@@ -3820,7 +3820,7 @@ proto.shiftWrapCells = function () {
 const flickity = Flickity;
-const slidesCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-width:100vw}:host([ready]){opacity:1}.slideshow{max-height:100%;min-height:inherit;height:inherit;position:relative}.slideshow.not-ready{max-width:100vw}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex}.not-ready .flickity-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.flickity-container.slides-ready{min-height:inherit;max-height:inherit;height:inherit;width:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:none;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.flickity-button-icon{fill:var(--navbtns-icon-color)}.flickity-button:disabled .flickity-button-icon{fill:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{position:absolute;inline-size:100%;inset-block-end:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}.flickity-page-dots .dot.is-selected{opacity:1;background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:rgba(0, 0, 0, 0.9);-webkit-padding-after:35px;padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
+const slidesCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-width:100vw}:host([ready]){opacity:1}.slideshow{max-height:100%;min-height:inherit;height:inherit;position:relative}.slideshow.not-ready{max-width:98vw}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.not-ready .flickity-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.flickity-container.slides-ready{min-height:inherit;max-height:inherit;height:inherit;width:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:none;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.flickity-button-icon{fill:var(--navbtns-icon-color)}.flickity-button:disabled .flickity-button-icon{fill:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{position:absolute;inline-size:100%;inset-block-end:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}.flickity-page-dots .dot.is-selected{opacity:1;background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:rgba(0, 0, 0, 0.9);-webkit-padding-after:35px;padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
 const Slides = class {
   constructor(hostRef) {
@@ -4105,6 +4105,7 @@ const Slides = class {
       this.flickityEl.classList.contains('flickity-enabled'))
       this.destroyflickity();
     setTimeout(() => {
+      this.flickityEl.style.height = '';
       const flick = new flickity(this.flickityEl, finalOptions);
       this.flickityReady = true;
       this.syncflickity = flick;
@@ -4115,18 +4116,14 @@ const Slides = class {
       this.fullscreenBtnChanged();
       this.readyflickity(flick);
       this.ready = true;
-      this.flickityEl.style.height = '';
-      // the slideshow has been initialised without any dimensions - let's add a one shot
-      // resize observer to kick it off when it gets some dimensions
-      if (!this.host.getBoundingClientRect().height) {
-        if (!window['ResizeObserver'])
-          return;
-        const ro = (this.resizeO = new ResizeObserver(() => {
-          flick.resize();
-          this.resizeO.disconnect();
-        }));
-        ro.observe(this.host);
-      }
+      if (!window['ResizeObserver'])
+        return;
+      // just boots and brances to make sure it's the correct size oninit
+      const ro = (this.resizeO = new ResizeObserver(() => {
+        flick.resize();
+        // this.resizeO.disconnect();
+      }));
+      ro.observe(this.host);
     }, 100);
   }
   normalizeOptions() {