@nanoporetech-digital/components 6.3.1 → 6.4.1

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 (61) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/nano-components.cjs.js +1 -1
  4. package/dist/cjs/nano-dialog.cjs.entry.js +2 -2
  5. package/dist/cjs/nano-dialog.cjs.entry.js.map +1 -1
  6. package/dist/cjs/nano-global-nav.cjs.entry.js +12 -11
  7. package/dist/cjs/nano-global-nav.cjs.entry.js.map +1 -1
  8. package/dist/cjs/nano-global-search-results.cjs.entry.js +7 -3
  9. package/dist/cjs/nano-global-search-results.cjs.entry.js.map +1 -1
  10. package/dist/cjs/{nano-table-1bbc9f78.js → nano-table-5fdf2818.js} +2 -2
  11. package/dist/cjs/{nano-table-1bbc9f78.js.map → nano-table-5fdf2818.js.map} +1 -1
  12. package/dist/cjs/nano-table.cjs.entry.js +1 -1
  13. package/dist/cjs/{table.worker-f931e341.js → table.worker-e2c3253e.js} +2 -2
  14. package/dist/cjs/table.worker-e2c3253e.js.map +1 -0
  15. package/dist/collection/components/dialog/dialog.css +2 -2
  16. package/dist/collection/components/dialog/dialog.js +1 -1
  17. package/dist/collection/components/dialog/dialog.js.map +1 -1
  18. package/dist/collection/components/global-nav/global-nav.js +12 -11
  19. package/dist/collection/components/global-nav/global-nav.js.map +1 -1
  20. package/dist/collection/components/global-search-results/global-search-results.js +9 -2
  21. package/dist/collection/components/global-search-results/global-search-results.js.map +1 -1
  22. package/dist/components/nano-dialog.js +2 -2
  23. package/dist/components/nano-dialog.js.map +1 -1
  24. package/dist/components/nano-global-nav.js +12 -11
  25. package/dist/components/nano-global-nav.js.map +1 -1
  26. package/dist/components/nano-global-search-results.js +8 -3
  27. package/dist/components/nano-global-search-results.js.map +1 -1
  28. package/dist/esm/loader.js +1 -1
  29. package/dist/esm/nano-components.js +1 -1
  30. package/dist/esm/nano-dialog.entry.js +2 -2
  31. package/dist/esm/nano-dialog.entry.js.map +1 -1
  32. package/dist/esm/nano-global-nav.entry.js +12 -11
  33. package/dist/esm/nano-global-nav.entry.js.map +1 -1
  34. package/dist/esm/nano-global-search-results.entry.js +7 -3
  35. package/dist/esm/nano-global-search-results.entry.js.map +1 -1
  36. package/dist/esm/{nano-table-b77e6c16.js → nano-table-1259358b.js} +2 -2
  37. package/dist/esm/{nano-table-b77e6c16.js.map → nano-table-1259358b.js.map} +1 -1
  38. package/dist/esm/nano-table.entry.js +1 -1
  39. package/dist/esm/{table.worker-d3029079.js → table.worker-2bcce4a8.js} +2 -2
  40. package/dist/esm/table.worker-2bcce4a8.js.map +1 -0
  41. package/dist/nano-components/nano-components.esm.js +1 -1
  42. package/dist/nano-components/nano-components.esm.js.map +1 -1
  43. package/dist/nano-components/nano-dialog.entry.js +1 -1
  44. package/dist/nano-components/nano-dialog.entry.js.map +1 -1
  45. package/dist/nano-components/nano-global-nav.entry.js +1 -1
  46. package/dist/nano-components/nano-global-nav.entry.js.map +1 -1
  47. package/dist/nano-components/nano-global-search-results.entry.js +1 -1
  48. package/dist/nano-components/nano-global-search-results.entry.js.map +1 -1
  49. package/dist/nano-components/nano-table-1259358b.js +5 -0
  50. package/dist/nano-components/{nano-table-b77e6c16.js.map → nano-table-1259358b.js.map} +1 -1
  51. package/dist/nano-components/nano-table.entry.js +1 -1
  52. package/dist/nano-components/{table.worker-d3029079.js → table.worker-2bcce4a8.js} +2 -2
  53. package/dist/types/components/global-nav/global-nav.d.ts +0 -1
  54. package/dist/types/components/global-search-results/global-search-results.d.ts +1 -1
  55. package/docs-json.json +1 -1
  56. package/hydrate/index.js +22 -16
  57. package/package.json +2 -2
  58. package/dist/cjs/table.worker-f931e341.js.map +0 -1
  59. package/dist/esm/table.worker-d3029079.js.map +0 -1
  60. package/dist/nano-components/nano-table-b77e6c16.js +0 -5
  61. /package/dist/nano-components/{table.worker-d3029079.js.map → table.worker-2bcce4a8.js.map} +0 -0
package/dist/collection/components/global-search-results/global-search-results.js CHANGED
@@ -53,6 +53,7 @@ export class GlobalSearchResults {
53
53
  this.algoliaEle.query = '';
54
54
  this.algoliaEle.showResults = false;
55
55
  };
56
+ this.algoliaResults = undefined;
56
57
  this.algoliaEle = undefined;
57
58
  this.currentWidth = undefined;
58
59
  this.apiKey = undefined;
@@ -71,9 +72,11 @@ export class GlobalSearchResults {
71
72
  this.algoliaEle.searchIndex = this.index;
72
73
  }
73
74
  handleAlgoliaEleChange() {
74
- if (!this.algoliaEle)
75
+ if (!this.algoliaEle || !this.algoliaResults)
75
76
  return;
76
- this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years
77
+ if (this.algoliaResults.indexName === 'Community') {
78
+ this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years
79
+ }
77
80
  }
78
81
  handleGlobalNavReset(e) {
79
82
  if (e.target.tagName !== 'NANO-GLOBAL-NAV')
@@ -612,6 +615,7 @@ export class GlobalSearchResults {
612
615
  }
613
616
  static get states() {
614
617
  return {
618
+ "algoliaResults": {},
615
619
  "algoliaEle": {},
616
620
  "currentWidth": {},
617
621
  "apiKey": {},
@@ -654,6 +658,9 @@ export class GlobalSearchResults {
654
658
  }, {
655
659
  "propName": "index",
656
660
  "methodName": "handleAlgoliaIndexChange"
661
+ }, {
662
+ "propName": "algoliaResults",
663
+ "methodName": "handleAlgoliaEleChange"
657
664
  }, {
658
665
  "propName": "algoliaEle",
659
666
  "methodName": "handleAlgoliaEleChange"
package/dist/collection/components/global-search-results/global-search-results.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"global-search-results.js","sourceRoot":"","sources":["../../../src/components/global-search-results/global-search-results.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,KAAK,EACL,MAAM,EACN,KAAK,GAEN,MAAM,eAAe,CAAC;AACvB,OAAO,aAAa,MAAM,6BAA6B,CAAC;AAQxD,MAAM,cAAc,GAClB,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,WAAW,CAAC,GAAG,IAAI,CAAC,CAAC;AAE/D;;;;;;GAMG;AAMH,MAAM,OAAO,mBAAmB;;IAsLtB,gBAAW,GAAG,CAAC,CAAuC,EAAE,EAAE;MAChE,MAAM,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAgB,CAAC;MACvD,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,KAAK,GAAG,IAAI,GAAG,EAAE;QACnC,aAAa,CAAC,SAAS,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK;UAChC,SAAS,EAAE,gDAAgD;UAC3D,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO;UACpC,SAAS,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC;UAC9B,SAAS,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SAC9C,CAAC,CAAC;OACJ;IACH,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;MAC9B,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;MACtC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MACtD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;MACxC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAChD,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,CAAuC,EAAE,EAAE;MACtE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IACzE,CAAC,CAAC;IAEM,aAAQ,GAAG,CAAC,CAAuC,EAAE,EAAE;MAC7D,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;MACpC,MAAM,GAAG,MAAM,KAAK,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC;MAC5D,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;MAE9B,MAAM,MAAM,GAAiC,IAAI,CAAC,UAAU,CAAC,aAAa,CACxE,yCAAyC,CAC1C,CAAC;MACF,IAAI,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE;QACvC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;OACpE;IACH,CAAC,CAAC;IAMM,WAAM,GAAG,GAAG,EAAE;MACpB,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;MACjD,IAAI,WAAW,CAAC,gBAAgB;QAAE,OAAO;MAEzC,IAAI,CAAC,gBAAgB,EAAE,CAAC;MACxB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,EAAE,CAAC;MAC3B,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,KAAK,CAAC;IACtC,CAAC,CAAC;;;;;;;EAjNF,wBAAwB;IACtB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;MAAE,OAAO;IAC5D,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;IACrC,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;EACrC,CAAC;EAID,wBAAwB;IACtB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;MAAE,OAAO;IAC5C,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;EAC3C,CAAC;EAGD,sBAAsB;IACpB,IAAI,CAAC,IAAI,CAAC,UAAU;MAAE,OAAO;IAC7B,IAAI,CAAC,UAAU,CAAC,OAAO,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,wBAAwB;EACtE,CAAC;EAGD,oBAAoB,CAAC,CAAwC;IAC3D,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,KAAK,iBAAiB;MAAE,OAAO;IACnD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,MAAM,EAAE,CAAC;EAChB,CAAC;EAGD,qBAAqB,CAAC,CAAwC;IAC5D,MAAM,EACJ,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GACzB,GAAG,CAAyC,CAAC;IAE9C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAC5B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;IAE1B,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,KAAK,iBAAiB;MAAE,OAAO;IAEnD,IAAI,CAAC,KAAK,GAAG;MACX,IAAI,EAAE,IAAI,CAAC,UAAU;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,MAAM,EAAE,IAAI,CAAC,MAAM;MACnB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;KACxB,CAAC;IACF,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;EACrC,CAAC;EAGD,aAAa,CAAC,CAAkD;IAC9D,IACE,CAAC;OACE,YAAY,EAAE;OACd,IAAI,CACH,CAAC,GAAgB,EAAE,EAAE,CACnB,GAAG,CAAC,SAAS,IAAI,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CACzD;MACH,CAAC,CAAC,IAAI,CAAC,iBAAiB,EACxB;MACA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;KACrB;EACH,CAAC;EAGD,eAAe,CACb,CAGE;IAEF,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAElE,IACE,CAAC,CAAC;OACC,YAAY,EAAE;OACd,IAAI,CAAC,CAAC,GAAgB,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,aAAa,CAAC;MAEjE,OAAO;IAET,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACpD,sBAAsB,CACvB,CAAC;IACF,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;IAEpC,wBAAwB;IACxB,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAE7B,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;MAClE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QAClC,IAAI,CAAC,gBAAgB,EAAE,CAAC;MAC1B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;MAClE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QAClC,IAAI,CAAC,YAAY,EAAE,CAAC;MACtB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAClE,IAAI,UAAU,EAAE;MACd,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;QACzC,CAAC,CAAC,eAAe,EAAE,CAAC;MACtB,CAAC,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAExE,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAC/D,IAAI,UAAU,EAAE;MACd,UAAU,CAAC,gBAAgB,CACzB,QAAQ,EACR,CAAC,CAAuC,EAAE,EAAE;QAC1C,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;MAC1C,CAAC,CACF,CAAC;KACH;EACH,CAAC;EAGD,qBAAqB,CAAC,CAA8C;IAClE,IAAI,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,UAAU,CAAC,EAAE;MAC/D,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACpD,sBAAsB,CACvB,CAAC;KACH;IACD,IAAI,CAAC,IAAI,CAAC,iBAAiB;MAAE,OAAO;IACpC,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC;IAEzC,2CAA2C;IAC3C,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACtE,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAEnE,uCAAuC;IACvC,SAAS,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;MAC5D,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;MAC1D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,yCAAyC;IACzC,SAAS,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;MACvD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;MAC/C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,kDAAkD;IAClD,SAAS,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;MACnE,IAAI,CAAC,aAAa,GAAG,IAAyB,CAAC;MAC/C,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;MACzD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,+BAA+B;IAC/B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;IACzE,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;MACnB,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;MAChD,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;EACL,CAAC;EAyCO,WAAW,CAAC,EAAE;IACpB,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;EACjD,CAAC;EAWO,YAAY,CAAC,KAAK,EAAE,MAAM;IAChC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;EAC/C,CAAC;EAEO,gBAAgB;IACtB,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;EAClC,CAAC;EAEO,YAAY;IAClB,IAAI,CAAC,IAAI,CAAC,UAAU;MAAE,OAAO;IAC7B,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC;IAChC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;IACvD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;IAClC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;EACnD,CAAC;EAEO,gBAAgB,CAAC,IAAa;IACpC,IAAI,IAAI;MACN,IAAI,CAAC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,CACtD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CACnC,CAAC;;MACC,IAAI,CAAC,UAAU,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;EAC9E,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;EAChC,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;MAAE,OAAO;IAEtC,IAAI,CAAC,EAAE,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;MACvC,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;QAC3B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK;UAAE,OAAO;QACrC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;OAC7C;IACH,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EAC3B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,GAAG,GAAG,EAAE,EACzC,GAAG,EACA,IAAI,CAAC,EAAE,CAAC,aAA0B,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;MAGvE,gCACW,SAAS,kBACL,eAAe,EAC5B,KAAK,EAAC,iDAAiD,EACvD,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,CAAC,EAClE,EAAE,EAAC,aAAa;QAEhB,gBAAU,IAAI,EAAC,UAAU;QAErB,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAgYN,CAEE;QACX,WAAK,IAAI,EAAC,QAAQ,GAAO;QACzB,eAAQ,CACK,CACV,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n h,\n Host,\n Element,\n State,\n ComponentInterface,\n Watch,\n Listen,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport searchInsight from '../../utils/search-insights';\nimport type {\n AloliaSearchResultDetail,\n IndexResult,\n NanoAlgoliaResultsCustomEvent,\n SearchIndex,\n} from '../../interface';\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 algoliaResults: IndexResult;\n private filtersDiv: HTMLElement;\n private openFilterBtn: HTMLButtonElement;\n private ro: ResizeObserver;\n\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('algoliaEle')\n handleAlgoliaEleChange() {\n if (!this.algoliaEle) return;\n this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years\n }\n\n @Listen('nanoSearchReset', { target: 'body' })\n handleGlobalNavReset(e: CustomEvent & { target: HTMLElement }) {\n if (e.target.tagName !== 'NANO-GLOBAL-NAV') 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: AloliaSearchResultDetail };\n\n this.apiKey = client.apiKey;\n this.appId = client.appId;\n\n if (e.target.tagName !== 'NANO-GLOBAL-NAV') 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 private resultClick = (e: MouseEvent & { target: HTMLElement }) => {\n const hit = e.target.closest('.result') as HTMLElement;\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 = '';\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={{ small: this.currentWidth < 677 }}\n dir={\n (this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : undefined\n }\n >\n <nano-algolia\n store-id=\"searchq\"\n store-method=\"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/times\"></nano-icon>\n </button>\n </span>\n {{ /each }}\n {{ /each }}\n {{ #else }}\n <span class=\"sc-nano-global-search-results main-search__applied-nofilter\">&nbsp;</span>\n {{ /if }}\n </div>\n {{ /if }}\n </script>\n\n <script type=\"text/template\" slot=\"result-template\">\n <!-- START NO CONTENT -->\n {{ @if ((!it.results || !it.results.length)) }}\n <div class=\"search-empty\">\n <nano-icon name=\"light/search\" 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 <!-- END NO CONTENT -->\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 <!-- {{ @if(index == 0)}} -->\n Authors: {{ author | trim_to(60) }}\n <!-- {{ /if }} -->\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-alt\"></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/times\"></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"]}
1
+ {"version":3,"file":"global-search-results.js","sourceRoot":"","sources":["../../../src/components/global-search-results/global-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Host,\n Element,\n State,\n ComponentInterface,\n Watch,\n Listen,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport searchInsight from '../../utils/search-insights';\nimport type {\n AloliaSearchResultDetail,\n IndexResult,\n NanoAlgoliaResultsCustomEvent,\n SearchIndex,\n} from '../../interface';\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 !== 'NANO-GLOBAL-NAV') 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: AloliaSearchResultDetail };\n\n this.apiKey = client.apiKey;\n this.appId = client.appId;\n\n if (e.target.tagName !== 'NANO-GLOBAL-NAV') 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 private resultClick = (e: MouseEvent & { target: HTMLElement }) => {\n const hit = e.target.closest('.result') as HTMLElement;\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 = '';\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={{ small: this.currentWidth < 677 }}\n dir={\n (this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : undefined\n }\n >\n <nano-algolia\n store-id=\"searchq\"\n store-method=\"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/times\"></nano-icon>\n </button>\n </span>\n {{ /each }}\n {{ /each }}\n {{ #else }}\n <span class=\"sc-nano-global-search-results main-search__applied-nofilter\">&nbsp;</span>\n {{ /if }}\n </div>\n {{ /if }}\n </script>\n\n <script type=\"text/template\" slot=\"result-template\">\n <!-- START NO CONTENT -->\n {{ @if ((!it.results || !it.results.length)) }}\n <div class=\"search-empty\">\n <nano-icon name=\"light/search\" 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 <!-- END NO CONTENT -->\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 <!-- {{ @if(index == 0)}} -->\n Authors: {{ author | trim_to(60) }}\n <!-- {{ /if }} -->\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-alt\"></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/times\"></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"]}
package/dist/components/nano-dialog.js CHANGED
@@ -11,7 +11,7 @@ import { d as defineCustomElement$4 } from './icon-button.js';
11
11
  import { d as defineCustomElement$3 } from './sticker.js';
12
12
  import { d as defineCustomElement$2 } from './tooltip.js';
13
13
 
14
- const dialogCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);max-inline-size:calc(100% - (var(--nano-spacing-xlarge, 24px) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-radius:0 0 inherit inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-radius:inherit inherit 0 0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:sticky;inset-block-end:0;min-inline-size:auto}.dialog__footer ::slotted(button){margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";
14
+ const dialogCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);max-inline-size:calc(100% - (var(--nano-spacing-xlarge, 24px) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-radius:0 0 inherit inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-radius:inherit inherit 0 0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";
15
15
 
16
16
  let id = 0;
17
17
  const Dialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -194,7 +194,7 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
194
194
  'dialog--with-ribbon': this.showRibbon,
195
195
  }, onKeyDown: this.handleKeyDown, ref: (ele) => (this.dialog = ele),
196
196
  // @ts-ignore
197
- popover: "manual" }, h("div", { part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: -1 }, h("div", { class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", null, h("header", { part: "header", class: "dialog__header" }, h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/times" }))))), h("div", { part: "body", class: "dialog__body" }, h("slot", null)), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (h("footer", { part: "footer", class: "dialog__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (h("button", { class: "dialog__close-txt", onClick: this.requestClose }, "Close")))))))));
197
+ popover: "manual" }, h("div", { part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: -1 }, h("div", { class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", null, h("header", { part: "header", class: "dialog__header" }, h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/times" }))))), h("div", { part: "body", class: "dialog__body" }, h("slot", null)), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (h("nano-sticker", { position: "bottom" }, h("footer", { part: "footer", class: "dialog__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (h("button", { class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
198
198
  }
199
199
  get host() { return this; }
200
200
  static get watchers() { return {
package/dist/components/nano-dialog.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"nano-dialog.js","mappings":"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","names":[],"sources":["./src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","./src/components/dialog/dialog.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/nano-theme/form';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to #{map.get($colors, celsius)};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{map.get($colors, palegrey)};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{map.get($colors, blue)};\n * @prop --width: defaults to 31rem;\n * @prop --nano-layer-overlay-blur: inheritable theme applied to backdrop. Default to #{$layer-overlay-blur}\n */\n:host {\n --border-radius: #{$layer-border-radius};\n --content-background: #fafafa;\n --footer-content: #{map.get($colors, lightgrey)};\n --scrim-color: #{$layer-overlay-dark};\n --box-shadow: #{$layer-shadow-large};\n --close-button-color: #{map.get($colors, palegrey)};\n --width: 60rem;\n --tint-color: #{darken(map.get($colors, blue), 5%)};\n --body-padding-v: #{$spacing-large};\n --body-padding-h: #{$spacing-large};\n --header-padding-v: #{$spacing-medium};\n --header-padding-h: #{$spacing-large};\n --footer-padding-v: #{$spacing-medium};\n --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n $self: &;\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n inset: 0;\n z-index: #{$layer-index-modal};\n\n // reset native popover styles\n border: none;\n inline-size: unset;\n block-size: unset;\n color: unset;\n background-color: unset;\n\n &::backdrop { display: none; }\n\n &__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n inline-size: var(--width);\n max-inline-size: calc(100% - (#{$spacing-xlarge} + var(--nano-scroll-lock-size)));\n max-block-size: calc(92vh - #{$spacing-xlarge});\n background-color: var(--content-background);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n opacity: 0;\n transform: scale(0.8);\n transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n\n &:focus {\n outline: none;\n }\n\n .dialog--with-ribbon & {\n border-block-start: 5px solid var(--tint-color);\n }\n\n .dialog--open & {\n display: flex;\n opacity: 1;\n transform: none;\n }\n\n .dialog--nodismiss & {\n animation: cannotClose 0.25s ease-in-out 1;\n\n @keyframes cannotClose {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.08);\n }\n\n 100% {\n transform: scale(1);\n }\n }\n }\n }\n\n &__header {\n flex: 0 0 auto;\n display: flex;\n inline-size: 100%;\n background-color: var(--content-background);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n transition: #{$transition-xfast} box-shadow;\n min-inline-size: auto;\n\n [stuck] & {\n box-shadow: #{$layer-shadow-medium};\n }\n }\n\n &__title {\n flex: 1 1 auto;\n font-size: #{$fontsize-large};\n line-height: 1.6;\n padding-block: var(--header-padding-v);\n padding-inline: var(--header-padding-h);\n }\n\n & &__close-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: #{$fontsize-xlarge};\n padding-block: 0;\n padding-inline: var(--header-padding-h);\n\n --color: var(--close-button-color);\n }\n\n &__body {\n padding-block: 0 var(--body-padding-v);\n padding-inline: var(--body-padding-h);\n\n .dialog:not(.dialog--has-header) & {\n padding-block-start: var(--body-padding-v);\n }\n\n & ::slotted(*) {\n max-inline-size: 100%;\n }\n\n &-wrap {\n flex: 1 1 auto;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border-radius: var(--border-radius);\n\n .dialog:not(.dialog--has-header) & {\n border-radius: 0 0 inherit inherit;\n }\n\n .dialog:not(.dialog--has-footer) & {\n border-radius: inherit inherit 0 0;\n }\n }\n }\n\n &__footer {\n inline-size: 100%;\n padding-block: var(--footer-padding-v);\n padding-inline: var(--footer-padding-h);\n background: var(--footer-content);\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n position: sticky;\n inset-block-end: 0;\n min-inline-size: auto;\n\n ::slotted(button) {\n margin-inline-end: #{$spacing-small} !important;\n }\n\n .dialog:not(.dialog--has-footer) & {\n display: none;\n }\n }\n\n &__close-txt {\n color: var(--tint-color);\n border: none;\n text-decoration: underline;\n margin: 0;\n text-underline-offset: 4px;\n background-color: transparent;\n font: inherit;\n -webkit-box-align: center;\n cursor: pointer;\n font-size: #{$fontsize-small};\n padding: 0.5rem;\n border-radius: #{$border-radius-small};\n transition: box-shadow 100ms ease-in-out;\n\n &:focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n }\n\n &__overlay {\n position: fixed;\n inset: 0 !important;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n .dialog--open & {\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n ComponentInterface,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @part base - The component’s base wrapper\n * @part overlay - The overlay that covers the screen behind the dialog\n * @part panel - The dialog’s panel (where the dialog and its content are rendered)\n * @part header - The dialog’s header. This element wraps the title and header actions\n * @part title - The dialog’s title\n * @part close-button - The `<nano-icon-button>` close button\n * @part close-button__base - The close button's exported `base` part\n * @part body - dilog body / content\n * @part footer - dialog footer bar\n *\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n * @slot - The dialog's content.\n */\n@Component({\n tag: 'nano-dialog',\n styleUrl: 'dialog.scss',\n shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n private componentId = `dialog-${++id}`;\n private modal: Modal;\n private willShow = false;\n private willHide = false;\n private originalTrigger: HTMLElement | null;\n private overlay: HTMLElement;\n private dialog: HTMLElement;\n\n get panel() {\n return this._panel;\n }\n set panel(p: HTMLElement) {\n if (this._panel) {\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n p.addEventListener('transitionend', this.handleTransitionEnd);\n this._panel = p;\n }\n private _panel: HTMLElement;\n\n @Element() host: HTMLNanoDialogElement;\n @State() noDismiss = false;\n @State() hasFooter = false;\n\n /** Show a colour ribbon at the top of the modal */\n @Prop() showRibbon = true;\n\n /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /** The dialog's label as displayed in the header. You should always include a relevant\n * label even when using `no-header`, as it is required for proper accessibility. */\n @Prop() label!: string;\n\n /** Set to true to disable the header. This will also remove the default close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. */\n @Prop() noHeader = false;\n\n /** Set to true to disable the footer. This will also remove the footer close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. */\n @Prop() noFooter = false;\n\n /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key */\n @Prop() noUserDismiss = false;\n\n /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n @Prop() storeId?: string;\n\n /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n // if native popover is supported then bail as this is not required\n if (\n globalThis.HTMLElement.prototype.hasOwnProperty('popover') ||\n !this.hoist ||\n Array.from(document.body.children).includes(this.host)\n )\n return;\n document.body.prepend(this.host);\n }\n\n /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event() nanoShow: EventEmitter;\n\n /** Emitted after the dialog opens and all transitions are complete. */\n @Event() nanoAfterShow: EventEmitter;\n\n /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event() nanoHide: EventEmitter;\n\n /** Emitted after the dialog closes and all transitions are complete. */\n @Event() nanoAfterHide: EventEmitter;\n\n /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n @Event() nanoInitialFocus: EventEmitter;\n\n /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n @Event() nanoRequestClose: EventEmitter;\n\n /** Shows the dialog */\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n if (this.dialog) this.dialog.hidden = false;\n this.originalTrigger = document.activeElement as HTMLElement;\n this.willShow = true;\n\n this.open = true;\n this.modal.activate();\n\n // @ts-ignore\n if (typeof this.dialog?.showPopover === 'function') {\n // @ts-ignore\n this.dialog.showPopover();\n }\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n if (!nanoInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n },\n { once: true }\n );\n }\n }\n\n /** Hides the dialog */\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n this.stopVideos();\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n\n setTimeout(() => {\n // @ts-ignore\n if (!this.open && typeof this.dialog?.hidePopover === 'function') {\n // @ts-ignore\n this.dialog.hidePopover();\n }\n unlockBodyScrolling(this.host);\n }, 300);\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n this.hide();\n } else {\n this.noDismiss = true;\n setTimeout(() => (this.noDismiss = false), 250);\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel || node === this.overlay)\n ) {\n // Ensure we only emit one event when the target element is no longer visible\n this.willShow = false;\n this.willHide = false;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n if (!this.open) this.dialog.hidden = true;\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private stopVideos() {\n const videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(\n this.host.querySelectorAll('iframe,video')\n );\n videos.forEach((video) => {\n if (video.tagName.toLowerCase() === 'video')\n (video as HTMLVideoElement).pause();\n else {\n const src = video.src;\n video.src = src;\n }\n });\n }\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n this.dialog.hidden = !this.open;\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n if (!this.panel) return;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n render() {\n return (\n <Host>\n <div\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--has-footer': !this.noFooter,\n 'dialog--has-header': !this.noHeader,\n 'dialog--nodismiss': this.noDismiss,\n 'dialog--with-ribbon': this.showRibbon,\n }}\n onKeyDown={this.handleKeyDown}\n ref={(ele) => (this.dialog = ele)}\n // @ts-ignore\n popover=\"manual\"\n >\n <div\n part=\"overlay\"\n class=\"dialog__overlay\"\n ref={(el) => (this.overlay = el)}\n onClick={this.requestClose}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={-1}\n >\n <div class=\"dialog__body-wrap\">\n {!this.noHeader && (\n <nano-sticker>\n <header part=\"header\" class=\"dialog__header\">\n <span\n part=\"title\"\n class=\"dialog__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label || String.fromCharCode(65279)}\n </slot>\n </span>\n {!this.noUserDismiss && (\n <nano-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"dialog__close-icon\"\n label=\"close dialog\"\n onClick={this.requestClose}\n iconName=\"light/times\"\n />\n )}\n </header>\n </nano-sticker>\n )}\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n {!this.noFooter && (this.hasFooter || !this.noUserDismiss) && (\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n {!this.noUserDismiss && (\n <button\n class=\"dialog__close-txt\"\n onClick={this.requestClose}\n >\n Close\n </button>\n )}\n </footer>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"nano-dialog.js","mappings":"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","names":[],"sources":["./src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","./src/components/dialog/dialog.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/nano-theme/form';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to #{map.get($colors, celsius)};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{map.get($colors, palegrey)};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{map.get($colors, blue)};\n * @prop --width: defaults to 31rem;\n * @prop --nano-layer-overlay-blur: inheritable theme applied to backdrop. Default to #{$layer-overlay-blur}\n */\n:host {\n --border-radius: #{$layer-border-radius};\n --content-background: #fafafa;\n --footer-content: #{map.get($colors, lightgrey)};\n --scrim-color: #{$layer-overlay-dark};\n --box-shadow: #{$layer-shadow-large};\n --close-button-color: #{map.get($colors, palegrey)};\n --width: 60rem;\n --tint-color: #{darken(map.get($colors, blue), 5%)};\n --body-padding-v: #{$spacing-large};\n --body-padding-h: #{$spacing-large};\n --header-padding-v: #{$spacing-medium};\n --header-padding-h: #{$spacing-large};\n --footer-padding-v: #{$spacing-medium};\n --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n $self: &;\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n inset: 0;\n z-index: #{$layer-index-modal};\n\n // reset native popover styles\n border: none;\n inline-size: unset;\n block-size: unset;\n color: unset;\n background-color: unset;\n\n &::backdrop { display: none; }\n\n &__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n inline-size: var(--width);\n max-inline-size: calc(100% - (#{$spacing-xlarge} + var(--nano-scroll-lock-size)));\n max-block-size: calc(92vh - #{$spacing-xlarge});\n background-color: var(--content-background);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n opacity: 0;\n transform: scale(0.8);\n transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n\n &:focus {\n outline: none;\n }\n\n .dialog--with-ribbon & {\n border-block-start: 5px solid var(--tint-color);\n }\n\n .dialog--open & {\n display: flex;\n opacity: 1;\n transform: none;\n }\n\n .dialog--nodismiss & {\n animation: cannotClose 0.25s ease-in-out 1;\n\n @keyframes cannotClose {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.08);\n }\n\n 100% {\n transform: scale(1);\n }\n }\n }\n }\n\n &__header {\n flex: 0 0 auto;\n display: flex;\n inline-size: 100%;\n background-color: var(--content-background);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n transition: #{$transition-xfast} box-shadow;\n min-inline-size: auto;\n\n [stuck] & {\n box-shadow: #{$layer-shadow-medium};\n }\n }\n\n &__title {\n flex: 1 1 auto;\n font-size: #{$fontsize-large};\n line-height: 1.6;\n padding-block: var(--header-padding-v);\n padding-inline: var(--header-padding-h);\n }\n\n & &__close-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: #{$fontsize-xlarge};\n padding-block: 0;\n padding-inline: var(--header-padding-h);\n\n --color: var(--close-button-color);\n }\n\n &__body {\n padding-block: 0 var(--body-padding-v);\n padding-inline: var(--body-padding-h);\n\n .dialog:not(.dialog--has-header) & {\n padding-block-start: var(--body-padding-v);\n }\n\n & ::slotted(*) {\n max-inline-size: 100%;\n }\n\n &-wrap {\n flex: 1 1 auto;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border-radius: var(--border-radius);\n\n .dialog:not(.dialog--has-header) & {\n border-radius: 0 0 inherit inherit;\n }\n\n .dialog:not(.dialog--has-footer) & {\n border-radius: inherit inherit 0 0;\n }\n }\n }\n\n &__footer {\n inline-size: 100%;\n padding-block: var(--footer-padding-v);\n padding-inline: var(--footer-padding-h);\n background: var(--footer-content);\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n position: relative;\n inset-block-start: 1px;\n min-inline-size: auto;\n\n ::slotted(button) {\n margin-inline-end: #{$spacing-small} !important;\n }\n\n .dialog:not(.dialog--has-footer) & {\n display: none;\n }\n }\n\n &__close-txt {\n color: var(--tint-color);\n border: none;\n text-decoration: underline;\n margin: 0;\n text-underline-offset: 4px;\n background-color: transparent;\n font: inherit;\n -webkit-box-align: center;\n cursor: pointer;\n font-size: #{$fontsize-small};\n padding: 0.5rem;\n border-radius: #{$border-radius-small};\n transition: box-shadow 100ms ease-in-out;\n\n &:focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n }\n\n &__overlay {\n position: fixed;\n inset: 0 !important;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n .dialog--open & {\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n ComponentInterface,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @part base - The component’s base wrapper\n * @part overlay - The overlay that covers the screen behind the dialog\n * @part panel - The dialog’s panel (where the dialog and its content are rendered)\n * @part header - The dialog’s header. This element wraps the title and header actions\n * @part title - The dialog’s title\n * @part close-button - The `<nano-icon-button>` close button\n * @part close-button__base - The close button's exported `base` part\n * @part body - dilog body / content\n * @part footer - dialog footer bar\n *\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n * @slot - The dialog's content.\n */\n@Component({\n tag: 'nano-dialog',\n styleUrl: 'dialog.scss',\n shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n private componentId = `dialog-${++id}`;\n private modal: Modal;\n private willShow = false;\n private willHide = false;\n private originalTrigger: HTMLElement | null;\n private overlay: HTMLElement;\n private dialog: HTMLElement;\n\n get panel() {\n return this._panel;\n }\n set panel(p: HTMLElement) {\n if (this._panel) {\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n p.addEventListener('transitionend', this.handleTransitionEnd);\n this._panel = p;\n }\n private _panel: HTMLElement;\n\n @Element() host: HTMLNanoDialogElement;\n @State() noDismiss = false;\n @State() hasFooter = false;\n\n /** Show a colour ribbon at the top of the modal */\n @Prop() showRibbon = true;\n\n /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /** The dialog's label as displayed in the header. You should always include a relevant\n * label even when using `no-header`, as it is required for proper accessibility. */\n @Prop() label!: string;\n\n /** Set to true to disable the header. This will also remove the default close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. */\n @Prop() noHeader = false;\n\n /** Set to true to disable the footer. This will also remove the footer close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. */\n @Prop() noFooter = false;\n\n /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key */\n @Prop() noUserDismiss = false;\n\n /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n @Prop() storeId?: string;\n\n /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n // if native popover is supported then bail as this is not required\n if (\n globalThis.HTMLElement.prototype.hasOwnProperty('popover') ||\n !this.hoist ||\n Array.from(document.body.children).includes(this.host)\n )\n return;\n document.body.prepend(this.host);\n }\n\n /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event() nanoShow: EventEmitter;\n\n /** Emitted after the dialog opens and all transitions are complete. */\n @Event() nanoAfterShow: EventEmitter;\n\n /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event() nanoHide: EventEmitter;\n\n /** Emitted after the dialog closes and all transitions are complete. */\n @Event() nanoAfterHide: EventEmitter;\n\n /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n @Event() nanoInitialFocus: EventEmitter;\n\n /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n @Event() nanoRequestClose: EventEmitter;\n\n /** Shows the dialog */\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n if (this.dialog) this.dialog.hidden = false;\n this.originalTrigger = document.activeElement as HTMLElement;\n this.willShow = true;\n\n this.open = true;\n this.modal.activate();\n\n // @ts-ignore\n if (typeof this.dialog?.showPopover === 'function') {\n // @ts-ignore\n this.dialog.showPopover();\n }\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n if (!nanoInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n },\n { once: true }\n );\n }\n }\n\n /** Hides the dialog */\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n this.stopVideos();\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n\n setTimeout(() => {\n // @ts-ignore\n if (!this.open && typeof this.dialog?.hidePopover === 'function') {\n // @ts-ignore\n this.dialog.hidePopover();\n }\n unlockBodyScrolling(this.host);\n }, 300);\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n this.hide();\n } else {\n this.noDismiss = true;\n setTimeout(() => (this.noDismiss = false), 250);\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel || node === this.overlay)\n ) {\n // Ensure we only emit one event when the target element is no longer visible\n this.willShow = false;\n this.willHide = false;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n if (!this.open) this.dialog.hidden = true;\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private stopVideos() {\n const videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(\n this.host.querySelectorAll('iframe,video')\n );\n videos.forEach((video) => {\n if (video.tagName.toLowerCase() === 'video')\n (video as HTMLVideoElement).pause();\n else {\n const src = video.src;\n video.src = src;\n }\n });\n }\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n this.dialog.hidden = !this.open;\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n if (!this.panel) return;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n render() {\n return (\n <Host>\n <div\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--has-footer': !this.noFooter,\n 'dialog--has-header': !this.noHeader,\n 'dialog--nodismiss': this.noDismiss,\n 'dialog--with-ribbon': this.showRibbon,\n }}\n onKeyDown={this.handleKeyDown}\n ref={(ele) => (this.dialog = ele)}\n // @ts-ignore\n popover=\"manual\"\n >\n <div\n part=\"overlay\"\n class=\"dialog__overlay\"\n ref={(el) => (this.overlay = el)}\n onClick={this.requestClose}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={-1}\n >\n <div class=\"dialog__body-wrap\">\n {!this.noHeader && (\n <nano-sticker>\n <header part=\"header\" class=\"dialog__header\">\n <span\n part=\"title\"\n class=\"dialog__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label || String.fromCharCode(65279)}\n </slot>\n </span>\n {!this.noUserDismiss && (\n <nano-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"dialog__close-icon\"\n label=\"close dialog\"\n onClick={this.requestClose}\n iconName=\"light/times\"\n />\n )}\n </header>\n </nano-sticker>\n )}\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n {!this.noFooter && (this.hasFooter || !this.noUserDismiss) && (\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n {!this.noUserDismiss && (\n <button\n class=\"dialog__close-txt\"\n onClick={this.requestClose}\n >\n Close\n </button>\n )}\n </footer>\n </nano-sticker>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/nano-global-nav.js CHANGED
@@ -174,14 +174,6 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
174
174
  ev.preventDefault();
175
175
  this.searchBarShown ? this.searchbarHide() : this.searchbarShow();
176
176
  };
177
- this.onSearchBtnKeyDown = (ev) => {
178
- switch (ev.key) {
179
- case 'Enter':
180
- case ' ':
181
- this.searchBarShown ? this.searchbarHide() : this.searchbarShow();
182
- break;
183
- }
184
- };
185
177
  this.onSearchBarShown = () => {
186
178
  this.searchBarEl.removeEventListener('transitionend', this.onSearchBarShown);
187
179
  if (this.searchInput)
@@ -581,6 +573,8 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
581
573
  if (this.thresholdReady && this.remoteDataReady) {
582
574
  this.ready = true;
583
575
  this.nanoIsReady.emit();
576
+ if (this.searchValue)
577
+ requestAnimationFrame(() => this.searchbarShow());
584
578
  }
585
579
  }
586
580
  /**
@@ -688,6 +682,8 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
688
682
  }
689
683
  }
690
684
  async searchbarShow() {
685
+ if (!this.searchBarEl)
686
+ return;
691
687
  this.searchBarShown = true;
692
688
  this.searchBarEl.addEventListener('transitionend', this.onSearchBarShown);
693
689
  this.searchBarEl.style.display = 'block';
@@ -724,15 +720,20 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
724
720
  async doAlgoliaSearch() {
725
721
  this.algoliaSearchResults = null;
726
722
  const queries = this.internalSearchIndeces.map((index) => {
727
- return {
723
+ const toReturn = {
728
724
  clickAnalytics: true,
729
725
  attributesToSnippet: ['body:5', 'title:8'],
730
726
  indexName: index.index,
731
727
  query: this.searchValInternal,
732
728
  facets: index.filters,
733
729
  hitsPerPage: 5,
734
- filters: 'created > ' + Math.floor((Date.now() - 63115200000) / 1000), // only get last 2 years
730
+ filters: '',
735
731
  };
732
+ if (index.name === 'Community') {
733
+ toReturn.filters =
734
+ 'created > ' + Math.floor((Date.now() - 63115200000) / 1000); // only get last 2 years
735
+ }
736
+ return toReturn;
736
737
  });
737
738
  try {
738
739
  this.algoliaSearchResults = this.processSearchResults((await this.algoliaClient.search(queries)));
@@ -993,7 +994,7 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
993
994
  'icon-btn': true,
994
995
  'search-btn': true,
995
996
  'search-btn--open': this.searchBarShown,
996
- }, "aria-controls": "global-nav-search-bar", "aria-expanded": this.searchBarShown ? 'true' : 'false', onClick: this.onSearchBtnClick, onKeyDown: this.onSearchBtnKeyDown }, h("nano-icon", { name: "light/search", role: "img", ariaLabel: "Do search" }))), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
997
+ }, "aria-controls": "global-nav-search-bar", "aria-expanded": this.searchBarShown ? 'true' : 'false', onClick: this.onSearchBtnClick }, h("nano-icon", { name: "light/search", role: "img", ariaLabel: "Do search" }))), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
997
998
  !!this.iconSlotLen && h("slot", { name: "icon" }),
998
999
  this.myAccData &&
999
1000
  (!this.activeMyAccountSections ||