@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/esm/nano-global-search-results.entry.js.map

@@ -1 +1 @@
-{"file":"nano-global-search-results.entry.js","mappings":";;;;;;;AAAA,MAAM,sBAAsB,GAAG,67aAA67a;;IC4B/8a,mBAAmB;;;;EAiB9B,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;GACpC;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;GAC1C;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;GACf;EAGD,qBAAqB,CAAC,CAAwC;IAC5D,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,KAAK,iBAAiB;MAAE,OAAO;IACnD,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAC5B,GAAG,CAAyC,CAAC;IAC9C,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,CAAC,CAAC;IAEzD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAC5B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;IAC1B,IAAI,CAAC,KAAK,GAAG;MACX,IAAI,EAAE,MAAM,CAAC,SAAS;MACtB,KAAK,EAAE,MAAM,CAAC,KAAK;MACnB,MAAM,EAAE,MAAM,CAAC,MAAM;MACrB,OAAO,EAAE,MAAM,CAAC,OAAO;KACxB,CAAC;IACF,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;GACtC;EAGD,aAAa,CAAC,CAAkD;IAC9D,IACE,CAAC;OACE,YAAY,EAAE;OACd,IAAI,CACH,CAAC,GAAgB,KACf,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;GACF;EAGD,eAAe,CAAC,CAAwC;IACtD,IACE,CAAC,CAAC;OACC,YAAY,EAAE;OACd,IAAI,CAAC,CAAC,GAAgB,KAAK,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;;IAGF,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAE7B,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;MAC9D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;QAC7B,IAAI,CAAC,gBAAgB,EAAE,CAAC;OACzB,CAAC,CAAC;KACJ,CAAC,CAAC;IAEH,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;MAC9D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;QAC7B,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB,CAAC,CAAC;KACJ,CAAC,CAAC;IAEH,IAAI,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAChE,IAAI,UAAU,EAAE;MACd,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC;QACrC,CAAC,CAAC,eAAe,EAAE,CAAC;OACrB,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;GACzE;EAGD,qBAAqB,CAAC,CAAyC;IAC7D,IAAI,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,UAAU,CAAC,EAAE;MAC9D,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACpD,sBAAsB,CACvB,CAAC;KACH;IACD,IAAI,CAAC,IAAI,CAAC,iBAAiB;MAAE,OAAO;IACpC,IAAI,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC;IAEvC,SAAS,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;MACxD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,OAAmB;QACjD,IAAI,MAAM,GAAG,OAAO,CAAC,MAAqB,CAAC;QAC3C,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;OACpE,CAAC,CAAC;KACJ,CAAC,CAAC;IAEH,SAAS,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;MACnD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;QAC7B,IAAI,CAAC,MAAM,EAAE,CAAC;OACf,CAAC,CAAC;KACJ,CAAC,CAAC;IAEH,SAAS,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;MAC/D,IAAI,CAAC,aAAa,GAAG,IAAyB,CAAC;MAC/C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;QAC7B,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACtC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QACtD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACxC,UAAU,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;OAC/C,CAAC,CAAC;KACJ,CAAC,CAAC;GACJ;EAEO,WAAW,CAAC,EAAE;IACpB,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;GAChD;EAEO,MAAM;IACZ,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,KAAK,CAAC;IACpC,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,EAAE,CAAC;GAC5B;EAEO,YAAY,CAAC,KAAK,EAAE,MAAM;IAChC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;GAC9C;EAEO,gBAAgB;IACtB,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;GACjC;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,MAAM,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;GAClD;EAED,gBAAgB;IACd,IAAI,CAAC,EAAE,GAAG,IAAIA,KAAc,CAAC,CAAC,OAAO;MACnC,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;KACF,CAAC,CAAC;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACzB,IAAI,CAAC,UAAU,CAAC,OAAO,GAAG;MACxB,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,WAAW,IAAI,IAAI,CAAC;KAC7D,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,GAAG,GAAG,EAAE,EACzC,GAAG,EAAG,IAAI,CAAC,EAAE,CAAC,aAA0B,CAAC,GAAG,KAAK,KAAK,GAAG,KAAK,GAAG,KAAK,IAEtE,gCACW,SAAS,kBACL,eAAe,EAC5B,KAAK,EAAC,iDAAiD,EACvD,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,OAAO,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,CAAC,EAChD,EAAE,EAAC,aAAa,IAEhB,cAAQ,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,UAAU,IACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAsUM,CACA,EACT,WAAK,IAAI,EAAC,QAAQ,GAAO,EACzB,eAAQ,CACK,CACV,EACP;GACH;;;;;;;;;;;;;","names":["ResizeObserver"],"sources":["./src/components/global-search-results/global-search-results.scss?tag=nano-global-search-results&encapsulation=shadow","./src/components/global-search-results/global-search-results.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  display: block;\n  flex: 1 1 100%;\n}\n\n.main-search {\n  display: flex;\n  background: white;\n  font-size: 14px;\n  min-height: calc(100vh - 63px);\n  justify-content: space-between;\n\n  &__wrap {\n    /* autoprefixer: ignore next */\n    display: contents;\n    height: 100%;\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  button {\n    appearance: none;\n    border: none;\n    background: none;\n  }\n\n  .icon-button {\n    color: inherit;\n    align-self: normal;\n    padding: 9px 7px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n  }\n\n  &__topbar {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    margin-bottom: 1em;\n\n    &::after {\n      content: '';\n      width: calc(100% - 30px);\n      left: 30px;\n      position: relative;\n      border-bottom: 1px solid #e5eef1;\n      padding-top: 0.9em;\n    }\n  }\n\n  &__applied-filters {\n    border: solid 1px $color-lightgrey;\n    text-transform: uppercase;\n    border-radius: 3px;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    line-height: 0.9;\n    padding: 5px 5px 0 5px;\n    letter-spacing: 2px;\n    flex-wrap: wrap;\n    margin-bottom: 0.5rem;\n\n    span {\n      display: flex;\n      align-items: center;\n    }\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n\n  &__applied-nofilter {\n    @include margin(0, 5px, 3px, 0);\n    @include padding(10px, 7px, 10px, 7px);\n\n    font-size: 12px;\n    color: rgba(69, 85, 86, 0.85);\n  }\n\n  &__applied-filter {\n    @include padding(5px, 2px, 5px, 8px);\n    @include margin(0, 5px, 5px, 0);\n\n    color: $color-darkgrey;\n    font-size: 11px;\n    border-radius: 2px;\n    border: solid 1px rgba(0, 132, 169, 0.5);\n    background-color: rgba(0, 132, 169, 0.2);\n    line-height: 1;\n\n    .icon-button {\n      @include padding(2px, 4px, 1px, 10px);\n\n      nano-icon {\n        pointer-events: none;\n      }\n    }\n  }\n\n  .topbar {\n    &__bkbtn {\n      position: relative;\n      left: -7px;\n    }\n\n    &__query {\n      :host(.small) & {\n        display: none;\n      }\n    }\n\n    &__filtering {\n      display: flex;\n      align-items: center;\n\n      @include margin(0, 0, 0, 1em);\n\n      flex: 1;\n    }\n\n    &__order {\n      min-width: 175px;\n      max-width: 200px;\n\n      @include margin(0, 0, 0, auto);\n\n      // @include media-breakpoint-down('sm') {\n      //   max-width: 300px;\n      // }\n\n      :host(.small) & {\n        max-width: 300px;\n      }\n    }\n\n    nano-select {\n      opacity: 1;\n      transition: 0.1s ease opacity;\n\n      &:not(.hydrated) {\n        opacity: 0;\n      }\n    }\n\n    &__show-filters {\n      @include margin(0, 0, 0, 0.5em);\n\n      text-transform: uppercase;\n      display: none;\n      flex-direction: column;\n      align-items: center;\n\n      nano-icon {\n        font-size: 20px;\n      }\n\n      // @include media-breakpoint-down('sm') {\n      //   display: flex;\n      // }\n\n      :host(.small) & {\n        display: flex;\n      }\n    }\n\n    &__filter-count {\n      width: 12px;\n      height: 12px;\n      box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);\n      border: solid 1px #005c76;\n      background-color: #005c76;\n      color: white;\n      font-size: 7px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n      margin-bottom: 3px;\n    }\n  }\n\n  &__results {\n    font-size: 14px;\n    padding: 1em 40px;\n    color: rgba(69, 85, 86, 0.85);\n    width: 70%;\n    height: 100%;\n\n    @include media-breakpoint-down('sm') {\n      padding: 1em 20px;\n    }\n\n    :host(.small) & {\n      width: 100%;\n    }\n  }\n\n  &__filters {\n    outline: none;\n\n    @include padding(1.8em, 40px, 1em, 0);\n\n    @include media-breakpoint-down('sm') {\n      @include padding(null, 20px, null, null);\n    }\n\n    flex: 1 1 30%;\n    box-sizing: border-box;\n\n    :host(:not(.small)) & {\n      max-width: 350px;\n      min-width: 220px;\n    }\n  }\n}\n\n.filters {\n  color: $color-darkgrey;\n  background: white;\n  font-size: 14px;\n\n  :host(.small) & {\n    position: fixed;\n    width: 0;\n    height: 0;\n    z-index: 10;\n    top: 0;\n    right: 0;\n    transition: all 0s ease 0.5s;\n    background: none;\n\n    &.show {\n      height: 100vh;\n      width: 100vw;\n      transition: all 0s ease 0s;\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &::after {\n      content: '';\n      background: rgba(0, 0, 0, 0.5);\n      position: absolute;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      z-index: -1;\n      opacity: 0;\n      transition: 0.1s ease opacity;\n    }\n  }\n\n  &__close-filters {\n    display: none !important;\n    font-size: 1.4em;\n\n    :host(.small) & {\n      display: inline-block !important;\n\n      @include margin(0, 0, 0, auto);\n    }\n  }\n\n  &-wrap {\n    :host(.small) & {\n      position: absolute;\n      top: 0;\n      right: 0;\n      background: rgb(247, 246, 246);\n      transform: translateX(100%);\n      width: 300px;\n      min-width: 200px;\n      max-width: 80vw;\n      transition: transform 0.3s ease;\n      padding: 1em;\n      color: black;\n      overflow: auto;\n      height: 100vh;\n    }\n  }\n\n  &.show {\n    .filters-wrap {\n      :host(.small) & {\n        transform: translateX(0%);\n        box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.1);\n      }\n    }\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  nano-details {\n    --padding: 0.8em;\n\n    margin: 0.8em 0;\n\n    strong[slot] {\n      display: block;\n\n      @include padding(null, null, null, calc(20px - 0.8em));\n    }\n\n    nano-icon[slot='icon-end'] {\n      @include padding(null, calc(20px - 0.8em), null, calc(20px - 0.8em));\n    }\n  }\n\n  li:last-child .filter-label {\n    margin-bottom: 0;\n  }\n\n  .filter-label {\n    display: flex;\n    align-items: center;\n    position: relative;\n    margin: 0.5em 0;\n    line-height: 1.4;\n    z-index: 0;\n\n    &::before {\n      @include margin(0, 1em, 0, 0);\n\n      content: '';\n      border: 1px solid $color-blue;\n      background: $color-white;\n      border-radius: 3px;\n      height: 1em;\n      width: 1em;\n      min-width: 1em;\n      min-height: 1em;\n      display: inline-block;\n    }\n\n    &::after {\n      @include svg-background-image(\n        \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\"\n      );\n\n      content: '';\n      height: 0.7em;\n      width: 0.7em;\n      position: absolute;\n      left: 2px;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 1;\n      display: block;\n      background-size: 100%;\n      background-position: center center;\n      background-repeat: no-repeat;\n\n      @include rtl-host() {\n        right: 1px;\n        left: auto;\n      }\n    }\n  }\n\n  .filter-cb {\n    @include visually-hide;\n\n    &:checked + .filter-label {\n      &::before {\n        background: $color-blue--darker;\n      }\n    }\n\n    &:focus + .filter-label {\n      &::before {\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);\n      }\n    }\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n  }\n\n  &-reset {\n    color: $color-blue;\n    font-size: 12px;\n    text-decoration: underline;\n\n    @include margin(0, 0, 0, auto);\n\n    :host(.small) & {\n      @include margin(0, 0, 0, 0);\n    }\n  }\n\n  &-title {\n    @include margin(0, 0, 0, 0);\n\n    text-transform: uppercase;\n    color: rgba(69, 85, 86, 0.85);\n    font-weight: bold;\n    font-size: 14px;\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n}\n\n.result {\n  text-decoration: none;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  padding-bottom: 14px;\n  border-bottom: 1px solid $color-lightgrey;\n\n  * {\n    word-wrap: break-word;\n    word-break: break-word;\n  }\n\n  &__title {\n    color: $color-blue;\n    font-size: 16px;\n    line-height: 1.43;\n    margin: 1em 0 0.5em 0;\n    text-decoration: underline;\n    width: 70%;\n    display: flex;\n    font-weight: 500;\n\n    nano-icon {\n      @include margin(0, 0.5em, 0, 0);\n\n      min-width: 20px;\n      min-height: 20px;\n      opacity: 0.8;\n    }\n\n    @include media-breakpoint-down('md') {\n      width: 100%;\n    }\n  }\n\n  &__body {\n    color: $color-darkgrey;\n    font-size: 14px;\n    line-height: 1.67;\n    width: 70%;\n\n    @include media-breakpoint-down('md') {\n      width: 100%;\n    }\n  }\n\n  &__date {\n    font-size: 10px;\n    line-height: 1.6;\n    color: $color-darkgrey;\n    text-align: right;\n    margin: auto 0;\n    width: 30%;\n\n    @include media-breakpoint-down('md') {\n      width: 100%;\n      margin: 0.8em 0 0 0;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  State,\n  ComponentInterface,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { AloliaSearchResultDetail } from '../../interface';\nimport { SearchIndex } from '../../interface';\nimport { raf } from '../../utils';\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() 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  @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  @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    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n    const {\n      detail: { results, client },\n    } = e as { detail: AloliaSearchResultDetail };\n    const result = results.find((result) => result.selected);\n\n    this.apiKey = client.apiKey;\n    this.appId = client.appId;\n    this.index = {\n      name: result.indexName,\n      index: result.index,\n      domain: result.domain,\n      filters: result.filters,\n    };\n    this.algoliaEle.query = result.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(e: CustomEvent & { target: HTMLElement }) {\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\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    let 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\n  @Listen('nanoNewResults', { target: 'body' })\n  attachResultListeners(e?: CustomEvent & { target: HTMLElement }) {\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    let resultEle = this.algoliaResultsEle;\n\n    resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n      item.addEventListener('click', (clickEv: MouseEvent) => {\n        let filter = clickEv.target as HTMLElement;\n        this.removeFilter(filter.dataset.filter, filter.dataset.filterVal);\n      });\n    });\n\n    resultEle.querySelectorAll('.back-btn').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.goback();\n      });\n    });\n\n    resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {\n      this.openFilterBtn = item as HTMLButtonElement;\n      item.addEventListener('click', () => {\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  }\n\n  private changeOrder(ev) {\n    this.algoliaEle.replicaIndex = ev.detail.value;\n  }\n\n  private goback() {\n    this.removeAllFilters();\n    this.algoliaEle.showResults = false;\n    this.algoliaEle.query = '';\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  componentDidLoad() {\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    this.algoliaEle.filters = [\n      'created > ' + Math.floor((Date.now() - 63115200000) / 1000),\n    ]; // only get last 2 years\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ small: this.currentWidth < 577 }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : false}\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) => raf(() => (this.algoliaEle = ele))}\n          id=\"main-search\"\n        >\n          <script type=\"text/template\" slot=\"template\">\n            {`<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\n                      {{ @if (it.indexName === 'All') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <option value=\"all_prod_en\">Sort by: Most relevant</option>\n                          <option value=\"all_prod_en_date_desc\">Sort by: Newest</option>\n                          <option value=\"all_prod_en_date_asc\">Sort by: Oldest</option>\n                          <option value=\"all_prod_en_activity_date_desc\">Sort by: Recent activity</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'www') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <option value=\"cws_english_en\">Sort by: Most relevant</option>\n                          <option value=\"cws_english_en_date_desc\">Sort by: Newest</option>\n                          <option value=\"cws_english_en_date_asc\">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Resources') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <option value=\"cws_english_resources_en\">Sort by: Most relevant</option>\n                          <option value=\"cws_english_resources_en_featured_desc\">Sort by: Newest</option>\n                          <option value=\"cws_english_resources_en_featured_asc\">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Store') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <option value=\"store_prod\">Sort by: Most relevant</option>\n                          <option value=\"store_prod_date_desc\">Sort by: Newest</option>\n                          <option value=\"store_prod_date_asc\">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Community') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--community indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <option value=\"community_prod\">Sort by: Most relevant</option>\n                          <option value=\"community_prod_date_desc\">Sort by: Newest</option>\n                          <option value=\"community_prod_date_asc\">Sort by: Oldest</option>\n                          <option value=\"community_prod_activity_date_desc\">Sort by: Recent activity</option>\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                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      <li class=\"sc-nano-global-search-results\">\n                        <a class=\"sc-nano-global-search-results result\" href=\"{{ result.url | abs_url(it, result) }}\">\n                          <h4 class=\"sc-nano-global-search-results result__title\" data-icon-set=\"{{(iconSet = false)}}\">\n                            {{ @if (!it.legacy)  }}\n\n                              {{ @if (result.type === 'faq' || result.type === 'faqs') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/question-circle\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'comment') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/comment\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'protocol') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/clipboard-list\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'publication') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/file-chart-line\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'poster' || result.type === 'lc_poster') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/presentation\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'post') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/comments\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'news_item') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/newspaper\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'event') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/calendar\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'talk' || result.type === 'lc_lightning_talk' || result.type === 'ncm_plenary_talk' || result.type === 'ncm_lightning_talk') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/keynote\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'video') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/video\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'data_release') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/analytics\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'job_vacancy') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/ballot-check\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'tool') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/wrench\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'literature') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/book\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'community_info') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/users\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'article') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/file-alt\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'provider') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/handshake\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'apps') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/vials\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'white_paper') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/file-pdf\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'Nanopore Store') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/shopping-cart\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (!result.type || !iconSet) }}\n                                <nano-icon  class=\"sc-nano-global-search-results\" name=\"light/file\"></nano-icon>\n                              {{ /if }}\n                            {{ /if }}\n                            {{ result.title | safe }}\n                          </h4>\n                          {{ @if (result.body) }}\n                            <div class=\"sc-nano-global-search-results result__body\">{{ result.body | safe | trim_to(200) }}</div>\n                          {{ /if }}\n                          {{ @if (result.updated) }}\n                            <div class=\"sc-nano-global-search-results result__date\">Last Updated: {{ result.updated | date_short }}</div>\n                          {{ #else }}\n                            {{ @if (result.created) }}\n                              <div class=\"sc-nano-global-search-results result__date\">Added: {{ result.created | date_short }}</div>\n                            {{ /if }}\n                          {{ /if }}\n                        </a>\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                      {{ @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 }}\" 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          </script>\n          <div slot=\"output\"></div>\n          <slot />\n        </nano-algolia>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-global-search-results.entry.js","mappings":"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","names":["ResizeObserver"],"sources":["./src/components/global-search-results/global-search-results.scss?tag=nano-global-search-results&encapsulation=shadow","./src/components/global-search-results/global-search-results.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  display: block;\n  flex: 1 1 100%;\n}\n\n.main-search {\n  display: flex;\n  background: white;\n  font-size: 14px;\n  min-height: calc(100vh - 63px);\n  justify-content: space-between;\n\n  &__wrap {\n    /* autoprefixer: ignore next */\n    display: contents;\n    height: 100%;\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  button:not(.result__tags-tag) {\n    appearance: none;\n    border: none;\n    background: none;\n    position: relative;\n    top: -2px;\n  }\n\n  .icon-button {\n    color: inherit;\n    align-self: normal;\n    padding: 9px 7px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n  }\n\n  &__topbar {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    margin-bottom: 1em;\n\n    &::after {\n      content: '';\n      width: calc(100% - 30px);\n      left: 30px;\n      position: relative;\n      border-bottom: 1px solid #e5eef1;\n      padding-top: 0.9em;\n    }\n  }\n\n  &__applied-filters {\n    border: solid 1px $color-lightgrey;\n    text-transform: uppercase;\n    border-radius: 3px;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    line-height: 0.9;\n    padding: 5px 5px 0 5px;\n    letter-spacing: 2px;\n    flex-wrap: wrap;\n    margin-bottom: 0.5rem;\n\n    span {\n      display: flex;\n      align-items: center;\n    }\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n\n  &__applied-nofilter {\n    @include margin(0, 5px, 3px, 0);\n    @include padding(10px, 7px, 10px, 7px);\n\n    font-size: 12px;\n    color: rgba(69, 85, 86, 0.85);\n  }\n\n  &__applied-filter {\n    @include padding(5px, 2px, 3px, 8px);\n    @include margin(0, 5px, 5px, 0);\n\n    color: $color-darkgrey;\n    font-size: 11px;\n    border-radius: 2px;\n    border: solid 1px rgba(0, 132, 169, 0.5);\n    background-color: rgba(0, 132, 169, 0.2);\n    line-height: 1;\n\n    .icon-button {\n      @include padding(2px, 4px, 1px, 10px);\n\n      nano-icon {\n        pointer-events: none;\n      }\n    }\n  }\n\n  .topbar {\n    &__bkbtn {\n      position: relative;\n      left: -7px;\n    }\n\n    &__query {\n      :host(.small) & {\n        display: none;\n      }\n    }\n\n    &__filtering {\n      display: flex;\n      align-items: center;\n\n      @include margin(0, 0, 0, 1em);\n\n      flex: 1;\n    }\n\n    &__order {\n      min-width: 175px;\n      max-width: 200px;\n\n      @include margin(0, 0, 0, auto);\n\n      // @include media-breakpoint-down('sm') {\n      //   max-width: 300px;\n      // }\n\n      :host(.small) & {\n        max-width: 300px;\n      }\n    }\n\n    nano-select {\n      opacity: 1;\n      transition: 0.1s ease opacity;\n\n      &:not(.hydrated) {\n        opacity: 0;\n      }\n    }\n\n    &__show-filters {\n      @include margin(0, 0, 0, 0.5em);\n\n      text-transform: uppercase;\n      display: none;\n      flex-direction: column;\n      align-items: center;\n\n      nano-icon {\n        font-size: 20px;\n      }\n\n      // @include media-breakpoint-down('sm') {\n      //   display: flex;\n      // }\n\n      :host(.small) & {\n        display: flex;\n      }\n    }\n\n    &__filter-count {\n      width: 12px;\n      height: 12px;\n      box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);\n      border: solid 1px #005c76;\n      background-color: #005c76;\n      color: white;\n      font-size: 7px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n      margin-bottom: 3px;\n    }\n  }\n\n  &__results {\n    font-size: 14px;\n    padding: 1em 40px;\n    color: rgba(69, 85, 86, 0.85);\n    width: 70%;\n    height: 100%;\n\n    @include media-breakpoint-down('sm') {\n      padding: 1em 20px;\n    }\n\n    :host(.small) & {\n      width: 100%;\n    }\n  }\n\n  &__filters {\n    outline: none;\n\n    @include padding(1.8em, 40px, 1em, 0);\n\n    @include media-breakpoint-down('sm') {\n      @include padding(null, 20px, null, null);\n    }\n\n    flex: 1 1 30%;\n    box-sizing: border-box;\n\n    :host(:not(.small)) & {\n      max-width: 350px;\n      min-width: 220px;\n    }\n  }\n}\n\n.filters {\n  color: $color-darkgrey;\n  background: white;\n  font-size: 14px;\n\n  :host(.small) & {\n    position: fixed;\n    width: 0;\n    height: 0;\n    z-index: 10;\n    top: 0;\n    right: 0;\n    transition: all 0s ease 0.5s;\n    background: none;\n\n    &.show {\n      height: 100vh;\n      width: 100vw;\n      transition: all 0s ease 0s;\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &::after {\n      content: '';\n      background: rgba(0, 0, 0, 0.5);\n      position: absolute;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      z-index: -1;\n      opacity: 0;\n      transition: 0.1s ease opacity;\n    }\n  }\n\n  &__close-filters {\n    display: none !important;\n    font-size: 1.4em;\n\n    :host(.small) & {\n      display: inline-block !important;\n\n      @include margin(0, 0, 0, auto);\n    }\n  }\n\n  &-wrap {\n    :host(.small) & {\n      position: absolute;\n      top: 0;\n      right: 0;\n      background: rgb(247, 246, 246);\n      transform: translateX(100%);\n      width: 300px;\n      min-width: 200px;\n      max-width: 80vw;\n      transition: transform 0.3s ease;\n      padding: 1em;\n      color: black;\n      overflow: auto;\n      height: 100vh;\n    }\n  }\n\n  &.show {\n    .filters-wrap {\n      :host(.small) & {\n        transform: translateX(0%);\n        box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.1);\n      }\n    }\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  nano-details {\n    --padding: 0.8em;\n\n    margin: 0.8em 0;\n\n    strong[slot] {\n      display: block;\n\n      @include padding(null, null, null, calc(20px - 0.8em));\n    }\n\n    nano-icon[slot='icon-end'] {\n      @include padding(null, calc(20px - 0.8em), null, calc(20px - 0.8em));\n    }\n  }\n\n  li:last-child .filter-label {\n    margin-bottom: 0;\n  }\n\n  .filter-label {\n    display: flex;\n    align-items: center;\n    position: relative;\n    margin: 0.5em 0;\n    line-height: 1.4;\n    z-index: 0;\n\n    &::before {\n      @include margin(0, 1em, 0, 0);\n\n      content: '';\n      border: 1px solid $color-blue;\n      background: $color-white;\n      border-radius: 3px;\n      height: 1em;\n      width: 1em;\n      min-width: 1em;\n      min-height: 1em;\n      display: inline-block;\n    }\n\n    &::after {\n      @include svg-background-image(\n        \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\"\n      );\n\n      content: '';\n      height: 0.7em;\n      width: 0.7em;\n      position: absolute;\n      left: 2px;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 1;\n      display: block;\n      background-size: 100%;\n      background-position: center center;\n      background-repeat: no-repeat;\n\n      @include rtl-host() {\n        right: 1px;\n        left: auto;\n      }\n    }\n  }\n\n  .filter-cb {\n    @include visually-hide;\n\n    &:checked + .filter-label {\n      &::before {\n        background: $color-blue--darker;\n      }\n    }\n\n    &:focus + .filter-label {\n      &::before {\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);\n      }\n    }\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n  }\n\n  &-reset {\n    color: $color-blue;\n    font-size: 12px;\n    text-decoration: underline;\n\n    @include margin(0, 0, 0, auto);\n\n    :host(.small) & {\n      @include margin(0, 0, 0, 0);\n    }\n  }\n\n  &-title {\n    @include margin(0, 0, 0, 0);\n\n    text-transform: uppercase;\n    color: rgba(69, 85, 86, 0.85);\n    font-weight: bold;\n    font-size: 14px;\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n}\n\n.result {\n  text-decoration: none;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  padding-bottom: 14px;\n  border-bottom: 1px solid $color-lightblue;\n\n  * {\n    word-wrap: break-word;\n    word-break: break-word;\n  }\n\n  &__title {\n    margin: 1em 0 0.5em 0;\n    width: 70%;\n    display: flex;\n\n    a {\n      color: lighten($color-blue, 4%);\n      font-size: 14px;\n      line-height: 1.43;\n      text-decoration: none;\n      font-weight: 600;\n    }\n\n    nano-icon {\n      @include margin(0, 0.5em, 0, 0);\n\n      min-width: 20px;\n      min-height: 20px;\n      opacity: 0.8;\n    }\n\n    @include media-breakpoint-down('lg') {\n      width: 100%;\n    }\n  }\n\n  &__body {\n    color: $color-darkgrey;\n    font-size: 13px;\n    width: 70%;\n    text-decoration: none;\n\n    @include media-breakpoint-down('lg') {\n      width: 100%;\n    }\n  }\n\n  &__pdf {\n    display: inline-block;\n    margin-inline-start: 0.5rem;\n    color: $color-palegrey;\n  }\n\n  &__meta {\n    display: flex;\n    flex-flow: row wrap;\n    color: $color-darkgrey;\n    font-size: 11px;\n    line-height: 13px;\n    width: 100%;\n    align-items: center;\n\n    > * {\n      margin-top: 0.5rem;\n\n      &:not(:last-child) {\n        padding-inline-end: 0;\n\n        &::after {\n          content: '';\n          height: 1rem;\n          width: 1px;\n          background: #90c6e7;\n          display: inline-block;\n          margin-inline-start: 0.7rem;\n          margin-inline-end: 0.7rem;\n\n          @include media-breakpoint-down('sm') {\n            display: none;\n          }\n        }\n      }\n    }\n\n    @include media-breakpoint-down('sm') {\n      flex-flow: column;\n      align-items: flex-start;\n    }\n  }\n\n  &__tags {\n    display: flex;\n    flex-flow: row wrap;\n\n    @include media-breakpoint-down('sm') {\n      padding-inline-start: 0;\n    }\n\n    &-tag {\n      color: $color-darkgrey;\n      display: inline-block;\n      font-size: 0.4375rem;\n      letter-spacing: 1.4px;\n      background: #fff;\n      border-radius: 2px;\n      text-transform: uppercase;\n      padding: 0 4px 1px 5px;\n      font-weight: 600;\n      margin: 3px 0.25rem 0.25rem 0;\n      border: 1px solid #b5aea7;\n      white-space: nowrap;\n      line-height: 13px;\n    }\n  }\n\n  &__type {\n    font-weight: 600;\n    text-transform: capitalize;\n    white-space: nowrap;\n    display: flex;\n    align-items: center;\n  }\n\n  &__date {\n    color: $color-darkgrey;\n    padding: 0 0.75rem;\n    white-space: nowrap;\n\n    @include media-breakpoint-down('lg') {\n      width: 100%;\n      margin: 0.8em 0 0 0;\n    }\n  }\n\n  &__source {\n    color: $color-darkgrey;\n    padding-inline-end: 0.75rem;\n  }\n\n  &__authors {\n    font-size: 12px;\n    color: $color-darkgrey;\n    margin-bottom: 0.25rem;\n    text-decoration: none;\n    width: 70%;\n  }\n\n  &__buttons {\n    width: 70%;\n    margin-bottom: 0.5rem;\n\n    &-button {\n      background-color: $color-blue;\n      color: #fff;\n      padding: 5px 8px 1px;\n      border-radius: 4px;\n      display: inline-block;\n      font-size: 11px;\n      text-decoration: none;\n      border: none;\n    }\n  }\n\n  &__promo {\n    width: 70%;\n    margin-bottom: 0.5rem;\n    text-decoration: none;\n    color: $color-darkgrey;\n\n    &-box {\n      width: 300px;\n      background-color: #e3eef1;\n      padding: 12px 12px 8px 4px;\n      display: flex;\n      flex-flow: row nowrap;\n      margin-top: 1rem;\n    }\n\n    &-bigdate {\n      flex: 0 1 60px;\n      text-align: center;\n      font-weight: 600;\n      color: $color-blue;\n      text-transform: uppercase;\n      line-height: 1.25;\n      letter-spacing: 1.5px;\n\n      @include media-breakpoint-down('lg') {\n        width: 100%;\n      }\n\n      span {\n        color: $color-darkgrey;\n        display: block;\n      }\n\n      & ~ div {\n        padding-inline-start: 1rem;\n        border-inline-start: 1px solid #c5dbe1;\n      }\n    }\n\n    &-date {\n      font-size: 12px;\n    }\n\n    &-venue {\n      font-size: 12px;\n    }\n\n    nano-icon {\n      color: $color-blue;\n      position: relative;\n      top: 1px;\n      padding-inline-end: 2px;\n    }\n  }\n\n  &__image {\n    display: block;\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center;\n    border-radius: 4px;\n    position: relative;\n    width: 100%;\n    height: 150px;\n    margin-bottom: 0.5rem;\n\n    @include media-breakpoint-up('sm') {\n      width: 142px;\n      height: 80px;\n    }\n\n    nano-icon {\n      position: absolute;\n      top: calc(50% - 0.75rem);\n      left: calc(50% - 0.75rem);\n      font-size: 1.5rem;\n      color: #0084a9;\n\n      --primary-color: #fff;\n      --secondary-color: #0084a9;\n      --primary-opacity: 1;\n\n      @include media-breakpoint-down('sm') {\n        font-size: 3rem;\n        top: calc(50% - 1.5rem);\n        left: calc(50% - 1.5rem);\n      }\n    }\n  }\n\n  &__video {\n    &-body {\n      width: 70%;\n      text-decoration: none;\n      display: flex;\n      flex-flow: row wrap;\n\n      @include media-breakpoint-down('lg') {\n        width: 100%;\n      }\n\n      @include media-breakpoint-down('sm') {\n        flex-flow: column;\n      }\n\n      .result__body {\n        padding-inline-start: 1rem;\n        display: flex;\n        flex-direction: column;\n        margin-bottom: 0;\n        flex: 1;\n\n        @include media-breakpoint-down('sm') {\n          padding-inline-start: 0;\n        }\n\n        p {\n          display: inline;\n          margin: 0;\n        }\n\n        u,\n        li,\n        a {\n          text-decoration: none;\n        }\n\n        .result__meta {\n          margin-top: 0.5rem;\n        }\n\n        .result__description {\n          flex: 1 0 auto;\n        }\n      }\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  State,\n  ComponentInterface,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { AloliaSearchResultDetail } from '../../interface';\nimport { SearchIndex } from '../../interface';\nimport { raf } from '../../utils';\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() 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  @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  @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    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n    const {\n      detail: { results, client },\n    } = e as { detail: AloliaSearchResultDetail };\n    const result = results.find((result) => result.selected);\n\n    this.apiKey = client.apiKey;\n    this.appId = client.appId;\n    this.index = {\n      name: result.indexName,\n      index: result.index,\n      domain: result.domain,\n      filters: result.filters,\n    };\n    this.algoliaEle.query = result.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(e: CustomEvent & { target: HTMLElement }) {\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\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    let 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\n  @Listen('nanoNewResults', { target: 'body' })\n  attachResultListeners(e?: CustomEvent & { target: HTMLElement }) {\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    let resultEle = this.algoliaResultsEle;\n\n    resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n      item.addEventListener('click', (clickEv: MouseEvent) => {\n        let filter = clickEv.target as HTMLElement;\n        this.removeFilter(filter.dataset.filter, filter.dataset.filterVal);\n      });\n    });\n\n    resultEle.querySelectorAll('.back-btn').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.goback();\n      });\n    });\n\n    resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {\n      this.openFilterBtn = item as HTMLButtonElement;\n      item.addEventListener('click', () => {\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\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 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    this.removeAllFilters();\n    this.algoliaEle.showResults = false;\n    this.algoliaEle.query = '';\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  componentDidLoad() {\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    this.algoliaEle.filters = [\n      'created > ' + Math.floor((Date.now() - 63115200000) / 1000),\n    ]; // only get last 2 years\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ small: this.currentWidth < 677 }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : false}\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) => raf(() => (this.algoliaEle = ele))}\n          id=\"main-search\"\n        >\n          <script type=\"text/template\" slot=\"template\">\n            {`<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\n                      {{ @if (it.indexName === 'All') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"all_prod_en\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"all_prod_en_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"all_prod_en_date_asc\">Sort by: Oldest</nano-option>\n                          <nano-option value=\"all_prod_en_activity_date_desc\">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'www') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"cws_english_en\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"cws_english_en_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"cws_english_en_date_asc\">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Resources') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"cws_english_resources_en\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"cws_english_resources_en_featured_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"cws_english_resources_en_featured_asc\">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Store') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"store_prod\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"store_prod_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"store_prod_date_asc\">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Community') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--community indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"community_prod\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"community_prod_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"community_prod_date_asc\">Sort by: Oldest</nano-option>\n                          <nano-option value=\"community_prod_activity_date_desc\">Sort by: Recent activity</nano-option>\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                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      <li class=\"sc-nano-global-search-results\">\n                        <div class=\"sc-nano-global-search-results result\">\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                            {{ result.title | safe }}\n                            {{ @if (result.type === 'technical_document' || result.type === 'literature' || result.type === 'white_paper' || result.type === '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                                    Athors: {{ author | trim_to(60) }}\n                                  <!-- {{ /if }} -->\n                                {{ /each }}\n                              </a>\n                            {{ /if }}\n                          {{ /if }}\n                          {{ @if (result.type === 'video' || result.type === '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.description | safe | trim_to(200) }}\n                                  {{ /if }}\n                                </div>\n                              </div>\n                              <div class=\"sc-nano-global-search-results result__meta\">\n                                {{ @if (result.type) }}\n                                  <div class=\"sc-nano-global-search-results result__type\">\n                                  {{ @if (result.type === 'lc_lightning_talk') }}\n                                    Presentation\n                                  {{ #else }}\n                                    {{ result.type }}\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) }}\">{{ result.body | safe | trim_to(200) }}</a>\n                          {{ /if }}\n                          {{ @if (result.type === '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 (result.type === '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 (result.type !== 'lc_lightning_talk' && result.type !== 'video') }}\n                            <div class=\"sc-nano-global-search-results result__meta\">\n                              {{ @if (result.type) }}\n                                <div class=\"sc-nano-global-search-results result__type\">\n                                {{ @if (result.type === 'news_item') }}\n                                  News\n                                {{ #elif (result.type === 'static_page' || result.type === 'flexible' || result.type === 'bespoke') }}\n                                  Page\n                                {{ #elif (result.type === 'case_study') }}\n                                  Case study\n                                {{ #elif (result.type === 'lc_poster') }}\n                                  Poster\n                                {{ #elif (result.type === 'nanopore_live') }}\n                                  Live stream\n                                {{ #elif (result.type === 'data_release') }}\n                                  Data release\n                                {{ #elif (result.type === 'research_area') }}\n                                  Research area\n                                {{ #elif (result.type === 'white_paper') }}\n                                  White paper\n                                {{ #elif (result.type === 'technical_document') }}\n                                  Technical document\n                                {{ #elif (result.type === 'info_sheet') }}\n                                  Info sheet\n                                {{ #elif (result.type === 'lc_home' || result.type === 'lc_venue') }}\n                                  London Calling\n                                {{ #else }}\n                                  {{ result.type }}\n                                {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (!result.type === 'event') }}\n                                {{ @if (result.updated) }}\n                                  <div class=\"sc-nano-global-search-results result__date\">{{ result.updated | date_long({year: 'numeric', month: 'short', day: undefined}) }}</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: undefined}) }}</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                      {{ @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          </script>\n          <div slot=\"output\"></div>\n          <slot />\n        </nano-algolia>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/nano-grid_3.entry.js

@@ -1,16 +1,18 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { r as registerInstance, h, e as Host, g as getElement, c as createEvent } from './index-5f8d16e7.js';
+import { r as registerInstance, c as createEvent, h, e as Host, g as getElement } from './index-5f8d16e7.js';
 import { i as index } from './ResizeObserver.es-724af9fd.js';
+import { d as debounce } from './throttle-d3d933cd.js';
 
-const gridCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:\"'grid size: sm'\";display:block;opacity:0;-webkit-transition:0.2s ease opacity;transition:0.2s ease opacity}:host .grid{display:grid;grid-gap:var(--grid-row-gap) var(--grid-col-gap);height:inherit;min-height:inherit}:host .grid::slotted(*){border:0 solid transparent;background-clip:padding-box;border-width:var(--grid-row-gap) calc(var(--grid-col-gap) / 2)}:host(.ready){opacity:1}:host(.has-grid) .grid{display:-ms-grid;display:grid}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-1),:host(.has-grid) .grid::slotted(.nano-grid-col-start-1){-ms-grid-column:1 !important;grid-column-start:1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-1),:host(.has-grid) .grid::slotted(.nano-grid-row-start-1){-ms-grid-row:1 !important;grid-row-start:1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-1),:host(.has-grid) .grid::slotted(.nano-grid-col-span-1){-ms-grid-column-span:1 !important;grid-column-end:span 1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-1),:host(.has-grid) .grid::slotted(.nano-grid-row-span-1){-ms-grid-row-span:1 !important;grid-row-end:span 1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-2),:host(.has-grid) .grid::slotted(.nano-grid-col-start-2){-ms-grid-column:2 !important;grid-column-start:2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-2),:host(.has-grid) .grid::slotted(.nano-grid-row-start-2){-ms-grid-row:2 !important;grid-row-start:2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-2),:host(.has-grid) .grid::slotted(.nano-grid-col-span-2){-ms-grid-column-span:2 !important;grid-column-end:span 2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-2),:host(.has-grid) .grid::slotted(.nano-grid-row-span-2){-ms-grid-row-span:2 !important;grid-row-end:span 2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-3),:host(.has-grid) .grid::slotted(.nano-grid-col-start-3){-ms-grid-column:3 !important;grid-column-start:3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-3),:host(.has-grid) .grid::slotted(.nano-grid-row-start-3){-ms-grid-row:3 !important;grid-row-start:3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-3),:host(.has-grid) .grid::slotted(.nano-grid-col-span-3){-ms-grid-column-span:3 !important;grid-column-end:span 3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-3),:host(.has-grid) .grid::slotted(.nano-grid-row-span-3){-ms-grid-row-span:3 !important;grid-row-end:span 3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-4),:host(.has-grid) .grid::slotted(.nano-grid-col-start-4){-ms-grid-column:4 !important;grid-column-start:4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-4),:host(.has-grid) .grid::slotted(.nano-grid-row-start-4){-ms-grid-row:4 !important;grid-row-start:4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-4),:host(.has-grid) .grid::slotted(.nano-grid-col-span-4){-ms-grid-column-span:4 !important;grid-column-end:span 4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-4),:host(.has-grid) .grid::slotted(.nano-grid-row-span-4){-ms-grid-row-span:4 !important;grid-row-end:span 4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-5),:host(.has-grid) .grid::slotted(.nano-grid-col-start-5){-ms-grid-column:5 !important;grid-column-start:5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-5),:host(.has-grid) .grid::slotted(.nano-grid-row-start-5){-ms-grid-row:5 !important;grid-row-start:5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-5),:host(.has-grid) .grid::slotted(.nano-grid-col-span-5){-ms-grid-column-span:5 !important;grid-column-end:span 5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-5),:host(.has-grid) .grid::slotted(.nano-grid-row-span-5){-ms-grid-row-span:5 !important;grid-row-end:span 5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-6),:host(.has-grid) .grid::slotted(.nano-grid-col-start-6){-ms-grid-column:6 !important;grid-column-start:6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-6),:host(.has-grid) .grid::slotted(.nano-grid-row-start-6){-ms-grid-row:6 !important;grid-row-start:6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-6),:host(.has-grid) .grid::slotted(.nano-grid-col-span-6){-ms-grid-column-span:6 !important;grid-column-end:span 6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-6),:host(.has-grid) .grid::slotted(.nano-grid-row-span-6){-ms-grid-row-span:6 !important;grid-row-end:span 6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-7),:host(.has-grid) .grid::slotted(.nano-grid-col-start-7){-ms-grid-column:7 !important;grid-column-start:7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-7),:host(.has-grid) .grid::slotted(.nano-grid-row-start-7){-ms-grid-row:7 !important;grid-row-start:7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-7),:host(.has-grid) .grid::slotted(.nano-grid-col-span-7){-ms-grid-column-span:7 !important;grid-column-end:span 7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-7),:host(.has-grid) .grid::slotted(.nano-grid-row-span-7){-ms-grid-row-span:7 !important;grid-row-end:span 7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-8),:host(.has-grid) .grid::slotted(.nano-grid-col-start-8){-ms-grid-column:8 !important;grid-column-start:8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-8),:host(.has-grid) .grid::slotted(.nano-grid-row-start-8){-ms-grid-row:8 !important;grid-row-start:8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-8),:host(.has-grid) .grid::slotted(.nano-grid-col-span-8){-ms-grid-column-span:8 !important;grid-column-end:span 8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-8),:host(.has-grid) .grid::slotted(.nano-grid-row-span-8){-ms-grid-row-span:8 !important;grid-row-end:span 8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-9),:host(.has-grid) .grid::slotted(.nano-grid-col-start-9){-ms-grid-column:9 !important;grid-column-start:9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-9),:host(.has-grid) .grid::slotted(.nano-grid-row-start-9){-ms-grid-row:9 !important;grid-row-start:9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-9),:host(.has-grid) .grid::slotted(.nano-grid-col-span-9){-ms-grid-column-span:9 !important;grid-column-end:span 9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-9),:host(.has-grid) .grid::slotted(.nano-grid-row-span-9){-ms-grid-row-span:9 !important;grid-row-end:span 9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-10),:host(.has-grid) .grid::slotted(.nano-grid-col-start-10){-ms-grid-column:10 !important;grid-column-start:10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-10),:host(.has-grid) .grid::slotted(.nano-grid-row-start-10){-ms-grid-row:10 !important;grid-row-start:10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-10),:host(.has-grid) .grid::slotted(.nano-grid-col-span-10){-ms-grid-column-span:10 !important;grid-column-end:span 10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-10),:host(.has-grid) .grid::slotted(.nano-grid-row-span-10){-ms-grid-row-span:10 !important;grid-row-end:span 10 !important}:host(.has-grid) .grid::slotted(*){border-width:calc(var(--grid-row-gap) / 2) calc(var(--grid-col-gap) / 2)}:host([is-legacy]){overflow:hidden}:host([is-legacy]) .grid{margin-bottom:calc(var(--grid-row-gap) * -0.5);margin-top:calc(var(--grid-row-gap) * -0.5);margin-left:calc(var(--grid-col-gap) * -0.5);margin-right:calc(var(--grid-col-gap) * -0.5)}nano-grid :host-context[is-legacy]{overflow:visible}nano-grid :host-context[is-legacy] .grid::slotted(:first-child){border-top-width:calc(var(--grid-row-gap) / 2)}nano-grid :host-context[is-legacy] .grid::slotted(:last-child){border-bottom-width:calc(var(--grid-row-gap) / 2)}:host([content-panel]:not([content-panel=false])){display:-ms-flexbox;-ms-flex-direction:column}:host([content-panel]:not([content-panel=false])) .grid{-ms-grid-rows:auto 1fr;grid-template-rows:auto 1fr}:host([full-height]:not([full-height=false])){height:100%}:host([full-height]:not([full-height=false])) .grid{-ms-grid-rows:1fr;grid-template-rows:1fr}:host([full-height]:not([full-height=false])) .grid::slotted(*){min-height:100%}:host([show-helper]:not([show-helper=false])) .grid{position:relative}:host([show-helper]:not([show-helper=false])) .grid::after{content:\"\";position:absolute;left:0;right:0;bottom:0;top:0;pointer-events:none;background-image:repeating-linear-gradient(to right, rgba(126, 195, 241, 0.25), rgba(126, 195, 241, 0.25) var(--col-width), transparent var(--col-width), transparent var(--repeat-width));background-size:calc(100% + var(--grid-col-gap)) 100%;z-index:100}:host([show-helper]:not([show-helper=false])) .grid::before{content:var(--current-grid-size);font-size:30px;position:absolute;width:100%;left:0;text-align:center;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host(.nano-grid-1){--current-grid-size:\"grid size: 1\";--col-width:calc(100% - var(--grid-col-gap));--repeat-width:calc(100% / 1)}:host(.nano-grid-1) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[1];grid-template-columns:repeat(1, minmax(var(--col-width), 1fr))}:host(.nano-grid-1) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(2)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(3)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(4)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(5)){-ms-grid-row:5;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(6)){-ms-grid-row:6;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(7)){-ms-grid-row:7;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(8)){-ms-grid-row:8;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(9)){-ms-grid-row:9;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(10)){-ms-grid-row:10;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(11)){-ms-grid-row:11;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(12)){-ms-grid-row:12;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(13)){-ms-grid-row:13;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(14)){-ms-grid-row:14;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(15)){-ms-grid-row:15;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(16)){-ms-grid-row:16;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(17)){-ms-grid-row:17;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(18)){-ms-grid-row:18;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(19)){-ms-grid-row:19;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(20)){-ms-grid-row:20;-ms-grid-column:1}:host(.nano-grid-2){--current-grid-size:\"grid size: 2\";--col-width:calc(50% - var(--grid-col-gap));--repeat-width:calc(100% / 2)}:host(.nano-grid-2) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[2];grid-template-columns:repeat(2, minmax(var(--col-width), 1fr))}:host(.nano-grid-2) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(3)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(4)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(5)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(6)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(7)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(8)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(9)){-ms-grid-row:5;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(10)){-ms-grid-row:5;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(11)){-ms-grid-row:6;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(12)){-ms-grid-row:6;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(13)){-ms-grid-row:7;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(14)){-ms-grid-row:7;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(15)){-ms-grid-row:8;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(16)){-ms-grid-row:8;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(17)){-ms-grid-row:9;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(18)){-ms-grid-row:9;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(19)){-ms-grid-row:10;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(20)){-ms-grid-row:10;-ms-grid-column:2}:host(.nano-grid-3){--current-grid-size:\"grid size: 3\";--col-width:calc(33.3333333333% - var(--grid-col-gap));--repeat-width:calc(100% / 3)}:host(.nano-grid-3) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[3];grid-template-columns:repeat(3, minmax(var(--col-width), 1fr))}:host(.nano-grid-3) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(4)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(5)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(6)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(7)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(8)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(9)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(10)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(11)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(12)){-ms-grid-row:4;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(13)){-ms-grid-row:5;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(14)){-ms-grid-row:5;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(15)){-ms-grid-row:5;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(16)){-ms-grid-row:6;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(17)){-ms-grid-row:6;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(18)){-ms-grid-row:6;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(19)){-ms-grid-row:7;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(20)){-ms-grid-row:7;-ms-grid-column:2}:host(.nano-grid-4){--current-grid-size:\"grid size: 4\";--col-width:calc(25% - var(--grid-col-gap));--repeat-width:calc(100% / 4)}:host(.nano-grid-4) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[4];grid-template-columns:repeat(4, minmax(var(--col-width), 1fr))}:host(.nano-grid-4) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-4) .grid::slotted(:nth-child(5)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(6)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(7)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(8)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-4) .grid::slotted(:nth-child(9)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(10)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(11)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(12)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-4) .grid::slotted(:nth-child(13)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(14)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(15)){-ms-grid-row:4;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(16)){-ms-grid-row:4;-ms-grid-column:4}:host(.nano-grid-4) .grid::slotted(:nth-child(17)){-ms-grid-row:5;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(18)){-ms-grid-row:5;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(19)){-ms-grid-row:5;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(20)){-ms-grid-row:5;-ms-grid-column:4}:host(.nano-grid-5){--current-grid-size:\"grid size: 5\";--col-width:calc(20% - var(--grid-col-gap));--repeat-width:calc(100% / 5)}:host(.nano-grid-5) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[5];grid-template-columns:repeat(5, minmax(var(--col-width), 1fr))}:host(.nano-grid-5) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-5) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-5) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-5) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-5) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-5) .grid::slotted(:nth-child(6)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-5) .grid::slotted(:nth-child(7)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-5) .grid::slotted(:nth-child(8)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-5) .grid::slotted(:nth-child(9)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-5) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-5) .grid::slotted(:nth-child(11)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-5) .grid::slotted(:nth-child(12)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-5) .grid::slotted(:nth-child(13)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-5) .grid::slotted(:nth-child(14)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-5) .grid::slotted(:nth-child(15)){-ms-grid-row:3;-ms-grid-column:5}:host(.nano-grid-5) .grid::slotted(:nth-child(16)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-5) .grid::slotted(:nth-child(17)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-5) .grid::slotted(:nth-child(18)){-ms-grid-row:4;-ms-grid-column:3}:host(.nano-grid-5) .grid::slotted(:nth-child(19)){-ms-grid-row:4;-ms-grid-column:4}:host(.nano-grid-5) .grid::slotted(:nth-child(20)){-ms-grid-row:4;-ms-grid-column:5}:host(.nano-grid-6){--current-grid-size:\"grid size: 6\";--col-width:calc(16.6666666667% - var(--grid-col-gap));--repeat-width:calc(100% / 6)}:host(.nano-grid-6) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[6];grid-template-columns:repeat(6, minmax(var(--col-width), 1fr))}:host(.nano-grid-6) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-6) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-6) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-6) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-6) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-6) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-6) .grid::slotted(:nth-child(7)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-6) .grid::slotted(:nth-child(8)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-6) .grid::slotted(:nth-child(9)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-6) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-6) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-6) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-6) .grid::slotted(:nth-child(13)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-6) .grid::slotted(:nth-child(14)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-6) .grid::slotted(:nth-child(15)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-6) .grid::slotted(:nth-child(16)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-6) .grid::slotted(:nth-child(17)){-ms-grid-row:3;-ms-grid-column:5}:host(.nano-grid-6) .grid::slotted(:nth-child(18)){-ms-grid-row:3;-ms-grid-column:6}:host(.nano-grid-6) .grid::slotted(:nth-child(19)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-6) .grid::slotted(:nth-child(20)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-7){--current-grid-size:\"grid size: 7\";--col-width:calc(14.2857142857% - var(--grid-col-gap));--repeat-width:calc(100% / 7)}:host(.nano-grid-7) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[7];grid-template-columns:repeat(7, minmax(var(--col-width), 1fr))}:host(.nano-grid-7) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-7) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-7) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-7) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-7) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-7) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-7) .grid::slotted(:nth-child(7)){-ms-grid-row:1;-ms-grid-column:7}:host(.nano-grid-7) .grid::slotted(:nth-child(8)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-7) .grid::slotted(:nth-child(9)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-7) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-7) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-7) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-7) .grid::slotted(:nth-child(13)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-7) .grid::slotted(:nth-child(14)){-ms-grid-row:2;-ms-grid-column:7}:host(.nano-grid-7) .grid::slotted(:nth-child(15)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-7) .grid::slotted(:nth-child(16)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-7) .grid::slotted(:nth-child(17)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-7) .grid::slotted(:nth-child(18)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-7) .grid::slotted(:nth-child(19)){-ms-grid-row:3;-ms-grid-column:5}:host(.nano-grid-7) .grid::slotted(:nth-child(20)){-ms-grid-row:3;-ms-grid-column:6}:host(.nano-grid-8){--current-grid-size:\"grid size: 8\";--col-width:calc(12.5% - var(--grid-col-gap));--repeat-width:calc(100% / 8)}:host(.nano-grid-8) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[8];grid-template-columns:repeat(8, minmax(var(--col-width), 1fr))}:host(.nano-grid-8) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-8) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-8) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-8) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-8) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-8) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-8) .grid::slotted(:nth-child(7)){-ms-grid-row:1;-ms-grid-column:7}:host(.nano-grid-8) .grid::slotted(:nth-child(8)){-ms-grid-row:1;-ms-grid-column:8}:host(.nano-grid-8) .grid::slotted(:nth-child(9)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-8) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-8) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-8) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-8) .grid::slotted(:nth-child(13)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-8) .grid::slotted(:nth-child(14)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-8) .grid::slotted(:nth-child(15)){-ms-grid-row:2;-ms-grid-column:7}:host(.nano-grid-8) .grid::slotted(:nth-child(16)){-ms-grid-row:2;-ms-grid-column:8}:host(.nano-grid-8) .grid::slotted(:nth-child(17)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-8) .grid::slotted(:nth-child(18)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-8) .grid::slotted(:nth-child(19)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-8) .grid::slotted(:nth-child(20)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-9){--current-grid-size:\"grid size: 9\";--col-width:calc(11.1111111111% - var(--grid-col-gap));--repeat-width:calc(100% / 9)}:host(.nano-grid-9) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[9];grid-template-columns:repeat(9, minmax(var(--col-width), 1fr))}:host(.nano-grid-9) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-9) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-9) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-9) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-9) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-9) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-9) .grid::slotted(:nth-child(7)){-ms-grid-row:1;-ms-grid-column:7}:host(.nano-grid-9) .grid::slotted(:nth-child(8)){-ms-grid-row:1;-ms-grid-column:8}:host(.nano-grid-9) .grid::slotted(:nth-child(9)){-ms-grid-row:1;-ms-grid-column:9}:host(.nano-grid-9) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-9) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-9) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-9) .grid::slotted(:nth-child(13)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-9) .grid::slotted(:nth-child(14)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-9) .grid::slotted(:nth-child(15)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-9) .grid::slotted(:nth-child(16)){-ms-grid-row:2;-ms-grid-column:7}:host(.nano-grid-9) .grid::slotted(:nth-child(17)){-ms-grid-row:2;-ms-grid-column:8}:host(.nano-grid-9) .grid::slotted(:nth-child(18)){-ms-grid-row:2;-ms-grid-column:9}:host(.nano-grid-9) .grid::slotted(:nth-child(19)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-9) .grid::slotted(:nth-child(20)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-10){--current-grid-size:\"grid size: 10\";--col-width:calc(10% - var(--grid-col-gap));--repeat-width:calc(100% / 10)}:host(.nano-grid-10) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[10];grid-template-columns:repeat(10, minmax(var(--col-width), 1fr))}:host(.nano-grid-10) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-10) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-10) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-10) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-10) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-10) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-10) .grid::slotted(:nth-child(7)){-ms-grid-row:1;-ms-grid-column:7}:host(.nano-grid-10) .grid::slotted(:nth-child(8)){-ms-grid-row:1;-ms-grid-column:8}:host(.nano-grid-10) .grid::slotted(:nth-child(9)){-ms-grid-row:1;-ms-grid-column:9}:host(.nano-grid-10) .grid::slotted(:nth-child(10)){-ms-grid-row:1;-ms-grid-column:10}:host(.nano-grid-10) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-10) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-10) .grid::slotted(:nth-child(13)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-10) .grid::slotted(:nth-child(14)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-10) .grid::slotted(:nth-child(15)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-10) .grid::slotted(:nth-child(16)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-10) .grid::slotted(:nth-child(17)){-ms-grid-row:2;-ms-grid-column:7}:host(.nano-grid-10) .grid::slotted(:nth-child(18)){-ms-grid-row:2;-ms-grid-column:8}:host(.nano-grid-10) .grid::slotted(:nth-child(19)){-ms-grid-row:2;-ms-grid-column:9}:host(.nano-grid-10) .grid::slotted(:nth-child(20)){-ms-grid-row:2;-ms-grid-column:10}";
+const gridCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:\"'grid size: sm'\";display:block;opacity:0;-webkit-transition:0.2s ease opacity;transition:0.2s ease opacity}:host .grid{display:grid;grid-gap:var(--grid-row-gap) var(--grid-col-gap);height:inherit;min-height:inherit}:host .grid::slotted(*){border:0 solid transparent;background-clip:padding-box;border-width:var(--grid-row-gap) calc(var(--grid-col-gap) / 2)}:host(.ready){opacity:1}:host(.has-grid) .grid{display:-ms-grid;display:grid}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-1),:host(.has-grid) .grid::slotted(.nano-grid-col-start-1){-ms-grid-column:1 !important;grid-column-start:1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-1),:host(.has-grid) .grid::slotted(.nano-grid-row-start-1){-ms-grid-row:1 !important;grid-row-start:1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-1),:host(.has-grid) .grid::slotted(.nano-grid-col-span-1){-ms-grid-column-span:1 !important;grid-column-end:span 1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-1),:host(.has-grid) .grid::slotted(.nano-grid-row-span-1){-ms-grid-row-span:1 !important;grid-row-end:span 1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-2),:host(.has-grid) .grid::slotted(.nano-grid-col-start-2){-ms-grid-column:2 !important;grid-column-start:2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-2),:host(.has-grid) .grid::slotted(.nano-grid-row-start-2){-ms-grid-row:2 !important;grid-row-start:2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-2),:host(.has-grid) .grid::slotted(.nano-grid-col-span-2){-ms-grid-column-span:2 !important;grid-column-end:span 2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-2),:host(.has-grid) .grid::slotted(.nano-grid-row-span-2){-ms-grid-row-span:2 !important;grid-row-end:span 2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-3),:host(.has-grid) .grid::slotted(.nano-grid-col-start-3){-ms-grid-column:3 !important;grid-column-start:3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-3),:host(.has-grid) .grid::slotted(.nano-grid-row-start-3){-ms-grid-row:3 !important;grid-row-start:3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-3),:host(.has-grid) .grid::slotted(.nano-grid-col-span-3){-ms-grid-column-span:3 !important;grid-column-end:span 3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-3),:host(.has-grid) .grid::slotted(.nano-grid-row-span-3){-ms-grid-row-span:3 !important;grid-row-end:span 3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-4),:host(.has-grid) .grid::slotted(.nano-grid-col-start-4){-ms-grid-column:4 !important;grid-column-start:4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-4),:host(.has-grid) .grid::slotted(.nano-grid-row-start-4){-ms-grid-row:4 !important;grid-row-start:4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-4),:host(.has-grid) .grid::slotted(.nano-grid-col-span-4){-ms-grid-column-span:4 !important;grid-column-end:span 4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-4),:host(.has-grid) .grid::slotted(.nano-grid-row-span-4){-ms-grid-row-span:4 !important;grid-row-end:span 4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-5),:host(.has-grid) .grid::slotted(.nano-grid-col-start-5){-ms-grid-column:5 !important;grid-column-start:5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-5),:host(.has-grid) .grid::slotted(.nano-grid-row-start-5){-ms-grid-row:5 !important;grid-row-start:5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-5),:host(.has-grid) .grid::slotted(.nano-grid-col-span-5){-ms-grid-column-span:5 !important;grid-column-end:span 5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-5),:host(.has-grid) .grid::slotted(.nano-grid-row-span-5){-ms-grid-row-span:5 !important;grid-row-end:span 5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-6),:host(.has-grid) .grid::slotted(.nano-grid-col-start-6){-ms-grid-column:6 !important;grid-column-start:6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-6),:host(.has-grid) .grid::slotted(.nano-grid-row-start-6){-ms-grid-row:6 !important;grid-row-start:6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-6),:host(.has-grid) .grid::slotted(.nano-grid-col-span-6){-ms-grid-column-span:6 !important;grid-column-end:span 6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-6),:host(.has-grid) .grid::slotted(.nano-grid-row-span-6){-ms-grid-row-span:6 !important;grid-row-end:span 6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-7),:host(.has-grid) .grid::slotted(.nano-grid-col-start-7){-ms-grid-column:7 !important;grid-column-start:7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-7),:host(.has-grid) .grid::slotted(.nano-grid-row-start-7){-ms-grid-row:7 !important;grid-row-start:7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-7),:host(.has-grid) .grid::slotted(.nano-grid-col-span-7){-ms-grid-column-span:7 !important;grid-column-end:span 7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-7),:host(.has-grid) .grid::slotted(.nano-grid-row-span-7){-ms-grid-row-span:7 !important;grid-row-end:span 7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-8),:host(.has-grid) .grid::slotted(.nano-grid-col-start-8){-ms-grid-column:8 !important;grid-column-start:8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-8),:host(.has-grid) .grid::slotted(.nano-grid-row-start-8){-ms-grid-row:8 !important;grid-row-start:8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-8),:host(.has-grid) .grid::slotted(.nano-grid-col-span-8){-ms-grid-column-span:8 !important;grid-column-end:span 8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-8),:host(.has-grid) .grid::slotted(.nano-grid-row-span-8){-ms-grid-row-span:8 !important;grid-row-end:span 8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-9),:host(.has-grid) .grid::slotted(.nano-grid-col-start-9){-ms-grid-column:9 !important;grid-column-start:9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-9),:host(.has-grid) .grid::slotted(.nano-grid-row-start-9){-ms-grid-row:9 !important;grid-row-start:9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-9),:host(.has-grid) .grid::slotted(.nano-grid-col-span-9){-ms-grid-column-span:9 !important;grid-column-end:span 9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-9),:host(.has-grid) .grid::slotted(.nano-grid-row-span-9){-ms-grid-row-span:9 !important;grid-row-end:span 9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-10),:host(.has-grid) .grid::slotted(.nano-grid-col-start-10){-ms-grid-column:10 !important;grid-column-start:10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-10),:host(.has-grid) .grid::slotted(.nano-grid-row-start-10){-ms-grid-row:10 !important;grid-row-start:10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-10),:host(.has-grid) .grid::slotted(.nano-grid-col-span-10){-ms-grid-column-span:10 !important;grid-column-end:span 10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-10),:host(.has-grid) .grid::slotted(.nano-grid-row-span-10){-ms-grid-row-span:10 !important;grid-row-end:span 10 !important}:host(.has-grid) .grid::slotted(*){border-width:calc(var(--grid-row-gap) / 2) calc(var(--grid-col-gap) / 2)}:host([is-legacy]){overflow:hidden}:host([is-legacy]) .grid{margin-bottom:calc(var(--grid-row-gap) * -0.5);margin-top:calc(var(--grid-row-gap) * -0.5);margin-left:calc(var(--grid-col-gap) * -0.5);margin-right:calc(var(--grid-col-gap) * -0.5)}nano-grid :host-context[is-legacy]{overflow:visible}nano-grid :host-context[is-legacy] .grid::slotted(:first-child){border-top-width:calc(var(--grid-row-gap) / 2)}nano-grid :host-context[is-legacy] .grid::slotted(:last-child){border-bottom-width:calc(var(--grid-row-gap) / 2)}:host([content-panel]:not([content-panel=false])){display:-ms-flexbox;-ms-flex-direction:column}:host([content-panel]:not([content-panel=false])) .grid{-ms-grid-rows:auto 1fr;grid-template-rows:auto 1fr}:host([full-height]:not([full-height=false])){height:100%}:host([full-height]:not([full-height=false])) .grid{-ms-grid-rows:1fr;grid-template-rows:1fr}:host([full-height]:not([full-height=false])) .grid::slotted(*){min-height:100%}:host([show-helper]:not([show-helper=false])) .grid{position:relative}:host([show-helper]:not([show-helper=false])) .grid::after{content:\"\";position:absolute;left:0;right:0;bottom:0;top:0;pointer-events:none;background-image:repeating-linear-gradient(to right, rgba(126, 195, 241, 0.25), rgba(126, 195, 241, 0.25) var(--col-width), transparent var(--col-width), transparent var(--repeat-width));background-size:calc(100% + var(--grid-col-gap)) 100%;z-index:100}:host([show-helper]:not([show-helper=false])) .grid::before{content:var(--current-grid-size);font-size:30px;position:absolute;width:100%;left:0;text-align:center;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host(.nano-grid-1){--current-grid-size:\"grid size: 1\";--col-width:calc(100% - var(--grid-col-gap));--repeat-width:calc(100% / 1)}:host(.nano-grid-1) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[1];grid-template-columns:repeat(1, minmax(var(--col-width), 1fr))}:host(.nano-grid-1) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(2)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(3)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(4)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(5)){-ms-grid-row:5;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(6)){-ms-grid-row:6;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(7)){-ms-grid-row:7;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(8)){-ms-grid-row:8;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(9)){-ms-grid-row:9;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(10)){-ms-grid-row:10;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(11)){-ms-grid-row:11;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(12)){-ms-grid-row:12;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(13)){-ms-grid-row:13;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(14)){-ms-grid-row:14;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(15)){-ms-grid-row:15;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(16)){-ms-grid-row:16;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(17)){-ms-grid-row:17;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(18)){-ms-grid-row:18;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(19)){-ms-grid-row:19;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(20)){-ms-grid-row:20;-ms-grid-column:1}:host(.nano-grid-2){--current-grid-size:\"grid size: 2\";--col-width:calc(50% - var(--grid-col-gap));--repeat-width:calc(100% / 2)}:host(.nano-grid-2) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[2];grid-template-columns:repeat(2, minmax(var(--col-width), 1fr))}:host(.nano-grid-2) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(3)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(4)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(5)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(6)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(7)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(8)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(9)){-ms-grid-row:5;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(10)){-ms-grid-row:5;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(11)){-ms-grid-row:6;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(12)){-ms-grid-row:6;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(13)){-ms-grid-row:7;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(14)){-ms-grid-row:7;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(15)){-ms-grid-row:8;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(16)){-ms-grid-row:8;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(17)){-ms-grid-row:9;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(18)){-ms-grid-row:9;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(19)){-ms-grid-row:10;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(20)){-ms-grid-row:10;-ms-grid-column:2}:host(.nano-grid-3){--current-grid-size:\"grid size: 3\";--col-width:calc(33.3333333333% - var(--grid-col-gap));--repeat-width:calc(100% / 3)}:host(.nano-grid-3) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[3];grid-template-columns:repeat(3, minmax(var(--col-width), 1fr))}:host(.nano-grid-3) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(4)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(5)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(6)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(7)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(8)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(9)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(10)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(11)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(12)){-ms-grid-row:4;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(13)){-ms-grid-row:5;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(14)){-ms-grid-row:5;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(15)){-ms-grid-row:5;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(16)){-ms-grid-row:6;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(17)){-ms-grid-row:6;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(18)){-ms-grid-row:6;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(19)){-ms-grid-row:7;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(20)){-ms-grid-row:7;-ms-grid-column:2}:host(.nano-grid-4){--current-grid-size:\"grid size: 4\";--col-width:calc(25% - var(--grid-col-gap));--repeat-width:calc(100% / 4)}:host(.nano-grid-4) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[4];grid-template-columns:repeat(4, minmax(var(--col-width), 1fr))}:host(.nano-grid-4) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-4) .grid::slotted(:nth-child(5)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(6)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(7)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(8)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-4) .grid::slotted(:nth-child(9)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(10)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(11)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(12)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-4) .grid::slotted(:nth-child(13)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(14)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(15)){-ms-grid-row:4;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(16)){-ms-grid-row:4;-ms-grid-column:4}:host(.nano-grid-4) .grid::slotted(:nth-child(17)){-ms-grid-row:5;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(18)){-ms-grid-row:5;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(19)){-ms-grid-row:5;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(20)){-ms-grid-row:5;-ms-grid-column:4}:host(.nano-grid-5){--current-grid-size:\"grid size: 5\";--col-width:calc(20% - var(--grid-col-gap));--repeat-width:calc(100% / 5)}:host(.nano-grid-5) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[5];grid-template-columns:repeat(5, minmax(var(--col-width), 1fr))}:host(.nano-grid-5) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-5) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-5) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-5) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-5) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-5) .grid::slotted(:nth-child(6)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-5) .grid::slotted(:nth-child(7)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-5) .grid::slotted(:nth-child(8)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-5) .grid::slotted(:nth-child(9)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-5) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-5) .grid::slotted(:nth-child(11)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-5) .grid::slotted(:nth-child(12)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-5) .grid::slotted(:nth-child(13)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-5) .grid::slotted(:nth-child(14)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-5) .grid::slotted(:nth-child(15)){-ms-grid-row:3;-ms-grid-column:5}:host(.nano-grid-5) .grid::slotted(:nth-child(16)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-5) .grid::slotted(:nth-child(17)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-5) .grid::slotted(:nth-child(18)){-ms-grid-row:4;-ms-grid-column:3}:host(.nano-grid-5) .grid::slotted(:nth-child(19)){-ms-grid-row:4;-ms-grid-column:4}:host(.nano-grid-5) .grid::slotted(:nth-child(20)){-ms-grid-row:4;-ms-grid-column:5}:host(.nano-grid-6){--current-grid-size:\"grid size: 6\";--col-width:calc(16.6666666667% - var(--grid-col-gap));--repeat-width:calc(100% / 6)}:host(.nano-grid-6) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[6];grid-template-columns:repeat(6, minmax(var(--col-width), 1fr))}:host(.nano-grid-6) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-6) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-6) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-6) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-6) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-6) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-6) .grid::slotted(:nth-child(7)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-6) .grid::slotted(:nth-child(8)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-6) .grid::slotted(:nth-child(9)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-6) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-6) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-6) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-6) .grid::slotted(:nth-child(13)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-6) .grid::slotted(:nth-child(14)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-6) .grid::slotted(:nth-child(15)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-6) .grid::slotted(:nth-child(16)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-6) .grid::slotted(:nth-child(17)){-ms-grid-row:3;-ms-grid-column:5}:host(.nano-grid-6) .grid::slotted(:nth-child(18)){-ms-grid-row:3;-ms-grid-column:6}:host(.nano-grid-6) .grid::slotted(:nth-child(19)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-6) .grid::slotted(:nth-child(20)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-7){--current-grid-size:\"grid size: 7\";--col-width:calc(14.2857142857% - var(--grid-col-gap));--repeat-width:calc(100% / 7)}:host(.nano-grid-7) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[7];grid-template-columns:repeat(7, minmax(var(--col-width), 1fr))}:host(.nano-grid-7) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-7) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-7) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-7) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-7) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-7) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-7) .grid::slotted(:nth-child(7)){-ms-grid-row:1;-ms-grid-column:7}:host(.nano-grid-7) .grid::slotted(:nth-child(8)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-7) .grid::slotted(:nth-child(9)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-7) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-7) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-7) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-7) .grid::slotted(:nth-child(13)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-7) .grid::slotted(:nth-child(14)){-ms-grid-row:2;-ms-grid-column:7}:host(.nano-grid-7) .grid::slotted(:nth-child(15)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-7) .grid::slotted(:nth-child(16)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-7) .grid::slotted(:nth-child(17)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-7) .grid::slotted(:nth-child(18)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-7) .grid::slotted(:nth-child(19)){-ms-grid-row:3;-ms-grid-column:5}:host(.nano-grid-7) .grid::slotted(:nth-child(20)){-ms-grid-row:3;-ms-grid-column:6}:host(.nano-grid-8){--current-grid-size:\"grid size: 8\";--col-width:calc(12.5% - var(--grid-col-gap));--repeat-width:calc(100% / 8)}:host(.nano-grid-8) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[8];grid-template-columns:repeat(8, minmax(var(--col-width), 1fr))}:host(.nano-grid-8) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-8) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-8) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-8) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-8) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-8) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-8) .grid::slotted(:nth-child(7)){-ms-grid-row:1;-ms-grid-column:7}:host(.nano-grid-8) .grid::slotted(:nth-child(8)){-ms-grid-row:1;-ms-grid-column:8}:host(.nano-grid-8) .grid::slotted(:nth-child(9)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-8) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-8) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-8) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-8) .grid::slotted(:nth-child(13)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-8) .grid::slotted(:nth-child(14)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-8) .grid::slotted(:nth-child(15)){-ms-grid-row:2;-ms-grid-column:7}:host(.nano-grid-8) .grid::slotted(:nth-child(16)){-ms-grid-row:2;-ms-grid-column:8}:host(.nano-grid-8) .grid::slotted(:nth-child(17)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-8) .grid::slotted(:nth-child(18)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-8) .grid::slotted(:nth-child(19)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-8) .grid::slotted(:nth-child(20)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-9){--current-grid-size:\"grid size: 9\";--col-width:calc(11.1111111111% - var(--grid-col-gap));--repeat-width:calc(100% / 9)}:host(.nano-grid-9) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[9];grid-template-columns:repeat(9, minmax(var(--col-width), 1fr))}:host(.nano-grid-9) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-9) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-9) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-9) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-9) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-9) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-9) .grid::slotted(:nth-child(7)){-ms-grid-row:1;-ms-grid-column:7}:host(.nano-grid-9) .grid::slotted(:nth-child(8)){-ms-grid-row:1;-ms-grid-column:8}:host(.nano-grid-9) .grid::slotted(:nth-child(9)){-ms-grid-row:1;-ms-grid-column:9}:host(.nano-grid-9) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-9) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-9) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-9) .grid::slotted(:nth-child(13)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-9) .grid::slotted(:nth-child(14)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-9) .grid::slotted(:nth-child(15)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-9) .grid::slotted(:nth-child(16)){-ms-grid-row:2;-ms-grid-column:7}:host(.nano-grid-9) .grid::slotted(:nth-child(17)){-ms-grid-row:2;-ms-grid-column:8}:host(.nano-grid-9) .grid::slotted(:nth-child(18)){-ms-grid-row:2;-ms-grid-column:9}:host(.nano-grid-9) .grid::slotted(:nth-child(19)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-9) .grid::slotted(:nth-child(20)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-10){--current-grid-size:\"grid size: 10\";--col-width:calc(10% - var(--grid-col-gap));--repeat-width:calc(100% / 10)}:host(.nano-grid-10) .grid{-ms-grid-columns:(minmax(var(--col-width), 1fr))[10];grid-template-columns:repeat(10, minmax(var(--col-width), 1fr))}:host(.nano-grid-10) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-10) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-10) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-10) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-10) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-10) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-10) .grid::slotted(:nth-child(7)){-ms-grid-row:1;-ms-grid-column:7}:host(.nano-grid-10) .grid::slotted(:nth-child(8)){-ms-grid-row:1;-ms-grid-column:8}:host(.nano-grid-10) .grid::slotted(:nth-child(9)){-ms-grid-row:1;-ms-grid-column:9}:host(.nano-grid-10) .grid::slotted(:nth-child(10)){-ms-grid-row:1;-ms-grid-column:10}:host(.nano-grid-10) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-10) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-10) .grid::slotted(:nth-child(13)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-10) .grid::slotted(:nth-child(14)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-10) .grid::slotted(:nth-child(15)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-10) .grid::slotted(:nth-child(16)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-10) .grid::slotted(:nth-child(17)){-ms-grid-row:2;-ms-grid-column:7}:host(.nano-grid-10) .grid::slotted(:nth-child(18)){-ms-grid-row:2;-ms-grid-column:8}:host(.nano-grid-10) .grid::slotted(:nth-child(19)){-ms-grid-row:2;-ms-grid-column:9}:host(.nano-grid-10) .grid::slotted(:nth-child(20)){-ms-grid-row:2;-ms-grid-column:10}";
 
 const STATEOPTS$1 = ['col-span', 'col-start', 'row-span', 'row-start'];
 const CANSHADOW = !!document.head.attachShadow;
 let Grid = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.nanoBpChange = createEvent(this, "nanoBpChange", 7);
     this.generalClasses = [''];
     this.gridClass = null;
     this.isSizes = [null];
@@ -48,6 +50,7 @@ let Grid = class {
      * Helper to make grid items expand to full height in IE11
      */
     this.fullHeight = false;
+    this.stateChange = debounce(this.stateChange.bind(this), 100);
   }
   propChanged() {
     this.applySizeClasses();
@@ -99,6 +102,9 @@ let Grid = class {
     this.applyChildrenClasses();
     setTimeout(() => (this.ready = true), 0);
   }
+  stateChange() {
+    this.nanoBpChange.emit(this.generalClasses);
+  }
   applyChildrenClasses() {
     let gridItems = this.el.querySelectorAll('nano-grid-item');
     if (gridItems.length) {
@@ -161,8 +167,6 @@ let Grid = class {
       });
     });
   }
-  connectedCallback() {
-  }
   componentWillLoad() {
     let wrapper, ctx;
     if (!CANSHADOW)
@@ -203,7 +207,6 @@ let Grid = class {
       this.ro.disconnect();
   }
   render() {
-    // console.log(this.currentWidth, this.generalClasses.join(' '), this.gridClass, this.showHelper, this.gridClass)
     return (h(Host, { class: {
         [this.generalClasses.join(' ')]: true,
         'has-grid': !!this.gridClass,
@@ -223,12 +226,17 @@ let Grid = class {
     "mCols": ["propChanged"],
     "lCols": ["propChanged"],
     "xlCols": ["propChanged"],
-    "xxlCols": ["propChanged"]
+    "xxlCols": ["propChanged"],
+    "isSmall": ["stateChange"],
+    "isMedium": ["stateChange"],
+    "isLarge": ["stateChange"],
+    "isXL": ["stateChange"],
+    "isXXL": ["stateChange"]
   }; }
 };
 Grid.style = gridCss;
 
-const gridItemCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block}";
+const gridItemCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:block}";
 
 const STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];
 let GridItem = class {
@@ -313,7 +321,7 @@ let GridItem = class {
 };
 GridItem.style = gridItemCss;
 
-const imgCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--padding:0;display:inline-block;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;min-height:inherit;height:100%;display:block;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit}.img__loader,.img__observer{position:absolute;top:0;left:0;bottom:0;right:0;height:100%;width:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;-webkit-transition:0.5s ease opacity, 0.3s ease filter 0.4s;transition:0.5s ease opacity, 0.3s ease filter 0.4s;-webkit-filter:blur(5px);filter:blur(5px)}.img__image.loaded,.img__bg.loaded{opacity:1;-webkit-filter:blur(0.1px);filter:blur(0.1px)}@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{-webkit-filter:blur(0);filter:blur(0)}}}.img__image{-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit;max-width:100%;height:auto}.img__image.hide{visibility:hidden}.img__image.hide.no-height{height:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;top:0;left:0;right:0;bottom:0}";
+const imgCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--padding:0;display:inline-block;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;min-height:inherit;height:100%;display:block;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit}.img__loader,.img__observer{position:absolute;top:0;left:0;bottom:0;right:0;height:100%;width:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;-webkit-transition:0.5s ease opacity, 0.3s ease filter 0.4s;transition:0.5s ease opacity, 0.3s ease filter 0.4s;-webkit-filter:blur(5px);filter:blur(5px)}.img__image.loaded,.img__bg.loaded{opacity:1;-webkit-filter:blur(0.1px);filter:blur(0.1px)}@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{-webkit-filter:blur(0);filter:blur(0)}}}.img__image{-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit;max-width:100%;height:auto}.img__image.hide{visibility:hidden}.img__image.hide.no-height{height:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;top:0;left:0;right:0;bottom:0}";
 
 let Img = class {
   constructor(hostRef) {