@nanoporetech-digital/components 1.15.6 → 2.0.0

package/dist/nano-components/p-040b6cda.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as n,h as a,g as t}from"./p-ab5813a7.js";const e=':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:inline-block;--base-color-rgb:var(--nano-spinner-base-rgb, 0, 116, 149);--indicator-color:var(\n      --nano-spinner-indicator-color,\n      rgba(var(--base-color-rgb), 1)\n    );--track-color:var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));--overlay-color:var(--nano-layer-overlay-light, rgba(255, 255, 255, .7))}.spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}:host([overlay]:not([overlay=false])) .spinner{position:absolute;top:0;left:0;right:0;bottom:0}:host([overlay]:not([overlay=false])) .spinner .spinner__loader,:host([overlay]:not([overlay=false])) .spinner .spinner__text{z-index:1}.spinner__overlay{background:var(--overlay-color);position:absolute;top:0;bottom:0;left:0;right:0;z-index:0;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.spinner__loader{font-size:var(--spinner-scale, 1em)}.spinner__spin{display:block;margin:auto;width:1em;height:1em;border-radius:50%;border:solid 0.1em var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);border-left-color:var(--indicator-color);-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}.spinner__dna{font-size:0.2286em;display:-webkit-box;display:-ms-flexbox;display:flex}.spinner__dnatrack{position:relative;padding:0 0.625em;height:4.375em;width:0.625em;overflow:hidden}.spinner__dnatrack::before{content:"";position:absolute;top:1.875em;left:50%;-webkit-transform:translateX(-50%) translateZ(0);transform:translateX(-50%) translateZ(0);width:0.0625em;width:max(.0625em, 1px);height:0.625em;background:var(--track-color);-webkit-animation:flex 1.5s linear infinite;animation:flex 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center}.spinner__dnatrack--2::before{-webkit-animation:flex 1.5s -1.3s linear infinite;animation:flex 1.5s -1.3s linear infinite}.spinner__dnatrack--3::before{-webkit-animation:flex 1.5s -1.1s linear infinite;animation:flex 1.5s -1.1s linear infinite}.spinner__dnatrack--4::before{-webkit-animation:flex 1.5s -0.9s linear infinite;animation:flex 1.5s -0.9s linear infinite}.spinner__dnatrack--5::before{-webkit-animation:flex 1.5s -0.75s linear infinite;animation:flex 1.5s -0.75s linear infinite}.spinner__dnadot{position:absolute;width:0.5em;height:0.5em;border-radius:50% 50%;background:var(--indicator-color);-webkit-animation:rotate 1.5s linear infinite;animation:rotate 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center;left:50%;-webkit-transform:translateX(-50%) translateZ(0) translateY(0);transform:translateX(-50%) translateZ(0) translateY(0)}.spinner__dnadot--2{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--3{-webkit-animation:rotate 1.5s -1.3s linear infinite;animation:rotate 1.5s -1.3s linear infinite}.spinner__dnadot--4{-webkit-animation:rotate 1.5s -0.55s linear infinite;animation:rotate 1.5s -0.55s linear infinite}.spinner__dnadot--5{-webkit-animation:rotate 1.5s -1.1s linear infinite;animation:rotate 1.5s -1.1s linear infinite}.spinner__dnadot--6{-webkit-animation:rotate 1.5s -0.35s linear infinite;animation:rotate 1.5s -0.35s linear infinite}.spinner__dnadot--7{-webkit-animation:rotate 1.5s -0.9s linear infinite;animation:rotate 1.5s -0.9s linear infinite}.spinner__dnadot--8{-webkit-animation:rotate 1.5s -0.15s linear infinite;animation:rotate 1.5s -0.15s linear infinite}.spinner__dnadot--9{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--10{-webkit-animation:rotate 1.5s 0s linear infinite;animation:rotate 1.5s 0s linear infinite}.spinner__text{text-align:center;position:relative;margin-top:0.5em}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@-webkit-keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}@keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}';let r=class{constructor(a){n(this,a);this.hasText=false;this.type="dna";this.overlay=false}componentWillLoad(){this.hasText=!!this.el.childNodes.length}render(){return a("div",{class:"spinner","aria-busy":"true","aria-live":"polite"},a("div",{class:"spinner__loader"},this.type==="dna"&&a("div",{class:"spinner__dna"},a("div",{class:"spinner__dnatrack spinner__dnatrack--1"},a("div",{class:"spinner__dnadot spinner__dnadot--1"}),a("div",{class:"spinner__dnadot spinner__dnadot--2"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--2"},a("div",{class:"spinner__dnadot spinner__dnadot--3"}),a("div",{class:"spinner__dnadot spinner__dnadot--4"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--3"},a("div",{class:"spinner__dnadot spinner__dnadot--5"}),a("div",{class:"spinner__dnadot spinner__dnadot--6"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--4"},a("div",{class:"spinner__dnadot spinner__dnadot--7"}),a("div",{class:"spinner__dnadot spinner__dnadot--8"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--5"},a("div",{class:"spinner__dnadot spinner__dnadot--9"}),a("div",{class:"spinner__dnadot spinner__dnadot--10"}))),this.type==="circle"&&a("span",{class:"spinner__spin"})),this.hasText&&a("div",{class:"spinner__text"},a("slot",null)),this.overlay&&a("div",{class:"spinner__overlay"}))}get el(){return t(this)}};r.style=e;export{r as nano_spinner};
+//# sourceMappingURL=p-040b6cda.entry.js.map

package/dist/nano-components/{p-61565b5a.entry.js.map → p-040b6cda.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"names":["spinnerCss","Spinner","[object Object]","hostRef","this","hasText","type","overlay","el","childNodes","length","h","class","aria-busy","aria-live"],"mappings":";;;kDAAA,MAAMA,EAAa,umMCkBNC,EAAO,MALpBC,YAAAC,aAOWC,KAAAC,QAAmB,MAGpBD,KAAAE,KAAyB,MAGRF,KAAAG,QAAmB,MAE5CL,oBACEE,KAAKC,UAAYD,KAAKI,GAAGC,WAAWC,OAGtCR,SACE,OACES,EAAA,MAAA,CAAKC,MAAM,UAASC,YAAW,OAAMC,YAAW,UAC9CH,EAAA,MAAA,CAAKC,MAAM,mBACRR,KAAKE,OAAS,OACbK,EAAA,MAAA,CAAKC,MAAM,gBACTD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,0CAIhBR,KAAKE,OAAS,UAAYK,EAAA,OAAA,CAAMC,MAAM,mBAExCR,KAAKC,SACJM,EAAA,MAAA,CAAKC,MAAM,iBACTD,EAAA,OAAA,OAGHP,KAAKG,SAAWI,EAAA,MAAA,CAAKC,MAAM","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$spinner-color-rgb}\n   * @prop --indicator-color: default var(--nano-spinner-indicator-color, rgba(var(--base-color-rgb), 1))\n   * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), .2))\n   * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n   * @prop --overlay-color: #{$layer-overlay-light};\n   */\n\n  display: inline-block;\n\n  // --spinner-scale: 5em;\n  --base-color-rgb: #{$spinner-color-rgb};\n  --indicator-color:\n    var(\n      --nano-spinner-indicator-color,\n      rgba(var(--base-color-rgb), 1)\n    );\n  --track-color: var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n  --overlay-color: #{$layer-overlay-light};\n}\n\n.spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  :host([overlay]:not([overlay='false'])) & {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    .spinner__loader,\n    .spinner__text {\n      z-index: 1;\n    }\n  }\n\n  &__overlay {\n    background: var(--overlay-color);\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 0;\n    backdrop-filter: blur(#{$layer-overlay-blur});\n  }\n\n  &__loader {\n    font-size: var(--spinner-scale, 1em);\n  }\n\n  &__spin {\n    display: block;\n    margin: auto;\n    width: 1em;\n    height: 1em;\n    border-radius: 50%;\n    border: solid 0.1em var(--track-color);\n    border-top-color: var(--indicator-color);\n    border-right-color: var(--indicator-color);\n    border-left-color: var(--indicator-color);\n    animation: 1s linear infinite spin;\n  }\n\n  &__dna {\n    font-size: 0.2286em;\n    display: flex;\n  }\n\n  &__dnatrack {\n    position: relative;\n    padding: 0 0.625em;\n    height: 4.375em;\n    width: 0.625em;\n    overflow: hidden;\n\n    &::before {\n      content: '';\n      position: absolute;\n      top: 1.875em;\n      left: 50%;\n      transform: translateX(-50%) translateZ(0);\n      width: 0.0625em;\n      width: #{'max(.0625em, 1px)'};\n      height: 0.625em;\n      background: var(--track-color);\n      animation: flex 1.5s linear infinite;\n      transform-origin: center center;\n    }\n\n    &--2::before {\n      animation: flex 1.5s -1.3s linear infinite;\n    }\n\n    &--3::before {\n      animation: flex 1.5s -1.1s linear infinite;\n    }\n\n    &--4::before {\n      animation: flex 1.5s -0.9s linear infinite;\n    }\n\n    &--5::before {\n      animation: flex 1.5s -0.75s linear infinite;\n    }\n  }\n\n  &__dnadot {\n    position: absolute;\n    width: 0.5em;\n    height: 0.5em;\n    border-radius: 50% 50%;\n    background: var(--indicator-color);\n    animation: rotate 1.5s linear infinite;\n    transform-origin: center center;\n    left: 50%;\n    transform: translateX(-50%) translateZ(0) translateY(0);\n\n    &--2 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--3 {\n      animation: rotate 1.5s -1.3s linear infinite;\n    }\n\n    &--4 {\n      animation: rotate 1.5s -0.55s linear infinite;\n    }\n\n    &--5 {\n      animation: rotate 1.5s -1.1s linear infinite;\n    }\n\n    &--6 {\n      animation: rotate 1.5s -0.35s linear infinite;\n    }\n\n    &--7 {\n      animation: rotate 1.5s -0.9s linear infinite;\n    }\n\n    &--8 {\n      animation: rotate 1.5s -0.15s linear infinite;\n    }\n\n    &--9 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--10 {\n      animation: rotate 1.5s 0s linear infinite;\n    }\n  }\n\n  &__text {\n    text-align: center;\n    position: relative;\n    margin-top: 0.5em;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes rotate {\n    0%,\n    100% {\n      transform: translateX(-50%) translateY(0) scale(1);\n    }\n\n    25% {\n      transform: translateX(-50%) translateY(1.875em) scale(2);\n    }\n\n    50% {\n      transform: translateX(-50%) translateY(3.75em) scale(1);\n    }\n\n    75% {\n      transform: translateX(-50%) translateY(1.875em) scale(0.3);\n    }\n  }\n\n  @keyframes flex {\n    0%,\n    100% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    25% {\n      transform: translateX(-50%) scaleY(1);\n    }\n\n    50% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    75% {\n      transform: translateX(-50%) scaleY(1);\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  ComponentInterface,\n  Prop,\n  Element,\n  State,\n} from '@stencil/core';\n\n/**\n * Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n */\n@Component({\n  tag: 'nano-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner implements ComponentInterface {\n  @Element() el: HTMLNanoSpinnerElement;\n  @State() hasText: boolean = false;\n\n  /** The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders. */\n  @Prop() type: 'dna' | 'circle' = 'dna';\n\n  /** Displays absolutely with an overlay */\n  @Prop({ reflect: true }) overlay: boolean = false;\n\n  componentWillLoad() {\n    this.hasText = !!this.el.childNodes.length;\n  }\n\n  render() {\n    return (\n      <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"spinner__loader\">\n          {this.type === 'dna' && (\n            <div class=\"spinner__dna\">\n              <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n                <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n                <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n                <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n                <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n                <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n              </div>\n            </div>\n          )}\n          {this.type === 'circle' && <span class=\"spinner__spin\"></span>}\n        </div>\n        {this.hasText && (\n          <div class=\"spinner__text\">\n            <slot />\n          </div>\n        )}\n        {this.overlay && <div class=\"spinner__overlay\"></div>}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"names":["spinnerCss","Spinner","[object Object]","hostRef","this","hasText","type","overlay","el","childNodes","length","h","class","aria-busy","aria-live"],"mappings":";;;kDAAA,MAAMA,EAAa,woMCkBNC,EAAO,MALpBC,YAAAC,aAOWC,KAAAC,QAAmB,MAGpBD,KAAAE,KAAyB,MAGRF,KAAAG,QAAmB,MAE5CL,oBACEE,KAAKC,UAAYD,KAAKI,GAAGC,WAAWC,OAGtCR,SACE,OACES,EAAA,MAAA,CAAKC,MAAM,UAASC,YAAW,OAAMC,YAAW,UAC9CH,EAAA,MAAA,CAAKC,MAAM,mBACRR,KAAKE,OAAS,OACbK,EAAA,MAAA,CAAKC,MAAM,gBACTD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,0CAIhBR,KAAKE,OAAS,UAAYK,EAAA,OAAA,CAAMC,MAAM,mBAExCR,KAAKC,SACJM,EAAA,MAAA,CAAKC,MAAM,iBACTD,EAAA,OAAA,OAGHP,KAAKG,SAAWI,EAAA,MAAA,CAAKC,MAAM","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$spinner-color-rgb}\n   * @prop --indicator-color: default var(--nano-spinner-indicator-color, rgba(var(--base-color-rgb), 1))\n   * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), .2))\n   * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n   * @prop --overlay-color: #{$layer-overlay-light};\n   */\n\n  display: inline-block;\n\n  // --spinner-scale: 5em;\n  --base-color-rgb: #{$spinner-color-rgb};\n  --indicator-color:\n    var(\n      --nano-spinner-indicator-color,\n      rgba(var(--base-color-rgb), 1)\n    );\n  --track-color: var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n  --overlay-color: #{$layer-overlay-light};\n}\n\n.spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  :host([overlay]:not([overlay='false'])) & {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    .spinner__loader,\n    .spinner__text {\n      z-index: 1;\n    }\n  }\n\n  &__overlay {\n    background: var(--overlay-color);\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 0;\n    backdrop-filter: blur(#{$layer-overlay-blur});\n  }\n\n  &__loader {\n    font-size: var(--spinner-scale, 1em);\n  }\n\n  &__spin {\n    display: block;\n    margin: auto;\n    width: 1em;\n    height: 1em;\n    border-radius: 50%;\n    border: solid 0.1em var(--track-color);\n    border-top-color: var(--indicator-color);\n    border-right-color: var(--indicator-color);\n    border-left-color: var(--indicator-color);\n    animation: 1s linear infinite spin;\n  }\n\n  &__dna {\n    font-size: 0.2286em;\n    display: flex;\n  }\n\n  &__dnatrack {\n    position: relative;\n    padding: 0 0.625em;\n    height: 4.375em;\n    width: 0.625em;\n    overflow: hidden;\n\n    &::before {\n      content: '';\n      position: absolute;\n      top: 1.875em;\n      left: 50%;\n      transform: translateX(-50%) translateZ(0);\n      width: 0.0625em;\n      width: #{'max(.0625em, 1px)'};\n      height: 0.625em;\n      background: var(--track-color);\n      animation: flex 1.5s linear infinite;\n      transform-origin: center center;\n    }\n\n    &--2::before {\n      animation: flex 1.5s -1.3s linear infinite;\n    }\n\n    &--3::before {\n      animation: flex 1.5s -1.1s linear infinite;\n    }\n\n    &--4::before {\n      animation: flex 1.5s -0.9s linear infinite;\n    }\n\n    &--5::before {\n      animation: flex 1.5s -0.75s linear infinite;\n    }\n  }\n\n  &__dnadot {\n    position: absolute;\n    width: 0.5em;\n    height: 0.5em;\n    border-radius: 50% 50%;\n    background: var(--indicator-color);\n    animation: rotate 1.5s linear infinite;\n    transform-origin: center center;\n    left: 50%;\n    transform: translateX(-50%) translateZ(0) translateY(0);\n\n    &--2 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--3 {\n      animation: rotate 1.5s -1.3s linear infinite;\n    }\n\n    &--4 {\n      animation: rotate 1.5s -0.55s linear infinite;\n    }\n\n    &--5 {\n      animation: rotate 1.5s -1.1s linear infinite;\n    }\n\n    &--6 {\n      animation: rotate 1.5s -0.35s linear infinite;\n    }\n\n    &--7 {\n      animation: rotate 1.5s -0.9s linear infinite;\n    }\n\n    &--8 {\n      animation: rotate 1.5s -0.15s linear infinite;\n    }\n\n    &--9 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--10 {\n      animation: rotate 1.5s 0s linear infinite;\n    }\n  }\n\n  &__text {\n    text-align: center;\n    position: relative;\n    margin-top: 0.5em;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes rotate {\n    0%,\n    100% {\n      transform: translateX(-50%) translateY(0) scale(1);\n    }\n\n    25% {\n      transform: translateX(-50%) translateY(1.875em) scale(2);\n    }\n\n    50% {\n      transform: translateX(-50%) translateY(3.75em) scale(1);\n    }\n\n    75% {\n      transform: translateX(-50%) translateY(1.875em) scale(0.3);\n    }\n  }\n\n  @keyframes flex {\n    0%,\n    100% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    25% {\n      transform: translateX(-50%) scaleY(1);\n    }\n\n    50% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    75% {\n      transform: translateX(-50%) scaleY(1);\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  ComponentInterface,\n  Prop,\n  Element,\n  State,\n} from '@stencil/core';\n\n/**\n * Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n */\n@Component({\n  tag: 'nano-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner implements ComponentInterface {\n  @Element() el: HTMLNanoSpinnerElement;\n  @State() hasText: boolean = false;\n\n  /** The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders. */\n  @Prop() type: 'dna' | 'circle' = 'dna';\n\n  /** Displays absolutely with an overlay */\n  @Prop({ reflect: true }) overlay: boolean = false;\n\n  componentWillLoad() {\n    this.hasText = !!this.el.childNodes.length;\n  }\n\n  render() {\n    return (\n      <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"spinner__loader\">\n          {this.type === 'dna' && (\n            <div class=\"spinner__dna\">\n              <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n                <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n                <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n                <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n                <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n                <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n              </div>\n            </div>\n          )}\n          {this.type === 'circle' && <span class=\"spinner__spin\"></span>}\n        </div>\n        {this.hasText && (\n          <div class=\"spinner__text\">\n            <slot />\n          </div>\n        )}\n        {this.overlay && <div class=\"spinner__overlay\"></div>}\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-05c7bde1.system.entry.js

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(t,o,e,i){function n(t){return t instanceof e?t:new e((function(o){o(t)}))}return new(e||(e=Promise))((function(e,r){function a(t){try{p(i.next(t))}catch(o){r(o)}}function s(t){try{p(i["throw"](t))}catch(o){r(o)}}function p(t){t.done?e(t.value):n(t.value).then(a,s)}p((i=i.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},i,n,r,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(o){return p([t,o])}}function p(a){if(i)throw new TypeError("Generator is already executing.");while(e)try{if(i=1,n&&(r=a[0]&2?n["return"]:a[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;if(n=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;n=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){e.label=a[1];break}if(a[0]===6&&e.label<r[1]){e.label=r[1];r=a;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(a);break}if(r[2])e.ops.pop();e.trys.pop();continue}a=o.call(t,e)}catch(s){a=[6,s];n=0}finally{i=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,o){for(var e=0,i=o.length,n=t.length;e<i;e++,n++)t[n]=o[e];return t};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */System.register(["./p-59b3d24b.system.js","./p-7be6b7f3.system.js"],(function(t){"use strict";var o,e,i,n,r,a;return{setters:[function(t){o=t.r;e=t.c;i=t.h;n=t.e;r=t.g},function(t){a=t.P}],execute:function(){var s=':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{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-width:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));-webkit-transform:translateY(10px) translateZ(0);transform:translateY(10px) translateZ(0);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;-webkit-transition-delay:var(--hide-delay);transition-delay:var(--hide-delay);-webkit-transition-duration:var(--hide-duration);transition-duration:var(--hide-duration);-webkit-transition-timing-function:var(--hide-timing-function);transition-timing-function:var(--hide-timing-function);white-space:normal}.tooltip-arrow{content:"";position:absolute;width:0;height:0;color:black;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);pointer-events:none}.tooltip-positioner[data-popper-placement^=top] .tooltip{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:translateY(-10px) translateZ(0);transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{-webkit-transform-origin:top;transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{-webkit-transform-origin:right;transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{-webkit-transform-origin:left;transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:var(--show-delay);transition-delay:var(--show-delay);-webkit-transition-duration:var(--show-duration);transition-duration:var(--show-duration);-webkit-transition-timing-function:var(--show-timing-function);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{bottom:100%;left:calc(50% - 5px);border-bottom:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{top:100%;left:calc(50% - 5px);border-top:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{top:calc(50% - 5px);left:100%;border-left:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{top:auto;bottom:5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{top:calc(50% - 5px);right:100%;border-right:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{top:auto;bottom:5px}';var p=0;var l=t("nano_tooltip",function(){function t(t){var i=this;o(this,t);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7);this.componentId="tooltip-"+ ++p;this.isVisible=false;this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus";this.handleBlur=function(){if(i.hasTrigger("focus")){i.hide()}};this.handleClick=function(){if(i.hasTrigger("click")){i.open?i.hide():i.show()}};this.handleFocus=function(){if(i.hasTrigger("focus")){i.show()}};this.handleKeyDown=function(t){if(i.open&&t.key==="Escape"){t.stopPropagation();i.hide()}};this.handleMouseOver=function(){if(i.hasTrigger("hover")){i.show()}};this.handleMouseOut=function(){if(i.hasTrigger("hover")){i.hide()}};this.handleSlotChange=function(){i.target=i.getTarget()};this.handleTTSlotChange=function(){var t=i.host.querySelector('[id="'+i.componentId+'"]')||i.host.shadowRoot.getElementById(i.componentId);Array.from(i.host.querySelectorAll('[slot="content"]')).filter((function(o){return o!==t})).forEach((function(o){t.appendChild(o)}))}}Object.defineProperty(t.prototype,"target",{get:function(){return this._target},set:function(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-describedby")}t.setAttribute("aria-describedby",this.componentId);this._target=t},enumerable:false,configurable:true});t.prototype.handleOpenChange=function(){this.open?this.show():this.hide()};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(this.isVisible){return[2]}t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return[2]}this.isVisible=true;this.open=true;this.popover.show();return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(!this.isVisible){return[2]}t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return[2]}this.isVisible=false;this.open=false;this.popover.hide();return[2]}))}))};t.prototype.getTarget=function(){var t=__spreadArray([],Array.from(this.host.children)).find((function(t){return t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"}));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t};t.prototype.hasTrigger=function(t){var o=this.trigger.split(" ");return o.includes(t)};t.prototype.syncOptions=function(){var t=this;this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:function(){return t.nanoAfterHide.emit()},onAfterShow:function(){return t.nanoAfterShow.emit()}})};t.prototype.componentDidLoad=function(){this.target=this.getTarget();this.popover=new a(this.target,this.tooltipPositioner);this.syncOptions();var t=this.host.shadowRoot.getElementById(this.componentId);t.slot="content";this.host.appendChild(t);this.handleTTSlotChange();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}};t.prototype.componentDidUpdate=function(){this.syncOptions()};t.prototype.disconnectedCallback=function(){this.popover.destroy()};t.prototype.render=function(){var t=this;return i(n,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},i("slot",{onSlotchange:this.handleSlotChange}),!this.disabled&&i("div",{ref:function(o){return t.tooltipPositioner=o},class:"tooltip-positioner"},i("div",{part:"base",ref:function(o){return t.tooltip=o},class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content",onSlotchange:this.handleTTSlotChange},i("div",{id:this.componentId},this.content)),i("div",{class:"tooltip-arrow","data-popper-arrow":true}))))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["handleOpenChange"]}},enumerable:false,configurable:true});return t}());l.style=s}}}));
+//# sourceMappingURL=p-05c7bde1.system.entry.js.map

package/dist/nano-components/{p-30df44d9.system.entry.js.map → p-05c7bde1.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"names":["tooltipCss","id","Tooltip","exports","class_1","hostRef","_this","this","componentId","isVisible","content","placement","disabled","distance","open","skidding","trigger","handleBlur","hasTrigger","hide","handleClick","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","target","getTarget","handleTTSlotChange","contentDiv","host","querySelector","shadowRoot","getElementById","Array","from","querySelectorAll","filter","elm","forEach","appendChild","Object","defineProperty","prototype","_target","newTarget","removeAttribute","setAttribute","handleOpenChange","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","__spreadArray","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","split","includes","syncOptions","setOptions","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","componentDidLoad","Popover","tooltipPositioner","ele","slot","hidden","componentDidUpdate","disconnectedCallback","destroy","render","h","Host","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onClick","onSlotchange","ref","class","part","tooltip--open","role","aria-hidden","name","data-popper-arrow"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-width: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n  white-space: normal;\n\n  &-arrow {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    color: black;\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n    pointer-events: none;\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      bottom: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-bottom: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}-arrow {\n      top: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-top: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      top: calc(50% - #{$tooltip-arrow-size});\n      left: 100%;\n      border-left: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      top: calc(50% - #{$tooltip-arrow-size});\n      right: 100%;\n      border-right: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private componentId = `tooltip-${++id}`;\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: any;\n\n  private _target: HTMLElement;\n  private get target() {\n    return this._target;\n  }\n  private set target(newTarget) {\n    if (newTarget !== this._target && this._target) {\n      this._target.removeAttribute('aria-describedby');\n    }\n    newTarget.setAttribute('aria-describedby', this.componentId);\n    this._target = newTarget;\n  }\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  // Events\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Public methods\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  // Private methods\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  // Event Handlers\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.target = this.getTarget();\n  };\n\n  private handleTTSlotChange = () => {\n    const contentDiv =\n      this.host.querySelector(`[id=\"${this.componentId}\"]`) ||\n      this.host.shadowRoot.getElementById(this.componentId);\n    Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n      .filter((elm) => elm !== contentDiv)\n      .forEach((elm) => {\n        contentDiv.appendChild(elm);\n      });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n\n    const ele = this.host.shadowRoot.getElementById(this.componentId);\n    ele.slot = 'content';\n    this.host.appendChild(ele);\n    this.handleTTSlotChange();\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n\n        {!this.disabled && (\n          <div\n            ref={(el) => (this.tooltipPositioner = el)}\n            class=\"tooltip-positioner\"\n          >\n            <div\n              part=\"base\"\n              ref={(el) => (this.tooltip = el)}\n              class={{\n                tooltip: true,\n                'tooltip--open': this.open,\n              }}\n              role=\"tooltip\"\n              aria-hidden={this.open ? 'false' : 'true'}\n            >\n              <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n                <div id={this.componentId}>{this.content}</div>\n              </slot>\n              <div class=\"tooltip-arrow\" data-popper-arrow></div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"names":["tooltipCss","id","Tooltip","exports","class_1","hostRef","_this","this","componentId","isVisible","content","placement","disabled","distance","open","skidding","trigger","handleBlur","hasTrigger","hide","handleClick","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","target","getTarget","handleTTSlotChange","contentDiv","host","querySelector","shadowRoot","getElementById","Array","from","querySelectorAll","filter","elm","forEach","appendChild","Object","defineProperty","prototype","_target","newTarget","removeAttribute","setAttribute","handleOpenChange","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","__spreadArray","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","split","includes","syncOptions","setOptions","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","componentDidLoad","Popover","tooltipPositioner","ele","slot","hidden","componentDidUpdate","disconnectedCallback","destroy","render","h","Host","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onClick","onSlotchange","ref","class","part","tooltip--open","role","aria-hidden","name","data-popper-arrow"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-width: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n  white-space: normal;\n\n  &-arrow {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    color: black;\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n    pointer-events: none;\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      bottom: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-bottom: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}-arrow {\n      top: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-top: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      top: calc(50% - #{$tooltip-arrow-size});\n      left: 100%;\n      border-left: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      top: calc(50% - #{$tooltip-arrow-size});\n      right: 100%;\n      border-right: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private componentId = `tooltip-${++id}`;\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: any;\n\n  private _target: HTMLElement;\n  private get target() {\n    return this._target;\n  }\n  private set target(newTarget) {\n    if (newTarget !== this._target && this._target) {\n      this._target.removeAttribute('aria-describedby');\n    }\n    newTarget.setAttribute('aria-describedby', this.componentId);\n    this._target = newTarget;\n  }\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  // Events\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Public methods\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  // Private methods\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  // Event Handlers\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.target = this.getTarget();\n  };\n\n  private handleTTSlotChange = () => {\n    const contentDiv =\n      this.host.querySelector(`[id=\"${this.componentId}\"]`) ||\n      this.host.shadowRoot.getElementById(this.componentId);\n    Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n      .filter((elm) => elm !== contentDiv)\n      .forEach((elm) => {\n        contentDiv.appendChild(elm);\n      });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n\n    const ele = this.host.shadowRoot.getElementById(this.componentId);\n    ele.slot = 'content';\n    this.host.appendChild(ele);\n    this.handleTTSlotChange();\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n\n        {!this.disabled && (\n          <div\n            ref={(el) => (this.tooltipPositioner = el)}\n            class=\"tooltip-positioner\"\n          >\n            <div\n              part=\"base\"\n              ref={(el) => (this.tooltip = el)}\n              class={{\n                tooltip: true,\n                'tooltip--open': this.open,\n              }}\n              role=\"tooltip\"\n              aria-hidden={this.open ? 'false' : 'true'}\n            >\n              <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n                <div id={this.componentId}>{this.content}</div>\n              </slot>\n              <div class=\"tooltip-arrow\" data-popper-arrow></div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-07bdf44d.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as i,f as e,h as s,e as h,g as l}from"./p-ab5813a7.js";import{W as r}from"./p-5ae80fd7.js";import{C as n}from"./p-5a0095f9.js";import"./p-69a3e911.js";import"./p-1da5f8df.js";const a=":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:none}:host ::slotted([slot=filter-template]),:host::slotted([slot=filter-template]){display:none !important}:host(.show-filter){display:block}";let o=class{constructor(e){t(this,e);this.nanoFilterChanged=i(this,"nanoFilterChanged",7);this.nanoTplUpdated=i(this,"nanoTplUpdated",7);this.filterId=null;this.tplWillRnder=new Promise((t=>{this.tplDidRnder=t}));this.internalValue=[undefined];this.showFilter=false;this.indexResults=null;this.filterChanged=null;this.filterName=null;this.value="";this.operator="or";this.storeMethod="session"}valueSet(){let t=this.value;let i;if(typeof t==="string")i=t.length?t.split("|"):[];else i=this.value;if(this.didValueChange(i)){let t=this.setFieldValues(i);if(t&&t.length)this.internalValue=i;else{this.tplWillRnder.then((t=>{this.setFieldValues(i);this.internalValue=i}))}}}valueChanged(){this.value=this.internalValue;this.nanoFilterChanged.emit({filterId:this.filterId,facetName:this.filterName,value:this.internalValue,operator:this.operator})}appliedFilterChanged(){if(this.filterName&&this.filterChanged&&(this.filterChanged!==this.filterId||this.operator==="and")){this.updateContent()}}tplUpdate(){this.updateContent()}handleFilterChange(){if(this.indexResults&&this.indexResults.appliedFilters){const t=this.indexResults.appliedFilters.find((t=>t.name===this.filterName));if(!t)return;this.tplWillRnder.then((i=>{let e=this.setFieldValues(t.values);if(e&&e.length)this.value=e}))}this.updateContent()}handleChangeEvent(){let t=this.getFieldValues();if(this.didValueChange(t)){this.internalValue=t;return true}return false}updateContent(){let t=this.outputSlot||this.outputEle;if(!this.el)return;if(!this.templateStr)this.showFilter=true;else if(!this.filterName||!t||this.templateStr&&(!this.indexResults||!this.indexResults.origFilters[this.filterName])){this.showFilter=false}if(!t)return;if(!this.indexResults){if(this.templateStr){e((()=>{t.innerHTML=this.tplRenderFn(this.templateStr,{orig:{},dyn:{},selected:this.internalValue&&this.internalValue.length?this.internalValue:this.value});if(!this.value||!this.value.length)this.handleChangeEvent()}))}else if(!this.value||!this.value.length)this.handleChangeEvent();return}e((()=>{t.innerHTML=this.tplRenderFn(this.templateStr,{orig:Object.assign({},this.indexResults.origFilters[this.filterName]),dyn:Object.assign({},this.indexResults.dynFilters[this.filterName]),selected:this.internalValue&&this.internalValue.length?this.internalValue:this.value});this.tplDidRnder();this.setFieldValues();if(!this.showFilter)this.showFilter=true;this.nanoTplUpdated.emit(this.el)}))}getFieldValues(){let t=[];let i=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select');for(let e=0;e<i.length;e++){let s=i[e];if(s.type==="select-multiple"){let i=s;for(let e=0;e<i.options.length;e++){if(!i.options[e].selected||!i.options[e].value.length)continue;t.push(i.options[e].value)}}else if(s.type!=="checkbox"&&s.type!=="radio"||s.checked&&s.value.length){t.push(s.value)}}return t}setFieldValues(t){t=t||this.internalValue;if(!t)return;let i=[];let e=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select, nano-select, nano-checkbox');for(let s=0;s<e.length;s++){let h=e[s];if(h.disabled||h.type==="file"||h.type==="reset"||h.type==="submit"||h.type==="button")continue;if(h.type==="select-multiple"||h.type==="select-one"){let e=h;for(let s=0;s<e.options.length;s++){if(!t.includes(e.options[s].value))e.options[s].selected=false;else{i.push(e.value);e.options[s].selected=true;if(h.type==="select-one")e.value=e.options[s].value}}}else if(["checkbox","radio","tag","segment","segment-pill"].includes(h.type)){if(t.includes(h.value)){i.push(h.value);h.checked=true}else if(!t.length&&!h.value.length){h.checked=true}else h.checked=false}}return i}didValueChange(t){if(!!this.internalValue&&!t)return true;if(!this.internalValue&&!t)return false;if(this.internalValue&&t.length!==this.internalValue.length)return true;let i=false;for(var e=0;e<t.length;e++){if(!i&&(!this.internalValue||!this.internalValue.includes(t[e])))i=true}return i}connectedCallback(){this.templateSlot=this.el.querySelector('[slot="filter-template"]');this.outputSlot=this.el.querySelector('[slot="output"]');this.filterId=this.filterName+"_"+f++;if(!!this.templateSlot){this.templateStr=this.templateSlot.innerHTML;this.templateStr=this.templateStr.replace(/=&gt;/gm,"=>")}}componentWillLoad(){if(this.storeId)n.init(this,["value"],this.storeMethod||this.globalStoreMethod,this.storeId)}componentDidLoad(){this.updateContent();if(this.templateStr&&this.filterName&&this.indexResults&&this.indexResults.origFilters[this.filterName])this.showFilter=true}render(){return s(h,{class:{"show-filter":this.showFilter}},s("div",{ref:t=>this.outputEle=t},s("slot",{name:"output"})))}get el(){return l(this)}static get watchers(){return{value:["valueSet"],internalValue:["valueChanged"],facets:["appliedFilterChanged"],tplRenderFn:["tplUpdate"],indexResults:["handleFilterChange"]}}};r(o,["globalStoreMethod","indexResults","filterChanged","facets","tplRenderFn","changeEvent"]);let f=0;o.style=a;export{o as nano_algolia_filter};
+//# sourceMappingURL=p-07bdf44d.entry.js.map

package/dist/nano-components/{p-88bcf55b.entry.js.map → p-07bdf44d.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/algolia/algolia-filter.scss?tag=nano-algolia-filter&encapsulation=shadow","src/components/algolia/algolia-filter.tsx"],"names":["algoliaFilterCss","AlgoliaFilter","[object Object]","hostRef","this","filterId","tplWillRnder","Promise","resolve","tplDidRnder","internalValue","undefined","showFilter","indexResults","filterChanged","filterName","value","operator","storeMethod","valStr","vals","length","split","didValueChange","foundVals","setFieldValues","then","_","nanoFilterChanged","emit","facetName","updateContent","appliedFilters","foundValue","find","filter","name","values","getFieldValues","outputTo","outputSlot","outputEle","el","templateStr","origFilters","writeTask","innerHTML","tplRenderFn","orig","dyn","selected","handleChangeEvent","Object","assign","dynFilters","nanoTplUpdated","fields","querySelectorAll","i","field","type","select","n","options","push","checked","found","disabled","includes","newVal","hasChanged","templateSlot","querySelector","filterIds","replace","storeId","ComponentStore","init","globalStoreMethod","h","Host","class","show-filter","ref","div","Wormhole"],"mappings":"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","sourcesContent":[":host {\n  display: none;\n\n  ::slotted([slot='filter-template']),\n  &::slotted([slot='filter-template']) {\n    display: none !important;\n  }\n}\n\n:host(.show-filter) {\n  display: block;\n}\n","import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  State,\n  EventEmitter,\n  Event,\n  writeTask,\n  Listen,\n} from '@stencil/core';\nimport {\n  IndexResult,\n  FilterChangeEventDetail,\n  AlgoliaFacet,\n} from '../../interface';\nimport {\n  SearchChangeEvent,\n  Wormhole,\n  WormholeConsumerConstructor,\n} from '../algolia/algolia-data';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * Displays and syncs algolia filters\n * Must be nested within an nano-algolia component.\n * @slot filter-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot output - A placeholder for template output.\n */\n@Component({\n  tag: 'nano-algolia-filter',\n  shadow: true,\n  styleUrl: 'algolia-filter.scss',\n})\nexport class AlgoliaFilter {\n  @Element() el: HTMLNanoAlgoliaFilterElement;\n\n  private templateStr: string;\n  private templateSlot: HTMLElement;\n  private outputSlot: HTMLElement;\n  private outputEle: HTMLElement;\n  private filterId: string = null;\n  private tplDidRnder;\n  private tplWillRnder = new Promise((resolve) => {\n    this.tplDidRnder = resolve;\n  });\n\n  @State() changeEvent: SearchChangeEvent;\n  @State() internalValue: Array<string> = [undefined];\n  @State() showFilter: boolean = false;\n  @State() indexResults: IndexResult = null;\n  @State() filterChanged: string = null;\n  @State() facets: AlgoliaFacet;\n  @State() tplRenderFn: (...args: any[]) => string;\n  @State() globalStoreMethod: StorageMethods;\n\n  /**\n   * Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display\n   */\n  @Prop() filterName: string = null;\n\n  /**\n   * Set values of this filter. Will result in form elements being selected. '|' delimited string or array.\n   */\n  @Prop({ mutable: true }) value: string | Array<string> = '';\n\n  /**\n   * The internal operator joining filter values.\n   */\n  @Prop() operator: 'or' | 'and' = 'or';\n\n  /**\n   * Store search queries (against this ID) to the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Emitted when the filter value changes\n   */\n  @Event() nanoFilterChanged!: EventEmitter<FilterChangeEventDetail>;\n\n  /**\n   * Emitted when templates are updated\n   */\n  @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaFilterElement>;\n\n  // Public facing. When changed attempts to 'check' any relevant fields in the template.\n  @Watch('value')\n  valueSet() {\n    let valStr = this.value as string;\n    let vals;\n\n    if (typeof valStr === 'string')\n      vals = valStr.length ? valStr.split('|') : [];\n    else vals = this.value as Array<string>;\n\n    if (this.didValueChange(vals)) {\n      let foundVals = this.setFieldValues(vals);\n      // found in template, set the internal state (this emits the changed event)\n      if (foundVals && foundVals.length) this.internalValue = vals;\n      // not found in template, wait for it to render.\n      else {\n        this.tplWillRnder.then((_) => {\n          this.setFieldValues(vals);\n          this.internalValue = vals;\n        });\n      }\n    }\n  }\n\n  // Value has changed and is reflected in template. Emit event.\n  @Watch('internalValue')\n  valueChanged() {\n    this.value = this.internalValue;\n    this.nanoFilterChanged.emit({\n      filterId: this.filterId,\n      facetName: this.filterName,\n      value: this.internalValue,\n      operator: this.operator,\n    });\n  }\n\n  // New facets from algolia. Update template\n  @Watch('facets')\n  appliedFilterChanged() {\n    if (\n      this.filterName &&\n      this.filterChanged &&\n      (this.filterChanged !== this.filterId || this.operator === 'and')\n    ) {\n      this.updateContent();\n    }\n  }\n\n  @Watch('tplRenderFn')\n  tplUpdate() {\n    this.updateContent();\n  }\n\n  @Watch('indexResults')\n  handleFilterChange() {\n    if (this.indexResults && this.indexResults.appliedFilters) {\n      const foundValue = this.indexResults.appliedFilters.find(\n        (filter) => filter.name === this.filterName\n      );\n      if (!foundValue) return;\n\n      this.tplWillRnder.then((_) => {\n        let foundVals = this.setFieldValues(foundValue.values);\n        if (foundVals && foundVals.length) this.value = foundVals;\n      });\n    }\n    this.updateContent();\n  }\n\n  @Listen('nanoChange')\n  @Listen('change')\n  handleChangeEvent() {\n    let vals = this.getFieldValues();\n    if (this.didValueChange(vals)) {\n      this.internalValue = vals;\n      return true;\n    }\n    return false;\n  }\n\n  private updateContent() {\n    let outputTo = this.outputSlot || this.outputEle;\n    if (!this.el) return;\n\n    // there's no template so show output right away\n    if (!this.templateStr) this.showFilter = true;\n    // there's a template but no index set so hide filters atm\n    else if (\n      !this.filterName ||\n      !outputTo ||\n      (this.templateStr &&\n        (!this.indexResults || !this.indexResults.origFilters[this.filterName]))\n    ) {\n      this.showFilter = false;\n    }\n\n    // there's no output element so nothing else to do\n    if (!outputTo) return;\n\n    // there's no index set atm but get any static filter values so we can apply them\n    if (!this.indexResults) {\n      if (this.templateStr) {\n        writeTask(() => {\n          outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n            orig: {},\n            dyn: {},\n            selected:\n              this.internalValue && this.internalValue.length\n                ? this.internalValue\n                : this.value,\n          });\n          if (!this.value || !this.value.length) this.handleChangeEvent();\n        });\n      } else if (!this.value || !this.value.length) this.handleChangeEvent();\n      return;\n    }\n\n    // everything is in place - render as normal and set values\n    writeTask(() => {\n      outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n        orig: { ...this.indexResults.origFilters[this.filterName] },\n        dyn: { ...this.indexResults.dynFilters[this.filterName] },\n        selected:\n          this.internalValue && this.internalValue.length\n            ? this.internalValue\n            : this.value,\n      });\n      this.tplDidRnder();\n      this.setFieldValues();\n\n      if (!this.showFilter) this.showFilter = true;\n      this.nanoTplUpdated.emit(this.el);\n    });\n  }\n\n  // go through form elements and extract their current value\n  private getFieldValues() {\n    let values = [];\n    let fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      let field = fields[i] as HTMLInputElement;\n\n      // If a multi-select, get all selections\n      if (field.type === 'select-multiple') {\n        let select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!select.options[n].selected || !select.options[n].value.length)\n            continue;\n          values.push(select.options[n].value);\n        }\n      } else if (\n        (field.type !== 'checkbox' && field.type !== 'radio') ||\n        (field.checked && field.value.length)\n      ) {\n        values.push(field.value);\n      }\n    }\n    return values;\n  }\n\n  // go through form elements and select / check them as appropriate\n  private setFieldValues(vals?: string[]): void | string[] {\n    vals = vals || this.internalValue;\n    if (!vals) return;\n\n    let found = [];\n    let fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select, nano-select, nano-checkbox'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      let field = fields[i] as HTMLInputElement;\n\n      if (\n        field.disabled ||\n        field.type === 'file' ||\n        field.type === 'reset' ||\n        field.type === 'submit' ||\n        field.type === 'button'\n      )\n        continue;\n\n      if (field.type === 'select-multiple' || field.type === 'select-one') {\n        let select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!vals.includes(select.options[n].value))\n            select.options[n].selected = false;\n          else {\n            found.push(select.value);\n            select.options[n].selected = true;\n            if (field.type === 'select-one')\n              select.value = select.options[n].value;\n          }\n        }\n      } else if (\n        ['checkbox', 'radio', 'tag', 'segment', 'segment-pill'].includes(\n          field.type\n        )\n      ) {\n        if (vals.includes(field.value)) {\n          found.push(field.value);\n          field.checked = true;\n        } else if (!vals.length && !field.value.length) {\n          field.checked = true;\n        } else field.checked = false;\n      }\n    }\n    return found;\n  }\n\n  private didValueChange(newVal: Array<string>) {\n    if (!!this.internalValue && !newVal) return true;\n    if (!this.internalValue && !newVal) return false;\n    if (this.internalValue && newVal.length !== this.internalValue.length)\n      return true;\n\n    let hasChanged = false;\n    for (var i = 0; i < newVal.length; i++) {\n      if (\n        !hasChanged &&\n        (!this.internalValue || !this.internalValue.includes(newVal[i]))\n      )\n        hasChanged = true;\n    }\n    return hasChanged;\n  }\n\n  connectedCallback() {\n    this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n    this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n    this.filterId = this.filterName + '_' + filterIds++;\n\n    if (!!this.templateSlot) {\n      this.templateStr = this.templateSlot.innerHTML;\n      this.templateStr = this.templateStr.replace(/=&gt;/gm, '=>');\n    }\n  }\n\n  componentWillLoad() {\n    if (this.storeId)\n      ComponentStore.init(\n        this,\n        ['value'],\n        this.storeMethod || this.globalStoreMethod,\n        this.storeId\n      );\n  }\n\n  componentDidLoad() {\n    this.updateContent();\n\n    if (\n      this.templateStr &&\n      this.filterName &&\n      this.indexResults &&\n      this.indexResults.origFilters[this.filterName]\n    )\n      this.showFilter = true;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'show-filter': this.showFilter,\n        }}\n      >\n        <div ref={(div) => (this.outputEle = div)}>\n          <slot name=\"output\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nWormhole(AlgoliaFilter as WormholeConsumerConstructor, [\n  'globalStoreMethod',\n  'indexResults',\n  'filterChanged',\n  'facets',\n  'tplRenderFn',\n  'changeEvent',\n]);\nlet filterIds = 0;\n"]}
+{"version":3,"sources":["src/components/algolia/algolia-filter.scss?tag=nano-algolia-filter&encapsulation=shadow","src/components/algolia/algolia-filter.tsx"],"names":["algoliaFilterCss","AlgoliaFilter","[object Object]","hostRef","this","filterId","tplWillRnder","Promise","resolve","tplDidRnder","internalValue","undefined","showFilter","indexResults","filterChanged","filterName","value","operator","storeMethod","valStr","vals","length","split","didValueChange","foundVals","setFieldValues","then","_","nanoFilterChanged","emit","facetName","updateContent","appliedFilters","foundValue","find","filter","name","values","getFieldValues","outputTo","outputSlot","outputEle","el","templateStr","origFilters","writeTask","innerHTML","tplRenderFn","orig","dyn","selected","handleChangeEvent","Object","assign","dynFilters","nanoTplUpdated","fields","querySelectorAll","i","field","type","select","n","options","push","checked","found","disabled","includes","newVal","hasChanged","templateSlot","querySelector","filterIds","replace","storeId","ComponentStore","init","globalStoreMethod","h","Host","class","show-filter","ref","div","Wormhole"],"mappings":"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","sourcesContent":[":host {\n  display: none;\n\n  ::slotted([slot='filter-template']),\n  &::slotted([slot='filter-template']) {\n    display: none !important;\n  }\n}\n\n:host(.show-filter) {\n  display: block;\n}\n","import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  State,\n  EventEmitter,\n  Event,\n  writeTask,\n  Listen,\n} from '@stencil/core';\nimport {\n  IndexResult,\n  FilterChangeEventDetail,\n  AlgoliaFacet,\n} from '../../interface';\nimport {\n  SearchChangeEvent,\n  Wormhole,\n  WormholeConsumerConstructor,\n} from '../algolia/algolia-data';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * Displays and syncs algolia filters\n * Must be nested within an nano-algolia component.\n * @slot filter-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot output - A placeholder for template output.\n */\n@Component({\n  tag: 'nano-algolia-filter',\n  shadow: true,\n  styleUrl: 'algolia-filter.scss',\n})\nexport class AlgoliaFilter {\n  @Element() el: HTMLNanoAlgoliaFilterElement;\n\n  private templateStr: string;\n  private templateSlot: HTMLElement;\n  private outputSlot: HTMLElement;\n  private outputEle: HTMLElement;\n  private filterId: string = null;\n  private tplDidRnder;\n  private tplWillRnder = new Promise((resolve) => {\n    this.tplDidRnder = resolve;\n  });\n\n  @State() changeEvent: SearchChangeEvent;\n  @State() internalValue: Array<string> = [undefined];\n  @State() showFilter: boolean = false;\n  @State() indexResults: IndexResult = null;\n  @State() filterChanged: string = null;\n  @State() facets: AlgoliaFacet;\n  @State() tplRenderFn: (...args: any[]) => string;\n  @State() globalStoreMethod: StorageMethods;\n\n  /**\n   * Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display\n   */\n  @Prop() filterName: string = null;\n\n  /**\n   * Set values of this filter. Will result in form elements being selected. '|' delimited string or array.\n   */\n  @Prop({ mutable: true }) value: string | Array<string> = '';\n\n  /**\n   * The internal operator joining filter values.\n   */\n  @Prop() operator: 'or' | 'and' = 'or';\n\n  /**\n   * Store search queries (against this ID) to the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Emitted when the filter value changes\n   */\n  @Event() nanoFilterChanged!: EventEmitter<FilterChangeEventDetail>;\n\n  /**\n   * Emitted when templates are updated\n   */\n  @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaFilterElement>;\n\n  // Public facing. When changed attempts to 'check' any relevant fields in the template.\n  @Watch('value')\n  valueSet() {\n    let valStr = this.value as string;\n    let vals;\n\n    if (typeof valStr === 'string')\n      vals = valStr.length ? valStr.split('|') : [];\n    else vals = this.value as Array<string>;\n\n    if (this.didValueChange(vals)) {\n      let foundVals = this.setFieldValues(vals);\n      // found in template, set the internal state (this emits the changed event)\n      if (foundVals && foundVals.length) this.internalValue = vals;\n      // not found in template, wait for it to render.\n      else {\n        this.tplWillRnder.then((_) => {\n          this.setFieldValues(vals);\n          this.internalValue = vals;\n        });\n      }\n    }\n  }\n\n  // Value has changed and is reflected in template. Emit event.\n  @Watch('internalValue')\n  valueChanged() {\n    this.value = this.internalValue;\n    this.nanoFilterChanged.emit({\n      filterId: this.filterId,\n      facetName: this.filterName,\n      value: this.internalValue,\n      operator: this.operator,\n    });\n  }\n\n  // New facets from algolia. Update template\n  @Watch('facets')\n  appliedFilterChanged() {\n    if (\n      this.filterName &&\n      this.filterChanged &&\n      (this.filterChanged !== this.filterId || this.operator === 'and')\n    ) {\n      this.updateContent();\n    }\n  }\n\n  @Watch('tplRenderFn')\n  tplUpdate() {\n    this.updateContent();\n  }\n\n  @Watch('indexResults')\n  handleFilterChange() {\n    if (this.indexResults && this.indexResults.appliedFilters) {\n      const foundValue = this.indexResults.appliedFilters.find(\n        (filter) => filter.name === this.filterName\n      );\n      if (!foundValue) return;\n\n      this.tplWillRnder.then((_) => {\n        let foundVals = this.setFieldValues(foundValue.values);\n        if (foundVals && foundVals.length) this.value = foundVals;\n      });\n    }\n    this.updateContent();\n  }\n\n  @Listen('nanoChange')\n  @Listen('change')\n  handleChangeEvent() {\n    let vals = this.getFieldValues();\n    if (this.didValueChange(vals)) {\n      this.internalValue = vals;\n      return true;\n    }\n    return false;\n  }\n\n  private updateContent() {\n    let outputTo = this.outputSlot || this.outputEle;\n    if (!this.el) return;\n\n    // there's no template so show output right away\n    if (!this.templateStr) this.showFilter = true;\n    // there's a template but no index set so hide filters atm\n    else if (\n      !this.filterName ||\n      !outputTo ||\n      (this.templateStr &&\n        (!this.indexResults || !this.indexResults.origFilters[this.filterName]))\n    ) {\n      this.showFilter = false;\n    }\n\n    // there's no output element so nothing else to do\n    if (!outputTo) return;\n\n    // there's no index set atm but get any static filter values so we can apply them\n    if (!this.indexResults) {\n      if (this.templateStr) {\n        writeTask(() => {\n          outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n            orig: {},\n            dyn: {},\n            selected:\n              this.internalValue && this.internalValue.length\n                ? this.internalValue\n                : this.value,\n          });\n          if (!this.value || !this.value.length) this.handleChangeEvent();\n        });\n      } else if (!this.value || !this.value.length) this.handleChangeEvent();\n      return;\n    }\n\n    // everything is in place - render as normal and set values\n    writeTask(() => {\n      outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n        orig: { ...this.indexResults.origFilters[this.filterName] },\n        dyn: { ...this.indexResults.dynFilters[this.filterName] },\n        selected:\n          this.internalValue && this.internalValue.length\n            ? this.internalValue\n            : this.value,\n      });\n      this.tplDidRnder();\n      this.setFieldValues();\n\n      if (!this.showFilter) this.showFilter = true;\n      this.nanoTplUpdated.emit(this.el);\n    });\n  }\n\n  // go through form elements and extract their current value\n  private getFieldValues() {\n    let values = [];\n    let fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      let field = fields[i] as HTMLInputElement;\n\n      // If a multi-select, get all selections\n      if (field.type === 'select-multiple') {\n        let select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!select.options[n].selected || !select.options[n].value.length)\n            continue;\n          values.push(select.options[n].value);\n        }\n      } else if (\n        (field.type !== 'checkbox' && field.type !== 'radio') ||\n        (field.checked && field.value.length)\n      ) {\n        values.push(field.value);\n      }\n    }\n    return values;\n  }\n\n  // go through form elements and select / check them as appropriate\n  private setFieldValues(vals?: string[]): void | string[] {\n    vals = vals || this.internalValue;\n    if (!vals) return;\n\n    let found = [];\n    let fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select, nano-select, nano-checkbox'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      let field = fields[i] as HTMLInputElement;\n\n      if (\n        field.disabled ||\n        field.type === 'file' ||\n        field.type === 'reset' ||\n        field.type === 'submit' ||\n        field.type === 'button'\n      )\n        continue;\n\n      if (field.type === 'select-multiple' || field.type === 'select-one') {\n        let select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!vals.includes(select.options[n].value))\n            select.options[n].selected = false;\n          else {\n            found.push(select.value);\n            select.options[n].selected = true;\n            if (field.type === 'select-one')\n              select.value = select.options[n].value;\n          }\n        }\n      } else if (\n        ['checkbox', 'radio', 'tag', 'segment', 'segment-pill'].includes(\n          field.type\n        )\n      ) {\n        if (vals.includes(field.value)) {\n          found.push(field.value);\n          field.checked = true;\n        } else if (!vals.length && !field.value.length) {\n          field.checked = true;\n        } else field.checked = false;\n      }\n    }\n    return found;\n  }\n\n  private didValueChange(newVal: Array<string>) {\n    if (!!this.internalValue && !newVal) return true;\n    if (!this.internalValue && !newVal) return false;\n    if (this.internalValue && newVal.length !== this.internalValue.length)\n      return true;\n\n    let hasChanged = false;\n    for (var i = 0; i < newVal.length; i++) {\n      if (\n        !hasChanged &&\n        (!this.internalValue || !this.internalValue.includes(newVal[i]))\n      )\n        hasChanged = true;\n    }\n    return hasChanged;\n  }\n\n  connectedCallback() {\n    this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n    this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n    this.filterId = this.filterName + '_' + filterIds++;\n\n    if (!!this.templateSlot) {\n      this.templateStr = this.templateSlot.innerHTML;\n      this.templateStr = this.templateStr.replace(/=&gt;/gm, '=>');\n    }\n  }\n\n  componentWillLoad() {\n    if (this.storeId)\n      ComponentStore.init(\n        this,\n        ['value'],\n        this.storeMethod || this.globalStoreMethod,\n        this.storeId\n      );\n  }\n\n  componentDidLoad() {\n    this.updateContent();\n\n    if (\n      this.templateStr &&\n      this.filterName &&\n      this.indexResults &&\n      this.indexResults.origFilters[this.filterName]\n    )\n      this.showFilter = true;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'show-filter': this.showFilter,\n        }}\n      >\n        <div ref={(div) => (this.outputEle = div)}>\n          <slot name=\"output\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nWormhole(AlgoliaFilter as WormholeConsumerConstructor, [\n  'globalStoreMethod',\n  'indexResults',\n  'filterChanged',\n  'facets',\n  'tplRenderFn',\n  'changeEvent',\n]);\nlet filterIds = 0;\n"]}

package/dist/nano-components/p-09066701.system.entry.js

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(e,t,n,o){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,r){function s(e){try{h(o.next(e))}catch(t){r(t)}}function a(e){try{h(o["throw"](e))}catch(t){r(t)}}function h(e){e.done?n(e.value):i(e.value).then(s,a)}h((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},o,i,r,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(e){return function(t){return h([e,t])}}function h(s){if(o)throw new TypeError("Generator is already executing.");while(n)try{if(o=1,i&&(r=s[0]&2?i["return"]:s[0]?i["throw"]||((r=i["return"])&&r.call(i),0):i.next)&&!(r=r.call(i,s[1])).done)return r;if(i=0,r)s=[s[0]&2,r.value];switch(s[0]){case 0:case 1:r=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;i=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!r||s[1]>r[0]&&s[1]<r[3])){n.label=s[1];break}if(s[0]===6&&n.label<r[1]){n.label=r[1];r=s;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(s);break}if(r[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(a){s=[6,a];i=0}finally{o=r=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */System.register(["./p-59b3d24b.system.js","./p-7be6b7f3.system.js","./p-09d2d944.system.js","./p-9de508a5.system.js"],(function(e){"use strict";var t,n,o,i,r,s,a;return{setters:[function(e){t=e.r;n=e.c;o=e.h;i=e.g},function(e){r=e.P},function(e){s=e.g},function(e){a=e.a}],execute:function(){var h=":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{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));display:-webkit-box;display:-ms-flexbox;display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-width:var(--min-width)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-width:var(--min-width);width:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentColor;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:0;-webkit-transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;min-height:20px;overflow:var(--overflow);-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{-webkit-transform:translateY(-20px) translateZ(0);transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{-webkit-transform:translateY(20px) translateZ(0);transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;-webkit-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-height:50vh}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";var d=0;var l=e("nano_dropdown",function(){function e(e){var o=this;t(this,e);this.nanoShow=n(this,"nanoShow",7);this.nanoAfterShow=n(this,"nanoAfterShow",7);this.nanoHide=n(this,"nanoHide",7);this.nanoAfterHide=n(this,"nanoAfterHide",7);this.dropdownId="dropdown-"+d++;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.togglePanel=function(){if(!o.autoOpen)return;o.open?o.hide():o.show()};this.handleTriggerKeyDown=function(e){if(["ArrowDown","ArrowUp"," "].includes(e.key)){o.show();e.preventDefault();e.stopPropagation();if(o.menu)o.menu.setFocus()}};this.handleTriggerSlotChange=function(){o.updateAccessibleTrigger()}}Object.defineProperty(e.prototype,"menu",{get:function(){return this.host.querySelector("nano-menu")},enumerable:false,configurable:true});e.prototype.handleOpenChange=function(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()};e.prototype.handleTetherToChange=function(){this.createPopover();this.updateAccessibleTrigger()};e.prototype.handlePopoverOptionsChange=function(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})};e.prototype.secondaryOpen=function(e){var t=this;if(!e.detail.secondaryMenu)return;e.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(function(){t.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=e.detail.secondaryMenu.scrollHeight+"px"};e.prototype.secondaryClose=function(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();if(!e.target.parentElement)return;this.panel.style.minHeight=e.target.parentElement.scrollHeight+"px"};e.prototype.handlePanelSelect=function(e){var t=e.target;if(this.closeOnSelect&&t.tagName.toLowerCase()==="nano-menu")this.hide()};e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.ignoreOpenWatcher=true;this.open=true;e=this.nanoShow.emit();if(e.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return[2]}this.popover.show();this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown);return[2]}))}))};e.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.ignoreOpenWatcher=true;this.open=false;e=this.nanoHide.emit();if(e.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return[2]}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}return[2]}))}))};e.prototype.focusEleInDropDwn=function(e){var t;var n=s();if(e&&((t=e.composedPath())===null||t===void 0?void 0:t.length)){var o=e.composedPath().includes(this.containingElement);return!e.composedPath().includes(this.accessibleTrigger)&&o}return n&&n.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&n!==this.accessibleTrigger};e.prototype.updateAccessibleTrigger=function(){if(!this.didLoad)return;var e;this.accessibleTrigger=null;if(!this.tetherTo){var t=Array.from(this.host.querySelectorAll('[slot="trigger"]'));e=t.map(a)[0]}else{e=a(this.tetherTo)}if(e){e.setAttribute("aria-haspopup","true");e.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=e}};e.prototype.handleDocumentKeyDown=function(e){var t=this;if(e.key==="Escape"){this.hide();return}if(e.key==="Tab"){setTimeout((function(){if(document.activeElement&&document.activeElement.closest(t.containingElement.tagName.toLowerCase())!==t.containingElement){t.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(e.key)){if(!this.open||this.focusEleInDropDwn(e))return;e.preventDefault();this.menu.setFocus();return}var n=e.composedPath();if(this.menu&&n.length&&!n.find((function(e){return e!==t.menu}))){this.menu.dispatchEvent(new KeyboardEvent(e.type,e));return}};e.prototype.handleDocumentMouseDown=function(e){if(!this.focusEleInDropDwn(e)){this.hide();return}};e.prototype.createPopover=function(){var e=this;if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new r(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:function(){return e.nanoAfterHide.emit()},onAfterShow:function(){return e.nanoAfterShow.emit()},onTransitionEnd:function(){if(!e.open){e.panel.scrollTop=0}else if(e.menu){e.menu.showActiveElement()}}});if(this.open){this.show()}};e.prototype.connectedCallback=function(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host};e.prototype.componentDidLoad=function(){var e=this;this.didLoad=true;this.createPopover();setTimeout((function(){return e.updateAccessibleTrigger()}),100)};e.prototype.disconnectedCallback=function(){this.hide();if(this.popover)this.popover.destroy()};e.prototype.render=function(){var e=this;return o("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},o("span",{part:"trigger",class:"dropdown__trigger",ref:function(t){return e.trigger=t},onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},o("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),o("div",{ref:function(t){return e.positioner=t},class:"dropdown__positioner"},o("div",{ref:function(t){return e.panel=t},part:"panel",class:"dropdown__panel "+this.placement.split("-").join(" "),"aria-hidden":!this.open,role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&o("h2",{id:this.labelId,class:"dropdown__accessible-title","aria-live":"polite"},this.dialogTitle),o("slot",null))))};Object.defineProperty(e.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}},enumerable:false,configurable:true});return e}());l.style=h}}}));
+//# sourceMappingURL=p-09066701.system.entry.js.map

package/dist/nano-components/p-09066701.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"names":["dropdownCss","dropDownIds","Dropdown","exports","class_1","hostRef","_this","this","dropdownId","labelId","ignoreOpenWatcher","didLoad","autoOpen","open","closeOnSelect","tetherTo","placement","distance","skidding","hoist","togglePanel","hide","show","handleTriggerKeyDown","event","includes","key","preventDefault","stopPropagation","menu","setFocus","handleTriggerSlotChange","updateAccessibleTrigger","Object","defineProperty","prototype","host","querySelector","handleOpenChange","accessibleTrigger","setAttribute","toString","handleTetherToChange","createPopover","handlePopoverOptionsChange","popover","setOptions","strategy","secondaryOpen","ev","detail","secondaryMenu","panel","classList","add","addEventListener","remove","once","style","minHeight","scrollHeight","secondaryClose","target","parentElement","handlePanelSelect","tagName","toLowerCase","nanoShow","emit","defaultPrevented","document","handleDocumentMouseDown","handleDocumentKeyDown","nanoHide","removeEventListener","focusEleInDropDwn","focus","e","activeElement","getActiveElement","_a","composedPath","length","ddInPath","containingElement","closest","assignedElements","Array","from","querySelectorAll","map","getNearestTabbableElement","setTimeout","ePath","find","el","dispatchEvent","KeyboardEvent","type","destroy","Popover","trigger","positioner","transitionElement","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","onTransitionEnd","scrollTop","showActiveElement","connectedCallback","bind","componentDidLoad","disconnectedCallback","render","h","part","id","class","dropdown","dropdown--open","ref","onKeyDown","onClick","name","onSlotchange","split","join","aria-hidden","role","aria-modal","aria-labelledby","dialogTitle","undefined","aria-live"],"mappings":";;;uSAAA,IAAMA,EAAc,khECgBpB,IAAIC,EAAc,MAaLC,EAAQC,EAAA,gBAAA,WALrB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,+KAMUA,KAAAC,WAAa,YAAYP,IACzBM,KAAAE,QAAUF,KAAKC,WAAa,SAC5BD,KAAAG,kBAAoB,MAMpBH,KAAAI,QAAU,MAQVJ,KAAAK,SAAW,KAGqBL,KAAAM,KAAO,MAsBvCN,KAAAO,cAAgB,KAWhBP,KAAAQ,SAAwB,KAYxBR,KAAAS,UAYS,eAKTT,KAAAU,SAAW,EAKXV,KAAAW,SAAW,EAMXX,KAAAY,MAAQ,MAqJRZ,KAAAa,YAAc,WACpB,IAAKd,EAAKM,SAAU,OACpBN,EAAKO,KAAOP,EAAKe,OAASf,EAAKgB,QAiFzBf,KAAAgB,qBAAuB,SAACC,GAE9B,GAAI,CAAC,YAAa,UAAW,KAAKC,SAASD,EAAME,KAAM,CACrDpB,EAAKgB,OACLE,EAAMG,iBACNH,EAAMI,kBAEN,GAAItB,EAAKuB,KAAMvB,EAAKuB,KAAKC,aAIrBvB,KAAAwB,wBAA0B,WAChCzB,EAAK0B,2BAvUPC,OAAAC,eAAY9B,EAAA+B,UAAA,OAAI,KAAhB,WACE,OAAO5B,KAAK6B,KAAKC,cAAc,mDAYjCjC,EAAA+B,UAAAG,iBAAA,WACE,GAAI/B,KAAKG,kBAAmB,OAE5BH,KAAKM,KAAON,KAAKe,OAASf,KAAKc,OAE/B,GAAId,KAAKgC,kBAAmB,CAC1BhC,KAAKgC,kBAAkBC,aACrB,gBACAjC,KAAKM,KAAK4B,YAEZ,OAGFlC,KAAKyB,2BAoBP5B,EAAA+B,UAAAO,qBAAA,WACEnC,KAAKoC,gBACLpC,KAAKyB,2BAyCP5B,EAAA+B,UAAAS,2BAAA,WACErC,KAAKsC,QAAQC,WAAW,CACtBC,SAAUxC,KAAKY,MAAQ,QAAU,WACjCH,UAAWT,KAAKS,UAChBE,SAAUX,KAAKW,SACfD,SAAUV,KAAKU,YAkCnBb,EAAA+B,UAAAa,cAAA,SAAcC,GAAd,IAAA3C,EAAAC,KACE,IAAM0C,EAAGC,OAA8BC,cAAe,OACtDF,EAAGrB,kBAEHrB,KAAK6C,MAAMC,UAAUC,IAAI,WACzB/C,KAAK6C,MAAMG,iBACT,iBACA,WACEjD,EAAK8C,MAAMC,UAAUG,OAAO,aAE9B,CAAEC,KAAM,OAGVlD,KAAK6C,MAAMM,MAAMC,UACdV,EAAGC,OAA8BC,cAAcS,aAAe,MAInExD,EAAA+B,UAAA0B,eAAA,SAAeZ,GACb,IAAMA,EAAGC,OAA8BC,cAAe,OACtDF,EAAGrB,kBACH,IAAMqB,EAAGa,OAAuBC,cAAe,OAC/CxD,KAAK6C,MAAMM,MAAMC,UACdV,EAAGa,OAAuBC,cAAcH,aAAe,MAI5DxD,EAAA+B,UAAA6B,kBAAA,SAAkBxC,GAChB,IAAMsC,EAAStC,EAAMsC,OAGrB,GAAIvD,KAAKO,eAAiBgD,EAAOG,QAAQC,gBAAkB,YACzD3D,KAAKc,QAOHjB,EAAA+B,UAAAb,KAAN,sGACEf,KAAKG,kBAAoB,KACzBH,KAAKM,KAAO,KAENsD,EAAW5D,KAAK4D,SAASC,OAE/B,GAAID,EAASE,iBAAkB,CAC7B9D,KAAKM,KAAO,MACZN,KAAKG,kBAAoB,MACzB,MAAA,CAAA,GAGFH,KAAKsC,QAAQvB,OACbf,KAAKG,kBAAoB,MAEzB4D,SAASf,iBAAiB,YAAahD,KAAKgE,yBAC5CD,SAASf,iBAAiB,UAAWhD,KAAKiE,wCAKtCpE,EAAA+B,UAAAd,KAAN,sGACEd,KAAKG,kBAAoB,KACzBH,KAAKM,KAAO,MAEN4D,EAAWlE,KAAKkE,SAASL,OAE/B,GAAIK,EAASJ,iBAAkB,CAC7B9D,KAAKM,KAAO,KACZN,KAAKG,kBAAoB,MACzB,MAAA,CAAA,GAGF,GAAIH,KAAKsC,QAAStC,KAAKsC,QAAQxB,OAC/Bd,KAAKG,kBAAoB,MAEzB4D,SAASI,oBAAoB,YAAanE,KAAKgE,yBAC/CD,SAASI,oBAAoB,UAAWnE,KAAKiE,uBAE7C,GAAIjE,KAAKgC,mBAAqBhC,KAAKoE,oBAAqB,CACtDpE,KAAKgC,kBAAkBqC,yBASnBxE,EAAA+B,UAAAwC,kBAAA,SAAkBE,SACxB,IAAMC,EAAgBC,IAEtB,GAAIF,KAAKG,EAAAH,EAAEI,kBAAc,MAAAD,SAAA,OAAA,EAAAA,EAAEE,QAAQ,CACjC,IAAMC,EAAWN,EAAEI,eAAexD,SAASlB,KAAK6E,mBAChD,OAAQP,EAAEI,eAAexD,SAASlB,KAAKgC,oBAAsB4C,EAG/D,OACEL,GACAA,EAAcO,QAAQ9E,KAAK6E,kBAAkBnB,QAAQC,iBACnD3D,KAAK6E,mBACPN,IAAkBvE,KAAKgC,mBAYnBnC,EAAA+B,UAAAH,wBAAA,WACN,IAAKzB,KAAKI,QAAS,OAEnB,IAAI4B,EACJhC,KAAKgC,kBAAoB,KAEzB,IAAKhC,KAAKQ,SAAU,CAClB,IAAMuE,EAAmBC,MAAMC,KAC7BjF,KAAK6B,KAAKqD,iBAAiB,qBAE7BlD,EAAoB+C,EAAiBI,IAAIC,GAA2B,OAC/D,CACLpD,EAAoBoD,EAA0BpF,KAAKQ,UAGrD,GAAIwB,EAAmB,CACrBA,EAAkBC,aAAa,gBAAiB,QAChDD,EAAkBC,aAChB,gBACAjC,KAAKM,KAAO,OAAS,SAEvBN,KAAKgC,kBAAoBA,IAMrBnC,EAAA+B,UAAAqC,sBAAA,SAAsBhD,GAAtB,IAAAlB,EAAAC,KAEN,GAAIiB,EAAME,MAAQ,SAAU,CAC1BnB,KAAKc,OACL,OAIF,GAAIG,EAAME,MAAQ,MAAO,CACvBkE,YAAW,WACT,GACEtB,SAASQ,eACTR,SAASQ,cAAcO,QACrB/E,EAAK8E,kBAAkBnB,QAAQC,iBAC3B5D,EAAK8E,kBACX,CACA9E,EAAKe,OACL,WAMN,GAAId,KAAKsB,MAAQ,CAAC,YAAa,WAAWJ,SAASD,EAAME,KAAM,CAE7D,IAAKnB,KAAKM,MAAQN,KAAKoE,kBAAkBnD,GAAQ,OACjDA,EAAMG,iBACNpB,KAAKsB,KAAKC,WACV,OAIF,IAAM+D,EAAQrE,EAAMyD,eACpB,GAAI1E,KAAKsB,MAAQgE,EAAMX,SAAWW,EAAMC,MAAK,SAACC,GAAO,OAAAA,IAAOzF,EAAKuB,QAAO,CACtEtB,KAAKsB,KAAKmE,cAAc,IAAIC,cAAczE,EAAM0E,KAAM1E,IACtD,SAIIpB,EAAA+B,UAAAoC,wBAAA,SAAwB/C,GAG9B,IAAKjB,KAAKoE,kBAAkBnD,GAAQ,CAClCjB,KAAKc,OACL,SAmBIjB,EAAA+B,UAAAQ,cAAA,WAAA,IAAArC,EAAAC,KACN,GAAIA,KAAKsC,QAAS,CAChB,GAAItC,KAAKM,KAAMN,KAAKc,OACpBd,KAAKsC,QAAQsD,UACb5F,KAAKsC,QAAU,KAGjBtC,KAAKsC,QAAU,IAAIuD,EAAQ7F,KAAKQ,UAAYR,KAAK8F,QAAS9F,KAAK+F,WAAY,CACzEvD,SAAUxC,KAAKY,MAAQ,QAAU,WACjCH,UAAWT,KAAKS,UAChBC,SAAUV,KAAKU,SACfC,SAAUX,KAAKW,SACfqF,kBAAmBhG,KAAK6C,MACxBoD,YAAa,WAAM,OAAAlG,EAAKmG,cAAcrC,QACtCsC,YAAa,WAAM,OAAApG,EAAKqG,cAAcvC,QACtCwC,gBAAiB,WACf,IAAKtG,EAAKO,KAAM,CACdP,EAAK8C,MAAMyD,UAAY,OAClB,GAAIvG,EAAKuB,KAAM,CACpBvB,EAAKuB,KAAKiF,wBAKhB,GAAIvG,KAAKM,KAAM,CACbN,KAAKe,SAMTlB,EAAA+B,UAAA4E,kBAAA,WACExG,KAAKiE,sBAAwBjE,KAAKiE,sBAAsBwC,KAAKzG,MAC7DA,KAAKgE,wBAA0BhE,KAAKgE,wBAAwByC,KAAKzG,MAEjE,IAAKA,KAAK6E,kBAAmB7E,KAAK6E,kBAAoB7E,KAAK6B,MAG7DhC,EAAA+B,UAAA8E,iBAAA,WAAA,IAAA3G,EAAAC,KACEA,KAAKI,QAAU,KACfJ,KAAKoC,gBACLiD,YAAW,WAAM,OAAAtF,EAAK0B,4BAA2B,MAGnD5B,EAAA+B,UAAA+E,qBAAA,WACE3G,KAAKc,OACL,GAAId,KAAKsC,QAAStC,KAAKsC,QAAQsD,WAGjC/F,EAAA+B,UAAAgF,OAAA,WAAA,IAAA7G,EAAAC,KACE,OACE6G,EAAA,MAAA,CACEC,KAAK,OACLC,GAAI/G,KAAKC,WACT+G,MAAO,CACLC,SAAU,KACVC,iBAAkBlH,KAAKM,OAGzBuG,EAAA,OAAA,CACEC,KAAK,UACLE,MAAM,oBACNG,IAAK,SAAC3B,GAAE,OAAMzF,EAAK+F,QAAUN,GAC7B4B,UAAWpH,KAAKgB,qBAChBqG,QAASrH,KAAKa,aAEdgG,EAAA,OAAA,CAAMS,KAAK,UAAUC,aAAcvH,KAAKwB,2BAG1CqF,EAAA,MAAA,CAAKM,IAAK,SAAC3B,GAAE,OAAMzF,EAAKgG,WAAaP,GAAKwB,MAAM,wBAC9CH,EAAA,MAAA,CACEM,IAAK,SAAC3B,GAAE,OAAMzF,EAAK8C,MAAQ2C,GAC3BsB,KAAK,QACLE,MAAO,mBAAmBhH,KAAKS,UAAU+G,MAAM,KAAKC,KAAK,KAAMC,eACjD1H,KAAKM,KACnBqH,KAAK,SAAQC,aACF,OAAMC,kBACA7H,KAAK8H,YAAc9H,KAAKE,QAAU6H,WAElD/H,KAAK8H,aACJjB,EAAA,KAAA,CACEE,GAAI/G,KAAKE,QACT8G,MAAM,6BAA4BgB,YACxB,UAEThI,KAAK8H,aAGVjB,EAAA,OAAA,4bA5aS","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --width: width of the dropdown. Defaults to 'auto'\n   * @prop --border: Defaults to #{$layer-border-style}\n   * @prop --border-radius: Defaults to #{$layer-bg-color};\n   * @prop --background: Defaults to #{$layer-bg-color};\n   * @prop --padding: padding of the drop down. Default to '10px 0';\n   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n   * @prop --dropdown-z-index: Defaults to #{$layer-index-dropdown};\n   * @prop --min-width: Defaults to 0;\n   * @prop --box-shadow: #{$layer-shadow-large};\n   */\n\n  --width: auto;\n  --border: #{$layer-border-style};\n  --border-radius: #{$layer-border-radius};\n  --background: #{$layer-bg-color};\n  --padding: 10px 0;\n  --overflow: hidden;\n  --dropdown-z-index: #{$layer-index-dropdown};\n  --min-width: 0;\n  --box-shadow: #{$layer-shadow-large};\n\n  display: flex;\n}\n\n.dropdown {\n  position: relative;\n\n  &__trigger {\n    display: block;\n  }\n\n  &__positioner {\n    position: absolute;\n    z-index: var(--dropdown-z-index);\n    min-width: var(--min-width);\n\n    @media (max-width: 35.9375em) {\n      z-index: 100;\n    }\n  }\n\n  &__panel {\n    padding: var(--padding);\n    background: var(--background);\n    min-width: var(--min-width);\n    width: var(--width);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    color: currentColor;\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;\n    min-height: 20px;\n    overflow: var(--overflow);\n    box-sizing: content-box !important;\n\n    &.loading {\n      overflow-y: hidden;\n    }\n\n    &.top {\n      transform: translateY(-20px) translateZ(0);\n    }\n\n    &.bottom {\n      transform: translateY(20px) translateZ(0);\n    }\n\n    .dropdown__positioner.popover-visible & {\n      opacity: 1;\n      transform: translateY(0) translateZ(0);\n    }\n\n    ::slotted(nano-menu) {\n      max-height: 50vh;\n    }\n  }\n\n  &__accessible-title {\n    @include visually-hide();\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n  ComponentInterface,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\nimport { NavItemEventDetail } from '../../interface';\nimport { getNearestTabbableElement, getActiveElement } from '../../utils';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private accessibleTrigger: HTMLElement;\n  private didLoad = false;\n  private get menu() {\n    return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n  }\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.ignoreOpenWatcher) return;\n\n    this.open ? this.show() : this.hide();\n\n    if (this.accessibleTrigger) {\n      this.accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open.toString()\n      );\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop({ mutable: true }) containingElement: HTMLElement;\n\n  /**\n   * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n   * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n   */\n  @Prop() tetherTo: HTMLElement = null;\n\n  @Watch('tetherTo')\n  handleTetherToChange() {\n    this.createPopover();\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-start';\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle!: string;\n\n  // Events\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Listeners\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    this.panel.addEventListener(\n      'transitionend',\n      () => {\n        this.panel.classList.remove('loading');\n      },\n      { once: true }\n    );\n\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n      this.hide();\n  }\n\n  // Methods\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    this.popover.show();\n    this.ignoreOpenWatcher = false;\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n      this.accessibleTrigger.focus();\n    }\n  }\n\n  // Private methods\n\n  /** Decides if the current active element or element\n   * connected to the current event is connected to the Dropdown\n   */\n  private focusEleInDropDwn(e?: Event) {\n    const activeElement = getActiveElement();\n\n    if (e && e.composedPath()?.length) {\n      const ddInPath = e.composedPath().includes(this.containingElement);\n      return !e.composedPath().includes(this.accessibleTrigger) && ddInPath;\n    }\n\n    return (\n      activeElement &&\n      activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n        this.containingElement &&\n      activeElement !== this.accessibleTrigger\n    );\n  }\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    this.open ? this.hide() : this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    if (!this.didLoad) return;\n\n    let accessibleTrigger: HTMLElement;\n    this.accessibleTrigger = null;\n\n    if (!this.tetherTo) {\n      const assignedElements = Array.from(\n        this.host.querySelectorAll('[slot=\"trigger\"]')\n      );\n      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n    } else {\n      accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n    }\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n      this.accessibleTrigger = accessibleTrigger;\n    }\n  }\n\n  // Handlers\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      // must have menu item, must have pressed down, must be open and must not have focus within dd\n      if (!this.open || this.focusEleInDropDwn(event)) return;\n      event.preventDefault();\n      this.menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    const ePath = event.composedPath();\n    if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n      this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the close element\n\n    if (!this.focusEleInDropDwn(event)) {\n      this.hide();\n      return;\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (this.menu) this.menu.setFocus();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private createPopover() {\n    if (this.popover) {\n      if (this.open) this.hide();\n      this.popover.destroy();\n      this.popover = null;\n    }\n\n    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        } else if (this.menu) {\n          this.menu.showActiveElement();\n        }\n      },\n    });\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  // Stencil hooks\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.createPopover();\n    setTimeout(() => this.updateAccessibleTrigger(), 100);\n  }\n\n  disconnectedCallback() {\n    this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.dropdownId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onKeyDown={this.handleTriggerKeyDown}\n          onClick={this.togglePanel}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        <div ref={(el) => (this.positioner = el)} class=\"dropdown__positioner\">\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n            aria-hidden={!this.open}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n          >\n            {this.dialogTitle && (\n              <h2\n                id={this.labelId}\n                class=\"dropdown__accessible-title\"\n                aria-live=\"polite\"\n              >\n                {this.dialogTitle}\n              </h2>\n            )}\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-090f22a9.system.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+System.register(["./p-59b3d24b.system.js","./p-1d13dbdf.system.js"],(function(t){"use strict";var e,i,o,n,r,a;return{setters:[function(t){e=t.r;i=t.f;o=t.h;n=t.e;r=t.g},function(t){a=t.c}],execute:function(){var s=':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(.legacy) ::slotted(*),:host(.legacy) *{--global-nav-height:61px;--padding-top:13px;--padding-end:13px;--padding-bottom:13px;--padding-start:13px;--secondary-padding-end:13px;--secondary-padding-bottom:13px;--secondary-padding-start:13px;--secondary-padding-top:61px;--icon-size:19px;--font-size:11px;--bg-color:#001a21;--bg-color-hover:rgba(28, 62, 72, 0.8);--bg-color-selected:#274048;--bg-color-open:#274048;--bg-color-focus:rgba(28, 62, 72, 0.8);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28, 62, 72)}:host{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:61px;--bg-color:#001a21;--bg-color-hover:rgba(28, 62, 72, 0.8);--bg-color-selected:#274048;--bg-color-focus:rgba(28, 62, 72, 0.8);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28, 62, 72);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{padding-top:var(--global-nav-height)}@supports ((position: -webkit-sticky) or (position: sticky)){:host(.has-global-nav) .content-wrap{margin-top:calc(var(--global-nav-height) * -1)}}.container{right:auto;-webkit-box-flex:0;-ms-flex:0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));flex:0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;width:calc((var(--padding-end, 1em) * 2) + var(--icon-size));height:100%}:host(.open) .container{width:auto}:host(:not(.loading)) .container{-webkit-transition:width 0.3s ease;transition:width 0.3s ease}.content-wrap{left:0;top:0;width:inherit;max-width:inherit;background:var(--bg-color);color:#fff;position:fixed;position:-webkit-sticky;position:sticky;font-size:var(--icon-size);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:calc(100vh - 61px);min-height:calc((var(--vh, 1vh) * 100) - 61px);z-index:1}:host([dir=rtl]) .content-wrap{right:0;left:auto}.content{width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;background:var(--bg-color);-webkit-box-flex:1;-ms-flex:1;flex:1}.content::after{content:"";position:absolute;top:0;left:0;right:0;background:var(--bg-color);z-index:-1;height:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);margin:var(--padding-top) auto var(--padding-bottom) calc(var(--padding-start) / 2);border-radius:4px;padding:6px 5px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;width:30px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.collapse-btn nano-icon{font-size:var(--icon-size);-webkit-transition:0.2s -webkit-transform ease-in-out;transition:0.2s -webkit-transform ease-in-out;transition:0.2s transform ease-in-out;transition:0.2s transform ease-in-out, 0.2s -webkit-transform ease-in-out;-webkit-transform:translateZ(0) rotate(0deg);transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn nano-icon{-webkit-transform:translateZ(0) rotate(180deg);transform:translateZ(0) rotate(180deg)}.foot{margin-top:auto}.measure-ele{height:1px}';var l=!!document.head.attachShadow;var h=t("nano_menu_drawer",function(){function t(t){var i=this;e(this,t);this.children=[];this.currHeight=window.innerHeight;this.reset=false;this.widthOk=true;this.heightOk=true;this.isLoading=true;this.hide=false;this.open=true;this.saveState=true;this.hideWidth=576;this.hideHeight=true;this.onWindowResize=function(){if(window.innerWidth>i.hideWidth)i.widthOk=true;else i.widthOk=false;var t=window.innerHeight*.01;i.el.style.setProperty("--vh",t+"px");if(window.innerHeight>i.currHeight&&i.widthOk&&!i.heightOk){i.moveItemsToDrawer()}i.currHeight=window.innerHeight};this.toggle=function(t){t.preventDefault();i.open=!i.open};this.onToggleKeyDown=function(t){switch(t.key){case"Enter":case" ":i.open=!i.open;break}}}t.prototype.cancelNavItemEvents=function(t){if(!t.detail.secondaryMenu)return;t.stopPropagation()};t.prototype.openChange=function(){var t=this;if(this.saveState)localStorage.setItem("nanoMenuDrawerOpen",this.open.toString());if(this.containerDiv){if(this.open)i((function(){return t.containerDiv.style.width=t.contentDiv.scrollWidth+"px"}));else i((function(){return t.containerDiv.style.width=null}))}};t.prototype.widthChange=function(){if(this.widthOk)this.moveItemsToDrawer();else this.moveItemsToGlobalNav()};t.prototype.hideHeightChange=function(){if(this.hideHeight&&!this.io)this.attachIO();else if(!this.hideHeight&&this.io){this.io.disconnect();this.io=undefined}};t.prototype.moveItemsToGlobalNav=function(){var t=this;var e=this.el.querySelectorAll("nano-nav-item");e.forEach((function(e){t.children.push({slot:e.getAttribute("slot"),element:e});e.setAttribute("slot","overflow");e.classList.add("nano-global-nav-menu");t.globalNav.appendChild(e)}));this.hide=true};t.prototype.moveItemsToDrawer=function(){var t=this;if(!this.children||!this.children.length)return;this.children.forEach((function(e){e.element.removeAttribute("slot");e.element.classList.remove("nano-global-nav-menu");if(e.slot&&e.slot.length)e.element.setAttribute("slot",e.slot);t.el.appendChild(e.element)}));this.children=[];this.hide=false;if(!this.io)this.attachIO()};t.prototype.attachIO=function(){var t=this;if(!this.hideHeight)return;var e=this.io=new window.IntersectionObserver((function(e){t.heightOk=e[0].intersectionRatio!==0;if(!t.heightOk){t.moveItemsToGlobalNav();t.io.disconnect();t.io=undefined}}),{threshold:1});e.observe(this.measureEle)};t.prototype.handleGlobalNavReady=function(t){var e=this;if(t.target.tagName!=="NANO-GLOBAL-NAV")return;setTimeout((function(){e.attachIO();e.openChange();e.onWindowResize();e.isLoading=false}),500)};t.prototype.componentWillLoad=function(){this.globalNav=a("nano-global-nav",this.el);this.widthOk=window.innerWidth>this.hideWidth;this.currHeight=window.innerHeight;if(this.saveState){var t=localStorage.getItem("nanoMenuDrawerOpen");this.open=t?t==="true":this.open}};t.prototype.componentDidLoad=function(){{window.addEventListener("resize",this.onWindowResize)}};t.prototype.disconnectedCallback=function(){window.removeEventListener("resize",this.debounceResize);if(this.io){this.io.disconnect();this.io=null}};t.prototype.render=function(){var t=this;return o(n,{class:{open:this.open,hide:this.hide,legacy:!l,loading:this.isLoading,"has-global-nav":!!this.globalNav},dir:this.el.ownerDocument.dir==="rtl"?"rtl":null},o("div",{ref:function(e){return t.containerDiv=e},class:"container"},o("div",{class:"content-wrap"},o("nav",{ref:function(e){return t.contentDiv=e},class:"content"},o("button",{onMouseDown:this.toggle,onKeyDown:this.onToggleKeyDown,class:"collapse-btn"},o("nano-icon",{name:"light/arrow-alt-to-right","aria-label":"collapse / expand"})),o("slot",null),o("div",{class:"foot"},o("div",{class:"measure-ele",ref:function(e){return t.measureEle=e}}),o("slot",{name:"foot"}))))))};Object.defineProperty(t.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["openChange"],widthOk:["widthChange"],hideHeight:["hideHeightChange"]}},enumerable:false,configurable:true});return t}());h.style=s}}}));
+//# sourceMappingURL=p-090f22a9.system.entry.js.map

package/dist/nano-components/{p-854df906.system.entry.js.map → p-090f22a9.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"names":["menuDrawerCss","CANSHADOW","document","head","attachShadow","MenuDrawer","exports","class_1","hostRef","_this","this","children","currHeight","window","innerHeight","reset","widthOk","heightOk","isLoading","hide","open","saveState","hideWidth","hideHeight","onWindowResize","innerWidth","vh","el","style","setProperty","moveItemsToDrawer","toggle","e","preventDefault","onToggleKeyDown","ev","key","prototype","cancelNavItemEvents","detail","secondaryMenu","stopPropagation","openChange","localStorage","setItem","toString","containerDiv","writeTask","width","contentDiv","scrollWidth","widthChange","moveItemsToGlobalNav","hideHeightChange","io","attachIO","disconnect","undefined","currNavItems","querySelectorAll","forEach","element","push","slot","getAttribute","setAttribute","classList","add","globalNav","appendChild","length","child","removeAttribute","remove","IntersectionObserver","data","intersectionRatio","threshold","observe","measureEle","handleGlobalNavReady","target","tagName","setTimeout","componentWillLoad","closestElement","localState","getItem","componentDidLoad","addEventListener","disconnectedCallback","removeEventListener","debounceResize","render","h","Host","class","legacy","loading","has-global-nav","dir","ownerDocument","ref","div","onMouseDown","onKeyDown","name","aria-label"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n\n:host(.legacy) {\n  ::slotted(*),\n  * {\n    --global-nav-height: 61px;\n    --padding-top: 13px;\n    --padding-end: 13px;\n    --padding-bottom: 13px;\n    --padding-start: 13px;\n    --secondary-padding-end: 13px;\n    --secondary-padding-bottom: 13px;\n    --secondary-padding-start: 13px;\n    --secondary-padding-top: 61px;\n    --icon-size: 19px;\n    --font-size: 11px;\n    --bg-color: #001a21;\n    --bg-color-hover: rgba(28, 62, 72, 0.8);\n    --bg-color-selected: #274048;\n    --bg-color-open: #274048;\n    --bg-color-focus: rgba(28, 62, 72, 0.8);\n    --focus-outline: none;\n    --content-color: #{$color-white};\n    --secondary-bg-color: rgb(28, 62, 72);\n  }\n}\n\n:host {\n  --padding-top: 13px;\n  --padding-end: 12px;\n  --padding-bottom: 13px;\n  --padding-start: 12px;\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 61px;\n  --bg-color: #001a21;\n  --bg-color-hover: rgba(28, 62, 72, 0.8);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgba(28, 62, 72, 0.8);\n  --focus-outline: none;\n  --content-color: #{$color-white};\n  --secondary-bg-color: rgb(28, 62, 72);\n\n  @include text-inherit();\n\n  display: block;\n  z-index: 1;\n  background: var(--bg-color);\n\n  ::slotted(nano-nav-item) {\n    --secondary-padding-top: var(--global-nav-height);\n    --nano-icon-size: var(--icon-size);\n\n    color: var(--content-color);\n    font-size: var(--font-size);\n    // font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.hide) {\n  display: none;\n}\n\n:host(.has-global-nav) {\n  .content-wrap {\n    padding-top: var(--global-nav-height);\n\n    @at-root {\n      @supports ((position: sticky)) {\n        & {\n          margin-top: calc(var(--global-nav-height) * -1);\n        }\n      }\n    }\n  }\n}\n\n.container {\n  right: auto;\n  flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  background: var(--bg-color);\n  color: var(--content-color);\n  z-index: 1;\n  width: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  height: 100%;\n}\n\n:host(.open) {\n  .container {\n    width: auto;\n  }\n}\n\n:host(:not(.loading)) {\n  .container {\n    transition: width 0.3s ease;\n  }\n}\n\n.content-wrap {\n  left: 0;\n  top: 0;\n  width: inherit;\n  max-width: inherit;\n  background: var(--bg-color);\n  color: $color-white;\n  position: fixed;\n  position: sticky;\n  font-size: var(--icon-size);\n  line-height: 1;\n  display: flex;\n  min-height: calc(100vh - 61px);\n  min-height: calc((var(--vh, 1vh) * 100) - 61px);\n  z-index: 1;\n\n  @include rtl-host {\n    right: 0;\n    left: auto;\n  }\n}\n\n.content {\n  width: auto;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bg-color);\n  flex: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    background: var(--bg-color);\n    z-index: -1;\n    height: 100vh;\n  }\n}\n\n.collapse-btn {\n  background: var(--bg-color-selected);\n  border: none;\n  color: inherit;\n  font-size: var(--icon-size);\n  margin:\n    var(--padding-top) auto var(--padding-bottom)\n    calc(var(--padding-start) / 2);\n  border-radius: 4px;\n  padding: 6px 5px;\n  display: flex;\n  align-content: center;\n  width: 30px;\n  flex: 0 0 auto;\n\n  nano-icon {\n    font-size: var(--icon-size);\n    transition: 0.2s transform ease-in-out;\n    transform: translateZ(0) rotate(0deg);\n\n    :host(.open) & {\n      transform: translateZ(0) rotate(180deg);\n    }\n  }\n}\n\n.foot {\n  margin-top: auto;\n}\n\n.measure-ele {\n  height: 1px;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  writeTask,\n  State,\n  Element,\n  Watch,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n */\n@Component({\n  tag: 'nano-menu-drawer',\n  styleUrl: 'menu-drawer.scss',\n  shadow: true,\n})\nexport class MenuDrawer {\n  private containerDiv: HTMLDivElement;\n  private contentDiv: HTMLElement;\n  private measureEle: HTMLElement;\n  private debounceResize: () => {};\n  private globalNav: HTMLNanoGlobalNavElement;\n  private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n    [];\n  private io: IntersectionObserver;\n  private currHeight: number = window.innerHeight;\n\n  @Element() private el: HTMLNanoMenuDrawerElement;\n\n  @State() reset: boolean = false;\n  @State() widthOk: boolean = true;\n  @State() heightOk: boolean = true;\n  @State() isLoading: boolean = true;\n  @State() hide: boolean = false;\n\n  /**\n   * Set the initial menu drawer open or closed\n   */\n  @Prop() open: boolean = true;\n\n  /**\n   * Save open state to localStorage\n   */\n  @Prop() saveState: boolean = true;\n\n  /**\n   * Screen width to hide the menu drawer and move the items into the nano-global-nav\n   */\n  @Prop() hideWidth: number = 576;\n\n  /**\n   * Should element hide and move items into the nano-global-nav when items are cut off\n   * (this will only work when nano-menu-drawer is displayed at full screen)\n   */\n  @Prop() hideHeight: boolean = true;\n\n  @Listen('nanoOpen')\n  @Listen('nanoClose')\n  cancelNavItemEvents(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n  }\n\n  @Watch('open')\n  openChange() {\n    if (this.saveState)\n      localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n    if (this.containerDiv) {\n      if (this.open)\n        writeTask(\n          () =>\n            (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n        );\n      else writeTask(() => (this.containerDiv.style.width = null));\n    }\n  }\n\n  @Watch('widthOk')\n  widthChange() {\n    if (this.widthOk) this.moveItemsToDrawer();\n    else this.moveItemsToGlobalNav();\n  }\n\n  @Watch('hideHeight')\n  hideHeightChange() {\n    if (this.hideHeight && !this.io) this.attachIO();\n    else if (!this.hideHeight && this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private moveItemsToGlobalNav() {\n    let currNavItems = this.el.querySelectorAll('nano-nav-item');\n    // dimensions not cool - move items out of element and into global nav\n    currNavItems.forEach((element) => {\n      this.children.push({\n        slot: element.getAttribute('slot'),\n        element: element,\n      });\n      element.setAttribute('slot', 'overflow');\n      element.classList.add('nano-global-nav-menu');\n      this.globalNav.appendChild(element);\n    });\n    this.hide = true;\n  }\n\n  private moveItemsToDrawer() {\n    if (!this.children || !this.children.length) return;\n\n    this.children.forEach((child) => {\n      child.element.removeAttribute('slot');\n      child.element.classList.remove('nano-global-nav-menu');\n      if (child.slot && child.slot.length)\n        child.element.setAttribute('slot', child.slot);\n      this.el.appendChild(child.element);\n    });\n    this.children = [];\n    this.hide = false;\n    if (!this.io) this.attachIO();\n  }\n\n  private onWindowResize = () => {\n    if (window.innerWidth > this.hideWidth) this.widthOk = true;\n    else this.widthOk = false;\n\n    let vh = window.innerHeight * 0.01;\n    this.el.style.setProperty('--vh', `${vh}px`);\n\n    if (\n      window.innerHeight > this.currHeight &&\n      this.widthOk &&\n      !this.heightOk\n    ) {\n      this.moveItemsToDrawer();\n    }\n    this.currHeight = window.innerHeight;\n  };\n\n  private toggle = (e: MouseEvent) => {\n    e.preventDefault();\n    this.open = !this.open;\n  };\n\n  private onToggleKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private attachIO() {\n    if (!this.hideHeight) return;\n    const io: IntersectionObserver = (this.io = new (\n      window as any\n    ).IntersectionObserver(\n      (data: IntersectionObserverEntry[]) => {\n        this.heightOk = data[0].intersectionRatio !== 0;\n        if (!this.heightOk) {\n          this.moveItemsToGlobalNav();\n          this.io.disconnect();\n          this.io = undefined;\n        }\n      },\n      { threshold: 1 }\n    ));\n    io.observe(this.measureEle);\n  }\n\n  @Listen('nanoIsReady', { target: 'body' })\n  handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n    setTimeout(() => {\n      this.attachIO();\n      this.openChange();\n      this.onWindowResize();\n      this.isLoading = false;\n    }, 500);\n  }\n\n  componentWillLoad() {\n    this.globalNav = closestElement(\n      'nano-global-nav',\n      this.el\n    ) as HTMLNanoGlobalNavElement;\n\n    this.widthOk = window.innerWidth > this.hideWidth;\n    this.currHeight = window.innerHeight;\n\n    if (this.saveState) {\n      let localState = localStorage.getItem('nanoMenuDrawerOpen');\n      this.open = localState ? localState === 'true' : this.open;\n    }\n  }\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.debounceResize);\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          open: this.open,\n          hide: this.hide,\n          legacy: !CANSHADOW,\n          loading: this.isLoading,\n          'has-global-nav': !!this.globalNav,\n        }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n      >\n        <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n          <div class=\"content-wrap\">\n            <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n              <button\n                onMouseDown={this.toggle}\n                onKeyDown={this.onToggleKeyDown}\n                class=\"collapse-btn\"\n              >\n                <nano-icon\n                  name=\"light/arrow-alt-to-right\"\n                  aria-label=\"collapse / expand\"\n                ></nano-icon>\n              </button>\n              <slot />\n              <div class=\"foot\">\n                <div\n                  class=\"measure-ele\"\n                  ref={(div) => (this.measureEle = div)}\n                ></div>\n                <slot name=\"foot\" />\n              </div>\n            </nav>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"names":["menuDrawerCss","CANSHADOW","document","head","attachShadow","MenuDrawer","exports","class_1","hostRef","_this","this","children","currHeight","window","innerHeight","reset","widthOk","heightOk","isLoading","hide","open","saveState","hideWidth","hideHeight","onWindowResize","innerWidth","vh","el","style","setProperty","moveItemsToDrawer","toggle","e","preventDefault","onToggleKeyDown","ev","key","prototype","cancelNavItemEvents","detail","secondaryMenu","stopPropagation","openChange","localStorage","setItem","toString","containerDiv","writeTask","width","contentDiv","scrollWidth","widthChange","moveItemsToGlobalNav","hideHeightChange","io","attachIO","disconnect","undefined","currNavItems","querySelectorAll","forEach","element","push","slot","getAttribute","setAttribute","classList","add","globalNav","appendChild","length","child","removeAttribute","remove","IntersectionObserver","data","intersectionRatio","threshold","observe","measureEle","handleGlobalNavReady","target","tagName","setTimeout","componentWillLoad","closestElement","localState","getItem","componentDidLoad","addEventListener","disconnectedCallback","removeEventListener","debounceResize","render","h","Host","class","legacy","loading","has-global-nav","dir","ownerDocument","ref","div","onMouseDown","onKeyDown","name","aria-label"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n\n:host(.legacy) {\n  ::slotted(*),\n  * {\n    --global-nav-height: 61px;\n    --padding-top: 13px;\n    --padding-end: 13px;\n    --padding-bottom: 13px;\n    --padding-start: 13px;\n    --secondary-padding-end: 13px;\n    --secondary-padding-bottom: 13px;\n    --secondary-padding-start: 13px;\n    --secondary-padding-top: 61px;\n    --icon-size: 19px;\n    --font-size: 11px;\n    --bg-color: #001a21;\n    --bg-color-hover: rgba(28, 62, 72, 0.8);\n    --bg-color-selected: #274048;\n    --bg-color-open: #274048;\n    --bg-color-focus: rgba(28, 62, 72, 0.8);\n    --focus-outline: none;\n    --content-color: #{$color-white};\n    --secondary-bg-color: rgb(28, 62, 72);\n  }\n}\n\n:host {\n  --padding-top: 13px;\n  --padding-end: 12px;\n  --padding-bottom: 13px;\n  --padding-start: 12px;\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 61px;\n  --bg-color: #001a21;\n  --bg-color-hover: rgba(28, 62, 72, 0.8);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgba(28, 62, 72, 0.8);\n  --focus-outline: none;\n  --content-color: #{$color-white};\n  --secondary-bg-color: rgb(28, 62, 72);\n\n  @include text-inherit();\n\n  display: block;\n  z-index: 1;\n  background: var(--bg-color);\n\n  ::slotted(nano-nav-item) {\n    --secondary-padding-top: var(--global-nav-height);\n    --nano-icon-size: var(--icon-size);\n\n    color: var(--content-color);\n    font-size: var(--font-size);\n    // font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.hide) {\n  display: none;\n}\n\n:host(.has-global-nav) {\n  .content-wrap {\n    padding-top: var(--global-nav-height);\n\n    @at-root {\n      @supports ((position: sticky)) {\n        & {\n          margin-top: calc(var(--global-nav-height) * -1);\n        }\n      }\n    }\n  }\n}\n\n.container {\n  right: auto;\n  flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  background: var(--bg-color);\n  color: var(--content-color);\n  z-index: 1;\n  width: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  height: 100%;\n}\n\n:host(.open) {\n  .container {\n    width: auto;\n  }\n}\n\n:host(:not(.loading)) {\n  .container {\n    transition: width 0.3s ease;\n  }\n}\n\n.content-wrap {\n  left: 0;\n  top: 0;\n  width: inherit;\n  max-width: inherit;\n  background: var(--bg-color);\n  color: $color-white;\n  position: fixed;\n  position: sticky;\n  font-size: var(--icon-size);\n  line-height: 1;\n  display: flex;\n  min-height: calc(100vh - 61px);\n  min-height: calc((var(--vh, 1vh) * 100) - 61px);\n  z-index: 1;\n\n  @include rtl-host {\n    right: 0;\n    left: auto;\n  }\n}\n\n.content {\n  width: auto;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bg-color);\n  flex: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    background: var(--bg-color);\n    z-index: -1;\n    height: 100vh;\n  }\n}\n\n.collapse-btn {\n  background: var(--bg-color-selected);\n  border: none;\n  color: inherit;\n  font-size: var(--icon-size);\n  margin:\n    var(--padding-top) auto var(--padding-bottom)\n    calc(var(--padding-start) / 2);\n  border-radius: 4px;\n  padding: 6px 5px;\n  display: flex;\n  align-content: center;\n  width: 30px;\n  flex: 0 0 auto;\n\n  nano-icon {\n    font-size: var(--icon-size);\n    transition: 0.2s transform ease-in-out;\n    transform: translateZ(0) rotate(0deg);\n\n    :host(.open) & {\n      transform: translateZ(0) rotate(180deg);\n    }\n  }\n}\n\n.foot {\n  margin-top: auto;\n}\n\n.measure-ele {\n  height: 1px;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  writeTask,\n  State,\n  Element,\n  Watch,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n */\n@Component({\n  tag: 'nano-menu-drawer',\n  styleUrl: 'menu-drawer.scss',\n  shadow: true,\n})\nexport class MenuDrawer {\n  private containerDiv: HTMLDivElement;\n  private contentDiv: HTMLElement;\n  private measureEle: HTMLElement;\n  private debounceResize: () => {};\n  private globalNav: HTMLNanoGlobalNavElement;\n  private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n    [];\n  private io: IntersectionObserver;\n  private currHeight: number = window.innerHeight;\n\n  @Element() private el: HTMLNanoMenuDrawerElement;\n\n  @State() reset: boolean = false;\n  @State() widthOk: boolean = true;\n  @State() heightOk: boolean = true;\n  @State() isLoading: boolean = true;\n  @State() hide: boolean = false;\n\n  /**\n   * Set the initial menu drawer open or closed\n   */\n  @Prop() open: boolean = true;\n\n  /**\n   * Save open state to localStorage\n   */\n  @Prop() saveState: boolean = true;\n\n  /**\n   * Screen width to hide the menu drawer and move the items into the nano-global-nav\n   */\n  @Prop() hideWidth: number = 576;\n\n  /**\n   * Should element hide and move items into the nano-global-nav when items are cut off\n   * (this will only work when nano-menu-drawer is displayed at full screen)\n   */\n  @Prop() hideHeight: boolean = true;\n\n  @Listen('nanoOpen')\n  @Listen('nanoClose')\n  cancelNavItemEvents(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n  }\n\n  @Watch('open')\n  openChange() {\n    if (this.saveState)\n      localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n    if (this.containerDiv) {\n      if (this.open)\n        writeTask(\n          () =>\n            (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n        );\n      else writeTask(() => (this.containerDiv.style.width = null));\n    }\n  }\n\n  @Watch('widthOk')\n  widthChange() {\n    if (this.widthOk) this.moveItemsToDrawer();\n    else this.moveItemsToGlobalNav();\n  }\n\n  @Watch('hideHeight')\n  hideHeightChange() {\n    if (this.hideHeight && !this.io) this.attachIO();\n    else if (!this.hideHeight && this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private moveItemsToGlobalNav() {\n    let currNavItems = this.el.querySelectorAll('nano-nav-item');\n    // dimensions not cool - move items out of element and into global nav\n    currNavItems.forEach((element) => {\n      this.children.push({\n        slot: element.getAttribute('slot'),\n        element: element,\n      });\n      element.setAttribute('slot', 'overflow');\n      element.classList.add('nano-global-nav-menu');\n      this.globalNav.appendChild(element);\n    });\n    this.hide = true;\n  }\n\n  private moveItemsToDrawer() {\n    if (!this.children || !this.children.length) return;\n\n    this.children.forEach((child) => {\n      child.element.removeAttribute('slot');\n      child.element.classList.remove('nano-global-nav-menu');\n      if (child.slot && child.slot.length)\n        child.element.setAttribute('slot', child.slot);\n      this.el.appendChild(child.element);\n    });\n    this.children = [];\n    this.hide = false;\n    if (!this.io) this.attachIO();\n  }\n\n  private onWindowResize = () => {\n    if (window.innerWidth > this.hideWidth) this.widthOk = true;\n    else this.widthOk = false;\n\n    let vh = window.innerHeight * 0.01;\n    this.el.style.setProperty('--vh', `${vh}px`);\n\n    if (\n      window.innerHeight > this.currHeight &&\n      this.widthOk &&\n      !this.heightOk\n    ) {\n      this.moveItemsToDrawer();\n    }\n    this.currHeight = window.innerHeight;\n  };\n\n  private toggle = (e: MouseEvent) => {\n    e.preventDefault();\n    this.open = !this.open;\n  };\n\n  private onToggleKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private attachIO() {\n    if (!this.hideHeight) return;\n    const io: IntersectionObserver = (this.io = new (\n      window as any\n    ).IntersectionObserver(\n      (data: IntersectionObserverEntry[]) => {\n        this.heightOk = data[0].intersectionRatio !== 0;\n        if (!this.heightOk) {\n          this.moveItemsToGlobalNav();\n          this.io.disconnect();\n          this.io = undefined;\n        }\n      },\n      { threshold: 1 }\n    ));\n    io.observe(this.measureEle);\n  }\n\n  @Listen('nanoIsReady', { target: 'body' })\n  handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n    setTimeout(() => {\n      this.attachIO();\n      this.openChange();\n      this.onWindowResize();\n      this.isLoading = false;\n    }, 500);\n  }\n\n  componentWillLoad() {\n    this.globalNav = closestElement(\n      'nano-global-nav',\n      this.el\n    ) as HTMLNanoGlobalNavElement;\n\n    this.widthOk = window.innerWidth > this.hideWidth;\n    this.currHeight = window.innerHeight;\n\n    if (this.saveState) {\n      let localState = localStorage.getItem('nanoMenuDrawerOpen');\n      this.open = localState ? localState === 'true' : this.open;\n    }\n  }\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.debounceResize);\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          open: this.open,\n          hide: this.hide,\n          legacy: !CANSHADOW,\n          loading: this.isLoading,\n          'has-global-nav': !!this.globalNav,\n        }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n      >\n        <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n          <div class=\"content-wrap\">\n            <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n              <button\n                onMouseDown={this.toggle}\n                onKeyDown={this.onToggleKeyDown}\n                class=\"collapse-btn\"\n              >\n                <nano-icon\n                  name=\"light/arrow-alt-to-right\"\n                  aria-label=\"collapse / expand\"\n                ></nano-icon>\n              </button>\n              <slot />\n              <div class=\"foot\">\n                <div\n                  class=\"measure-ele\"\n                  ref={(div) => (this.measureEle = div)}\n                ></div>\n                <slot name=\"foot\" />\n              </div>\n            </nav>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}