npm - @nanoporetech-digital/components - Versions diffs - 7.9.1 → 8.0.0-alpha.0 - Mend

@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.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 (1783) hide show

package/dist/cjs/nano-global-search-results.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-global-search-results.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,0tWAA0tW,CAAC;AAC1vW,sCAAe,sBAAsB;;ACoBrC,MAAM,cAAc,GAClB,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,WAAW,IAAI,IAAI,CAAC,CAAC;MAclD,mBAAmB;;;;;IACtB,iBAAiB,CAAgC;IACjD,UAAU,CAAc;IACxB,aAAa,CAAoB;IACjC,EAAE,CAAiB;IAElB,cAAc,CAAc;IAC5B,UAAU,CAAyB;IACnC,YAAY,CAAS;IACrB,MAAM,CAAS;IACf,KAAK,CAAS;IACd,KAAK,CAAc;;;;;IAOnB,gBAAgB,CAAe;IAKxC,wBAAwB;QACtB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAC5D,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;KACpC;IAID,wBAAwB;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAC5C,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;KAC1C;IAID,sBAAsB;QACpB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO;QACrD,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,KAAK,WAAW,EAAE;YACjD,IAAI,CAAC,UAAU,CAAC,OAAO,GAAG,CAAC,cAAc,CAAC,CAAC;SAC5C;KACF;IAGD,oBAAoB,CAAC,CAAwC;QAC3D,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAKA,qBAAY,CAAC,iBAAiB,CAAC;YACpE,OAAO;QACT,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,MAAM,EAAE,CAAC;KACf;IAGD,qBAAqB,CAAC,CAAwC;QAC5D,MAAM,EACJ,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GACzB,GAAG,CAA0C,CAAC;QAE/C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAE1B,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAKA,qBAAY,CAAC,iBAAiB,CAAC;YACpE,OAAO;QAET,IAAI,CAAC,KAAK,GAAG;YACX,IAAI,EAAE,IAAI,CAAC,UAAU;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;QACF,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;KACpC;IAGD,aAAa,CAAC,CAAkD;QAC9D,IACE,CAAC;aACE,YAAY,EAAE;aACd,IAAI,CACH,CAAC,GAAgB,KACf,GAAG,CAAC,SAAS,IAAI,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CACzD;YACH,CAAC,CAAC,IAAI,CAAC,iBAAiB,EACxB;YACA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SACrB;KACF;IAGD,eAAe,CACb,CAGE;QAEFC,4BAAa,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAElE,IACE,CAAC,CAAC;aACC,YAAY,EAAE;aACd,IAAI,CAAC,CAAC,GAAgB,KAAK,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,aAAa,CAAC;YAEjE,OAAO;QAET,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACpD,sBAAsB,CACvB,CAAC;QACF,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;;QAGpC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE7B,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;YAC9D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;gBAC7B,IAAI,CAAC,gBAAgB,EAAE,CAAC;aACzB,CAAC,CAAC;SACJ,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;YAC9D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;gBAC7B,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB,CAAC,CAAC;SACJ,CAAC,CAAC;QAEH,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAClE,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC;gBACrC,CAAC,CAAC,eAAe,EAAE,CAAC;aACrB,CAAC,CAAC;SACJ;QAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAExE,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QAC/D,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,gBAAgB,CACzB,QAAQ,EACR,CAAC,CAAuC;gBACtC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;aACzC,CACF,CAAC;SACH;KACF;IAGD,qBAAqB,CAAC,CAA8C;QAClE,IAAI,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,UAAU,CAAC,EAAE;YAC/D,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACpD,sBAAsB,CACvB,CAAC;SACH;QACD,IAAI,CAAC,IAAI,CAAC,iBAAiB;YAAE,OAAO;QACpC,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC;;QAGzC,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACtE,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;;QAGnE,SAAS,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;YACxD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YAC1D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACxD,CAAC,CAAC;;QAGH,SAAS,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;YACnD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YAC/C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;SAC7C,CAAC,CAAC;;QAGH,SAAS,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;YAC/D,IAAI,CAAC,aAAa,GAAG,IAAyB,CAAC;YAC/C,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACzD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;SACvD,CAAC,CAAC;;QAGH,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG;YACf,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YAChD,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC9C,CAAC,CAAC;KACJ;;IAID,MAAM,WAAW;QACf,IAAI,CAAC,MAAM,EAAE,CAAC;KACf;IAEO,WAAW,GAAG,CAAC,CAAuC;QAC5D,MAAM,GAAG,GAAgB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QACrD,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,KAAK,GAAG,IAAI,GAAG,EAAE;YACnCA,4BAAa,CAAC,SAAS,CAAC;gBACtB,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK;gBAChC,SAAS,EAAE,gDAAgD;gBAC3D,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO;gBACpC,SAAS,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC;gBAC9B,SAAS,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;aAC9C,CAAC,CAAC;SACJ;KACF,CAAC;IAEM,gBAAgB,GAAG;QACzB,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACtC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QACtD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACxC,UAAU,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;KAC/C,CAAC;IAEM,iBAAiB,GAAG,CAAC,CAAuC;QAClE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;KACxE,CAAC;IAEM,QAAQ,GAAG,CAAC,CAAuC;QACzD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;QACpC,MAAM,GAAG,MAAM,KAAK,aAAa,GAAG,cAAc,GAAG,MAAM,CAAC;QAC5D,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;QAE9B,MAAM,MAAM,GAAiC,IAAI,CAAC,UAAU,CAAC,aAAa,CACxE,yCAAyC,CAC1C,CAAC;QACF,IAAI,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE;YACvC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;SACpE;KACF,CAAC;IAEM,WAAW,CAAC,EAAE;QACpB,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;KAChD;IAEO,MAAM,GAAG;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QACjD,IAAI,WAAW,CAAC,gBAAgB;YAAE,OAAO;QAEzC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC;QAClC,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,KAAK,CAAC;KACrC,CAAC;IAEM,YAAY,CAAC,KAAK,EAAE,MAAM;QAChC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;KAC9C;IAEO,gBAAgB;QACtB,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;KACjC;IAEO,YAAY;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAC7B,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC;QAChC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACzC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;QACvD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;QAClC,UAAU,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;KAClD;IAEO,gBAAgB,CAAC,IAAa;QACpC,IAAI,IAAI;YACN,IAAI,CAAC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,CACtD,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CACnC,CAAC;;YACC,IAAI,CAAC,UAAU,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;KAC7E;IAED,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAED,gBAAgB;QACd,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;YAAE,OAAO;QAEtC,IAAI,CAAC,EAAE,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO;YACnC,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK;oBAAE,OAAO;gBACrC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;aAC7C;SACF,CAAC,CAAC;QACH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC1B;IAED,MAAM;QACJ,QACEC,WAACC,UAAI,qDACH,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,YAAY,GAAG,GAAG;gBAC9B,4BAA4B,EAAE,IAAI;aACnC,EACD,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,KAAK,KAAK,GAAG,KAAK,GAAG,SAAS,IAE5DD,8EACE,OAAO,EAAC,SAAS,EACjB,WAAW,EAAC,eAAe,EAC3B,KAAK,EAAC,iDAAiD,EACvD,GAAG,EAAE,CAAC,GAAG,KAAK,qBAAqB,CAAC,OAAO,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,CAAC,EAClE,EAAE,EAAC,aAAa,IAEhBA,0EAAU,IAAI,EAAC,UAAU;mBAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAgYN,CAEE,EACXA,qEAAK,IAAI,EAAC,QAAQ,GAAO,EACzBA,uEAAQ,CACK,CACV,EACP;KACH;;;;;;;;;;;;;","names":["transformTag","searchInsight","h","Host"],"sources":["src/components/global-search-results/global-search-results.scss?tag=nano-global-search-results&encapsulation=shadow","src/components/global-search-results/global-search-results.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens/colours' as color;\n\n:host {\n display: block;\n flex: 1 1 100%;\n}\n\n.main-search {\n display: flex;\n background: white;\n font-size: 14px;\n min-block-size: calc(100vh - 63px);\n justify-content: space-between;\n\n &__wrap {\n /* autoprefixer: ignore next */\n display: contents;\n block-size: 100%;\n }\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n li {\n margin: 0;\n padding: 0;\n }\n\n button:not(.result__tags-tag) {\n appearance: none;\n border: none;\n background: none;\n position: relative;\n inset-block-start: -2px;\n }\n\n .icon-button {\n color: inherit;\n align-self: normal;\n padding: 9px 7px;\n cursor: pointer;\n display: flex;\n align-items: center;\n }\n\n &__topbar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin-block-end: 1em;\n\n &::after {\n content: '';\n inline-size: calc(100% - 30px);\n inset-inline-start: 30px;\n position: relative;\n border-block-end: 1px solid #e5eef1;\n padding-block-start: 0.9em;\n }\n }\n\n &__applied-filters {\n border: solid 1px map.get(color.$colors, lightgrey);\n text-transform: uppercase;\n border-radius: 3px;\n font-weight: bold;\n display: flex;\n align-items: center;\n line-height: 0.9;\n padding: 5px 5px 0;\n letter-spacing: 2px;\n flex-wrap: wrap;\n margin-block-end: 0.5rem;\n\n span {\n display: flex;\n align-items: center;\n }\n\n :host(.small) & {\n display: none;\n }\n }\n\n &__applied-nofilter {\n margin-inline: 0 5px;\n margin-block: 0 3px;\n padding-inline: 7px;\n padding-block: 10px;\n font-size: 12px;\n color: rgb(69 85 86 / 85%);\n }\n\n &__applied-filter {\n padding-inline: 8px 2px;\n padding-block: 5px 3px;\n margin-inline: 0 5px;\n margin-block: 0 5px;\n color: map.get(color.$colors, darkgrey);\n font-size: 11px;\n border-radius: 2px;\n border: solid 1px rgb(0 132 169 / 50%);\n background-color: rgb(0 132 169 / 20%);\n line-height: 1;\n\n .icon-button {\n padding-inline: 10px 4px;\n padding-block: 2px 1px;\n\n .nano-icon {\n pointer-events: none;\n }\n }\n }\n\n .topbar {\n &__bkbtn {\n position: relative;\n inset-inline-start: -7px;\n }\n\n &__query {\n :host(.small) & {\n display: none;\n }\n }\n\n &__filtering {\n display: flex;\n align-items: center;\n margin-block: 0;\n margin-inline: 1em 0;\n flex: 1;\n }\n\n &__order {\n min-inline-size: 175px;\n max-inline-size: 200px;\n margin-inline-start: auto;\n\n :host(.small) & {\n max-inline-size: 300px;\n }\n }\n\n .nano-select {\n opacity: 1;\n transition: 0.1s ease opacity;\n\n &:not(.hydrated) {\n opacity: 0;\n }\n }\n\n &__show-filters {\n margin-inline-start: 0.5em;\n text-transform: uppercase;\n display: none;\n flex-direction: column;\n align-items: center;\n\n .nano-icon {\n font-size: 20px;\n }\n\n :host(.small) & {\n display: flex;\n }\n }\n\n &__filter-count {\n inline-size: 12px;\n block-size: 12px;\n box-shadow: inset 0 3px 4px 0 rgb(0 0 0 / 20%);\n border: solid 1px #005c76;\n background-color: #005c76;\n color: white;\n font-size: 7px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n margin-block-end: 3px;\n }\n }\n\n &__results {\n font-size: 14px;\n padding: 1em 40px;\n color: rgb(69 85 86 / 85%);\n inline-size: 70%;\n block-size: 100%;\n\n @include mx.media-breakpoint-down('sm') {\n padding: 1em 20px;\n }\n\n :host(.small) & {\n inline-size: 100%;\n }\n }\n\n &__filters {\n outline: none;\n padding-inline: 0 40px;\n padding-block: 1.8em 1em;\n\n @include mx.media-breakpoint-down('sm') {\n padding-inline-end: 20px;\n }\n\n flex: 1 1 30%;\n box-sizing: border-box;\n\n :host(:not(.small)) & {\n max-inline-size: 350px;\n min-inline-size: 220px;\n }\n }\n}\n\n.filters {\n color: map.get(color.$colors, darkgrey);\n background: white;\n font-size: 14px;\n\n :host(.small) & {\n position: fixed;\n inline-size: 0;\n block-size: 0;\n z-index: 10;\n inset-block-start: 0;\n inset-inline-end: 0;\n transition: all 0s ease 0.5s;\n background: none;\n\n &.show {\n block-size: 100vh;\n inline-size: 100vw;\n transition: all 0s ease 0s;\n\n &::after {\n opacity: 1;\n }\n }\n\n &::after {\n content: '';\n background: rgb(0 0 0 / 50%);\n position: absolute;\n inset: 0;\n z-index: -1;\n opacity: 0;\n transition: 0.1s ease opacity;\n }\n }\n\n &__close-filters {\n display: none !important;\n font-size: 1.4em;\n\n :host(.small) & {\n display: inline-block !important;\n margin-inline: auto 0;\n margin-block: 0;\n }\n }\n\n &__old-posts {\n margin-inline-start: 1rem;\n }\n\n &-wrap {\n :host(.small) & {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n background: rgb(247 246 246);\n transform: translateX(100%);\n inline-size: 300px;\n min-inline-size: 200px;\n max-inline-size: 80vw;\n transition: transform 0.3s ease;\n padding: 1em;\n color: black;\n overflow: auto;\n block-size: 100vh;\n }\n }\n\n &.show {\n .filters-wrap {\n :host(.small) & {\n transform: translateX(0%);\n box-shadow: -3px -3px 7px rgb(0 0 0 / 10%);\n }\n }\n }\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n li {\n margin: 0;\n padding: 0;\n }\n\n .nano-details {\n --padding: 0.8em;\n\n margin: 0.8em 0;\n\n strong[slot] {\n display: block;\n padding-inline-start: calc(20px - 0.8em);\n }\n\n .nano-icon[slot='icon-end'] {\n padding-inline: calc(20px - 0.8em);\n }\n }\n\n li:last-child .filter-label {\n margin-block-end: 0;\n }\n\n .filter-label {\n display: flex;\n align-items: center;\n position: relative;\n margin: 0.5em 0;\n line-height: 1.4;\n z-index: 0;\n\n &::before {\n margin-inline: 0 1em;\n margin-block: 0;\n content: '';\n border: 1px solid map.get(color.$colors, blue);\n background: map.get(color.$colors, white);\n border-radius: 3px;\n block-size: 1em;\n inline-size: 1em;\n min-inline-size: 1em;\n min-block-size: 1em;\n display: inline-block;\n }\n\n &::after {\n @include mx.svg-background-image(\n \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\"\n );\n\n content: '';\n block-size: 0.7em;\n inline-size: 0.7em;\n position: absolute;\n inset-inline-start: 2px;\n inset-block-start: 50%;\n transform: translateY(-50%);\n z-index: 1;\n display: block;\n background-size: 100%;\n background-position: center center;\n background-repeat: no-repeat;\n }\n }\n\n .filter-cb {\n @include mx.visually-hide;\n\n &:checked + .filter-label {\n &::before {\n background: map.get(color.$colors, blue--darker);\n }\n }\n\n &:focus + .filter-label {\n &::before {\n box-shadow: 0 0 0 1px rgb(0 0 0 / 70%);\n }\n }\n }\n\n &-header {\n display: flex;\n align-items: center;\n border-block-end: 1px solid map.get(color.$colors, lightblue);\n padding-block-end: 0.5rem;\n margin-block-end: 0.5rem;\n }\n\n &-reset {\n color: map.get(color.$colors, blue);\n font-size: 12px;\n text-decoration: underline;\n margin-inline: auto 0;\n margin-block: 0;\n\n :host(.small) & {\n margin: 0;\n }\n }\n\n &-title {\n margin: 0;\n text-transform: uppercase;\n color: rgb(69 85 86 / 85%);\n font-weight: bold;\n font-size: 14px;\n\n :host(.small) & {\n display: none;\n }\n }\n}\n\n.result {\n text-decoration: none;\n display: flex;\n flex-flow: row wrap;\n padding-block-end: 14px;\n border-block-end: 1px solid map.get(color.$colors, lightblue);\n\n * {\n word-wrap: break-word;\n overflow-wrap: break-word;\n }\n\n &__title {\n margin: 1em 0 0.5em;\n inline-size: 70%;\n display: flex;\n\n a {\n color: lighten(map.get(color.$colors, blue), 4%);\n font-size: 14px;\n line-height: 1.43;\n text-decoration: none;\n font-weight: 600;\n }\n\n .nano-icon {\n margin-inline: 0 0.5em;\n margin-block: 0;\n min-inline-size: 20px;\n min-block-size: 20px;\n opacity: 0.8;\n }\n\n @include mx.media-breakpoint-down('lg') {\n inline-size: 100%;\n }\n }\n\n &__body {\n color: map.get(color.$colors, darkgrey);\n font-size: 13px;\n inline-size: 70%;\n text-decoration: none;\n\n @include mx.media-breakpoint-down('lg') {\n inline-size: 100%;\n }\n }\n\n &__pdf {\n display: inline-block;\n margin-inline-start: 0.5rem;\n color: map.get(color.$colors, palegrey);\n }\n\n &__meta {\n display: flex;\n flex-flow: row wrap;\n color: map.get(color.$colors, darkgrey);\n font-size: 11px;\n line-height: 13px;\n inline-size: 100%;\n align-items: center;\n\n > * {\n margin-block-start: 0.5rem;\n\n &:not(:last-child) {\n padding-inline-end: 0;\n\n &::after {\n content: '';\n block-size: 1rem;\n inline-size: 1px;\n background: #90c6e7;\n display: inline-block;\n margin-inline: 0.7rem;\n\n @include mx.media-breakpoint-down('sm') {\n display: none;\n }\n }\n }\n }\n\n @include mx.media-breakpoint-down('sm') {\n flex-flow: column;\n align-items: flex-start;\n }\n }\n\n &__tags {\n display: flex;\n flex-flow: row wrap;\n\n @include mx.media-breakpoint-down('sm') {\n padding-inline-start: 0;\n }\n\n &-tag {\n color: map.get(color.$colors, darkgrey);\n display: inline-block;\n font-size: 0.4375rem;\n letter-spacing: 1.4px;\n background: #fff;\n border-radius: 2px;\n text-transform: uppercase;\n padding: 0 4px 1px 5px;\n font-weight: 600;\n margin: 3px 0.25rem 0.25rem 0;\n border: 1px solid #b5aea7;\n white-space: nowrap;\n line-height: 13px;\n }\n }\n\n &__type {\n font-weight: 600;\n text-transform: capitalize;\n white-space: nowrap;\n display: flex;\n align-items: center;\n }\n\n &__date {\n display: flex;\n align-items: center;\n color: map.get(color.$colors, darkgrey);\n }\n\n &__source {\n color: map.get(color.$colors, darkgrey);\n padding-inline-end: 0.75rem;\n }\n\n &__authors {\n font-size: 12px;\n color: map.get(color.$colors, darkgrey);\n margin-block-end: 0.25rem;\n text-decoration: none;\n inline-size: 70%;\n }\n\n &__buttons {\n inline-size: 70%;\n margin-block-end: 0.5rem;\n\n &-button {\n background-color: map.get(color.$colors, blue);\n color: #fff;\n padding: 5px 8px 1px;\n border-radius: 4px;\n display: inline-block;\n font-size: 11px;\n text-decoration: none;\n border: none;\n }\n }\n\n &__promo {\n inline-size: 70%;\n margin-block-end: 0.5rem;\n text-decoration: none;\n color: map.get(color.$colors, darkgrey);\n\n &-box {\n inline-size: 300px;\n background-color: #e3eef1;\n padding: 12px 12px 8px 4px;\n display: flex;\n flex-flow: row nowrap;\n margin-block-start: 1rem;\n }\n\n &-bigdate {\n flex: 0 1 60px;\n text-align: center;\n font-weight: 600;\n color: map.get(color.$colors, blue);\n text-transform: uppercase;\n line-height: 1;\n letter-spacing: 1.5px;\n\n @include mx.media-breakpoint-down('lg') {\n inline-size: 100%;\n }\n\n span {\n color: map.get(color.$colors, darkgrey);\n display: block;\n }\n\n & ~ div {\n padding-inline-start: 1rem;\n border-inline-start: 1px solid #c5dbe1;\n }\n }\n\n &-date {\n font-size: 12px;\n }\n\n &-venue {\n font-size: 12px;\n }\n\n .nano-icon {\n color: map.get(color.$colors, blue);\n position: relative;\n inset-block-start: 1px;\n padding-inline-end: 2px;\n }\n }\n\n &__image {\n display: block;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n border-radius: 4px;\n position: relative;\n inline-size: 100%;\n block-size: 150px;\n margin-block-end: 0.5rem;\n\n @include mx.media-breakpoint-up('sm') {\n inline-size: 142px;\n block-size: 80px;\n }\n\n .nano-icon {\n position: absolute;\n inset-block-start: calc(50% - 0.75rem);\n inset-inline-start: calc(50% - 0.75rem);\n font-size: 1.5rem;\n color: #0084a9;\n\n --primary-color: #fff;\n --secondary-color: #0084a9;\n --primary-opacity: 1;\n\n @include mx.media-breakpoint-down('sm') {\n font-size: 3rem;\n inset-block-start: calc(50% - 1.5rem);\n inset-inline-start: calc(50% - 1.5rem);\n }\n }\n }\n\n &__video {\n &-body {\n inline-size: 70%;\n text-decoration: none;\n display: flex;\n flex-flow: row wrap;\n\n @include mx.media-breakpoint-down('lg') {\n inline-size: 100%;\n }\n\n @include mx.media-breakpoint-down('sm') {\n flex-flow: column;\n }\n\n .result__body {\n padding-inline-start: 1rem;\n display: flex;\n flex-direction: column;\n margin-block-end: 0;\n flex: 1;\n\n @include mx.media-breakpoint-down('sm') {\n padding-inline-start: 0;\n }\n\n p {\n display: inline;\n margin: 0;\n }\n\n u,\n li,\n a {\n text-decoration: none;\n }\n\n .result__meta {\n margin-block-start: 0.5rem;\n }\n\n .result__description {\n flex: 1 0 auto;\n }\n }\n }\n }\n}\n\n.search-empty {\n padding: 3rem 0;\n text-align: center;\n border-block-start: 1px solid #e5eef1;\n\n h2 {\n color: #455556;\n font-size: 1.125rem;\n margin-block-end: 0.5rem;\n }\n\n &-icon {\n font-size: 7rem;\n\n --icon-color: #e4e6e8;\n\n margin-block-end: 2rem;\n }\n}\n\n.search__highlight {\n background: #fbffbf;\n font-style: normal;\n}\n","import {\n Component,\n Host,\n Element,\n State,\n ComponentInterface,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport searchInsight from '../../utils/search-insights';\nimport {\n AlgoliaSearchResultDetail,\n IndexResult,\n SearchIndex,\n} from '../algolia/algolia-interface';\nimport { NanoAlgoliaResultsCustomEvent } from '../../components';\nimport { transformTag, h } from '../../utils/renderer';\n\nconst filterOldPosts =\n 'created > ' + Math.floor((Date.now() - 63115200000) / 1000);\n\n/**\n * Nanopore Global Search results component\n * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).\n * A shortcut / helper which combines algolia components.\n * There should only be one <nano-global-search-results> per page\n * and should be a direct child of <nano-global-nav>\n */\n@Component({\n tag: 'nano-global-search-results',\n styleUrl: 'global-search-results.scss',\n shadow: true,\n})\nexport class GlobalSearchResults implements ComponentInterface {\n private algoliaResultsEle: HTMLNanoAlgoliaResultsElement;\n private filtersDiv: HTMLElement;\n private openFilterBtn: HTMLButtonElement;\n private ro: ResizeObserver;\n\n @State() algoliaResults: IndexResult;\n @State() algoliaEle: HTMLNanoAlgoliaElement;\n @State() currentWidth: number;\n @State() apiKey: string;\n @State() appId: string;\n @State() index: SearchIndex;\n\n @Element() private el: HTMLNanoGlobalSearchResultsElement;\n\n /** Fired when the user clicks the 'back' button / closes the search panel\n * Calling `event.preventDefault()` will prevent it from being closed.\n */\n @Event() nanoSearchGoBack: EventEmitter;\n\n @Watch('algoliaEle')\n @Watch('apiKey')\n @Watch('appId')\n handleAlgoliaCredsChange() {\n if (!this.apiKey || !this.appId || !this.algoliaEle) return;\n this.algoliaEle.apiKey = this.apiKey;\n this.algoliaEle.appId = this.appId;\n }\n\n @Watch('algoliaEle')\n @Watch('index')\n handleAlgoliaIndexChange() {\n if (!this.index || !this.algoliaEle) return;\n this.algoliaEle.searchIndex = this.index;\n }\n\n @Watch('algoliaResults')\n @Watch('algoliaEle')\n handleAlgoliaEleChange() {\n if (!this.algoliaEle || !this.algoliaResults) return;\n if (this.algoliaResults.indexName === 'Community') {\n this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years\n }\n }\n\n @Listen('nanoSearchReset', { target: 'body' })\n handleGlobalNavReset(e: CustomEvent & { target: HTMLElement }) {\n if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))\n return;\n this.algoliaResultsEle = null;\n this.goback();\n }\n\n @Listen('nanoSearchResult', { target: 'body' })\n handleGlobalNavSearch(e: CustomEvent & { target: HTMLElement }) {\n const {\n detail: { meta, client },\n } = e as { detail: AlgoliaSearchResultDetail };\n\n this.apiKey = client.apiKey;\n this.appId = client.appId;\n\n if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))\n return;\n\n this.index = {\n name: meta.indexTitle,\n index: meta.index,\n domain: meta.domain,\n filters: meta.filters,\n replicas: meta.replicas,\n };\n this.algoliaEle.query = meta.query;\n }\n\n @Listen('nanoChange')\n handleReorder(e: CustomEvent & { target: HTMLNanoSelectElement }) {\n if (\n e\n .composedPath()\n .find(\n (ele: HTMLElement) =>\n ele.classList && ele.classList.contains('indexchange')\n ) &&\n !!this.algoliaResultsEle\n ) {\n this.changeOrder(e);\n }\n }\n\n @Listen('nanoResultsShown')\n attachListeners(\n e: NanoAlgoliaResultsCustomEvent<{\n meta: IndexResult;\n client: { apiKey: string; appId: string };\n }>\n ) {\n searchInsight.init(e.detail.client.appId, e.detail.client.apiKey);\n\n if (\n !e\n .composedPath()\n .find((ele: HTMLElement) => ele.id && ele.id === 'main-search')\n )\n return;\n\n this.algoliaResultsEle = this.algoliaEle.querySelector(\n '#main-search-results'\n );\n this.algoliaResults = e.detail.meta;\n\n // add results listeners\n this.attachResultListeners();\n\n this.algoliaEle.querySelectorAll('.filters-reset').forEach((item) => {\n item.addEventListener('click', () => {\n this.removeAllFilters();\n });\n });\n\n this.algoliaEle.querySelectorAll('.close-filters').forEach((item) => {\n item.addEventListener('click', () => {\n this.closefilters();\n });\n });\n\n const filterWrap = this.algoliaEle.querySelector('.filters-wrap');\n if (filterWrap) {\n filterWrap.addEventListener('click', (e) => {\n e.stopPropagation();\n });\n }\n\n this.filtersDiv = this.algoliaEle.querySelector('#main-search-filters');\n\n const oldResults = this.algoliaEle.querySelector('.old-posts');\n if (oldResults) {\n oldResults.addEventListener(\n 'change',\n (e: Event & { target: HTMLInputElement }) => {\n this.toggleOldResults(e.target.checked);\n }\n );\n }\n }\n\n @Listen('nanoNewResults', { target: 'body' })\n attachResultListeners(e?: NanoAlgoliaResultsCustomEvent<IndexResult>) {\n if (e && e.composedPath()?.find((el) => el === this.algoliaEle)) {\n this.algoliaResultsEle = this.algoliaEle.querySelector(\n 'nano-algolia-results'\n );\n }\n if (!this.algoliaResultsEle) return;\n const resultEle = this.algoliaResultsEle;\n\n // wire up hit event listener for analytics\n this.algoliaResultsEle.removeEventListener('click', this.resultClick);\n this.algoliaResultsEle.addEventListener('click', this.resultClick);\n\n // wire up remove filter event listener\n resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n item.removeEventListener('click', this.removeFilterClick);\n item.addEventListener('click', this.removeFilterClick);\n });\n\n // wire up the back button event listener\n resultEle.querySelectorAll('.back-btn').forEach((item) => {\n item.removeEventListener('click', this.goback);\n item.addEventListener('click', this.goback);\n });\n\n // wire up mobile filter list panel event listener\n resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {\n this.openFilterBtn = item as HTMLButtonElement;\n item.removeEventListener('click', this.showFiltersClick);\n item.addEventListener('click', this.showFiltersClick);\n });\n\n // wire up tags event listeners\n const tags = Array.from(resultEle.querySelectorAll('.result__tags-tag'));\n tags.forEach((tag) => {\n tag.removeEventListener('click', this.tagClick);\n tag.addEventListener('click', this.tagClick);\n });\n }\n\n /** Manually close the search panel */\n @Method()\n async closeSearch() {\n this.goback();\n }\n\n private resultClick = (e: MouseEvent & { target: HTMLElement }) => {\n const hit: HTMLElement = e.target.closest('.result');\n if (e.target.tagName === 'A' && hit) {\n searchInsight.sendClick({\n index: this.algoliaResults.index,\n eventName: 'Global nav full search - search result clicked',\n queryID: this.algoliaResults.queryID,\n objectIDs: [hit.dataset.hitId],\n positions: [Number(hit.dataset.hitCount) + 1],\n });\n }\n };\n\n private showFiltersClick = () => {\n this.filtersDiv.tabIndex = -1;\n this.filtersDiv.classList.add('show');\n this.filtersDiv.setAttribute('aria-expanded', 'true');\n document.body.style.overflow = 'hidden';\n setTimeout(() => this.filtersDiv.focus(), 20);\n };\n\n private removeFilterClick = (e: MouseEvent & { target: HTMLElement }) => {\n this.removeFilter(e.target.dataset.filter, e.target.dataset.filterVal);\n };\n\n private tagClick = (e: MouseEvent & { target: HTMLElement }) => {\n e.preventDefault();\n let tagVal = e.target.dataset.value;\n tagVal = tagVal === 'publication' ? 'publications' : tagVal;\n tagVal = tagVal.toLowerCase();\n\n const filter: HTMLNanoAlgoliaFilterElement = this.algoliaEle.querySelector(\n 'nano-algolia-filter[filter-name=\"tags\"]'\n );\n if (filter.value.indexOf(tagVal) === -1) {\n filter.value = filter.value ? [...filter.value, tagVal] : [tagVal];\n }\n };\n\n private changeOrder(ev) {\n this.algoliaEle.replicaIndex = ev.detail.value;\n }\n\n private goback = () => {\n const goBackEvent = this.nanoSearchGoBack.emit();\n if (goBackEvent.defaultPrevented) return;\n\n this.removeAllFilters();\n this.algoliaEle.query = undefined;\n this.algoliaEle.showResults = false;\n };\n\n private removeFilter(facet, filter) {\n this.algoliaEle.removeFilters(facet, filter);\n }\n\n private removeAllFilters() {\n this.algoliaEle.removeFilters();\n }\n\n private closefilters() {\n if (!this.filtersDiv) return;\n this.filtersDiv.tabIndex = null;\n this.filtersDiv.classList.remove('show');\n this.filtersDiv.setAttribute('aria-expanded', 'false');\n document.body.style.overflow = '';\n setTimeout(() => this.openFilterBtn.focus(), 20);\n }\n\n private toggleOldResults(show: boolean) {\n if (show)\n this.algoliaEle.filters = this.algoliaEle.filters.filter(\n (f) => !f.startsWith('created > ')\n );\n else this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];\n }\n\n connectedCallback(): void {\n this.handleAlgoliaEleChange();\n }\n\n componentDidLoad() {\n if (!window['ResizeObserver']) return;\n\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (!entry.contentRect.width) return;\n this.currentWidth = entry.contentRect.width;\n }\n });\n this.ro.observe(this.el);\n }\n\n render() {\n return (\n <Host\n class={{\n small: this.currentWidth < 677,\n 'nano-global-search-results': true,\n }}\n dir={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined}\n >\n <nano-algolia\n storeId=\"searchq\"\n storeMethod=\"url-hash-push\"\n class=\"main-search__wrap sc-nano-global-search-results\"\n ref={(ele) => requestAnimationFrame(() => (this.algoliaEle = ele))}\n id=\"main-search\"\n >\n <template slot=\"template\">\n {\n /* html */ `<div class=\"main-search sc-nano-global-search-results\">\n <nano-algolia-results id=\"main-search-results\" class=\"main-search__results sc-nano-global-search-results\" infinite-scroll>\n <script type=\"text/template\" slot=\"start-template\">\n <div class=\"sc-nano-global-search-results main-search__topbar topbar\">\n <button class=\"sc-nano-global-search-results topbar__bkbtn back-btn icon-button\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/chevron-left\" size=\"small\"></nano-icon>\n </button>\n <div>\n <em class=\"sc-nano-global-search-results topbar__query\">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n </div>\n\n <div class=\"sc-nano-global-search-results topbar__filtering\">\n {{ @if (it.results.length) }}\n {{ @if (it.searchIndex && it.searchIndex.replicas) }}\n <nano-select class=\"sc-nano-global-search-results topbar__order indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n {{ @each(it.searchIndex.replicas) => replica }}\n <nano-option value=\"{{ replica.index }}\">{{ replica.name }}</nano-option>\n {{ /each }}\n </nano-select>\n {{ /if }}\n {{ /if }}\n\n <button class=\"sc-nano-global-search-results topbar__show-filters filters-title\" aria-controls=\"main-search-filters\">\n {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n <span class=\"sc-nano-global-search-results topbar__filter-count\">\n {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n </span>\n {{ /if }}\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/filter\"></nano-icon>\n </button>\n </div>\n </div>\n\n {{ @if (it.results.length) }}\n <div class=\"sc-nano-global-search-results main-search__applied-filters\">\n {{ @if (it.appliedFilters) }}\n {{ @each(it.appliedFilters) => filterObj }}\n {{ @each(filterObj.values) => filterVal }}\n <span class=\"sc-nano-global-search-results main-search__applied-filter\">\n {{ filterVal | public_name }}\n <button class=\"sc-nano-global-search-results icon-button remove-filter\" data-filter=\"{{ filterObj.name }}\" data-filter-val=\"{{ filterVal }}\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/xmark\"></nano-icon>\n </button>\n </span>\n {{ /each }}\n {{ /each }}\n {{ #else }}\n <span class=\"sc-nano-global-search-results main-search__applied-nofilter\"> </span>\n {{ /if }}\n </div>\n {{ /if }}\n </script>\n\n <script type=\"text/template\" slot=\"result-template\">\n \n {{ @if ((!it.results || !it.results.length)) }}\n <div class=\"search-empty\">\n <nano-icon name=\"light/magnifying-glass\" class=\"search-empty-icon\"></nano-icon>\n <h2>No matches found...</h2>\n <p>Please try a different search query.</p>\n </div>\n {{ /if }}\n \n\n {{ @if (it.totalHitsWithFilters > 0) }}\n {{ @each(it.results) => result, resultIndex }}\n {{ contentType = result.content_type ? result.content_type : result.type }}\n <li class=\"sc-nano-global-search-results\">\n <div class=\"sc-nano-global-search-results result\" data-hit-id=\"{{ result.objectID }}\" data-hit-count=\"{{ resultIndex }}\">\n <h4 class=\"sc-nano-global-search-results result__title\" data-icon-set=\"{{(iconSet = false)}}\">\n <a href=\"{{ result.url | abs_url(it, result) }}\">\n {{ @if (result._snippetResult) }}\n {{ result._snippetResult.title.value | safe }}\n {{ #else }}\n {{ result.title | safe }}\n {{ /if }}\n {{ @if (contentType === 'technical_document' || contentType === 'literature' || contentType === 'white_paper' || contentType === 'protocol') }}\n <span class=\"sc-nano-global-search-results result__pdf\">PDF</span>\n {{ /if }}\n </a>\n </h4>\n {{ @if (result.authors) }}\n {{ @if (typeof result.authors === 'string') }}\n <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Authors: {{ result.authors | trim_to(50) }}</a>\n {{ #else }}\n <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">\n {{ @each(result.authors) => author, index }}\n \n Authors: {{ author | trim_to(60) }}\n \n {{ /each }}\n </a>\n {{ /if }}\n {{ /if }}\n {{ @if (contentType === 'video' || contentType === 'lc_lightning_talk' ) }}\n {{ @if (result.name) }}\n <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Speaker: {{ result.name | trim_to(50) }}</a>\n {{ /if }}\n <a class=\"sc-nano-global-search-results result__video-body\" href=\"{{ result.url | abs_url(it, result) }}\">\n {{ @if (result.image) }}\n <div class=\"sc-nano-global-search-results result__image\" style=\"background-image: url('{{ result.image | abs_url(it, result) }}')\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"duotone/play-circle\"></nano-icon>\n </div>\n {{ /if }}\n <div class=\"sc-nano-global-search-results result__body\">\n <div class=\"sc-nano-global-search-results result__description\">\n {{ @if (result.description) }}\n {{ result._snippetResult.description.value | safe }}\n {{ /if }}\n </div>\n </div>\n <div class=\"sc-nano-global-search-results result__meta\">\n {{ @if (result.type || result.content_type) }}\n <div class=\"sc-nano-global-search-results result__type\">\n {{ @if (contentType === 'lc_lightning_talk') }}\n Presentation\n {{ #else }}\n {{ contentType }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (result.tags) }}\n <div class=\"sc-nano-global-search-results result__tags\">\n {{ @if (typeof result.tags === 'string') }}\n <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n {{ #else }}\n {{ @each(result.tags) => tag, index }}\n {{ @if(index < 5)}}\n {{ @if (tag !== \"No video\" && tag !== \"Resources\" && tag !== \"Video\") }}\n <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n {{ /if }}\n {{ /if }}\n {{ /each }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (result.source) }}\n <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n {{ /if }}\n </div>\n </a>\n {{ /if }}\n {{ @if (result.body) }}\n <a class=\"sc-nano-global-search-results result__body\" href=\"{{ result.url | abs_url(it, result) }}\">\n {{ @if (result._snippetResult) }}\n {{ result._snippetResult.body.value | safe }}\n {{ /if }}\n </a>\n {{ /if }}\n {{ @if (contentType === 'product' }}\n <div class=\"sc-nano-global-search-results result__buttons\">\n <a class=\"sc-nano-global-search-results result__buttons-button\" href=\"{{ result.url | abs_url(it, result) }}\">View product</a>\n </div>\n {{ /if }}\n {{ @if (contentType === 'event') }}\n <a class=\"sc-nano-global-search-results result__promo\" href=\"{{ result.url | abs_url(it, result) }}\">\n <div class=\"sc-nano-global-search-results result__promo-box\">\n <div class=\"sc-nano-global-search-results result__promo-bigdate\">\n {{ result.start_date | date_long({year: undefined, month: 'short', day: undefined}) }}\n <span>{{ result.start_date | date_long({year: undefined, month: undefined, day: 'numeric'}) }}</span>\n </div>\n <div>\n <div class=\"sc-nano-global-search-results result__promo-date\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/calendar-days\"></nano-icon>\n {{ @if (result.end_date) }}\n {{ @if (result.end_date !== result.start_date) }}\n {{ result.start_date | date_long({weekday: 'short', day: 'numeric', month: 'short'}) }} - {{ result.end_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n {{ #else }}\n {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n {{ /if }}\n {{ #else }}\n {{ @if (result.start_date) }}\n {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n {{ /if }}\n {{ /if }}\n </div>\n <div class=\"sc-nano-global-search-results result__promo-venue\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/map-marker-alt\"></nano-icon>\n Venue\n </div>\n </div>\n </div>\n </a>\n {{ /if }}\n {{ @if (contentType !== 'lc_lightning_talk' && contentType !== 'video') }}\n <div class=\"sc-nano-global-search-results result__meta\">\n {{ @if (result.type || result.content_type) }}\n <div class=\"sc-nano-global-search-results result__type\">\n {{ @if (contentType === 'news_item') }}\n News\n {{ #elif (contentType === 'static_page' || contentType === 'bespoke') }}\n Page\n {{ #elif (contentType === 'case_study') }}\n Case study\n {{ #elif (contentType === 'lc_poster') }}\n Poster\n {{ #elif (contentType === 'nanopore_live') }}\n Live stream\n {{ #elif (contentType === 'data_release') }}\n Data release\n {{ #elif (contentType === 'research_area') }}\n Research area\n {{ #elif (contentType === 'white_paper') }}\n White paper\n {{ #elif (contentType === 'technical_document') }}\n Technical document\n {{ #elif (contentType === 'info_sheet') }}\n Info sheet\n {{ #elif (contentType === 'lc_home' || contentType === 'lc_venue') }}\n London Calling\n {{ #else }}\n {{ contentType }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (contentType !== 'event') }}\n {{ @if (result.updated) }}\n <div class=\"sc-nano-global-search-results result__date\">{{ result.updated | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n {{ #else }}\n {{ @if (result.created) }}\n <div class=\"sc-nano-global-search-results result__date\">{{ result.created | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n {{ /if }}\n {{ /if }}\n {{ /if }}\n {{ @if (result.tags) }}\n <div class=\"sc-nano-global-search-results result__tags\">\n {{ @if (typeof result.tags === 'string') }}\n {{ @if (result.tags !== \"Resources\" && result.tags !== \"Tools\" && result.tags !== \"Publications\" && result.tags !== \"Case studies\") }}\n <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n {{ /if }}\n {{ #else }}\n {{ @each(result.tags) => tag, index }}\n {{ @if(index < 5)}}\n {{ @if (tag !== \"Resources\" && tag !== \"Tools\" && tag !== \"Publications\" && tag !== \"Case studies\") }}\n <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n {{ /if }}\n {{ /if }}\n {{ /each }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (result.source) }}\n <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n {{ /if }}\n </div>\n {{ /if }}\n </div>\n </li>\n {{ /each }}\n {{ /if }}\n </script>\n\n <div slot=\"start-output\"></div>\n <ul slot=\"result-output\" class=\"sc-nano-global-search-results\"></ul>\n </nano-algolia-results>\n\n {{ @if(Object.keys(it.origFilters).length) }}\n <div class=\"sc-nano-global-search-results main-search__filters filters close-filters\" id=\"main-search-filters\">\n <div class=\"sc-nano-global-search-results filters-wrap\">\n {{ @if(it.totalHits) }}\n <div class=\"sc-nano-global-search-results filters-header\">\n <strong class=\"sc-nano-global-search-results filters-title\">Filters</strong>\n <button class=\"sc-nano-global-search-results filters-reset\">Reset</button>\n <button class=\"sc-nano-global-search-results filters__close-filters close-filters icon-button\" aria-controls=\"main-search-filters\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/xmark\"></nano-icon>\n </button>\n </div>\n {{ /if }}\n\n <div>\n <input class=\"sc-nano-global-search-results filter-cb old-posts filters__old-posts\" type=\"checkbox\" name=\"old-posts\" id=\"old-posts\" value=\"nice\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"old-posts\">\n <span>Include posts older than 2 years</span>\n </label>\n {{ @if(it.origFilters['type']) }}\n <nano-details class=\"sc-nano-global-search-results\" open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Type</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf1\" store-method=\"url-hash-push\" filter-name=\"type\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"type-{{ filter }}-{{x}}\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"type-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['channel']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Channels</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf2\" store-method=\"url-hash-push\" filter-name=\"channel\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"channel-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"channel-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['authors']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Authors</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf3\" store-method=\"url-hash-push\" filter-name=\"authors\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"authors-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"authors-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['categories_without_path']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Category</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf4\" store-method=\"url-hash-push\" filter-name=\"categories_without_path\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n {{ @if(!filter.match(/publication/)) }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"cwp-{{ filter }}-{{x}}\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"cwp-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /if }}\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['tags']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Tags</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf5\" store-method=\"url-hash-push\" filter-name=\"tags\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter | lowercase }}\" id=\"tags-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"tags-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n </div>\n </div>\n </div>\n {{ /if }}\n </div>`\n }\n </template>\n <div slot=\"output\"></div>\n <slot />\n </nano-algolia>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/nano-grid-item.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-grid-item.entry.cjs.js","mappings":";;;;;;;;;MAaa,QAAQ;;;;;;;;;;;IASnB,MAAM;QACJ,OAAOA,oEAAQ,CAAC;KACjB;;;;;;","names":["h"],"sources":["src/components/grid/grid-item.tsx"],"sourcesContent":["import { Component, h } from '@stencil/core';\n\n/**\n * @deprecated - you can now use `grid-states=\"...\"`\n * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.\n *\n * Grid items to be used with [grid](/story/nano-components-grid) elements\n */\n@Component({\n tag: 'nano-grid-item',\n styles: /* css */ `:host { display: inline-block; }`,\n shadow: true,\n})\nexport class GridItem {\n /**\n * How to position this item within it's parent grid at different break points. Examples:\n * xl-col-span-2\n * l-col-start-2\n * xxl-row-span-2\n * m-row-start-2\n */\n\n render() {\n return <slot />;\n }\n}\n"],"version":3}

package/dist/cjs/nano-grid_2.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-grid.nano-img.entry.cjs.js","mappings":"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","names":["getElement","h","Host"],"sources":["src/utils/constructible-style.tsx","src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","src/components/grid/grid.tsx","src/components/img/img.scss?tag=nano-img&encapsulation=shadow","src/components/img/img.tsx"],"sourcesContent":["import { h, Host, getElement, VNode, ComponentInterface } from '@stencil/core';\n// import type { VNode, HTMLStencilElement } from \"@stencil/core\";\n\nconst supportsConstructibleStylesheets = (() => {\n try {\n return !!new CSSStyleSheet();\n } catch (_e) {\n return false;\n }\n})();\n\nconst cacheKeys: WeakMap<ComponentInterface, string> = new WeakMap();\n\ndeclare type ConstructibleStyleDecorator = (\n target: ComponentInterface,\n propertyKey: string\n) => void;\n\n/**\n * Dynamically create a constructible stylesheet which is applied to the component.\n * The stylesheet is then cached for future instances of the component.\n * @usage\nAs a string:\n```\n@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\nAs a function:\n```\n@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.\n * @returns `@ConstructableStyle` decorator\n */\nexport function ConstructibleStyle(\n opts: ConstructibleStyleOptions = {}\n): ConstructibleStyleDecorator {\n return (target: ComponentInterface, propertyKey: string) => {\n if (!opts.cacheKeyProperty) {\n opts.cacheKeyProperty = propertyKey;\n }\n\n const { componentWillLoad, render, componentWillRender } = target;\n if (!componentWillLoad)\n console.warn(\n `ConstructibleStyle requires you to have a \\`componentWillLoad\\` lifecycle method in \\`${target.constructor.name}\\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`\n );\n\n if (supportsConstructibleStylesheets) {\n const addStylesheet = (instance: ComponentInterface) => {\n if (\n !instance[opts.cacheKeyProperty] ||\n (cacheKeys.get(instance) &&\n cacheKeys.get(instance) === instance[opts.cacheKeyProperty])\n )\n return;\n\n cacheKeys.set(instance, instance[opts.cacheKeyProperty]);\n const host = getElement(instance);\n const cssText =\n typeof instance[propertyKey] === 'function'\n ? instance[propertyKey]()\n : instance[propertyKey];\n const root = (host.shadowRoot || document) as any;\n root.adoptedStyleSheets = [\n ...(root.adoptedStyleSheets || []),\n getOrCreateStylesheet(instance, target, cssText, opts),\n ];\n };\n\n target.componentWillLoad = function () {\n const willLoadResult =\n componentWillLoad && componentWillLoad.call(this);\n addStylesheet(this);\n return willLoadResult;\n };\n\n target.componentWillRender = function () {\n const willRenderResult =\n componentWillRender && componentWillRender.call(this);\n addStylesheet(this);\n return willRenderResult;\n };\n } else {\n target.render = function () {\n const cssText =\n typeof this[propertyKey] === 'function'\n ? this[propertyKey]()\n : this[propertyKey];\n let renderedNode: VNode = render.call(this);\n\n if (isHost(renderedNode)) {\n appendStyleToHost(renderedNode, target.constructor.name, cssText);\n } else {\n renderedNode = <Host>{renderedNode}</Host>;\n\n if (!('attachShadow' in HTMLElement.prototype)) {\n appendStyleToHost(renderedNode, target.constructor.name, cssText);\n } else {\n if (!target.__constructableStyle) {\n const style = document.createElement('style');\n style.setAttribute('type', 'text/css');\n style.setAttribute(\n 'constructible-style',\n target.constructor.name\n );\n style.innerHTML = cssText;\n target.__constructableStyle = style;\n document.head.appendChild(style);\n }\n }\n }\n\n return renderedNode;\n };\n }\n };\n}\n\nfunction appendStyleToHost(node, targetName, cssText) {\n (getHostChildren(node) || []).push(\n <style type=\"text/css\" constructible-style={targetName}>\n {cssText}\n </style>\n );\n}\n\nfunction getOrCreateStylesheet(\n instance: ComponentInterface,\n target: ComponentInterface,\n cssText: string,\n opts: ConstructibleStyleOptions\n): CSSStyleSheet {\n if (!target.__constructableStyle) {\n target.__constructableStyle = {};\n }\n\n const key = instance[opts.cacheKeyProperty];\n\n if (!target.__constructableStyle[key]) {\n target.__constructableStyle[key] = new CSSStyleSheet();\n target.__constructableStyle[key].replace(cssText);\n }\n\n return target.__constructableStyle[key];\n}\n\nfunction isHost(node): boolean {\n for (const prop in node) {\n if (prop in node) {\n if (node[prop] === Host) {\n return true;\n }\n }\n }\n return false;\n}\n\nfunction getHostChildren(node): Array<VNode> {\n for (const prop in node) {\n if (prop in node) {\n if (Array.isArray(node[prop])) {\n return node[prop];\n }\n }\n }\n}\n\nexport interface ConstructibleStyleOptions {\n /**\n * Set this in case an instance of a component could produce different styles based on variables.\n * This will ensure that you get new styles for each mode.\n * @example\n```\n@Prop() mode: string;\n@ConstructableStyle({ cacheKeyProperty: \"mode\" }) style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n */\n cacheKeyProperty?: string;\n}\n","@use 'sass:math';\n@use '../../global/style/nano-theme/tokens/base';\n\n:host {\n /**\n * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n */\n\n --grid-col-gap: #{base.$spacing-medium};\n --grid-row-gap: #{base.$spacing-medium};\n --current-grid-size: \"grid size: s\";\n\n container-type: inline-size;\n display: block;\n\n .grid {\n display: grid;\n gap: var(--grid-row-gap) var(--grid-col-gap);\n block-size: inherit;\n min-block-size: inherit;\n }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n position: relative;\n\n .grid--helper {\n position: absolute;\n inset: 0;\n pointer-events: none;\n display: grid !important;\n overflow: hidden;\n\n &::before {\n content: var(--current-grid-size);\n font-size: 30px;\n position: absolute;\n inline-size: 100%;\n inset-inline-start: 0;\n text-align: center;\n inset-block-start: 50%;\n transform: translateY(-50%);\n color: rgb(0 0 0 / 20%);\n text-transform: uppercase;\n z-index: 99;\n pointer-events: none;\n }\n }\n\n .grid__helper-item {\n background: hsl(204deg 80% 72% / 25%);\n block-size: 100vh;\n }\n}\n","import { Component, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\nimport { h } from '../../utils/renderer';\n\n/**\n * A lightweight, context-aware CSS grid implementation.\n *\n * - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n *\n * @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n */\n@Component({\n tag: 'nano-grid',\n styleUrl: 'grid.scss',\n shadow: true,\n})\nexport class Grid {\n private grids: {\n cols: number;\n breakpoint: number | string;\n name: string;\n template?: string;\n }[] = [];\n @State() cacheKey: string;\n\n /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop({ reflect: true }) sSize: number | string = 300;\n\n /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop({ reflect: true }) mSize: number | string = 550;\n\n /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop({ reflect: true }) lSize: number | string = 800;\n\n /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop({ reflect: true }) xlSize: number | string = 1000;\n\n /** the number of columns the grid has at the small breakpoint. */\n @Prop({ reflect: true }) sCols: number;\n\n /** the number of columns the grid has at the medium breakpoint. */\n @Prop({ reflect: true }) mCols: number;\n\n /** the number of columns the grid has at the large breakpoint. */\n @Prop({ reflect: true }) lCols: number;\n\n /** the number of columns the grid has at the xl breakpoint. */\n @Prop({ reflect: true }) xlCols: number;\n\n /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n @Prop({ reflect: true }) xxlCols: number;\n\n /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */\n @Prop() sTpl?: string;\n\n /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */\n @Prop() mTpl?: string;\n\n /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */\n @Prop() lTpl?: string;\n\n /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */\n @Prop() xlTpl?: string;\n\n /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */\n @Prop() xxlTpl?: string;\n\n /** shows a grid helper to visualise where columns are */\n @Prop({ reflect: true }) showHelper: boolean = false;\n\n @Watch('sTpl')\n @Watch('mTpl')\n @Watch('lTpl')\n @Watch('xlTpl')\n @Watch('xxlTpl')\n @Watch('sSize')\n @Watch('mSize')\n @Watch('lSize')\n @Watch('xlSize')\n @Watch('sCols')\n @Watch('mCols')\n @Watch('lCols')\n @Watch('xlCols')\n @Watch('xxlCols')\n @Watch('showHelper')\n constructSizeArray() {\n this.grids = [];\n\n if (this.sCols)\n this.grids.push({\n cols: this.sCols,\n breakpoint: 0,\n name: 's',\n template: this.sTpl,\n });\n if (this.mCols)\n this.grids.push({\n cols: this.mCols,\n breakpoint: this.sSize,\n name: 'm',\n template: this.mTpl,\n });\n if (this.lCols)\n this.grids.push({\n cols: this.lCols,\n breakpoint: this.mSize,\n name: 'l',\n template: this.lTpl,\n });\n if (this.xlCols)\n this.grids.push({\n cols: this.xlCols,\n breakpoint: this.lSize,\n name: 'xl',\n template: this.xlTpl,\n });\n if (this.xxlCols)\n this.grids.push({\n cols: this.xxlCols,\n breakpoint: this.xlSize,\n name: 'xxl',\n template: this.xxlTpl,\n });\n\n this.cacheKey =\n this.grids\n .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)\n .join('') +\n '-helper-' +\n this.showHelper;\n }\n\n @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n () => {\n const css = /* css */ `\n ${this.grids\n .map(\n (bp) => /* css */ `\n @container (min-width: ${\n Number((bp.breakpoint as number) + 1)\n ? Number(bp.breakpoint) + 1 + 'px'\n : bp.breakpoint\n }) {\n [cache-key=\"${this.cacheKey}\"].grid {\n --current-grid-size: \"grid size: ${bp.name}\";\n ${\n bp.template\n ? `grid-template: ${bp.template};`\n : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n grid-column-start: ${gItm} !important;\n }\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n grid-column-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${[...Array(24)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n grid-row-start: ${gItm} !important;\n }\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n grid-row-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${\n this.showHelper\n ? /* css */ `\n [cache-key=\"${this.cacheKey}\"].grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\n `\n : ''\n }\n }\n `\n )\n .join('')}\n `;\n return css\n .replace(/\\/\\*[\\s\\S]*?\\*\\//g, '') // Remove comments\n .replace(/\\s{2,}/g, ' ') // Replace multiple spaces with a single space\n .replace(/\\s*([{}:;,])\\s*/g, '$1') // Remove spaces around CSS symbols\n .replace(/\\n/g, ''); // Remove newlines;\n };\n\n componentWillLoad() {\n this.constructSizeArray();\n }\n\n render() {\n return (\n <Host clas=\"nano-grid\">\n <div part=\"grid\" class=\"grid\" cache-key={this.cacheKey}>\n <slot />\n </div>\n {this.showHelper && (\n <div\n class=\"grid grid--helper\"\n part=\"helper\"\n cache-key={this.cacheKey}\n >\n {[...Array(24)].map(() => (\n <div class=\"grid__helper-item\" />\n ))}\n </div>\n )}\n </Host>\n );\n }\n}\n",":host {\n /**\n * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n */\n --padding: 0;\n\n display: inline-block;\n object-fit: cover;\n object-position: center;\n background-size: cover;\n background-position: center;\n\n * {\n border-radius: inherit;\n }\n}\n\n:host([background]:not([background='false'])) {\n display: block;\n}\n\n.img {\n position: relative;\n object-fit: inherit;\n object-position: inherit;\n background-color: inherit;\n background-position: inherit;\n background-size: inherit;\n background-origin: inherit;\n background-attachment: inherit;\n background-repeat: inherit;\n flex: 1 1 100%;\n display: flex;\n flex-direction: column;\n min-block-size: inherit;\n min-inline-size: inherit;\n block-size: inherit;\n inline-size: inherit;\n max-block-size: inherit;\n max-inline-size: inherit;\n aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n position: absolute;\n inset: 0;\n block-size: 100%;\n inline-size: 100%;\n z-index: -1;\n}\n\n.img__image,\n.img__bg {\n border-radius: inherit;\n display: block;\n opacity: 0;\n transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n filter: blur(5px);\n flex: 1;\n\n &.loaded {\n opacity: 1;\n filter: blur(0);\n\n @media not all and (resolution >= 0.001dpcm) {\n @supports (-webkit-appearance: none) {\n filter: blur(0);\n }\n }\n }\n}\n\n.img__image {\n object-fit: inherit;\n object-position: inherit;\n min-block-size: inherit;\n min-inline-size: inherit;\n block-size: inherit;\n inline-size: inherit;\n max-block-size: inherit;\n max-inline-size: inherit;\n aspect-ratio: inherit;\n\n &.hide {\n visibility: hidden;\n\n &.no-height {\n block-size: 1px;\n position: absolute;\n z-index: -1;\n }\n }\n}\n\n.img__bg {\n background-color: inherit;\n background-position: inherit;\n background-size: inherit;\n background-origin: inherit;\n background-attachment: inherit;\n background-repeat: inherit;\n overflow: auto;\n padding: var(--padding);\n\n &.no-height {\n position: absolute;\n inset: 0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n State,\n Prop,\n Watch,\n ComponentInterface,\n Build,\n Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { ResizeStateChangeEventDetail } from '../resize-observe/resize-observe-interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n tag: 'nano-img',\n styleUrl: 'img.scss',\n shadow: true,\n})\nexport class Img implements ComponentInterface {\n private io?: IntersectionObserver;\n private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n @Element() host!: HTMLNanoImgElement;\n\n @State() loadSrc?: string;\n @State() loadError?: () => void;\n @State() hasLoaded: boolean = false;\n @State() imgStates: string = null;\n @State() _src: string;\n @Watch('_src')\n _srcChanged() {\n this.hasLoaded = false;\n this.addIO();\n }\n\n /** This attribute defines the alternative text describing the image.\n * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n @Prop() alt?: string;\n\n /** The image URL. This attribute is mandatory for the `<img>` element. */\n @Prop() src!: string;\n @Watch('src')\n srcChanged() {\n this._src = this.src;\n }\n\n /** Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n @Prop() srcSet?: string;\n @Watch('srcSet')\n srcSetChanged() {\n if (!this.srcSet) return;\n\n delete this._srcSet;\n this._srcSet = {};\n\n this.imgStates = this.srcSet\n .split(',')\n .map((bpSrc) => {\n const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n this._srcSet[bp] = { src: src, active: false };\n return bp;\n })\n .join(', ');\n }\n\n /** Render image lazily, when it comes into the browser viewport **/\n @Prop() lazy: boolean = true;\n @Watch('lazy')\n lazyChanged() {\n if (!this.lazy) this.load();\n }\n\n /** Render the image as a background image **/\n @Prop() background?: boolean;\n\n /** When the image is rendered as a background, and there is no preset dimensions of the component,\n * you can set how the component height will be set. Via image size or via the content **/\n @Prop() autoHeight: 'content' | 'image' = 'content';\n\n /** Emitted when the img src has been set */\n @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n /** Emitted when the image has finished loading */\n @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n /** Emitted when the img fails to load */\n @Event() nanoImgError!: EventEmitter<void>;\n\n private addIO() {\n if (!this._src || this.hasLoaded) return;\n if (!this.lazy) {\n this.load();\n return;\n }\n if (\n typeof (window as any) !== 'undefined' &&\n 'IntersectionObserver' in window\n ) {\n this.removeIO();\n this.io = new IntersectionObserver((data) => {\n if (data[0].isIntersecting) {\n this.load();\n this.removeIO();\n }\n });\n\n this.io.observe(this.host);\n } else setTimeout(() => this.load(), 200);\n }\n\n private load() {\n this.loadError = this.onError;\n this.loadSrc = this._src;\n this.nanoImgWillLoad.emit();\n }\n\n private onLoad = () => {\n this.nanoImgDidLoad.emit();\n setTimeout(() => (this.hasLoaded = true), 50);\n };\n\n private onError = () => {\n this.nanoImgError.emit();\n };\n\n private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n Object.entries(e.detail).forEach(([bp, active]) => {\n this._srcSet[bp].active = !!active;\n });\n\n // sort and find the highest sized matching image.\n const srcOpts = [];\n Object.keys(this._srcSet)\n .sort()\n .forEach((bp) => {\n if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n });\n\n if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n // no matching image? Set back to default\n else this._src = this.src;\n };\n\n private removeIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n connectedCallback() {\n this.srcChanged();\n this.srcSetChanged();\n this.lazyChanged();\n }\n\n componentDidLoad() {\n this.addIO();\n }\n\n disconnectedCallback() {\n this.removeIO();\n }\n\n render() {\n const bgStyle = this.loadSrc\n ? { 'background-image': `url(${this.loadSrc})` }\n : {};\n\n return (\n <Host class=\"nano-img\">\n <div class=\"img\">\n <nano-skeleton class=\"img__loader\"></nano-skeleton>\n {!!this.background && (\n <div\n class={{\n loaded: this.hasLoaded,\n img__bg: true,\n 'no-height': this.autoHeight === 'image',\n }}\n style={bgStyle}\n >\n <slot />\n </div>\n )}\n <img\n class={{\n img__image: true,\n loaded: this.hasLoaded,\n hide: this.background,\n 'no-height': this.autoHeight === 'content',\n }}\n decoding=\"async\"\n src={Build.isServer ? this.src : this.loadSrc}\n loading={Build.isServer && this.lazy ? 'lazy' : undefined}\n alt={this.alt}\n onLoad={this.onLoad}\n onError={this.loadError}\n />\n <nano-resize-observe\n class=\"img__observer\"\n onNanoResizeStateChange={this.onResize}\n states={this.imgStates}\n />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/nano-hero.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-hero.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","src/components/hero/hero.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens/colours';\n\n\n:host {\n /**\n * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{map.get(colours.$colors, lightblue)};\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n */\n\n --nano-loader-base: #{map.get(colours.$colors, black)};\n --nano-loader-tint: #{lighten(map.get(colours.$colors, black), 20%)};\n --theme-color: #{map.get(colours.$colors, white)};\n --theme-tint-color: #{map.get(colours.$colors, lightblue)};\n --scrim-color: 0 0 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n\n color: var(--theme-color);\n display: block;\n container-type: inline-size;\n}\n\n:host([theme='light']) {\n --nano-loader-base: #{map.get(colours.$colors, white)};\n --nano-loader-tint: #{lighten(map.get(colours.$colors, white), 20%)};\n --theme-color: #{map.get(colours.$colors, black)};\n --scrim-color: 255 255 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n\n color: var(--theme-color);\n\n .hero__primary-content {\n --color: #{map.get(colours.$colors, black)};\n }\n}\n\n.hero {\n position: relative;\n\n @container (min-width: 800px) {\n --quote-size: 3rem;\n }\n\n &--rtl {\n --scrim-direction: 270deg;\n }\n\n &--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n }\n\n &__bg-wrap {\n overflow: hidden;\n }\n\n &__bg-slot {\n position: absolute;\n inset: 0;\n }\n\n &__ctas {\n @media (width <= 52em) {\n display: none;\n }\n\n @media (width <= 58em) {\n margin-block-end: -48px;\n }\n\n display: flex;\n justify-content: flex-end;\n padding-block: 32px 0;\n padding-inline: 32px;\n margin-block-end: -64px;\n position: relative;\n z-index: 1;\n\n ::slotted(a.button[slot='secondary-ctas']) {\n padding-inline: 0.5rem !important;\n font-size: 0.875rem !important;\n margin-block: 0 !important;\n margin-inline: 0.25rem !important;\n }\n }\n\n &__img {\n display: block;\n\n --padding: inherit;\n }\n\n &__breadcrumbs {\n display: none;\n margin-block: 20px 0;\n margin-inline: 14px;\n line-height: 14px;\n\n .hero--breadcrumb & {\n display: block;\n }\n\n @container (min-width: 800px) {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n\n @container (min-width: 900px) {\n margin-block: 0;\n margin-inline: 83px;\n }\n\n ::slotted(*[slot='breadcrumb']) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-block-end: 16px;\n position: relative;\n z-index: 2;\n\n .hero--hasbg & {\n text-shadow: 1px 1px rgb(0 0 0 / 15%);\n }\n }\n\n ::slotted(a[slot='breadcrumb']) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n }\n\n ::slotted(.slash[slot='breadcrumb']) {\n color: var(--theme-color);\n position: relative;\n margin-block: 0;\n margin-inline: 0.5rem;\n display: inline-block;\n }\n }\n\n &__scrim {\n position: absolute;\n inset: 0;\n z-index: 0;\n background:\n linear-gradient(\n var(--scrim-direction),\n rgb(var(--scrim-color) / var(--scrim-opacity-from)) 0%,\n rgb(var(--scrim-color) / var(--scrim-opacity-to)) 100%\n );\n\n .hero--scrim & {\n background: none;\n }\n }\n\n &__content {\n max-inline-size: 1440px;\n display: block;\n\n --grid-row-gap: 0;\n\n margin-block: 0;\n margin-inline: auto;\n position: relative;\n\n @container (min-width: 800px) {\n margin-block: 50px 0 !important;\n max-inline-size: 1540px !important;\n }\n\n @container (min-width: 900px) {\n margin-block: 83px 0 !important;\n max-inline-size: 1606px !important;\n }\n }\n\n &__primary {\n margin: 16px;\n\n .hero--breadcrumb & {\n margin-block: 0;\n margin-inline: 16px;\n }\n\n .hero--backbtn & {\n margin-inline-start: 0;\n }\n\n ::slotted(.nano-icon-button[slot='back-btn']) {\n font-size: 2rem;\n }\n\n @container (min-width: 800px) {\n margin-block: 0 50px !important;\n margin-inline: 50px 0 !important;\n\n ::slotted(.nano-icon-button[slot='back-btn']) {\n margin-block: 0 !important;\n margin-inline: -3rem 0 !important;\n }\n }\n\n @container (min-width: 900px) {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n }\n\n &__primary-content {\n max-inline-size: 45rem;\n\n --color: #fff;\n\n display: flex;\n\n .hero--backbtn & {\n > div {\n padding-block: 10px 0;\n padding-inline: 0;\n }\n }\n\n ::slotted(h1[slot='primary-content']) {\n line-height: 26px !important;\n margin-block: 0 18px !important;\n font-size: 2rem !important;\n }\n\n @container (min-width: 800px) {\n ::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-block-end: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 20px !important;\n }\n }\n }\n\n &__secondary {\n display: none;\n block-size: 100%;\n padding-block: 0 20px;\n padding-inline: 14px;\n\n .hero--secondary & {\n display: flex;\n align-items: center;\n }\n\n @container (min-width: 800px) {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n\n @container (min-width: 900px) {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n }\n\n &__icon-box {\n background: rgb(0 0 0 / 70%);\n padding: 24px;\n inline-size: 100%;\n margin-block-end: auto;\n display: flex;\n flex-direction: column;\n color: white;\n\n @container (min-width: 800px) {\n max-inline-size: 410px;\n flex: 0 1 410px;\n }\n\n ::slotted([slot='icon-box-item']) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-block-end: 20px;\n }\n\n ::slotted(.last[slot='icon-box-item']) {\n margin-block-end: 0;\n }\n }\n\n &__quote-content {\n margin-block-start: auto;\n text-align: center;\n inline-size: 100%;\n\n @container (min-width: 800px) {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n }\n\n &__quote {\n &::before,\n &::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 600;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n }\n\n ::slotted([slot='quote']) {\n font-size: var(--quote-size);\n font-weight: 200;\n display: inline;\n }\n }\n\n &__quote-author {\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n }\n\n &--sub {\n .hero__content {\n @container (min-width: 800px) {\n margin-block-start: 40px;\n\n .hero__primary {\n margin-block: 0 40px;\n margin-inline: 50px 0;\n }\n\n .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 40px 50px;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 8px !important;\n }\n\n ::slotted(h1[slot='primary-content']) {\n margin-block-end: 18px !important;\n }\n }\n\n @container (min-width: 900px) {\n .hero__primary {\n margin-block: 0 40px;\n margin-inline: 83px 0;\n }\n\n .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 40px 83px;\n }\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n tag: 'nano-hero',\n styleUrl: 'hero.scss',\n shadow: true,\n})\nexport class Hero implements ComponentInterface {\n private mo?: MutationObserver;\n\n @Element() host: HTMLNanoHeroElement;\n\n @State() hasIconBox: boolean;\n @State() hasScrim: boolean;\n @State() hasSecondaryContent: boolean;\n @State() hasQuote: boolean;\n @State() hasBg: boolean;\n @State() hasBackBtn: boolean;\n @State() hasCtas: boolean;\n @State() breadCrumbs: Element[];\n @Watch('breadCrumbs')\n breadCrumbChange() {\n // safari doesn't support ::slotted()::after ... so this :/\n this.breadCrumbs\n .filter(\n (crumb) =>\n crumb.tagName === 'A' &&\n !crumb.nextElementSibling.classList.contains('slash')\n )\n .forEach((crumb) => {\n crumb.insertAdjacentHTML(\n 'afterend',\n '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n );\n });\n }\n @State() iconBoxItems: Element[];\n @Watch('iconBoxItems')\n iconBoxItemChange() {\n this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n if (\n this.iconBoxItems[this.iconBoxItems.length - 1] &&\n this.iconBoxItems[this.iconBoxItems.length - 1].classList\n )\n this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n }\n\n /** src for background image. For more control use the `background` slot instead. */\n @Prop() imgSrc?: string;\n\n /** Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n @Prop() imgSrcSet?: string = null;\n\n /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n @Prop() largeScreenBP: number = 900;\n\n /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n @Prop() theme: 'dark' | 'light' = 'dark';\n\n /** Set the content structure level of the hero. Defaults to 'top' */\n @Prop() level: 'top' | 'sub' = 'top';\n\n private slotChangeObserver() {\n if (!window['MutationObserver']) return;\n\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true });\n }\n\n // Event handlers\n\n private processSlottedContent() {\n this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n this.iconBoxItems = Array.from(\n this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n );\n this.hasIconBox =\n !!this.host.querySelector('[slot=\"icon-box\"]') ||\n !!this.iconBoxItems.length;\n this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n this.breadCrumbs = Array.from(\n this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n );\n this.hasSecondaryContent =\n !!this.host.querySelector('[slot=\"icon-box\"]') ||\n !!this.host.querySelector('[slot=\"quote\"]') ||\n !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n !!this.host.querySelector('[slot=\"secondary-content\"]');\n this.hasBg =\n !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n }\n\n // Component lifecycle\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private HeroContent = (): VNode[] => {\n return [\n !this.hasIconBox && this.hasCtas ? (\n <div class=\"hero__ctas\">\n <slot name=\"secondary-ctas\" />\n </div>\n ) : (\n ''\n ),\n <div class=\"hero__scrim\">\n <slot name=\"scrim\" />\n </div>,\n <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n <div grid-states=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </div>\n <div\n grid-states={\n this.hasSecondaryContent\n ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n }\n >\n <div class=\"hero__primary\">\n <div class=\"hero__primary-content\">\n <slot name=\"back-btn\" />\n <div>\n <slot name=\"primary-content\" />\n </div>\n </div>\n </div>\n </div>\n {this.hasSecondaryContent && (\n <div grid-states=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n <div class=\"hero__secondary\">\n <slot name=\"secondary-content\" />\n {this.hasIconBox && (\n <div class=\"hero__icon-box\">\n <slot name=\"icon-box\" />\n <slot name=\"icon-box-item\" />\n </div>\n )}\n {this.hasQuote && (\n <div class=\"hero__quote-content\">\n <span class=\"hero__quote\">\n <slot name=\"quote\" />\n </span>\n <div class=\"hero__quote-author\">\n <slot name=\"quote-author\" />\n </div>\n </div>\n )}\n </div>\n </div>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n\n return (\n <Host class=\"nano-hero\">\n <div\n class={{\n hero: true,\n 'hero--light': this.theme === 'light',\n 'hero--secondary': this.hasSecondaryContent,\n 'hero--iconbox': this.hasIconBox,\n 'hero--rtl': rtl,\n 'hero--scrim': this.hasScrim,\n 'hero--breadcrumb': !!this.breadCrumbs.length,\n 'hero--hasbg': this.hasBg,\n 'hero--backbtn': this.hasBackBtn,\n 'hero--sub': this.level === 'sub',\n }}\n >\n <div class=\"hero__bg-wrap\">\n {!!this.imgSrc && (\n <nano-img\n class=\"hero__img\"\n lazy={false}\n background\n srcSet={this.imgSrcSet}\n src={this.imgSrc}\n >\n <this.HeroContent />\n </nano-img>\n )}\n {!this.imgSrc && [\n <div class=\"hero__bg-slot\">\n <slot name=\"background\" />\n </div>,\n <this.HeroContent />,\n ]}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}