npm - @nanoporetech-digital/components - Versions diffs - 3.1.1 → 3.3.0 - Mend

@nanoporetech-digital/components 3.1.1 → 3.3.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 (461) hide show

package/dist/components/nav-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nav-item.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,gyXAAgyX;;MC4BtyX,OAAO;;;;;;;;;;;IACV,qBAAgB,GAAY,KAAK,CAAC;IAClC,iBAAY,GAAY,KAAK,CAAC;IAG9B,YAAO,GAAY,KAAK,CAAC;IAEzB,cAAS,GAAY,KAAK,CAAC;IA0J3B,mBAAc,GAAG;MACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,OAAO;QAAE,OAAO;MAEpD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;MAC5D,MAAM,MAAM,GAAG,MAAM,iBAAiB,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;MACzE,IAAI,CAAC,OAAO,GAAG,MAAM,KAAK,QAAQ,CAAC;KACpC,CAAC;IAEM,kBAAa,GAAG;MACtB,IAAI,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,oBAAoB,EAAE;QACjD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,OAAO;OACR;MACD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,OAAO;QAAE,OAAO;MAEnD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;MAC5D,MAAM,MAAM,GAAG,MAAM,iBAAiB,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;MACxE,IAAI,CAAC,OAAO,GAAG,MAAM,KAAK,OAAO,CAAC;KACnC,CAAC;IAEM,oBAAe,GAAG;MACxB,IAAI,CAAC,IAAI,CAAC,gBAAgB;QAAE,OAAO;MACnC,IAAI,IAAI,CAAC,OAAO;QAAE,IAAI,CAAC,cAAc,EAAE,CAAC;;QACnC,IAAI,CAAC,aAAa,EAAE,CAAC;KAC3B,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;MAErB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB;QACvD,IAAI,CAAC,aAAa,EAAE,CAAC;MACvB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,mBAAc,GAAG;MACvB,IAAI,IAAI,CAAC,SAAS;QAAE,OAAO;;;MAI3B,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;MACpC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;;IAGM,oBAAe,GAAG,CAAC,EAAc;MACvC,IAAI,CAAC,IAAI,CAAC,YAAY;QAAE,OAAO;MAC/B,MAAM,SAAS,GAAI,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;MAClE,IAAI,CAAC,SAAS;QAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC;KAClC,CAAC;;IAGM,qBAAgB,GAAG;MACzB,IACE,CAAC,IAAI,CAAC,IAAI;QACV,IAAI,CAAC,SAAS;QACd,CAAC,IAAI,CAAC,gBAAgB;SACrB,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAErE,OAAO;;;MAIT,IAAI,UAAU,GAAG,CAAC,CAAC;MACnB,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,+BAA+B,CAAC,CAAC,MAAM;QAC9D,UAAU,GAAG,GAAG,CAAC;MAEnB,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;MAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;MACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;MACtB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,CAC/B,YAAY,MAAM,IAAI,CAAC,aAAa,EAAE,EACtC,UAAU,CACX,CAAC;MACF,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,CAAC;;IAGM,qBAAgB,GAAG;MACzB,IAAI,CAAC,IAAI,CAAC,IAAI;QAAE,OAAO;MACvB,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;MAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;MACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;;MAGtB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,CAC/B,YAAY,MAAM,IAAI,CAAC,cAAc,EAAE,EACvC,GAAG,CACJ,CAAC;MACF,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;MACvB,IAAI,IAAI,CAAC,gBAAgB;QAAE,IAAI,CAAC,eAAe,EAAE,CAAC;;QAC7C,IAAI,CAAC,EAAE,CAAC,aAAa,CAAc,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;KACvD,CAAC;IAYM,SAAI,GAAG,CAAC,EAAc;MAC5B,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS;QAAE,OAAO;MAC5C,IAAI,CAAC,IAAI,CAAC,WAAW;QAAE,OAAO;;MAG9B,IAAI,EAAE,IAAI,EAAE,CAAC,aAAa,EAAE;QAC1B,IACE,EAAE,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE;UAC5B,EAAE,CAAC,aAAa,KAAK,IAAI,CAAC,GAAG;UAC7B,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,aAA4B,CAAC,EACrD;UACA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;UACjD,OAAO;SACR;OACF;MAED,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;MACpD,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;MAC7D,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;MAE9C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MAEpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,EAAE,CAAC,aAAa;QACnB,UAAU,CAAC;UACT,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;SACxC,EAAE,EAAE,CAAC,CAAC;KACV,CAAC;mBA9R0B,KAAK;yBACC,KAAK;0BACJ,KAAK;oBACX,KAAK;oBACL,KAAK;gBAMM,IAAI;kBAKc,OAAO;oBAKrC,KAAK;gBAKuB,KAAK;oBAKhB,KAAK;gCAKX,CAAC;6BAKZ,SAAQ;uBAKL,IAAI;wBAKH,KAAK;;;;;;EAqCrC,MAAM,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,GAAG;MAAE,OAAO;IACtB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC;GAClB;;;;EAMD,UAAU;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;GAC1D;;;;EAMD,aAAa;IACX,IAAI,CAAC,IAAI,CAAC,gBAAgB;MAAE,OAAO;IAEnC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;;;MAGjB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACnB,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACpD,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;OAC9D;MACD,UAAU,CAAC;QACT,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO;UAClC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAC1C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;OAC3D,EAAE,EAAE,CAAC,CAAC;KACR;SAAM;MACL,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;;;MAIrB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACnB,MAAM,OAAO,GAAG,IAAK,MAAc,CAAC,oBAAoB,CACtD,CAAC,IAAiC;UAChC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,GAAG,GAAG,CAAC,EAAE;YACtC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC;cAC/B,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;WACJ;UACD,OAAO,CAAC,UAAU,EAAE,CAAC;SACtB,EACD,EAAE,SAAS,EAAE,CAAC,EAAE,CACjB,CAAC;QACF,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAEjD,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1D,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAE3C,IAAI,CAAC,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;OAC1D;KACF;GACF;;EAuGO,eAAe,CAAC,EAAe;IACrC,IAAI,KAAK,GAAG,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACxC,KAAK,GAAG,KAAK,KAAK,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,eAAe,CAAC,GAAG,KAAK,CAAC;IAEzE,IAAI,CAAC,KAAK;MAAE,OAAO,KAAK,CAAC;IACzB,IAAI,KAAK,KAAK,IAAI,CAAC,EAAE;MAAE,OAAO,IAAI,CAAC;IACnC,OAAO,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;GACpC;EA+BD,iBAAiB;IACf,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjE,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,YAAY,CAAC;IAEvC,MAAM,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC,CAEjC,CAAC;IACtB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC;IAE3B,IAAI,IAAI,EAAE;MACR,IAAI,CAAC,IAAI,GAAI,IAA0B,CAAC,IAAI;UACvC,IAA0B,CAAC,IAAI;UAChC,IAAI,CAAC;MACT,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;MAChB,IAAI,IAAI,CAAC,gBAAgB;QACvB,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;MAE3D,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MACrD,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KACxD;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC5B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAEvD,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC5D,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IAC/C,IAAI,CAAC,aAAa;MAChB,IAAI,CAAC,EAAE,CAAC,aAAa,KAAK,IAAI,CAAC,YAAY;QAC3C,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;GACpC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,eAAe,EAAE,IAAI,CAAC,gBAAgB;QACtC,gBAAgB,EAAE,IAAI,CAAC,IAAI;QAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,WAAW,EAAE,IAAI,CAAC,QAAQ;QAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,iBAAiB,EAAE,IAAI,CAAC,aAAa;QACrC,kBAAkB,EAAE,IAAI,CAAC,cAAc;QACvC,WAAW,EAAE,IAAI,CAAC,QAAQ;OAC3B,EACD,MAAM,EAAE,IAAI,CAAC,cAAc,EAC3B,GAAG,EAAG,IAAI,CAAC,EAAE,CAAC,aAA0B,CAAC,GAAG,KAAK,KAAK,GAAG,KAAK,GAAG,IAAI,EACrE,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,IAAI,EAAC,UAAU,IAEf,WACE,KAAK,EAAE;QACL,UAAU,EAAE,IAAI;QAChB,gBAAgB,EAAE,IAAI,CAAC,IAAI;QAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ,KAChD,SACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,YAAY;OAChC,IAED,YAAM,IAAI,EAAC,YAAY,GAAG,EAC1B,YAAM,KAAK,EAAC,MAAM,IAChB,eAAQ,CACH,EACP,YAAM,IAAI,EAAC,UAAU,GAAG,CACtB,CACL,EACA,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,MACnD,cACE,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,EAC9B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,YAAY;OAChC,IAED,YAAM,IAAI,EAAC,YAAY,GAAG,EAC1B,YAAM,KAAK,EAAC,MAAM,IAChB,eAAQ,CACH,EACP,YAAM,IAAI,EAAC,UAAU,GAAG,CACjB,CACV,EACA,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ,KAClC,WAAK,KAAK,EAAC,MAAM,IACf,YAAM,IAAI,EAAC,YAAY,GAAG,EAC1B,eAAQ,EACR,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB,CACP,EACA,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,QAAQ,KACtC,WACE,KAAK,EAAC,gBAAgB,EACtB,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,EACvC,QAAQ,EAAC,IAAI,IAEb,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,WAAW,GAAG,CACrB,EACN,WACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,cAAc,GACvB,CACH,CACP,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","./src/components/nav-item/nav-item.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n // These can be overwritten, but are automatically set from context components\n\n // --padding-top: inherit;\n // --padding-bottom: inherit;\n // --padding-start: inherit;\n // --padding-end: inherit;\n // --margin: inherit;\n\n // --secondary-padding-top: inherit;\n // --secondary-padding-bottom: inherit;\n // --secondary-padding-start: inherit;\n // --secondary-padding-end: inherit;\n\n // --border-bottom: inherit;\n // --icon-size: inherit;\n\n // --color: inherit;\n // --color-hover: inherit;\n // --color-focus: inherit;\n // --color-selected: inherit;\n // --color-open: inherit;\n\n // --bg-color: inherit;\n // --bg-color-hover: inherit;\n // --bg-color-selected: inherit;\n // --bg-color-open: inherit;\n // --bg-color-focus: inherit;\n\n // --secondary-bg-color: inherit;\n // --secondary-color: inherit;\n\n opacity: inherit;\n display: block;\n color: var(--color) !important;\n margin: var(--margin);\n\n ::slotted(),\n {\n box-sizing: border-box;\n }\n\n ::slotted(button),\n button {\n background: none;\n border: none;\n margin: 0;\n }\n\n ::slotted(button),\n ::slotted(a),\n ::slotted(a:visited),\n button,\n a,\n a:visited {\n @include text-inherit();\n\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-top) var(--padding-bottom);\n display: var(--display, block);\n white-space: nowrap;\n color: var(--color) !important;\n background-color: var(--bg-color);\n line-height: inherit;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-end: var(--padding-end);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-start: var(--padding-start);\n }\n\n .link {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-start: var(--padding-start);\n padding-inline-end: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n }\n }\n\n .link,\n button,\n a {\n border-block-end: var(--border-bottom);\n display: flex;\n align-items: center;\n }\n\n .secondary-menu {\n display: none;\n }\n\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n text-decoration: inherit !important;\n }\n\n button:focus,\n a:focus {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, none);\n }\n\n ::slotted(a:focus),\n ::slotted(button:focus) {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: none;\n }\n}\n\n.nav-item {\n &.selected {\n .link,\n button,\n a {\n color: var(--color-selected, var(--color-open, var(--color))) !important;\n background-color:\n var(\n --bg-color-selected,\n var(--bg-color-open, var(--bg-color))\n );\n }\n }\n\n &.secondary-open {\n button,\n a {\n color: var(--color-open, var(--color-selected, var(--color))) !important;\n background-color:\n var(\n --bg-color-open,\n var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n );\n }\n }\n\n &.disabled {\n opacity: 0.6;\n\n button,\n a {\n color: var(--color-disabled, var(--color)) !important;\n }\n }\n\n &:not(.nano-menu) {\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n color: var(--color-hover, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-hover,\n var(--bg-color-focus, var(--bg-color))\n );\n }\n }\n}\n\n:host(.has-focus) {\n .link {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n a,\n a:visited,\n button,\n .link {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: 'currentColor';\n text-decoration: inherit;\n white-space: normal;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-start: 0;\n padding-inline-end: var(--padding-end);\n flex: 1;\n }\n\n ::slotted(a),\n ::slotted(button) {\n flex: 1;\n }\n\n ::slotted(a:focus),\n ::slotted(button:focus) {\n box-shadow: none;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n color: var(--secondary-color, 'currentColor');\n min-height: 100%;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.2s ease, transform 0.3s ease;\n background-color: var(--secondary-bg-color, white);\n transform: translateX(100%);\n\n &:focus {\n outline: none;\n }\n\n &.open {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 0.3s ease, transform 0.2s ease;\n }\n }\n}\n\n:host(.nano-global-nav-menu) {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: 10px;\n flex: 0 0 10px;\n pointer-events: none;\n }\n\n button,\n a {\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0;\n }\n }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n .secondary-menu {\n transform: translateX(-100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n}\n\n:host(.nano-menu) {\n .secondary-menu-content {\n padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\n }\n}\n\n:host(.nano-global-nav-bar) {\n .link,\n a,\n button {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n .text {\n flex: 1 0 auto;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n margin-inline: var(--padding-end) 0;\n margin-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n margin-inline: 0 var(--padding-start);\n margin-block: 0;\n }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n button {\n position: relative;\n\n &::before {\n content: '';\n background-color: rgb(12, 90, 113);\n height: 9px;\n inset-inline: 0 5px;\n inset-block-end: -24px;\n position: absolute;\n transform: translateZ(0) scaleX(0);\n transform-origin: 0;\n transition: 0.2s ease transform;\n }\n }\n\n .selected button::before,\n .secondary-open button::before {\n transform: translateZ(0) scaleX(1);\n }\n\n .secondary-open button::before {\n opacity: 0.7;\n }\n\n .secondary-menu {\n display: none;\n transition: transform 0.3s ease;\n transform: translateY(-100%) translateZ(0);\n background-color: var(--secondary-bg-color, #196c82);\n color: var(--secondary-color);\n position: absolute;\n box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n inset-inline: 0;\n z-index: -2;\n outline: none;\n\n &.open {\n transform: translateY(12px) translateZ(0);\n }\n }\n}\n\n:host(.nano-menu-drawer) {\n .link,\n a,\n button {\n padding-block-start: calc(var(--padding-top) / 2);\n padding-inline-end: 0;\n padding-block-end: calc(var(--padding-bottom) / 2);\n padding-inline-start: var(--padding-start);\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: currentColor;\n text-decoration: inherit;\n white-space: normal;\n border: none;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n text-align: start;\n flex: 0 1 auto;\n min-width: 130px;\n width: 130px;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: var(--icon-size);\n width: var(--icon-size);\n flex: 0 0 var(--icon-size);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0 var(--padding-end) 0 0;\n font-size: 10px;\n flex: 0 0 20px;\n min-width: 20px;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n background-color: var(--secondary-bg-color);\n color: var(--secondary-color);\n height: 100vh;\n inset-inline: auto 0;\n inset-block: 0;\n transform: translateX(0);\n z-index: -1;\n transition: transform 0.3s ease, opacity 0.2s ease;\n overflow-y: auto;\n width: var(--secondary-width, 400px);\n max-width: 62vw;\n opacity: 1;\n padding-inline: var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));\n padding-block: var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom));\n\n &:focus {\n outline: none;\n }\n\n &.open {\n transform: translateX(100%);\n // opacity: 1;\n }\n }\n\n .notification {\n position: relative;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n width: 6px;\n height: 6px;\n background-color: #ef4135;\n inset-inline-start: 10px;\n inset-block-start: 7px;\n border-radius: 50%;\n\n @media (min-width: 52em) {\n width: 7px;\n height: 7px;\n inset-inline-start: 8px;\n inset-block-start: 5px;\n }\n }\n }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n .secondary-menu {\n transform: translateX(0%);\n\n &.open {\n transform: translateX(-100%);\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n h,\n Host,\n Element,\n Prop,\n Watch,\n EventEmitter,\n Event,\n State,\n Method,\n ComponentInterface,\n} from '@stencil/core';\nimport { getDirectChildren, getSiblings } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport type { NavItemEventDetail } from '../../interface';\n\n/*\n Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n /\n@Component({\n tag: 'nano-nav-item',\n styleUrl: 'nav-item.scss',\n shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n private hasSecondarySlot: boolean = false;\n private hasAnchorEle: boolean = false;\n private secondaryDiv: HTMLDivElement;\n private btn: HTMLButtonElement \| HTMLAnchorElement;\n private didBlur: boolean = false;\n private fromHover: boolean;\n private animating: boolean = false;\n private waitHide: number;\n private waitShow: number;\n private globalNavEle?: HTMLNanoGlobalNavElement;\n\n @State() didOpen: boolean = false;\n @State() isInGlobalNav: boolean = false;\n @State() isInMenuDrawer: boolean = false;\n @State() isInMenu: boolean = false;\n @State() hasFocus: boolean = false;\n @Element() private el: HTMLNanoNavItemElement;\n\n /\n Href to link to\n /\n @Prop({ mutable: true }) href: string = null;\n\n /\n Target to use for links\n /\n @Prop() target: '_self' \| '_blank' \| '_parent' \| '_top' = '_self';\n\n /\n Disable the nav item\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether a secondary menu should be or is currently open\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Whether this menu item is currently 'selected'\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n Screen pixel width to activate the secondary menu\n /\n @Prop() secondaryActiveWidth: number = 0;\n\n /\n Secondary fallback function for when the secondary menu is no longer active.\n /\n @Prop() secondaryFallback = () => {};\n\n /\n Whether secondary menus should close on blur\n /\n @Prop() closeOnBlur: boolean = true;\n\n /\n Will show an indicator badge - only when placed in a nano-menu-draw\n /\n @Prop() notification: boolean = false;\n\n /\n Emitted when the nav item closes it's secondary navigation.\n /\n @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item opens it's secondary navigation.\n /\n @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to open it's secondary navigation.\n /\n @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to close it's secondary navigation.\n /\n @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the nav item has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the first button or anchor present. Use this method instead of the global\n * `element.focus()`.\n /\n @Method()\n async setFocus() {\n if (!this.btn) return;\n this.btn.focus();\n }\n\n /\n Public open watcher\n /\n @Watch('open')\n openChange() {\n this.open ? this.openSecondary() : this.closeSecondary();\n }\n\n /\n Internal open watcher\n /\n @Watch('didOpen')\n didOpenChange() {\n if (!this.hasSecondarySlot) return;\n\n if (!this.didOpen) {\n / the secondadry panel is not closing via hover,\n remove blur events, add focus back to originating button /\n if (!this.fromHover) {\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n }\n setTimeout(() => {\n if (!this.fromHover && !this.didBlur)\n this.btn.focus({ preventScroll: true });\n this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n }, 50);\n } else {\n this.didBlur = false;\n\n / the secondadry panel is not opening via hover,\n scroll content into view, focus on it and add blur events /\n if (!this.fromHover) {\n const panelio = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].boundingClientRect.top < 0) {\n this.secondaryDiv.scrollIntoView({\n behavior: 'smooth',\n });\n }\n panelio.disconnect();\n },\n { threshold: 1 }\n );\n panelio.observe(this.secondaryDiv);\n this.secondaryDiv.focus({ preventScroll: true });\n\n this.btn.addEventListener('focusout', this.blur);\n this.secondaryDiv.addEventListener('focusout', this.blur);\n window.addEventListener('blur', this.blur);\n\n this.el.tabIndex = -1;\n this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n }\n }\n }\n\n private closeSecondary = async () => {\n this.open = false;\n if (!this.hasSecondarySlot \|\| !this.didOpen) return;\n\n this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n const status = await displayTransition(this.secondaryDiv, 'open', false);\n this.didOpen = status !== 'hidden';\n };\n\n private openSecondary = async () => {\n if (window.innerWidth < this.secondaryActiveWidth) {\n this.secondaryFallback.call(this);\n return;\n }\n this.open = true;\n if (!this.hasSecondarySlot \|\| this.didOpen) return;\n\n this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n const status = await displayTransition(this.secondaryDiv, 'open', true);\n this.didOpen = status === 'shown';\n };\n\n private toggleSecondary = () => {\n if (!this.hasSecondarySlot) return;\n if (this.didOpen) this.closeSecondary();\n else this.openSecondary();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n // opens secondary panel when activated via hover\n if (this.href && !this.animating && this.hasSecondarySlot)\n this.openSecondary();\n this.nanoFocus.emit();\n };\n\n private handleHostBlur = () => {\n if (this.animating) return;\n\n // tab index is added to host when secondary panel opens\n // to return focus after secondary panel closes. Remove now if it was added\n this.el.removeAttribute('tabindex');\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n // direct host clicks to internal button\n private handleHostClick = (ev: MouseEvent) => {\n if (!this.hasAnchorEle) return;\n const foundlink = (ev.target as HTMLElement).closest('a, button');\n if (!foundlink) this.btn.click();\n };\n\n // handles secondary menu hover behaviour.\n private handleMouseEnter = async () => {\n if (\n !this.href \|\|\n this.animating \|\|\n !this.hasSecondarySlot \|\|\n (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n )\n return;\n\n // if there are sibling secondary panels currently open,\n // we need to wait before opening otherwise we get unwanted overlapping\n let timeToWait = 0;\n if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n timeToWait = 300;\n\n clearTimeout(this.waitHide);\n this.fromHover = true;\n this.animating = true;\n this.waitShow = window.setTimeout(\n async () => await this.openSecondary(),\n timeToWait\n );\n this.animating = false;\n };\n\n // handles secondary menu hover-out behaviour.\n private handleMouseLeave = () => {\n if (!this.href) return;\n clearTimeout(this.waitShow);\n this.fromHover = true;\n this.animating = true;\n\n // prevent closing immediately - makes navigating to items within more forgiving\n this.waitHide = window.setTimeout(\n async () => await this.closeSecondary(),\n 300\n );\n this.animating = false;\n };\n\n private handleClick = () => {\n this.fromHover = false;\n if (this.hasSecondarySlot) this.toggleSecondary();\n else this.el.querySelector<HTMLElement>('')?.click();\n };\n\n // utility to traverse up, to see if element is nested within current nav-item\n private foundThisNavEle(el: HTMLElement): boolean {\n let found = el.closest('nano-nav-item');\n found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n if (!found) return false;\n if (found === this.el) return true;\n return this.foundThisNavEle(found);\n }\n\n private blur = (ev: FocusEvent) => {\n if (!this.didOpen \|\| this.animating) return;\n if (!this.closeOnBlur) return;\n\n // if event is associated with this element don't close\n if (ev && ev.relatedTarget) {\n if (\n ev.relatedTarget === this.el \|\|\n ev.relatedTarget === this.btn \|\|\n this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n ) {\n this.secondaryDiv.focus({ preventScroll: true });\n return;\n }\n }\n\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n window.removeEventListener('blur', this.blur);\n\n this.didBlur = true;\n\n this.open = false;\n if (!ev.relatedTarget)\n setTimeout(() => {\n this.el.focus({ preventScroll: true });\n }, 50);\n };\n\n componentWillLoad() {\n const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n this.hasSecondarySlot = !!secondaryEle;\n\n const link = getDirectChildren(this.el, 'a, button')[0] as\n \| HTMLAnchorElement\n \| HTMLButtonElement;\n this.hasAnchorEle = !!link;\n\n if (link) {\n this.href = (link as HTMLAnchorElement).href\n ? (link as HTMLAnchorElement).href\n : null;\n this.btn = link;\n if (this.hasSecondarySlot)\n this.btn.addEventListener('click', this.toggleSecondary);\n\n this.btn.addEventListener('focus', this.handleFocus);\n this.btn.addEventListener('blur', this.handleHostBlur);\n }\n }\n\n connectedCallback() {\n this.isInGlobalNav = false;\n this.isInMenuDrawer = false;\n this.globalNavEle = this.el.closest('nano-global-nav');\n\n this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n this.isInMenu = !!this.el.closest('nano-menu');\n this.isInGlobalNav =\n this.el.parentElement === this.globalNavEle \|\|\n !!this.el.closest('.global-nav');\n }\n\n render() {\n return (\n <Host\n class={{\n 'has-secondary': this.hasSecondarySlot,\n 'secondary-open': this.open,\n selected: this.selected,\n 'has-focus': this.hasFocus,\n disabled: this.disabled,\n 'nano-global-nav': this.isInGlobalNav,\n 'nano-menu-drawer': this.isInMenuDrawer,\n 'nano-menu': this.isInMenu,\n }}\n onBlur={this.handleHostBlur}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleHostClick}\n role=\"menuitem\"\n >\n <div\n class={{\n 'nav-item': true,\n 'secondary-open': this.open,\n selected: this.selected,\n }}\n >\n {this.href && !this.hasAnchorEle && !this.disabled && (\n <a\n target={this.target}\n ref={(a) => (this.btn = a)}\n href={this.href}\n onFocus={this.handleFocus}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </a>\n )}\n {((!this.hasAnchorEle && !this.href) \|\| this.disabled) && (\n <button\n ref={(btn) => (this.btn = btn)}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n disabled={this.disabled}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </button>\n )}\n {this.hasAnchorEle && !this.disabled && (\n <div class=\"link\">\n <slot name=\"icon-start\" />\n <slot />\n <slot name=\"icon-end\" />\n </div>\n )}\n {this.hasSecondarySlot && !this.disabled && (\n <div\n class=\"secondary-menu\"\n ref={(div) => (this.secondaryDiv = div)}\n tabindex=\"-1\"\n >\n <div class=\"secondary-menu-content\">\n <slot name=\"secondary\" />\n </div>\n <div\n class=\"secondary-menu-mask\"\n onClick={this.closeSecondary}\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nav-item.js","mappings":"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","names":[],"sources":["./src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","./src/components/nav-item/nav-item.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n // These can be overwritten, but are automatically set from context components\n\n // --padding-top: inherit;\n // --padding-bottom: inherit;\n // --padding-start: inherit;\n // --padding-end: inherit;\n // --margin: inherit;\n\n // --secondary-padding-top: inherit;\n // --secondary-padding-bottom: inherit;\n // --secondary-padding-start: inherit;\n // --secondary-padding-end: inherit;\n\n // --border-bottom: inherit;\n // --icon-size: inherit;\n\n // --color: inherit;\n // --color-hover: inherit;\n // --color-focus: inherit;\n // --color-selected: inherit;\n // --color-open: inherit;\n\n // --bg-color: inherit;\n // --bg-color-hover: inherit;\n // --bg-color-selected: inherit;\n // --bg-color-open: inherit;\n // --bg-color-focus: inherit;\n\n // --secondary-bg-color: inherit;\n // --secondary-color: inherit;\n\n opacity: inherit;\n display: block;\n color: var(--color) !important;\n margin: var(--margin);\n outline: none !important;\n\n .nav-item,\n .link {\n outline: none !important;\n }\n\n ::slotted(),\n {\n box-sizing: border-box;\n }\n\n ::slotted(button),\n button {\n background: none;\n border: none;\n margin: 0;\n }\n\n ::slotted(button),\n ::slotted(a),\n ::slotted(a:visited),\n button,\n a,\n a:visited {\n @include text-inherit();\n\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-top) var(--padding-bottom);\n display: var(--display, block);\n white-space: nowrap;\n color: var(--color) !important;\n background-color: var(--bg-color);\n line-height: inherit;\n outline: none !important;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-end: var(--padding-end);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-start: var(--padding-start);\n }\n\n .link {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-start: var(--padding-start);\n padding-inline-end: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n }\n }\n\n .link,\n button,\n a {\n border-block-end: var(--border-bottom);\n display: flex;\n align-items: center;\n }\n\n .secondary-menu {\n display: none;\n }\n\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n text-decoration: inherit !important;\n }\n\n button:focus-visible,\n a:focus-visible {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n box-shadow: #{$control-focus-style};\n }\n\n ::slotted(a:focus-visible),\n ::slotted(button:focus-visible) {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n box-shadow: #{$control-focus-style};\n }\n}\n\n.nav-item {\n &.selected {\n .link,\n button,\n a {\n color: var(--color-selected, var(--color-open, var(--color))) !important;\n background-color:\n var(\n --bg-color-selected,\n var(--bg-color-open, var(--bg-color))\n );\n }\n }\n\n &.secondary-open {\n button,\n a {\n color: var(--color-open, var(--color-selected, var(--color))) !important;\n background-color:\n var(\n --bg-color-open,\n var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n );\n }\n }\n\n &.disabled {\n opacity: 0.6;\n\n button,\n a {\n color: var(--color-disabled, var(--color)) !important;\n }\n }\n\n &:not(.nano-menu) {\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n color: var(--color-hover, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-hover,\n var(--bg-color-focus, var(--bg-color))\n );\n }\n }\n}\n\n:host(.has-focus) {\n .link {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n a,\n a:visited,\n button,\n .link {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: 'currentColor';\n text-decoration: inherit;\n white-space: normal;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-start: 0;\n padding-inline-end: var(--padding-end);\n flex: 1;\n }\n\n ::slotted(a),\n ::slotted(button) {\n flex: 1;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n color: var(--secondary-color, 'currentColor');\n min-height: 100%;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.2s ease, transform 0.3s ease;\n background-color: var(--secondary-bg-color, white);\n transform: translateX(100%);\n\n &:focus {\n outline: none;\n }\n\n &.open {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 0.3s ease, transform 0.2s ease;\n }\n }\n}\n\n:host(.nano-global-nav-menu) {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: 10px;\n flex: 0 0 10px;\n pointer-events: none;\n }\n\n button,\n a {\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0;\n }\n }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n .secondary-menu {\n transform: translateX(-100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n}\n\n:host(.nano-menu) {\n ::slotted(a:focus),\n ::slotted(button:focus) {\n box-shadow: none;\n }\n\n .secondary-menu-content {\n padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\n }\n}\n\n:host(.nano-global-nav-bar) {\n .link,\n a,\n button {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n .text {\n flex: 1 0 auto;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n margin-inline: var(--padding-end) 0;\n margin-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n margin-inline: 0 var(--padding-start);\n margin-block: 0;\n }\n\n ::slotted(a),\n button {\n position: relative;\n\n &::before {\n content: '';\n background-color: rgb(12, 90, 113);\n height: 9px;\n inset-inline: 0 5px;\n inset-block-end: -22px;\n position: absolute;\n transform: translateZ(0) scaleX(0);\n transform-origin: 0;\n transition: 0.2s ease transform;\n }\n }\n\n .selected button::before,\n .secondary-open button::before {\n transform: translateZ(0) scaleX(1);\n }\n}\n\n:host(.nano-global-nav-bar.selected) {\n ::slotted(a) {\n &::before {\n transform: translateZ(0) scaleX(1);\n }\n }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n .secondary-open button::before {\n opacity: 0.7;\n }\n\n .secondary-menu {\n display: none;\n transition: transform 0.3s ease;\n transform: translateY(-100%) translateZ(0);\n background-color: var(--secondary-bg-color, #196c82);\n color: var(--secondary-color);\n position: absolute;\n box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n inset-inline: 0;\n z-index: -2;\n outline: none;\n\n &.open {\n transform: translateY(12px) translateZ(0);\n }\n }\n}\n\n:host(.nano-menu-drawer) {\n .link,\n a,\n button {\n padding-block-start: calc(var(--padding-top) / 2);\n padding-inline-end: 0;\n padding-block-end: calc(var(--padding-bottom) / 2);\n padding-inline-start: var(--padding-start);\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: currentColor;\n text-decoration: inherit;\n white-space: normal;\n border: none;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n text-align: start;\n flex: 0 1 auto;\n min-width: 130px;\n width: 130px;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: var(--icon-size);\n width: var(--icon-size);\n flex: 0 0 var(--icon-size);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0 var(--padding-end) 0 0;\n font-size: 10px;\n flex: 0 0 20px;\n min-width: 20px;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n background-color: var(--secondary-bg-color);\n color: var(--secondary-color);\n height: 100vh;\n inset-inline: auto 0;\n inset-block: 0;\n transform: translateX(0);\n z-index: -1;\n transition: transform 0.3s ease, opacity 0.2s ease;\n overflow-y: auto;\n width: var(--secondary-width, 400px);\n max-width: 62vw;\n opacity: 1;\n padding-inline: var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));\n padding-block: var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom));\n\n &:focus {\n outline: none;\n }\n\n &.open {\n transform: translateX(100%);\n }\n }\n\n .notification {\n position: relative;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n width: 6px;\n height: 6px;\n background-color: #ef4135;\n inset-inline-start: 10px;\n inset-block-start: 7px;\n border-radius: 50%;\n\n @media (min-width: 52em) {\n width: 7px;\n height: 7px;\n inset-inline-start: 8px;\n inset-block-start: 5px;\n }\n }\n }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n .secondary-menu {\n transform: translateX(0%);\n\n &.open {\n transform: translateX(-100%);\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n h,\n Host,\n Element,\n Prop,\n Watch,\n EventEmitter,\n Event,\n State,\n Method,\n ComponentInterface,\n} from '@stencil/core';\nimport { getDirectChildren, getSiblings } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\n/*\n Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n /\n@Component({\n tag: 'nano-nav-item',\n styleUrl: 'nav-item.scss',\n shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n private hasSecondarySlot: boolean = false;\n private hasAnchorEle: boolean = false;\n private secondaryDiv: HTMLDivElement;\n private btn: HTMLButtonElement \| HTMLAnchorElement;\n private didBlur: boolean = false;\n private fromHover: boolean;\n private animating: boolean = false;\n private waitHide: number;\n private waitShow: number;\n private globalNavEle?: HTMLNanoGlobalNavElement;\n\n @State() didOpen: boolean = false;\n @State() isInGlobalNav: boolean = false;\n @State() isInMenuDrawer: boolean = false;\n @State() isInMenu: boolean = false;\n @State() hasFocus: boolean = false;\n @Element() private el: HTMLNanoNavItemElement;\n\n /\n Href to link to\n /\n @Prop({ mutable: true }) href: string = null;\n\n /\n Target to use for links\n /\n @Prop() target: '_self' \| '_blank' \| '_parent' \| '_top' = '_self';\n\n /\n Disable the nav item\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether a secondary menu should be or is currently open\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Whether this menu item is currently 'selected'\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n Screen pixel width to activate the secondary menu\n /\n @Prop() secondaryActiveWidth: number = 0;\n\n /\n Secondary fallback function for when the secondary menu is no longer active.\n /\n @Prop() secondaryFallback = () => {};\n\n /\n Whether secondary menus should close on blur\n /\n @Prop() closeOnBlur: boolean = true;\n\n /\n Will show an indicator badge - only when placed in a nano-menu-draw\n /\n @Prop() notification: boolean = false;\n\n /\n Emitted when the nav item closes it's secondary navigation.\n /\n @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item opens it's secondary navigation.\n /\n @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to open it's secondary navigation.\n /\n @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to close it's secondary navigation.\n /\n @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the nav item has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the first button or anchor present. Use this method instead of the global\n * `element.focus()`.\n /\n @Method()\n async setFocus() {\n if (!this.btn) return;\n this.btn.focus();\n }\n\n /\n Public open watcher\n /\n @Watch('open')\n openChange() {\n this.open ? this.openSecondary() : this.closeSecondary();\n }\n\n /\n Internal open watcher\n /\n @Watch('didOpen')\n didOpenChange() {\n if (!this.hasSecondarySlot) return;\n\n if (!this.didOpen) {\n / the secondadry panel is not closing via hover,\n remove blur events, add focus back to originating button /\n if (!this.fromHover) {\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n }\n setTimeout(() => {\n if (!this.fromHover && !this.didBlur)\n this.btn.focus({ preventScroll: true });\n this.el.tabIndex = null;\n this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n }, 50);\n } else {\n this.didBlur = false;\n\n / the secondadry panel is not opening via hover,\n scroll content into view, focus on it and add blur events /\n if (!this.fromHover) {\n const panelio = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].boundingClientRect.top < 0) {\n this.secondaryDiv.scrollIntoView({\n behavior: 'smooth',\n });\n }\n panelio.disconnect();\n },\n { threshold: 1 }\n );\n panelio.observe(this.secondaryDiv);\n this.secondaryDiv.focus({ preventScroll: true });\n\n const focusableChild = getTabbableElements(this.secondaryDiv, true);\n if (focusableChild[0]) focusableChild[0].focus();\n\n this.btn.addEventListener('focusout', this.blur);\n this.secondaryDiv.addEventListener('focusout', this.blur);\n window.addEventListener('blur', this.blur);\n\n this.el.tabIndex = -1;\n this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n }\n }\n }\n\n private closeSecondary = async () => {\n this.open = false;\n if (!this.hasSecondarySlot \|\| !this.didOpen) return;\n\n this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n const status = await displayTransition(this.secondaryDiv, 'open', false);\n this.didOpen = status !== 'hidden';\n };\n\n private openSecondary = async () => {\n if (window.innerWidth < this.secondaryActiveWidth) {\n this.secondaryFallback.call(this);\n return;\n }\n this.open = true;\n if (!this.hasSecondarySlot \|\| this.didOpen) return;\n\n this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n const status = await displayTransition(this.secondaryDiv, 'open', true);\n this.didOpen = status === 'shown';\n };\n\n private toggleSecondary = () => {\n if (!this.hasSecondarySlot) return;\n if (this.didOpen) this.closeSecondary();\n else this.openSecondary();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n // opens secondary panel when activated via hover\n if (this.href && !this.animating && this.hasSecondarySlot)\n this.openSecondary();\n this.nanoFocus.emit();\n };\n\n private handleHostBlur = () => {\n if (this.animating) return;\n\n // tab index is added to host when secondary panel opens\n // to return focus after secondary panel closes. Remove now if it was added\n this.el.removeAttribute('tabindex');\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n // direct host clicks to internal button\n private handleHostClick = (ev: MouseEvent) => {\n if (!this.hasAnchorEle) return;\n const foundlink = (ev.target as HTMLElement).closest('a, button');\n if (!foundlink) this.btn.click();\n };\n\n // handles secondary menu hover behaviour.\n private handleMouseEnter = async () => {\n if (\n !this.href \|\|\n this.animating \|\|\n !this.hasSecondarySlot \|\|\n (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n )\n return;\n\n // if there are sibling secondary panels currently open,\n // we need to wait before opening otherwise we get unwanted overlapping\n let timeToWait = 0;\n if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n timeToWait = 300;\n\n clearTimeout(this.waitHide);\n this.fromHover = true;\n this.animating = true;\n this.waitShow = window.setTimeout(\n async () => await this.openSecondary(),\n timeToWait\n );\n this.animating = false;\n };\n\n // handles secondary menu hover-out behaviour.\n private handleMouseLeave = () => {\n if (!this.href) return;\n clearTimeout(this.waitShow);\n this.fromHover = true;\n this.animating = true;\n\n // prevent closing immediately - makes navigating to items within more forgiving\n this.waitHide = window.setTimeout(\n async () => await this.closeSecondary(),\n 300\n );\n this.animating = false;\n };\n\n private handleClick = () => {\n this.fromHover = false;\n if (this.hasSecondarySlot) this.toggleSecondary();\n else this.el.querySelector<HTMLElement>('')?.click();\n };\n\n // utility to traverse up, to see if element is nested within current nav-item\n private foundThisNavEle(el: HTMLElement): boolean {\n let found = el.closest('nano-nav-item');\n found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n if (!found) return false;\n if (found === this.el) return true;\n return this.foundThisNavEle(found);\n }\n\n private blur = (ev: FocusEvent) => {\n if (!this.didOpen \|\| this.animating) return;\n if (!this.closeOnBlur) return;\n\n // if event is associated with this element don't close\n if (ev && ev.relatedTarget) {\n if (ev.relatedTarget === this.el \|\| ev.relatedTarget === this.btn) {\n this.secondaryDiv.focus({ preventScroll: true });\n return;\n }\n }\n if (this.foundThisNavEle(ev.relatedTarget as HTMLElement)) return;\n\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n window.removeEventListener('blur', this.blur);\n\n this.didBlur = true;\n\n this.open = false;\n if (!ev.relatedTarget)\n setTimeout(() => {\n this.el.focus({ preventScroll: true });\n }, 50);\n };\n\n componentWillLoad() {\n const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n this.hasSecondarySlot = !!secondaryEle;\n\n const link = getDirectChildren(this.el, 'a, button')[0] as\n \| HTMLAnchorElement\n \| HTMLButtonElement;\n this.hasAnchorEle = !!link;\n\n if (link) {\n this.href = (link as HTMLAnchorElement).href\n ? (link as HTMLAnchorElement).href\n : null;\n this.btn = link;\n if (this.hasSecondarySlot)\n this.btn.addEventListener('click', this.toggleSecondary);\n\n this.btn.addEventListener('focus', this.handleFocus);\n this.btn.addEventListener('blur', this.handleHostBlur);\n }\n }\n\n connectedCallback() {\n this.isInGlobalNav = false;\n this.isInMenuDrawer = false;\n this.globalNavEle = this.el.closest('nano-global-nav');\n\n this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n this.isInMenu = !!this.el.closest('nano-menu');\n this.isInGlobalNav =\n this.el.parentElement === this.globalNavEle \|\|\n !!this.el.closest('.global-nav');\n }\n\n render() {\n return (\n <Host\n class={{\n 'has-secondary': this.hasSecondarySlot,\n 'secondary-open': this.open,\n selected: this.selected,\n 'has-focus': this.hasFocus,\n disabled: this.disabled,\n 'nano-global-nav': this.isInGlobalNav,\n 'nano-menu-drawer': this.isInMenuDrawer,\n 'nano-menu': this.isInMenu,\n }}\n onBlur={this.handleHostBlur}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleHostClick}\n role=\"menuitem\"\n >\n <div\n class={{\n 'nav-item': true,\n 'secondary-open': this.open,\n selected: this.selected,\n }}\n >\n {this.href && !this.hasAnchorEle && !this.disabled && (\n <a\n target={this.target}\n ref={(a) => (this.btn = a)}\n href={this.href}\n onFocus={this.handleFocus}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </a>\n )}\n {((!this.hasAnchorEle && !this.href) \|\| this.disabled) && (\n <button\n ref={(btn) => (this.btn = btn)}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n disabled={this.disabled}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </button>\n )}\n {this.hasAnchorEle && !this.disabled && (\n <div class=\"link\">\n <slot name=\"icon-start\" />\n <slot />\n <slot name=\"icon-end\" />\n </div>\n )}\n {this.hasSecondarySlot && !this.disabled && (\n <div\n class=\"secondary-menu\"\n ref={(div) => (this.secondaryDiv = div)}\n tabindex=\"-1\"\n >\n <div class=\"secondary-menu-content\">\n <slot name=\"secondary\" />\n </div>\n <div\n class=\"secondary-menu-mask\"\n onClick={this.closeSecondary}\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/option.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { g as getDirectChildren } from './dom.js';
 import { d as debounce } from './throttle.js';
 import { d as defineCustomElement$1 } from './icon.js';
-const optionCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){-webkit-margin-end:0.5em;margin-inline-end:0.5em}.option__end{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){-webkit-margin-start:0.5em;margin-inline-start:0.5em}.option__check{visibility:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";
+const optionCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;width:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";
 let optIds = 0;
 const Option = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/dist/components/option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"option.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,~~6lFAA6lF~~;;~~ACgB/mF~~,IAAI,MAAM,GAAG,CAAC,CAAC;MAeF,MAAM;EAKjB;;;;;IAJQ,UAAK,GAAG,eAAe,MAAM,EAAE,EAAE,CAAC;oBAEtB,KAAK;iBAW+B,EAAE;iBAUF,EAAE;oBAWb,KAAK;oBAKL,KAAK;sBAKrB,EAAE;IAvC7B,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;GAC7D;EAUD,YAAY;IACV,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;MAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;GACvE;EAQD,YAAY;IACV,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;MACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;GAC1E;;;EAwBD,aAAa,CAAC,CAAgB;IAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;MAAE,OAAO;IAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEO,WAAW;IACjB,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;;EAID,IAAY,YAAY;IACtB,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC;OACxD,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,WAAW,CAAC;OAC3B,IAAI,CAAC,GAAG,CAAC;OACT,IAAI,EAAE,CAAC;GACX;;EAID,iBAAiB;IACf,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,IAE/C,WACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,KAAK,EAAE;QACL,MAAM,EAAE,IAAI;QACZ,kBAAkB,EAAE,IAAI,CAAC,QAAQ;QACjC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;QACjC,iBAAiB,EAAE,CAAC,IAAI,CAAC,KAAK;OAC/B,IAED,WAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,eAAe,IAC1C,YAAM,IAAI,EAAC,YAAY,IACrB,iBAAW,IAAI,EAAC,aAAa,iBAAa,MAAM,GAAG,CAC9C,CACH,EACN,WAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,IACrC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,WAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,IACrC,gBAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAQ,CACnC,EACN,WAAK,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,aAAa,IACjC,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/option/option.scss?tag=nano-option&encapsulation=shadow","./src/components/option/option.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /*\n @prop --padding-top: Defaults to #{$spacing-small};\n * @prop --padding-bottom: Defaults to #{$spacing-small};\n * @prop --padding-start: Defaults to #{$spacing-small};\n * @prop --padding-end: Defaults to #{$spacing-small};\n\n * @prop --bg: default background. Defaults to none;\n * @prop --bg-selected: background when selected. Defaults to #{$select-opt-selected};\n * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n * @prop --bg-disabled: background when disabled. Defaults to none;\n\n * @prop --color: default text color. Defaults to var(--input-text-color, #{$input-text-color});\n * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n * @prop --color-disabled: text color when disabled. Defaults to #{map.get($colors, palegrey)};\n\n * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n /\n\n --bg: none;\n --bg-selected: #{$select-opt-selected};\n --bg-focus: var(--nano-color-base, #{nano-color(primary, tint)});\n --bg-disabled: none;\n --color: var(--input-text-color, #{$input-text-color});\n --color-selected: var(--nano-color-base, #{nano-color(primary, base)});\n --color-focus: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n --color-disabled: #{map.get($colors, palegrey)};\n --opt-icon-size: 1.6em;\n\n display: block;\n color: var(--color);\n overflow: hidden;\n font-size: 14px;\n font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n outline: none;\n}\n\n.option {\n $self: &;\n\n position: relative;\n user-select: none;\n cursor: pointer;\n display: flex;\n align-items: stretch;\n width: 100%;\n background: var(--bg);\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-top) var(--padding-bottom);\n\n // focus\n :host(:focus) &:not(.option--disabled),\n :host &.option--selected {\n outline: none;\n background: var(--bg-selected);\n color: var(--color-selected);\n }\n\n :host(:focus) &:not(.option--disabled) {\n background: var(--bg-focus);\n color: var(--color-focus);\n }\n\n // disabled\n &.option--disabled {\n outline: none;\n color: var(--color-disabled);\n cursor: not-allowed;\n background: var(--bg-disabled);\n }\n\n // no value\n &.option--novalue {\n font-style: italic;\n opacity: 0.7;\n }\n\n &__label {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n }\n\n &__start {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n\n ::slotted(nano-icon) {\n font-size: var(--opt-icon-size);\n }\n\n ::slotted(:last-child) {\n margin-inline-end: 0.5em;\n }\n }\n\n &__end {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n\n ::slotted(nano-icon) {\n font-size: var(--opt-icon-size);\n }\n\n ::slotted(:first-child) {\n margin-inline-start: 0.5em;\n }\n }\n\n &__check {\n visibility: hidden;\n display: flex;\n position: absolute;\n inset-inline-start: 0.6em;\n inset-block-start: calc(50% - 0.6em);\n align-items: center;\n font-size: 0.9em;\n\n #{$self}--selected:not(#{$self}--novalue) & {\n visibility: visible;\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n Host,\n State,\n Watch,\n Element,\n Listen,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { getDirectChildren } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\nimport type { OptionInterface } from '../../interface';\n\nlet optIds = 0;\n\n/\n Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n \n @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n /\n@Component({\n tag: 'nano-option',\n styleUrl: 'option.scss',\n shadow: true,\n})\nexport class Option implements OptionInterface {\n private optId = `nano-option-${optIds++}`;\n @Element() host: HTMLNanoOptionElement;\n @State() hasFocus = false;\n\n constructor() {\n this.handleClick = debounce(this.handleClick.bind(this), 5);\n }\n\n // Public API\n\n /\n Value of the option\n /\n @Prop({ mutable: true, reflect: true }) value: string = '';\n\n @Watch('value')\n valueChanged() {\n if (!this.value \|\| !this.value.length) this.value = this.labelContent;\n }\n\n /\n Label of the option\n /\n @Prop({ mutable: true, reflect: true }) label: string = '';\n\n @Watch('label')\n labelChanged() {\n if (!this.label \|\| !this.label.length)\n this.label = this.labelContent.length ? this.labelContent : this.value;\n }\n\n /\n Whether this option is selected\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n Whether this option should be disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* You can add extra meta for this option. When displayed in a list, users\n * search / filter via extra related terms. Another usecase is 'endonyms'\n /\n @Prop() filterMeta: string = '';\n\n /* Fired when an option is selected /\n @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n // Event handlers\n\n // stop scrolling on select\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (e.key !== ' ' && e.key !== 'Enter') return;\n e.preventDefault();\n this.nanoSelect.emit(this.host);\n }\n\n private handleClick() {\n if (this.disabled) return;\n this.nanoSelect.emit(this.host);\n }\n\n // Private logic\n\n private get labelContent() {\n return getDirectChildren(this.host, ':not([slot])', false)\n .map((el) => el.textContent)\n .join(' ')\n .trim();\n }\n\n // Component lifecycle\n\n componentWillLoad() {\n this.valueChanged();\n this.labelChanged();\n }\n\n render() {\n return (\n <Host\n role=\"option\"\n aria-selected={this.selected ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <div\n onMouseDown={this.handleClick}\n id={this.optId}\n class={{\n option: true,\n 'option--selected': this.selected,\n 'option--disabled': this.disabled,\n 'option--novalue': !this.value,\n }}\n >\n <div part=\"check-icon\" class=\"option__check\">\n <slot name=\"check-icon\">\n <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n </slot>\n </div>\n <div part=\"start\" class=\"option__start\">\n <slot name=\"start\"></slot>\n </div>\n <div part=\"label\" class=\"option__label\">\n <slot>{this.label \|\| this.value}</slot>\n </div>\n <div part=\"end\" class=\"option__end\">\n <slot name=\"end\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"option.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,09DAA09D;;ACgB5+D,IAAI,MAAM,GAAG,CAAC,CAAC;MAeF,MAAM;EAKjB;;;;;IAJQ,UAAK,GAAG,eAAe,MAAM,EAAE,EAAE,CAAC;oBAEtB,KAAK;iBAW+B,EAAE;iBAUF,EAAE;oBAWb,KAAK;oBAKL,KAAK;sBAKrB,EAAE;IAvC7B,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;GAC7D;EAUD,YAAY;IACV,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;MAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;GACvE;EAQD,YAAY;IACV,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;MACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;GAC1E;;;EAwBD,aAAa,CAAC,CAAgB;IAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;MAAE,OAAO;IAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEO,WAAW;IACjB,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;;EAID,IAAY,YAAY;IACtB,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC;OACxD,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,WAAW,CAAC;OAC3B,IAAI,CAAC,GAAG,CAAC;OACT,IAAI,EAAE,CAAC;GACX;;EAID,iBAAiB;IACf,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,IAE/C,WACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,KAAK,EAAE;QACL,MAAM,EAAE,IAAI;QACZ,kBAAkB,EAAE,IAAI,CAAC,QAAQ;QACjC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;QACjC,iBAAiB,EAAE,CAAC,IAAI,CAAC,KAAK;OAC/B,IAED,WAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,eAAe,IAC1C,YAAM,IAAI,EAAC,YAAY,IACrB,iBAAW,IAAI,EAAC,aAAa,iBAAa,MAAM,GAAG,CAC9C,CACH,EACN,WAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,IACrC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,WAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,IACrC,gBAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAQ,CACnC,EACN,WAAK,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,aAAa,IACjC,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/option/option.scss?tag=nano-option&encapsulation=shadow","./src/components/option/option.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /*\n @prop --padding-top: Defaults to #{$spacing-small};\n * @prop --padding-bottom: Defaults to #{$spacing-small};\n * @prop --padding-start: Defaults to #{$spacing-small};\n * @prop --padding-end: Defaults to #{$spacing-small};\n\n * @prop --bg: default background. Defaults to none;\n * @prop --bg-selected: background when selected. Defaults to #{$select-opt-selected};\n * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n * @prop --bg-disabled: background when disabled. Defaults to none;\n\n * @prop --color: default text color. Defaults to var(--input-text-color, #{$input-text-color});\n * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n * @prop --color-disabled: text color when disabled. Defaults to #{map.get($colors, palegrey)};\n\n * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n /\n\n --bg: none;\n --bg-selected: #{$select-opt-selected};\n --bg-focus: var(--nano-color-base, #{nano-color(primary, tint)});\n --bg-disabled: none;\n --color: var(--input-text-color, #{$input-text-color});\n --color-selected: var(--nano-color-base, #{nano-color(primary, base)});\n --color-focus: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n --color-disabled: #{map.get($colors, palegrey)};\n --opt-icon-size: 1.6em;\n\n display: block;\n color: var(--color);\n overflow: hidden;\n font-size: 14px;\n font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n outline: none;\n}\n\n.option {\n $self: &;\n\n position: relative;\n user-select: none;\n cursor: pointer;\n display: flex;\n align-items: stretch;\n width: 100%;\n background: var(--bg);\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-top) var(--padding-bottom);\n\n // focus\n :host(:focus) &:not(.option--disabled),\n :host &.option--selected {\n outline: none;\n background: var(--bg-selected);\n color: var(--color-selected);\n }\n\n :host(:focus) &:not(.option--disabled) {\n background: var(--bg-focus);\n color: var(--color-focus);\n }\n\n // disabled\n &.option--disabled {\n outline: none;\n color: var(--color-disabled);\n cursor: not-allowed;\n background: var(--bg-disabled);\n }\n\n // no value\n &.option--novalue {\n font-style: italic;\n opacity: 0.7;\n }\n\n &__label {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n }\n\n &__start {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n\n ::slotted(nano-icon) {\n font-size: var(--opt-icon-size);\n }\n\n ::slotted(:last-child) {\n margin-inline-end: 0.5em;\n }\n }\n\n &__end {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n\n ::slotted(nano-icon) {\n font-size: var(--opt-icon-size);\n }\n\n ::slotted(:first-child) {\n margin-inline-start: 0.5em;\n }\n }\n\n &__check {\n visibility: hidden;\n display: flex;\n position: absolute;\n inset-inline-start: 0.6em;\n inset-block-start: calc(50% - 0.6em);\n align-items: center;\n font-size: 0.9em;\n\n #{$self}--selected:not(#{$self}--novalue) & {\n visibility: visible;\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n Host,\n State,\n Watch,\n Element,\n Listen,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { getDirectChildren } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\nimport type { OptionInterface } from '../../interface';\n\nlet optIds = 0;\n\n/\n Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n \n @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n /\n@Component({\n tag: 'nano-option',\n styleUrl: 'option.scss',\n shadow: true,\n})\nexport class Option implements OptionInterface {\n private optId = `nano-option-${optIds++}`;\n @Element() host: HTMLNanoOptionElement;\n @State() hasFocus = false;\n\n constructor() {\n this.handleClick = debounce(this.handleClick.bind(this), 5);\n }\n\n // Public API\n\n /\n Value of the option\n /\n @Prop({ mutable: true, reflect: true }) value: string = '';\n\n @Watch('value')\n valueChanged() {\n if (!this.value \|\| !this.value.length) this.value = this.labelContent;\n }\n\n /\n Label of the option\n /\n @Prop({ mutable: true, reflect: true }) label: string = '';\n\n @Watch('label')\n labelChanged() {\n if (!this.label \|\| !this.label.length)\n this.label = this.labelContent.length ? this.labelContent : this.value;\n }\n\n /\n Whether this option is selected\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n Whether this option should be disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* You can add extra meta for this option. When displayed in a list, users\n * search / filter via extra related terms. Another usecase is 'endonyms'\n /\n @Prop() filterMeta: string = '';\n\n /* Fired when an option is selected /\n @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n // Event handlers\n\n // stop scrolling on select\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (e.key !== ' ' && e.key !== 'Enter') return;\n e.preventDefault();\n this.nanoSelect.emit(this.host);\n }\n\n private handleClick() {\n if (this.disabled) return;\n this.nanoSelect.emit(this.host);\n }\n\n // Private logic\n\n private get labelContent() {\n return getDirectChildren(this.host, ':not([slot])', false)\n .map((el) => el.textContent)\n .join(' ')\n .trim();\n }\n\n // Component lifecycle\n\n componentWillLoad() {\n this.valueChanged();\n this.labelChanged();\n }\n\n render() {\n return (\n <Host\n role=\"option\"\n aria-selected={this.selected ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <div\n onMouseDown={this.handleClick}\n id={this.optId}\n class={{\n option: true,\n 'option--selected': this.selected,\n 'option--disabled': this.disabled,\n 'option--novalue': !this.value,\n }}\n >\n <div part=\"check-icon\" class=\"option__check\">\n <slot name=\"check-icon\">\n <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n </slot>\n </div>\n <div part=\"start\" class=\"option__start\">\n <slot name=\"start\"></slot>\n </div>\n <div part=\"label\" class=\"option__label\">\n <slot>{this.label \|\| this.value}</slot>\n </div>\n <div part=\"end\" class=\"option__end\">\n <slot name=\"end\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/progress-bar.js CHANGED Viewed

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const progressBarCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--height:1em;--track-color:rgba(var(--nano-track-rgb, 228, 230, 232), 1);--indicator-color:rgba(var(--nano-indicator-rgb, 84, 140, 175), 1);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{height:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;-webkit-transition:0.4s width, 0.4s background-color;transition:0.4s width, 0.4s background-color;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform-origin:left;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{-webkit-animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@-webkit-keyframes indeterminate{0%{scale:1 1;-webkit-transform:translateX(-100%) translateZ(0);transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;-webkit-transform:translateX(100%) translateZ(0);transform:translateX(100%) translateZ(0)}}@keyframes indeterminate{0%{scale:1 1;-webkit-transform:translateX(-100%) translateZ(0);transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;-webkit-transform:translateX(100%) translateZ(0);transform:translateX(100%) translateZ(0)}}";
+const progressBarCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--height:1em;--track-color:rgba(var(--nano-track-rgb, 228, 230, 232), 1);--indicator-color:rgba(var(--nano-indicator-rgb, 84, 140, 175), 1);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{height:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";
 const ProgressBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -19,7 +19,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         'progress-bar': true,
         'progress-bar--indeterminate': this.indeterminate,
       }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { part: "indicator", class: "progress-bar__indicator", style: {
-        width: `${this.value}%`,
+        width: !this.indeterminate ? `${this.value}%` : undefined,
       } }, h("span", { part: "label", class: "progress-bar__label" }, h("slot", null, !this.indeterminate && this.showPercent ? `${this.value}%` : '')))));
   }
   get host() { return this; }

package/dist/components/progress-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"progress-bar.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,~~onDAAonD~~;;~~MCiB9nD~~,WAAW;;;;;iBAIN,CAAC;yBAGO,KAAK;uBAGP,KAAK;;EAE3B,MAAM;IACJ,QACE,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;OAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,IAErD,WACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;QACL,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG;~~OACxB~~,IAED,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5C,gBACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,EAAE,CAC3D,CACF,CACH,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","./src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgba(#{$progress-track-color-rgb}, 1);\n * @prop --indicator-color: The indicator color. Default rgba(#{$progress-indicator-color-rgb}, 1);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n /\n:host {\n --height: 1em;\n --track-color: rgba(#{$progress-track-color-rgb}, 1);\n --indicator-color: rgba(#{$progress-indicator-color-rgb}, 1);\n --label-color: var(--nano-color-white, white);\n\n display: block;\n}\n\n.progress-bar {\n position: relative;\n background-color: var(--track-color);\n height: var(--height);\n border-radius: $layer-border-radius;\n overflow: hidden;\n}\n\n.progress-bar__indicator {\n height: 100%;\n font-size: 0.75em;\n background-color: var(--indicator-color);\n color: var(--label-color);\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n transition: 0.4s width, 0.4s background-color;\n transform: translateZ(0);\n user-select: none;\n transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n 0% {\n scale: 1 1;\n transform: translateX(-100%) translateZ(0);\n }\n\n 75%,\n 100% {\n scale: 1 1;\n transform: translateX(100%) translateZ(0);\n }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n/\n Used to show the status of an ongoing operation.\n \n @slot - A label to show inside the indicator.\n \n @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n /\n\n@Component({\n tag: 'nano-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true,\n})\nexport class ProgressBar {\n @Element() host: HTMLNanoProgressBarElement;\n\n /* The progress bar's percentage, 0 to 100. /\n @Prop() value = 0;\n\n /* When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. /\n @Prop() indeterminate = false;\n\n /* Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot. */\n @Prop() showPercent = false;\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n }}\n role=\"progressbar\"\n title={this.host.title \|\| undefined}\n aria-label=\"Progress\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.indeterminate ? null : this.value}\n >\n <div\n part=\"indicator\"\n class=\"progress-bar__indicator\"\n style={{\n width: `${this.value}~~%`,\~~n }}\n >\n <span part=\"label\" class=\"progress-bar__label\">\n <slot>\n {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n </slot>\n </span>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"progress-bar.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,8iCAA8iC;;MCiBxjC,WAAW;;;;;iBAIN,CAAC;yBAGO,KAAK;uBAGP,KAAK;;EAE3B,MAAM;IACJ,QACE,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;OAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,IAErD,WACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;QACL,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,SAAS;OAC1D,IAED,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5C,gBACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,EAAE,CAC3D,CACF,CACH,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","./src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgba(#{$progress-track-color-rgb}, 1);\n * @prop --indicator-color: The indicator color. Default rgba(#{$progress-indicator-color-rgb}, 1);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n /\n:host {\n --height: 1em;\n --track-color: rgba(#{$progress-track-color-rgb}, 1);\n --indicator-color: rgba(#{$progress-indicator-color-rgb}, 1);\n --label-color: var(--nano-color-white, white);\n\n display: block;\n}\n\n.progress-bar {\n position: relative;\n background-color: var(--track-color);\n height: var(--height);\n border-radius: $layer-border-radius;\n overflow: hidden;\n}\n\n.progress-bar__indicator {\n height: 100%;\n font-size: 0.75em;\n background-color: var(--indicator-color);\n color: var(--label-color);\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n transition: 0.4s width, 0.4s background-color;\n transform: translateZ(0);\n user-select: none;\n transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n 0% {\n scale: 1 1;\n transform: translateX(-100%) translateZ(0);\n }\n\n 75%,\n 100% {\n scale: 1 1;\n transform: translateX(100%) translateZ(0);\n }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n/\n Used to show the status of an ongoing operation.\n \n @slot - A label to show inside the indicator.\n \n @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n /\n\n@Component({\n tag: 'nano-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true,\n})\nexport class ProgressBar {\n @Element() host: HTMLNanoProgressBarElement;\n\n /* The progress bar's percentage, 0 to 100. /\n @Prop() value = 0;\n\n /* When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. /\n @Prop() indeterminate = false;\n\n /* Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot. */\n @Prop() showPercent = false;\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n }}\n role=\"progressbar\"\n title={this.host.title \|\| undefined}\n aria-label=\"Progress\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.indeterminate ? null : this.value}\n >\n <div\n part=\"indicator\"\n class=\"progress-bar__indicator\"\n style={{\n width: !this.indeterminate ? `${this.value}%` : undefined,\n }}\n >\n <span part=\"label\" class=\"progress-bar__label\">\n <slot>\n {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n </slot>\n </span>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/resize-observe.js CHANGED Viewed

@@ -2,14 +2,14 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { proxyCustomElement, HTMLElement, createEvent, readTask, h, Host } from '@stencil/core/internal/client';
-import { d as debounce } from './throttle.js';
 const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
     this.nanoResizeStateChange = createEvent(this, "nanoResizeStateChange", 7);
+    this.nanoResizeObserverReady = createEvent(this, "nanoResizeObserverReady", 7);
+    this.isReady = false;
     this.assessChanges = () => {
       if (!this.currentWidth && !this.currentHeight)
         return;
@@ -44,6 +44,13 @@ const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.classNames = [];
     this.states = undefined;
   }
+  classNameChange() {
+    this.host.className = this.classNames.join(' ');
+    if (!this.isReady && this.classNames.includes('is-ready')) {
+      this.isReady = true;
+      this.nanoResizeObserverReady.emit();
+    }
+  }
   dimensionChanged() {
     this.assessChanges();
   }
@@ -81,10 +88,14 @@ const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         if (!state.states)
           return;
         state.states.map((st) => {
-          if (state.applied)
+          if (state.applied) {
             classNames.push(st);
-          else
+            classNames = classNames.filter((cl) => cl !== 'not-' + st);
+          }
+          else {
+            classNames.push('not-' + st);
             classNames = classNames.filter((cl) => cl !== st);
+          }
         });
       });
     });
@@ -109,10 +120,8 @@ const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
     this.ro.observe(this.host);
   }
-  connectedCallback() {
-    this.assessChanges = debounce(this.assessChanges, 50);
-  }
-  componentDidLoad() {
+  componentWillLoad() {
+    this.classNames = Array.from(this.host.classList);
     if (!this.states)
       return;
     if (!this.currentWidth || !this.currentHeight) {
@@ -123,24 +132,25 @@ const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       });
     }
     this.statesChanged();
+    // set all class as 'not-' by deafult
+    this.applyChanges(this.appliedStates);
   }
   disconnectedCallback() {
     if (this.ro)
       this.ro.disconnect();
   }
   render() {
-    return (h(Host, { class: {
-        [this.classNames.join(' ')]: true,
-      } }, h("slot", null)));
+    return (h(Host, null, h("slot", null)));
   }
   get host() { return this; }
   static get watchers() { return {
+    "classNames": ["classNameChange"],
     "currentHeight": ["dimensionChanged"],
     "currentWidth": ["dimensionChanged"],
     "states": ["statesChanged"]
   }; }
-  static get style() { return ":host { display: inline-block } div { height: 100%; }"; }
-}, [1, "nano-resize-observe", {
+  static get style() { return "nano-resize-observe { display: block }"; }
+}, [4, "nano-resize-observe", {
     "states": [1],
     "currentWidth": [32],
     "currentHeight": [32],

package/dist/components/resize-observe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"resize-observe.js","mappings":"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","names":[],"sources":["./src/components/resize-observe/resize-observe.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 { debounce } from '../../utils/throttle';\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. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n /\n@Component({\n tag: 'nano-resize-observe',\n shadow: true,\n styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n private ro: ResizeObserver;\n private appliedStates: StateMaps;\n\n @Element() host: HTMLNanoResizeObserveElement;\n @State() currentWidth: number;\n @State() currentHeight: number;\n @State() classNames: string[] = [];\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 /* A resize break point is switched on or off */\n @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\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 if (!this.ro) this.attachRO();\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 assessChanges = () => {\n if (!this.currentWidth && !this.currentHeight) return;\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 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) classNames.push(st);\n else classNames = classNames.filter((cl) => cl !== st);\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 this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n });\n this.ro.observe(this.host);\n }\n\n connectedCallback() {\n this.assessChanges = debounce(this.assessChanges, 50);\n }\n\n componentDidLoad() {\n if (!this.states) return;\n if (!this.currentWidth \|\| !this.currentHeight) {\n readTask(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = width;\n this.currentHeight = height;\n });\n }\n this.statesChanged();\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host\n class={{\n [this.classNames.join(' ')]: true,\n }}\n >\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"resize-observe.js","mappings":"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","names":[],"sources":["./src/components/resize-observe/resize-observe.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';\n// import { debounce } from '../../utils/throttle';\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. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n /\n@Component({\n tag: 'nano-resize-observe',\n styles: `nano-resize-observe { display: block }`,\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\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 /* 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 /* 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 @Watch('currentHeight')\n @Watch('currentWidth')\n dimensionChanged() {\n this.assessChanges();\n }\n\n @Watch('states')\n statesChanged() {\n if (!this.states) return;\n if (!this.ro) this.attachRO();\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 assessChanges = () => {\n if (!this.currentWidth && !this.currentHeight) return;\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 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 this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n });\n this.ro.observe(this.host);\n }\n\n componentWillLoad() {\n this.classNames = Array.from(this.host.classList);\n if (!this.states) return;\n\n if (!this.currentWidth \|\| !this.currentHeight) {\n readTask(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = width;\n this.currentHeight = height;\n });\n }\n this.statesChanged();\n // set all class as 'not-' by deafult\n this.applyChanges(this.appliedStates);\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/select.js CHANGED Viewed

@@ -13,7 +13,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './menu.js';
 import { d as defineCustomElement$1 } from './option.js';
-const selectCss = ".sc-nano-select-h{box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{box-sizing:border-box}[hidden].sc-nano-select{display:none !important}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-select{min-inline-size:100%;display:block}.form-ctrl.has-helper-end.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-select{opacity:1}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select{-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper.sc-nano-select{display:none}.form-ctrl__wrapper.sc-nano-select{display:block}label.sc-nano-select,.form-ctrl__more.sc-nano-select,.form-ctrl__error.sc-nano-select,.form-ctrl__helper.sc-nano-select{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.form-ctrl__more.visually-hide.sc-nano-select,.form-ctrl__error.visually-hide.sc-nano-select,.form-ctrl__helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-select{padding-block:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;inset-block-start:50%;-webkit-transition:all 0.125s ease-in;transition:all 0.125s ease-in;opacity:1}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:1}.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:50%}.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);-webkit-padding-after:var(--padding-bottom);padding-block-end:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{margin-block:unset;-webkit-margin-end:5px;margin-inline-end:5px;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-block:unset;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--invalid)}.has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:1}.form-ctrl__more.sc-nano-select{block-size:1em;position:relative;margin-block:4px var(--padding-bottom);margin-inline:3px 0}.form-ctrl__helper.sc-nano-select,.form-ctrl__error.sc-nano-select{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-select{opacity:0}.form-ctrl__helper-end.sc-nano-select{-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;min-inline-size:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .form-ctrl__error.sc-nano-select{opacity:1}.form-ctrl__input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);inline-size:100%;padding:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1;max-inline-size:100%}.form-ctrl__clear-btn.sc-nano-select,.form-ctrl__slot-end.sc-nano-select,.form-ctrl__slot-start.sc-nano-select,.form-ctrl__slot-value-end.sc-nano-select{--nano-icon-size:1.4em;margin-block:0;margin-inline:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;inline-size:auto}.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select{display:none}.form-ctrl__slot-start.sc-nano-select-s>*,.form-ctrl__slot-start .sc-nano-select-s>*,.form-ctrl__slot-end.sc-nano-select-s>*,.form-ctrl__slot-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;padding-inline:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;block-size:100%;z-index:1}.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;inline-size:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{padding-block:0;padding-inline:var(--padding-start) var(--padding-end);opacity:1;inline-size:auto}.form-ctrl__clear-btn.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, \"currentColor\");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, \"currentColor\");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.select__native-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding:unset;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em;min-height:2.5em}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;-webkit-padding-before:1.4em;padding-block-start:1.4em}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::selection{background:transparent}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.select__native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.select__native-input.sc-nano-select::-webkit-search-decoration,.select__native-input.sc-nano-select::-webkit-search-cancel-button,.select__native-input.sc-nano-select::-webkit-search-results-button,.select__native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.select__native-input.sc-nano-select:invalid{-webkit-box-shadow:none;box-shadow:none}.select__native-input.sc-nano-select::-ms-clear,.select__native-input.sc-nano-select::-ms-reveal{display:none}.select__native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select{line-height:1.5em;padding-block:var(--padding-top) var(--padding-bottom);white-space:pre-wrap}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-webkit-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-moz-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select:-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select{-webkit-padding-before:1.8em;padding-block-start:1.8em}.masked.sc-nano-select-h .select__native-input.sc-nano-select{opacity:0;position:absolute;inset-inline-start:0;inset-block-start:0}.select__mask.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);pointer-events:none;line-height:2.5em;min-height:2.5em}.select__multi-wrap.sc-nano-select{-webkit-padding-before:0;padding-block-start:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:var(--padding-bottom);padding-block-end:var(--padding-bottom);-webkit-padding-start:0;padding-inline-start:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{-webkit-padding-before:1em;padding-block-start:1em}.select__multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-padding-before:var(--padding-top);padding-block-start:var(--padding-top);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-after:0;padding-block-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);min-width:50px;width:100%;max-height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;-webkit-box-flex:0;-ms-flex:0;flex:0;position:relative;min-height:calc(2.5em - var(--padding-bottom));-webkit-box-sizing:border-box;box-sizing:border-box}.select__multi-input.sc-nano-select:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.select__multi-value.sc-nano-select{-webkit-margin-before:var(--padding-bottom);margin-block-start:var(--padding-bottom);-webkit-margin-start:var(--padding-start);margin-inline-start:var(--padding-start);-webkit-margin-end:-3px;margin-inline-end:-3px;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.35em 0.5em;line-height:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--input-font-size);letter-spacing:1px}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1.2}.select__multi-value-remove.sc-nano-select{background-position:center;-webkit-padding-start:0.5em;padding-inline-start:0.5em;margin:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;inset-block-start:0;font-size:1em}.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.form-ctrl__float-label.sc-nano-select{width:calc(100% - (1em + var(--padding-start) * 2))}.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{-webkit-transform:translateY(21%);transform:translateY(21%);inset-block-start:0}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}";
+const selectCss = ".sc-nano-select-h{box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{box-sizing:border-box}[hidden].sc-nano-select{display:none !important}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-select{min-inline-size:100%;display:block}.form-ctrl.has-helper-end.sc-nano-select{display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-select{opacity:1}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select{flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper.sc-nano-select{display:none}.form-ctrl__wrapper.sc-nano-select{display:block}label.sc-nano-select,.form-ctrl__more.sc-nano-select,.form-ctrl__error.sc-nano-select,.form-ctrl__helper.sc-nano-select{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.form-ctrl__more.visually-hide.sc-nano-select,.form-ctrl__error.visually-hide.sc-nano-select,.form-ctrl__helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-select{padding-block:0;padding-inline-end:0;padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;transform:translateY(-50%);transform-origin:top left;inset-block-start:50%;transition:all 0.125s ease-in;opacity:1}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:1}.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:50%}.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-block-end:var(--padding-bottom);line-height:1;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{margin-block:unset;margin-inline-end:5px;margin-inline-start:0;opacity:0;-webkit-appearance:none;appearance:none;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-block:unset;margin-inline-end:0;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--invalid)}.has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:1}.form-ctrl__more.sc-nano-select{block-size:1em;position:relative;margin-block:4px var(--padding-bottom);margin-inline:3px 0}.form-ctrl__helper.sc-nano-select,.form-ctrl__error.sc-nano-select{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-select{opacity:0}.form-ctrl__helper-end.sc-nano-select{flex:1 1 30%;min-inline-size:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .form-ctrl__error.sc-nano-select{opacity:1}.form-ctrl__input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);inline-size:100%;padding:0 !important;position:relative;flex:1 0 auto;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:flex;align-items:stretch;flex:1;max-inline-size:100%}.form-ctrl__clear-btn.sc-nano-select,.form-ctrl__slot-end.sc-nano-select,.form-ctrl__slot-start.sc-nano-select,.form-ctrl__slot-value-end.sc-nano-select{--nano-icon-size:1.4em;margin-block:0;margin-inline:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:flex;align-items:stretch;inline-size:auto}.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select{display:none}.form-ctrl__slot-start.sc-nano-select-s>*,.form-ctrl__slot-start .sc-nano-select-s>*,.form-ctrl__slot-end.sc-nano-select-s>*,.form-ctrl__slot-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;padding-inline:unset;padding-inline-start:var(--padding-start);padding-inline-end:var(--padding-end);font-size:1em;align-items:center;display:flex;block-size:100%;z-index:1}.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;inline-size:0;-webkit-appearance:none;appearance:none;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{padding-block:0;padding-inline:var(--padding-start) var(--padding-end);opacity:1;inline-size:auto}.form-ctrl__clear-btn.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, \"currentColor\");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, \"currentColor\");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.select__native-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding:unset;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;appearance:none;margin:0;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;padding-block-start:1.4em}.select__native-input.sc-nano-select::selection{background:transparent}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.select__native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.select__native-input.sc-nano-select::-webkit-search-decoration,.select__native-input.sc-nano-select::-webkit-search-cancel-button,.select__native-input.sc-nano-select::-webkit-search-results-button,.select__native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.select__native-input.sc-nano-select:invalid{box-shadow:none}.select__native-input.sc-nano-select::-ms-clear,.select__native-input.sc-nano-select::-ms-reveal{display:none}.select__native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select{line-height:1.5em;padding-block:var(--padding-top) var(--padding-bottom);white-space:pre-wrap}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select{padding-block-start:1.8em}.masked.sc-nano-select-h .select__native-input.sc-nano-select{opacity:0;position:absolute;inset-inline-start:0;inset-block-start:0}.select__mask.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);pointer-events:none;line-height:2.5em;min-height:2.5em}.select__multi-wrap.sc-nano-select{padding-block:0 var(--padding-bottom);padding-inline:0 0;display:flex;flex:1;flex-wrap:wrap;overflow:hidden;align-items:flex-start}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{padding-block-start:1em}.select__multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-bottom) 0;min-width:50px;width:100%;max-height:100%;-webkit-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;flex:0;position:relative;box-sizing:border-box;line-height:calc(2.5em - var(--padding-bottom));height:calc(2.5em - var(--padding-bottom))}.select__multi-input.sc-nano-select:last-child{flex:1}.select__multi-value.sc-nano-select{margin-block:var(--padding-bottom) 0;margin-inline:var(--padding-start) -3px;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.35em 0.5em;max-width:100%;display:flex;align-items:center;font-size:var(--input-font-size);letter-spacing:1px;max-height:calc(2.5em - 8px)}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1}.select__multi-value-remove.sc-nano-select{background-position:center;padding-inline-start:0.5em;margin:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;appearance:none;display:flex;align-items:center;inset-block-start:0;font-size:1em}.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.form-ctrl__float-label.sc-nano-select{width:calc(100% - (1em + var(--padding-start) * 2))}.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(21%);inset-block-start:0}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}";
 let selectIds = 0;
 const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {