@nanoporetech-digital/components 3.7.1 → 3.8.1

package/dist/nano-components/p-23575705.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"names":["ratingCss","Rating","this","handleClick","event","disabled","readonly","newValue","getValueFromMousePosition","value","isHovering","handleKeyDown","key","decrement","shiftKey","precision","roundToPrecision","Math","max","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","handleMouseMove","hoverValue","_number","symbolName","[object Object]","nanoChange","symbol","_","rating","focus","blur","containerLeft","getBoundingClientRect","left","containerWidth","width","num","clientX","isRtl","clamp","numberToRound","multiplier","ceil","displayValue","tw","focusVisible","observe","setTimeout","indicator","style","clip","host","dir","ownerDocument","unobserve","counter","Array","from","keys","h","class","ref","el","part","rating--readonly","rating--disabled","aria-disabled","aria-readonly","aria-valuenow","aria-valuemin","aria-valuemax","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","map","index","rating__symbol","rating__symbol--hover","role","innerHTML","span","type","name"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{map.get($colors, palegrey)};\n  --symbol-color-active: #{map.get($colors, yellow)};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: calc(var(--symbol-spacing) * -1);\n  margin-inline-end: calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  inline-size: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentColor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      inline-size: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/math';\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   * @param _number\n   * @returns an html string used to render your rating symbol\n   */\n  @Prop() symbol = (_number: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) =>\n      '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    const counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-2828788c.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/utils/gesture/gesture-controller.ts","src/utils/gesture/listener.ts","src/utils/gesture/pointer-events.ts","src/utils/gesture/recognizers.ts","src/utils/gesture/index.ts"],"names":["GestureController","[object Object]","this","gestureId","requestedStart","Map","disabledGestures","disabledScroll","Set","config","GestureDelegate","newID","name","priority","disableScroll","opts","BlockerDelegate","disable","gestureName","id","canStart","delete","set","start","maxPriority","forEach","value","Math","max","capturedId","clear","event","CustomEvent","detail","document","dispatchEvent","undefined","get","add","size","body","classList","BACKDROP_NO_SCROLL","remove","isDisabled","disabled","ctrl","captured","capture","release","enableScroll","gesture","disableGesture","enableGesture","unblock","GESTURE_CONTROLLER","addEventListener","el","eventName","callback","listenerOpts","supportsPassive","passive","node","_sPassive","Object","defineProperty","e","MOUSE_WAIT","createPointerEvents","pointerDown","pointerMove","pointerUp","options","rmTouchStart","rmTouchMove","rmTouchEnd","rmTouchCancel","rmMouseStart","rmMouseMove","rmMouseUp","lastTouchEvent","handleTouchStart","ev","Date","now","handleTouchEnd","handleMouseDown","getDocument","handleMouseUp","stopTouch","stopMouse","stop","enable","isEnabled","destroy","Document","ownerDocument","createPanRecognizer","direction","thresh","maxAngle","radians","PI","isDirX","maxCosine","cos","threshold","startX","startY","dirty","isPan","x","y","deltaX","deltaY","distance","hypotenuse","sqrt","cosine","createGesture","hasCapturedPan","hasStartedPan","hasFiredStart","isMoveQueued","finalConfig","gesturePriority","onWillStart","onStart","onEnd","notCaptured","onMove","blurOnStart","type","startTime","currentX","currentY","velocityX","velocityY","currentTime","data","pan","timeStamp","updateDetail","tryToCapturePan","calcGestureData","requestAnimationFrame","fireOnMove","detect","isGesture","abortGesture","then","fireOnStart","blurActiveElement","activeElement","blur","reset","tmpHasCaptured","tmpHasFiredStart","pointerEvents","prevX","prevY","prevT","timestamp","timeDelta","changedTouches","length","touch","clientX","clientY","pageX","pageY"],"mappings":";;;AAAA,MAAMA,EAANC,cACUC,KAAAC,UAAY,EACZD,KAAAE,eAAiB,IAAIC,IACrBH,KAAAI,iBAAmB,IAAID,IACvBH,KAAAK,eAAiB,IAAIC,IAQ7BP,cAAcQ,GACZ,OAAO,IAAIC,EACTR,KACAA,KAAKS,QACLF,EAAOG,KACPH,EAAOI,UAAY,IACjBJ,EAAOK,eASbb,cAAcc,EAAsB,IAClC,OAAO,IAAIC,EACTd,KACAA,KAAKS,QACLI,EAAKE,UACHF,EAAKD,eAIXb,MAAMiB,EAAqBC,EAAYN,GACrC,IAAKX,KAAKkB,SAASF,GAAc,CAC/BhB,KAAKE,eAAeiB,OAAOF,GAC3B,OAAO,MAETjB,KAAKE,eAAekB,IAAIH,EAAIN,GAC5B,OAAO,KAGTZ,QAAQiB,EAAqBC,EAAYN,GACvC,IAAKX,KAAKqB,MAAML,EAAaC,EAAIN,GAAW,CAC1C,OAAO,MAET,MAAMT,EAAiBF,KAAKE,eAC5B,IAAIoB,GAAe,IAEnBpB,EAAeqB,SAASC,IACtBF,EAAcG,KAAKC,IAAIJ,EAAaE,MAGtC,GAAIF,IAAgBX,EAAU,CAC5BX,KAAK2B,WAAaV,EAClBf,EAAe0B,QAEf,MAAMC,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,OAAQ,CAAEf,YAAAA,KAEZgB,SAASC,cAAcJ,GACvB,OAAO,KAET3B,EAAeiB,OAAOF,GAEtB,OAAO,MAGTlB,QAAQkB,GACNjB,KAAKE,eAAeiB,OAAOF,GAE3B,GAAIjB,KAAK2B,aAAeV,EAAI,CAC1BjB,KAAK2B,WAAaO,WAItBnC,eAAeiB,EAAqBC,GAClC,IAAIG,EAAMpB,KAAKI,iBAAiB+B,IAAInB,GACpC,GAAII,IAAQc,UAAW,CACrBd,EAAM,IAAId,IACVN,KAAKI,iBAAiBgB,IAAIJ,EAAaI,GAEzCA,EAAIgB,IAAInB,GAGVlB,cAAciB,EAAqBC,GACjC,MAAMG,EAAMpB,KAAKI,iBAAiB+B,IAAInB,GACtC,GAAII,IAAQc,UAAW,CACrBd,EAAID,OAAOF,IAIflB,cAAckB,GACZjB,KAAKK,eAAe+B,IAAInB,GACxB,GAAIjB,KAAKK,eAAegC,OAAS,EAAG,CAClCL,SAASM,KAAKC,UAAUH,IAAII,IAIhCzC,aAAakB,GACXjB,KAAKK,eAAec,OAAOF,GAC3B,GAAIjB,KAAKK,eAAegC,OAAS,EAAG,CAClCL,SAASM,KAAKC,UAAUE,OAAOD,IAInCzC,SAASiB,GACP,GAAIhB,KAAK2B,aAAeO,UAAW,CAEjC,OAAO,MAGT,GAAIlC,KAAK0C,WAAW1B,GAAc,CAChC,OAAO,MAGT,OAAO,KAGTjB,aACE,OAAOC,KAAK2B,aAAeO,UAG7BnC,mBACE,OAAOC,KAAKK,eAAegC,KAAO,EAGpCtC,WAAWiB,GACT,MAAM2B,EAAW3C,KAAKI,iBAAiB+B,IAAInB,GAC3C,GAAI2B,GAAYA,EAASN,KAAO,EAAG,CACjC,OAAO,KAET,OAAO,MAGDtC,QACNC,KAAKC,YACL,OAAOD,KAAKC,WAIhB,MAAMO,EAIJT,YACE6C,EACQ3B,EACAP,EACRC,EACQC,GAHAZ,KAAAiB,GAAAA,EACAjB,KAAAU,KAAAA,EAEAV,KAAAY,cAAAA,EAERZ,KAAKW,SAAWA,EAAW,IAAUM,EACrCjB,KAAK4C,KAAOA,EAGd7C,WACE,IAAKC,KAAK4C,KAAM,CACd,OAAO,MAGT,OAAO5C,KAAK4C,KAAK1B,SAASlB,KAAKU,MAGjCX,QACE,IAAKC,KAAK4C,KAAM,CACd,OAAO,MAGT,OAAO5C,KAAK4C,KAAKvB,MAAMrB,KAAKU,KAAMV,KAAKiB,GAAIjB,KAAKW,UAGlDZ,UACE,IAAKC,KAAK4C,KAAM,CACd,OAAO,MAGT,MAAMC,EAAW7C,KAAK4C,KAAKE,QAAQ9C,KAAKU,KAAMV,KAAKiB,GAAIjB,KAAKW,UAC5D,GAAIkC,GAAY7C,KAAKY,cAAe,CAClCZ,KAAK4C,KAAKhC,cAAcZ,KAAKiB,IAG/B,OAAO4B,EAGT9C,UACE,GAAIC,KAAK4C,KAAM,CACb5C,KAAK4C,KAAKG,QAAQ/C,KAAKiB,IAEvB,GAAIjB,KAAKY,cAAe,CACtBZ,KAAK4C,KAAKI,aAAahD,KAAKiB,MAKlClB,UACEC,KAAK+C,UACL/C,KAAK4C,KAAOV,WAIhB,MAAMpB,EAGJf,YACE6C,EACQ3B,EACAF,EACAH,GAFAZ,KAAAiB,GAAAA,EACAjB,KAAAe,QAAAA,EACAf,KAAAY,cAAAA,EAERZ,KAAK4C,KAAOA,EAGd7C,QACE,IAAKC,KAAK4C,KAAM,CACd,OAEF,GAAI5C,KAAKe,QAAS,CAChB,IAAK,MAAMkC,KAAWjD,KAAKe,QAAS,CAClCf,KAAK4C,KAAKM,eAAeD,EAASjD,KAAKiB,KAI3C,GAAIjB,KAAKY,cAAe,CACtBZ,KAAK4C,KAAKhC,cAAcZ,KAAKiB,KAIjClB,UACE,IAAKC,KAAK4C,KAAM,CACd,OAEF,GAAI5C,KAAKe,QAAS,CAChB,IAAK,MAAMkC,KAAWjD,KAAKe,QAAS,CAClCf,KAAK4C,KAAKO,cAAcF,EAASjD,KAAKiB,KAG1C,GAAIjB,KAAKY,cAAe,CACtBZ,KAAK4C,KAAKI,aAAahD,KAAKiB,KAIhClB,UACEC,KAAKoD,UACLpD,KAAK4C,KAAOV,WAehB,MAAMM,EAAqB,2BACda,EAAqB,IAAIvD,ECvQ/B,MAAMwD,EAAmB,CAC9BC,EACAC,EACAC,EACA5C,KAOA,MAAM6C,EAAeC,EAAgBJ,GACjC,CACET,UAAWjC,EAAKiC,QAChBc,UAAW/C,EAAK+C,WAEhB/C,EAAKiC,QAEX,IAAIV,EACJ,IAAIK,EACJ,GAAIc,EAAG,mCAAoC,CACzCnB,EAAM,kCACNK,EAAS,yCACJ,CACLL,EAAM,mBACNK,EAAS,sBAGXc,EAAGnB,GAAKoB,EAAWC,EAAUC,GAC7B,MAAO,KACLH,EAAGd,GAAQe,EAAWC,EAAUC,KAIpC,MAAMC,EAAmBE,IACvB,GAAIC,IAAc5B,UAAW,CAC3B,IACE,MAAMrB,EAAOkD,OAAOC,eAAe,GAAI,UAAW,CAChD7B,IAAK,KACH2B,EAAY,QAGhBD,EAAKP,iBACH,YACA,QAGAzC,GAEF,MAAOoD,GACPH,EAAY,OAGhB,QAASA,GAGX,IAAIA,ECtDJ,MAAMI,EAAa,IAEZ,MAAMC,EAAsB,CACjCZ,EACAa,EACAC,EACAC,EACAC,KAKA,IAAIC,EACJ,IAAIC,EACJ,IAAIC,EACJ,IAAIC,EACJ,IAAIC,EACJ,IAAIC,EACJ,IAAIC,EACJ,IAAIC,EAAiB,EAErB,MAAMC,EAAoBC,IACxBF,EAAiBG,KAAKC,MAAQjB,EAC9B,IAAKE,EAAYa,GAAK,CACpB,OAEF,IAAKR,GAAeJ,EAAa,CAC/BI,EAAcnB,EAAiBC,EAAI,YAAac,EAAaE,GAE/D,IAAKG,EAAY,CACfA,EAAapB,EAAiBC,EAAI,WAAY6B,EAAgBb,GAEhE,IAAKI,EAAe,CAClBA,EAAgBrB,EACdC,EACA,cACA6B,EACAb,KAKN,MAAMc,EAAmBJ,IACvB,GAAIF,EAAiBG,KAAKC,MAAO,CAC/B,OAEF,IAAKf,EAAYa,GAAK,CACpB,OAEF,IAAKJ,GAAeR,EAAa,CAC/BQ,EAAcvB,EACZgC,EAAY/B,GACZ,YACAc,EACAE,GAGJ,IAAKO,EAAW,CACdA,EAAYxB,EACVgC,EAAY/B,GACZ,UACAgC,EACAhB,KAKN,MAAMa,EAAkBH,IACtBO,IACA,GAAIlB,EAAW,CACbA,EAAUW,KAId,MAAMM,EAAiBN,IACrBQ,IACA,GAAInB,EAAW,CACbA,EAAUW,KAId,MAAMO,EAAY,KAChB,GAAIf,EAAa,CACfA,IAEF,GAAIC,EAAY,CACdA,IAEF,GAAIC,EAAe,CACjBA,IAEFF,EAAcC,EAAaC,EAAgBzC,WAG7C,MAAMuD,EAAY,KAChB,GAAIZ,EAAa,CACfA,IAEF,GAAIC,EAAW,CACbA,IAEFD,EAAcC,EAAY5C,WAG5B,MAAMwD,EAAO,KACXF,IACAC,KAGF,MAAME,EAAS,CAACC,EAAY,QAC1B,IAAKA,EAAW,CACd,GAAIpB,EAAc,CAChBA,IAEF,GAAII,EAAc,CAChBA,IAEFJ,EAAeI,EAAe1C,UAC9BwD,QACK,CACL,IAAKlB,EAAc,CACjBA,EAAelB,EACbC,EACA,aACAyB,EACAT,GAGJ,IAAKK,EAAc,CACjBA,EAAetB,EACbC,EACA,YACA8B,EACAd,MAMR,MAAMsB,EAAU,KACdF,EAAO,OACPrB,EAAYD,EAAcD,EAAclC,WAG1C,MAAO,CACLyD,OAAAA,EACAD,KAAAA,EACAG,QAAAA,IAIJ,MAAMP,EAAezB,GACZA,aAAgBiC,SAAWjC,EAAOA,EAAKkC,cCnJzC,MAAMC,EAAsB,CACjCC,EACAC,EACAC,KAEA,MAAMC,EAAUD,GAAY1E,KAAK4E,GAAK,KACtC,MAAMC,EAASL,IAAc,IAC7B,MAAMM,EAAY9E,KAAK+E,IAAIJ,GAC3B,MAAMK,EAAYP,EAASA,EAE3B,IAAIQ,EAAS,EACb,IAAIC,EAAS,EAEb,IAAIC,EAAQ,MACZ,IAAIC,EAAQ,EAEZ,MAAO,CACL9G,MAAM+G,EAAWC,GACfL,EAASI,EACTH,EAASI,EACTF,EAAQ,EACRD,EAAQ,MAGV7G,OAAO+G,EAAWC,GAChB,IAAKH,EAAO,CACV,OAAO,MAGT,MAAMI,EAASF,EAAIJ,EACnB,MAAMO,EAASF,EAAIJ,EACnB,MAAMO,EAAWF,EAASA,EAASC,EAASA,EAE5C,GAAIC,EAAWT,EAAW,CACxB,OAAO,MAET,MAAMU,EAAa1F,KAAK2F,KAAKF,GAC7B,MAAMG,GAAUf,EAASU,EAASC,GAAUE,EAE5C,GAAIE,EAASd,EAAW,CACtBM,EAAQ,OACH,GAAIQ,GAAUd,EAAW,CAC9BM,GAAS,MACJ,CACLA,EAAQ,EAGVD,EAAQ,MACR,OAAO,MAGT7G,YACE,OAAO8G,IAAU,GAGnB9G,eACE,OAAO8G,WC3DAS,EAAiB/G,IAC5B,IAAIgH,EAAiB,MACrB,IAAIC,EAAgB,MACpB,IAAIC,EAAgB,KACpB,IAAIC,EAAe,MAEnB,MAAMC,EAAc,CAClB/G,cAAe,MACfqF,UAAW,IACX2B,gBAAiB,EACjBhE,QAAS,KACTuC,SAAU,GACVM,UAAW,MAERlG,GAGL,MAAMW,EAAWyG,EAAYzG,SAC7B,MAAM2G,EAAcF,EAAYE,YAChC,MAAMC,EAAUH,EAAYG,QAC5B,MAAMC,EAAQJ,EAAYI,MAC1B,MAAMC,EAAcL,EAAYK,YAChC,MAAMC,EAASN,EAAYM,OAC3B,MAAMxB,EAAYkB,EAAYlB,UAC9B,MAAM7C,EAAU+D,EAAY/D,QAC5B,MAAMsE,EAAcP,EAAYO,YAEhC,MAAMnG,EAAS,CACboG,KAAM,MACNzB,OAAQ,EACRC,OAAQ,EACRyB,UAAW,EACXC,SAAU,EACVC,SAAU,EACVC,UAAW,EACXC,UAAW,EACXxB,OAAQ,EACRC,OAAQ,EACRwB,YAAa,EACb5G,MAAOK,UACPwG,KAAMxG,WAGR,MAAMyG,EAAM3C,EACV2B,EAAY1B,UACZ0B,EAAYlB,UACZkB,EAAYxB,UAEd,MAAMlD,EAAUI,EAAmBiE,cAAc,CAC/C5G,KAAMH,EAAOS,YACbL,SAAUJ,EAAOqH,gBACjBhH,cAAeL,EAAOK,gBAGxB,MAAMwD,EAAea,IACnB,MAAM2D,EAAYzD,EAAIF,GACtB,GAAIuC,IAAkBC,EAAe,CACnC,OAAO,MAGToB,EAAa5D,EAAIlD,GACjBA,EAAO2E,OAAS3E,EAAOsG,SACvBtG,EAAO4E,OAAS5E,EAAOuG,SACvBvG,EAAOqG,UAAYrG,EAAO0G,YAAcG,EACxC7G,EAAOwG,UAAYxG,EAAOyG,UAAYzG,EAAOiF,OAASjF,EAAOkF,OAAS,EACtElF,EAAOF,MAAQoD,EAGf,GAAI/D,GAAYA,EAASa,KAAY,MAAO,CAC1C,OAAO,MAGTkB,EAAQF,UAGR,IAAKE,EAAQ5B,QAAS,CACpB,OAAO,MAGTmG,EAAgB,KAChB,GAAIf,IAAc,EAAG,CACnB,OAAOqC,IAETH,EAAItH,MAAMU,EAAO2E,OAAQ3E,EAAO4E,QAChC,OAAO,MAGT,MAAMtC,EAAeY,IAGnB,GAAIsC,EAAgB,CAClB,IAAKG,GAAgBD,EAAe,CAClCC,EAAe,KACfqB,EAAgBhH,EAAQkD,GACxB+D,sBAAsBC,GAExB,OAIFF,EAAgBhH,EAAQkD,GACxB,GAAI0D,EAAIO,OAAOnH,EAAOsG,SAAUtG,EAAOuG,UAAW,CAChD,IAAKK,EAAIQ,cAAgBL,IAAmB,CAC1CM,OAKN,MAAMH,EAAa,KAGjB,IAAK1B,EAAgB,CACnB,OAEFG,EAAe,MACf,GAAIO,EAAQ,CACVA,EAAOlG,KAIX,MAAM+G,EAAkB,KACtB,GAAI7F,IAAYA,EAAQH,UAAW,CACjC,OAAO,MAETyE,EAAiB,KACjBE,EAAgB,MAQhB1F,EAAO2E,OAAS3E,EAAOsG,SACvBtG,EAAO4E,OAAS5E,EAAOuG,SACvBvG,EAAOqG,UAAYrG,EAAO0G,YAE1B,GAAIZ,EAAa,CACfA,EAAY9F,GAAQsH,KAAKC,OACpB,CACLA,IAEF,OAAO,MAGT,MAAMC,EAAoB,KAExB,UAAWvH,WAAa,YAAa,CACnC,MAAMwH,EAAgBxH,SAASwH,cAC/B,GAAIA,IAAkB,MAAQA,EAAcC,KAAM,CAChDD,EAAcC,UAKpB,MAAMH,EAAc,KAClB,GAAIpB,EAAa,CACfqB,IAEF,GAAIzB,EAAS,CACXA,EAAQ/F,GAEV0F,EAAgB,MAGlB,MAAMiC,EAAQ,KACZnC,EAAiB,MACjBC,EAAgB,MAChBE,EAAe,MACfD,EAAgB,KAEhBxE,EAAQF,WAKV,MAAMuB,EAAaW,IACjB,MAAM0E,EAAiBpC,EACvB,MAAMqC,EAAmBnC,EACzBiC,IAEA,IAAKE,EAAkB,CACrB,OAEFb,EAAgBhH,EAAQkD,GAGxB,GAAI0E,EAAgB,CAClB,GAAI5B,EAAO,CACTA,EAAMhG,GAER,OAIF,GAAIiG,EAAa,CACfA,EAAYjG,KAIhB,MAAM8H,EAAgB1F,EACpBwD,EAAYpE,GACZa,EACAC,EACAC,EACA,CACExB,QAAS,MACTc,QAAAA,IAIJ,MAAMwF,EAAe,KACnBM,IACAG,EAAcnE,OACd,GAAIsC,EAAa,CACfA,EAAYjG,KAIhB,MAAO,CACLhC,OAAO4F,EAAS,MACd,IAAKA,EAAQ,CACX,GAAI4B,EAAgB,CAClBjD,EAAUpC,WAGZwH,IAEFG,EAAclE,OAAOA,IAEvB5F,UACEkD,EAAQ4C,UACRgE,EAAchE,aAKpB,MAAMkD,EAAkB,CAAChH,EAAuBkD,KAC9C,IAAKA,EAAI,CACP,OAEF,MAAM6E,EAAQ/H,EAAOsG,SACrB,MAAM0B,EAAQhI,EAAOuG,SACrB,MAAM0B,EAAQjI,EAAO0G,YAErBI,EAAa5D,EAAIlD,GAEjB,MAAMsG,EAAWtG,EAAOsG,SACxB,MAAMC,EAAWvG,EAAOuG,SACxB,MAAM2B,EAAalI,EAAO0G,YAActD,EAAIF,GAC5C,MAAMiF,EAAYD,EAAYD,EAC9B,GAAIE,EAAY,GAAKA,EAAY,IAAK,CACpC,MAAM3B,GAAaF,EAAWyB,GAASI,EACvC,MAAM1B,GAAaF,EAAWyB,GAASG,EACvCnI,EAAOwG,UAAYA,EAAY,GAAMxG,EAAOwG,UAAY,GACxDxG,EAAOyG,UAAYA,EAAY,GAAMzG,EAAOyG,UAAY,GAE1DzG,EAAOiF,OAASqB,EAAWtG,EAAO2E,OAClC3E,EAAOkF,OAASqB,EAAWvG,EAAO4E,OAClC5E,EAAOF,MAAQoD,GAGjB,MAAM4D,EAAe,CAAC5D,EAASlD,KAG7B,IAAI+E,EAAI,EACR,IAAIC,EAAI,EACR,GAAI9B,EAAI,CACN,MAAMkF,EAAiBlF,EAAGkF,eAC1B,GAAIA,GAAkBA,EAAeC,OAAS,EAAG,CAC/C,MAAMC,EAAQF,EAAe,GAC7BrD,EAAIuD,EAAMC,QACVvD,EAAIsD,EAAME,aACL,GAAItF,EAAGuF,QAAUtI,UAAW,CACjC4E,EAAI7B,EAAGuF,MACPzD,EAAI9B,EAAGwF,OAGX1I,EAAOsG,SAAWvB,EAClB/E,EAAOuG,SAAWvB,GAGpB,MAAM5B,EAAOF,GACJA,EAAG2D,WAAa1D,KAAKC","sourcesContent":["class GestureController {\n  private gestureId = 0;\n  private requestedStart = new Map<number, number>();\n  private disabledGestures = new Map<string, Set<number>>();\n  private disabledScroll = new Set<number>();\n  private capturedId?: number;\n\n  /**\n   * Creates a gesture delegate based on the GestureConfig passed\n   * @param config\n   * @returns a new gesture delegate\n   */\n  createGesture(config: GestureConfig): GestureDelegate {\n    return new GestureDelegate(\n      this,\n      this.newID(),\n      config.name,\n      config.priority || 0,\n      !!config.disableScroll\n    );\n  }\n\n  /**\n   * Creates a blocker that will block any other gesture events from firing. Set in the ion-gesture component.\n   * @param opts\n   * @returns a new blocker delegate\n   */\n  createBlocker(opts: BlockerConfig = {}): BlockerDelegate {\n    return new BlockerDelegate(\n      this,\n      this.newID(),\n      opts.disable,\n      !!opts.disableScroll\n    );\n  }\n\n  start(gestureName: string, id: number, priority: number): boolean {\n    if (!this.canStart(gestureName)) {\n      this.requestedStart.delete(id);\n      return false;\n    }\n    this.requestedStart.set(id, priority);\n    return true;\n  }\n\n  capture(gestureName: string, id: number, priority: number): boolean {\n    if (!this.start(gestureName, id, priority)) {\n      return false;\n    }\n    const requestedStart = this.requestedStart;\n    let maxPriority = -10000;\n\n    requestedStart.forEach((value) => {\n      maxPriority = Math.max(maxPriority, value);\n    });\n\n    if (maxPriority === priority) {\n      this.capturedId = id;\n      requestedStart.clear();\n\n      const event = new CustomEvent('ionGestureCaptured', {\n        detail: { gestureName },\n      });\n      document.dispatchEvent(event);\n      return true;\n    }\n    requestedStart.delete(id);\n\n    return false;\n  }\n\n  release(id: number) {\n    this.requestedStart.delete(id);\n\n    if (this.capturedId === id) {\n      this.capturedId = undefined;\n    }\n  }\n\n  disableGesture(gestureName: string, id: number) {\n    let set = this.disabledGestures.get(gestureName);\n    if (set === undefined) {\n      set = new Set<number>();\n      this.disabledGestures.set(gestureName, set);\n    }\n    set.add(id);\n  }\n\n  enableGesture(gestureName: string, id: number) {\n    const set = this.disabledGestures.get(gestureName);\n    if (set !== undefined) {\n      set.delete(id);\n    }\n  }\n\n  disableScroll(id: number) {\n    this.disabledScroll.add(id);\n    if (this.disabledScroll.size === 1) {\n      document.body.classList.add(BACKDROP_NO_SCROLL);\n    }\n  }\n\n  enableScroll(id: number) {\n    this.disabledScroll.delete(id);\n    if (this.disabledScroll.size === 0) {\n      document.body.classList.remove(BACKDROP_NO_SCROLL);\n    }\n  }\n\n  canStart(gestureName: string): boolean {\n    if (this.capturedId !== undefined) {\n      // a gesture already captured\n      return false;\n    }\n\n    if (this.isDisabled(gestureName)) {\n      return false;\n    }\n\n    return true;\n  }\n\n  isCaptured(): boolean {\n    return this.capturedId !== undefined;\n  }\n\n  isScrollDisabled(): boolean {\n    return this.disabledScroll.size > 0;\n  }\n\n  isDisabled(gestureName: string): boolean {\n    const disabled = this.disabledGestures.get(gestureName);\n    if (disabled && disabled.size > 0) {\n      return true;\n    }\n    return false;\n  }\n\n  private newID(): number {\n    this.gestureId++;\n    return this.gestureId;\n  }\n}\n\nclass GestureDelegate {\n  private ctrl?: GestureController;\n  private priority: number;\n\n  constructor(\n    ctrl: GestureController,\n    private id: number,\n    private name: string,\n    priority: number,\n    private disableScroll: boolean\n  ) {\n    this.priority = priority * 1000000 + id;\n    this.ctrl = ctrl;\n  }\n\n  canStart(): boolean {\n    if (!this.ctrl) {\n      return false;\n    }\n\n    return this.ctrl.canStart(this.name);\n  }\n\n  start(): boolean {\n    if (!this.ctrl) {\n      return false;\n    }\n\n    return this.ctrl.start(this.name, this.id, this.priority);\n  }\n\n  capture(): boolean {\n    if (!this.ctrl) {\n      return false;\n    }\n\n    const captured = this.ctrl.capture(this.name, this.id, this.priority);\n    if (captured && this.disableScroll) {\n      this.ctrl.disableScroll(this.id);\n    }\n\n    return captured;\n  }\n\n  release() {\n    if (this.ctrl) {\n      this.ctrl.release(this.id);\n\n      if (this.disableScroll) {\n        this.ctrl.enableScroll(this.id);\n      }\n    }\n  }\n\n  destroy() {\n    this.release();\n    this.ctrl = undefined;\n  }\n}\n\nclass BlockerDelegate {\n  private ctrl?: GestureController;\n\n  constructor(\n    ctrl: GestureController,\n    private id: number,\n    private disable: string[] | undefined,\n    private disableScroll: boolean\n  ) {\n    this.ctrl = ctrl;\n  }\n\n  block() {\n    if (!this.ctrl) {\n      return;\n    }\n    if (this.disable) {\n      for (const gesture of this.disable) {\n        this.ctrl.disableGesture(gesture, this.id);\n      }\n    }\n\n    if (this.disableScroll) {\n      this.ctrl.disableScroll(this.id);\n    }\n  }\n\n  unblock() {\n    if (!this.ctrl) {\n      return;\n    }\n    if (this.disable) {\n      for (const gesture of this.disable) {\n        this.ctrl.enableGesture(gesture, this.id);\n      }\n    }\n    if (this.disableScroll) {\n      this.ctrl.enableScroll(this.id);\n    }\n  }\n\n  destroy() {\n    this.unblock();\n    this.ctrl = undefined;\n  }\n}\n\nexport interface GestureConfig {\n  name: string;\n  priority?: number;\n  disableScroll?: boolean;\n}\n\nexport interface BlockerConfig {\n  disable?: string[];\n  disableScroll?: boolean;\n}\n\nconst BACKDROP_NO_SCROLL = 'backdrop-no-scroll';\nexport const GESTURE_CONTROLLER = new GestureController();\n","export const addEventListener = (\n  el: any,\n  eventName: string,\n  callback: EventListenerOrEventListenerObject,\n  opts: {\n    passive?: boolean;\n    capture?: boolean;\n  }\n): (() => void) => {\n  // use event listener options when supported\n  // otherwise it's just a boolean for the \"capture\" arg\n  const listenerOpts = supportsPassive(el)\n    ? {\n        capture: !!opts.capture,\n        passive: !!opts.passive,\n      }\n    : !!opts.capture;\n\n  let add: string;\n  let remove: string;\n  if (el['__zone_symbol__addEventListener']) {\n    add = '__zone_symbol__addEventListener';\n    remove = '__zone_symbol__removeEventListener';\n  } else {\n    add = 'addEventListener';\n    remove = 'removeEventListener';\n  }\n\n  el[add](eventName, callback, listenerOpts);\n  return () => {\n    el[remove](eventName, callback, listenerOpts);\n  };\n};\n\nconst supportsPassive = (node: Node) => {\n  if (_sPassive === undefined) {\n    try {\n      const opts = Object.defineProperty({}, 'passive', {\n        get: () => {\n          _sPassive = true;\n        },\n      });\n      node.addEventListener(\n        'optsTest',\n        () => {\n          return;\n        },\n        opts\n      );\n    } catch (e) {\n      _sPassive = false;\n    }\n  }\n  return !!_sPassive;\n};\n\nlet _sPassive: boolean | undefined;\n","import { addEventListener } from './listener';\n\nconst MOUSE_WAIT = 2000;\n\nexport const createPointerEvents = (\n  el: Node,\n  pointerDown: any,\n  pointerMove: any,\n  pointerUp: any,\n  options: {\n    passive?: boolean;\n    capture?: boolean;\n  }\n) => {\n  let rmTouchStart: (() => void) | undefined;\n  let rmTouchMove: (() => void) | undefined;\n  let rmTouchEnd: (() => void) | undefined;\n  let rmTouchCancel: (() => void) | undefined;\n  let rmMouseStart: (() => void) | undefined;\n  let rmMouseMove: (() => void) | undefined;\n  let rmMouseUp: (() => void) | undefined;\n  let lastTouchEvent = 0;\n\n  const handleTouchStart = (ev: any) => {\n    lastTouchEvent = Date.now() + MOUSE_WAIT;\n    if (!pointerDown(ev)) {\n      return;\n    }\n    if (!rmTouchMove && pointerMove) {\n      rmTouchMove = addEventListener(el, 'touchmove', pointerMove, options);\n    }\n    if (!rmTouchEnd) {\n      rmTouchEnd = addEventListener(el, 'touchend', handleTouchEnd, options);\n    }\n    if (!rmTouchCancel) {\n      rmTouchCancel = addEventListener(\n        el,\n        'touchcancel',\n        handleTouchEnd,\n        options\n      );\n    }\n  };\n\n  const handleMouseDown = (ev: any) => {\n    if (lastTouchEvent > Date.now()) {\n      return;\n    }\n    if (!pointerDown(ev)) {\n      return;\n    }\n    if (!rmMouseMove && pointerMove) {\n      rmMouseMove = addEventListener(\n        getDocument(el),\n        'mousemove',\n        pointerMove,\n        options\n      );\n    }\n    if (!rmMouseUp) {\n      rmMouseUp = addEventListener(\n        getDocument(el),\n        'mouseup',\n        handleMouseUp,\n        options\n      );\n    }\n  };\n\n  const handleTouchEnd = (ev: any) => {\n    stopTouch();\n    if (pointerUp) {\n      pointerUp(ev);\n    }\n  };\n\n  const handleMouseUp = (ev: any) => {\n    stopMouse();\n    if (pointerUp) {\n      pointerUp(ev);\n    }\n  };\n\n  const stopTouch = () => {\n    if (rmTouchMove) {\n      rmTouchMove();\n    }\n    if (rmTouchEnd) {\n      rmTouchEnd();\n    }\n    if (rmTouchCancel) {\n      rmTouchCancel();\n    }\n    rmTouchMove = rmTouchEnd = rmTouchCancel = undefined;\n  };\n\n  const stopMouse = () => {\n    if (rmMouseMove) {\n      rmMouseMove();\n    }\n    if (rmMouseUp) {\n      rmMouseUp();\n    }\n    rmMouseMove = rmMouseUp = undefined;\n  };\n\n  const stop = () => {\n    stopTouch();\n    stopMouse();\n  };\n\n  const enable = (isEnabled = true) => {\n    if (!isEnabled) {\n      if (rmTouchStart) {\n        rmTouchStart();\n      }\n      if (rmMouseStart) {\n        rmMouseStart();\n      }\n      rmTouchStart = rmMouseStart = undefined;\n      stop();\n    } else {\n      if (!rmTouchStart) {\n        rmTouchStart = addEventListener(\n          el,\n          'touchstart',\n          handleTouchStart,\n          options\n        );\n      }\n      if (!rmMouseStart) {\n        rmMouseStart = addEventListener(\n          el,\n          'mousedown',\n          handleMouseDown,\n          options\n        );\n      }\n    }\n  };\n\n  const destroy = () => {\n    enable(false);\n    pointerUp = pointerMove = pointerDown = undefined;\n  };\n\n  return {\n    enable,\n    stop,\n    destroy,\n  };\n};\n\nconst getDocument = (node: Node) => {\n  return node instanceof Document ? node : node.ownerDocument;\n};\n\nexport interface PointerEventsConfig {\n  element?: HTMLElement;\n  pointerDown: (ev: any) => boolean;\n  pointerMove?: (ev: any) => void;\n  pointerUp?: (ev: any) => void;\n  zone?: boolean;\n  capture?: boolean;\n  passive?: boolean;\n}\n","export interface PanRecognizer {\n  start(x: number, y: number): void;\n  detect(x: number, y: number): boolean;\n  isGesture(): boolean;\n  getDirection(): number;\n}\n\nexport const createPanRecognizer = (\n  direction: string,\n  thresh: number,\n  maxAngle: number\n): PanRecognizer => {\n  const radians = maxAngle * (Math.PI / 180);\n  const isDirX = direction === 'x';\n  const maxCosine = Math.cos(radians);\n  const threshold = thresh * thresh;\n\n  let startX = 0;\n  let startY = 0;\n\n  let dirty = false;\n  let isPan = 0;\n\n  return {\n    start(x: number, y: number) {\n      startX = x;\n      startY = y;\n      isPan = 0;\n      dirty = true;\n    },\n\n    detect(x: number, y: number): boolean {\n      if (!dirty) {\n        return false;\n      }\n\n      const deltaX = x - startX;\n      const deltaY = y - startY;\n      const distance = deltaX * deltaX + deltaY * deltaY;\n\n      if (distance < threshold) {\n        return false;\n      }\n      const hypotenuse = Math.sqrt(distance);\n      const cosine = (isDirX ? deltaX : deltaY) / hypotenuse;\n\n      if (cosine > maxCosine) {\n        isPan = 1;\n      } else if (cosine < -maxCosine) {\n        isPan = -1;\n      } else {\n        isPan = 0;\n      }\n\n      dirty = false;\n      return true;\n    },\n\n    isGesture(): boolean {\n      return isPan !== 0;\n    },\n\n    getDirection(): number {\n      return isPan;\n    },\n  };\n};\n","import { GESTURE_CONTROLLER } from './gesture-controller';\nimport { createPointerEvents } from './pointer-events';\nimport { createPanRecognizer } from './recognizers';\n\nexport const createGesture = (config: GestureConfig): Gesture => {\n  let hasCapturedPan = false;\n  let hasStartedPan = false;\n  let hasFiredStart = true;\n  let isMoveQueued = false;\n\n  const finalConfig = {\n    disableScroll: false,\n    direction: 'x',\n    gesturePriority: 0,\n    passive: true,\n    maxAngle: 40,\n    threshold: 10,\n\n    ...config,\n  };\n\n  const canStart = finalConfig.canStart;\n  const onWillStart = finalConfig.onWillStart;\n  const onStart = finalConfig.onStart;\n  const onEnd = finalConfig.onEnd;\n  const notCaptured = finalConfig.notCaptured;\n  const onMove = finalConfig.onMove;\n  const threshold = finalConfig.threshold;\n  const passive = finalConfig.passive;\n  const blurOnStart = finalConfig.blurOnStart;\n\n  const detail = {\n    type: 'pan',\n    startX: 0,\n    startY: 0,\n    startTime: 0,\n    currentX: 0,\n    currentY: 0,\n    velocityX: 0,\n    velocityY: 0,\n    deltaX: 0,\n    deltaY: 0,\n    currentTime: 0,\n    event: undefined as any,\n    data: undefined,\n  };\n\n  const pan = createPanRecognizer(\n    finalConfig.direction,\n    finalConfig.threshold,\n    finalConfig.maxAngle\n  );\n  const gesture = GESTURE_CONTROLLER.createGesture({\n    name: config.gestureName,\n    priority: config.gesturePriority,\n    disableScroll: config.disableScroll,\n  });\n\n  const pointerDown = (ev: UIEvent): boolean => {\n    const timeStamp = now(ev);\n    if (hasStartedPan || !hasFiredStart) {\n      return false;\n    }\n\n    updateDetail(ev, detail);\n    detail.startX = detail.currentX;\n    detail.startY = detail.currentY;\n    detail.startTime = detail.currentTime = timeStamp;\n    detail.velocityX = detail.velocityY = detail.deltaX = detail.deltaY = 0;\n    detail.event = ev;\n\n    // Check if gesture can start\n    if (canStart && canStart(detail) === false) {\n      return false;\n    }\n    // Release fallback\n    gesture.release();\n\n    // Start gesture\n    if (!gesture.start()) {\n      return false;\n    }\n\n    hasStartedPan = true;\n    if (threshold === 0) {\n      return tryToCapturePan();\n    }\n    pan.start(detail.startX, detail.startY);\n    return true;\n  };\n\n  const pointerMove = (ev: UIEvent) => {\n    // fast path, if gesture is currently captured\n    // do minimum job to get user-land even dispatched\n    if (hasCapturedPan) {\n      if (!isMoveQueued && hasFiredStart) {\n        isMoveQueued = true;\n        calcGestureData(detail, ev);\n        requestAnimationFrame(fireOnMove);\n      }\n      return;\n    }\n\n    // gesture is currently being detected\n    calcGestureData(detail, ev);\n    if (pan.detect(detail.currentX, detail.currentY)) {\n      if (!pan.isGesture() || !tryToCapturePan()) {\n        abortGesture();\n      }\n    }\n  };\n\n  const fireOnMove = () => {\n    // Since fireOnMove is called inside a RAF, onEnd() might be called,\n    // we must double check hasCapturedPan\n    if (!hasCapturedPan) {\n      return;\n    }\n    isMoveQueued = false;\n    if (onMove) {\n      onMove(detail);\n    }\n  };\n\n  const tryToCapturePan = (): boolean => {\n    if (gesture && !gesture.capture()) {\n      return false;\n    }\n    hasCapturedPan = true;\n    hasFiredStart = false;\n\n    // reset start position since the real user-land event starts here\n    // If the pan detector threshold is big, not resetting the start position\n    // will cause a jump in the animation equal to the detector threshold.\n    // the array of positions used to calculate the gesture velocity does not\n    // need to be cleaned, more points in the positions array always results in a\n    // more accurate value of the velocity.\n    detail.startX = detail.currentX;\n    detail.startY = detail.currentY;\n    detail.startTime = detail.currentTime;\n\n    if (onWillStart) {\n      onWillStart(detail).then(fireOnStart);\n    } else {\n      fireOnStart();\n    }\n    return true;\n  };\n\n  const blurActiveElement = () => {\n    /* tslint:disable-next-line */\n    if (typeof document !== 'undefined') {\n      const activeElement = document.activeElement as HTMLElement | null;\n      if (activeElement !== null && activeElement.blur) {\n        activeElement.blur();\n      }\n    }\n  };\n\n  const fireOnStart = () => {\n    if (blurOnStart) {\n      blurActiveElement();\n    }\n    if (onStart) {\n      onStart(detail);\n    }\n    hasFiredStart = true;\n  };\n\n  const reset = () => {\n    hasCapturedPan = false;\n    hasStartedPan = false;\n    isMoveQueued = false;\n    hasFiredStart = true;\n\n    gesture.release();\n  };\n\n  // END *************************\n\n  const pointerUp = (ev: UIEvent | undefined) => {\n    const tmpHasCaptured = hasCapturedPan;\n    const tmpHasFiredStart = hasFiredStart;\n    reset();\n\n    if (!tmpHasFiredStart) {\n      return;\n    }\n    calcGestureData(detail, ev);\n\n    // Try to capture press\n    if (tmpHasCaptured) {\n      if (onEnd) {\n        onEnd(detail);\n      }\n      return;\n    }\n\n    // Not captured any event\n    if (notCaptured) {\n      notCaptured(detail);\n    }\n  };\n\n  const pointerEvents = createPointerEvents(\n    finalConfig.el,\n    pointerDown,\n    pointerMove,\n    pointerUp,\n    {\n      capture: false,\n      passive,\n    }\n  );\n\n  const abortGesture = () => {\n    reset();\n    pointerEvents.stop();\n    if (notCaptured) {\n      notCaptured(detail);\n    }\n  };\n\n  return {\n    enable(enable = true) {\n      if (!enable) {\n        if (hasCapturedPan) {\n          pointerUp(undefined);\n        }\n\n        reset();\n      }\n      pointerEvents.enable(enable);\n    },\n    destroy() {\n      gesture.destroy();\n      pointerEvents.destroy();\n    },\n  };\n};\n\nconst calcGestureData = (detail: GestureDetail, ev: UIEvent | undefined) => {\n  if (!ev) {\n    return;\n  }\n  const prevX = detail.currentX;\n  const prevY = detail.currentY;\n  const prevT = detail.currentTime;\n\n  updateDetail(ev, detail);\n\n  const currentX = detail.currentX;\n  const currentY = detail.currentY;\n  const timestamp = (detail.currentTime = now(ev));\n  const timeDelta = timestamp - prevT;\n  if (timeDelta > 0 && timeDelta < 100) {\n    const velocityX = (currentX - prevX) / timeDelta;\n    const velocityY = (currentY - prevY) / timeDelta;\n    detail.velocityX = velocityX * 0.7 + detail.velocityX * 0.3;\n    detail.velocityY = velocityY * 0.7 + detail.velocityY * 0.3;\n  }\n  detail.deltaX = currentX - detail.startX;\n  detail.deltaY = currentY - detail.startY;\n  detail.event = ev;\n};\n\nconst updateDetail = (ev: any, detail: GestureDetail) => {\n  // get X coordinates for either a mouse click\n  // or a touch depending on the given event\n  let x = 0;\n  let y = 0;\n  if (ev) {\n    const changedTouches = ev.changedTouches;\n    if (changedTouches && changedTouches.length > 0) {\n      const touch = changedTouches[0];\n      x = touch.clientX;\n      y = touch.clientY;\n    } else if (ev.pageX !== undefined) {\n      x = ev.pageX;\n      y = ev.pageY;\n    }\n  }\n  detail.currentX = x;\n  detail.currentY = y;\n};\n\nconst now = (ev: UIEvent) => {\n  return ev.timeStamp || Date.now();\n};\n\nexport interface GestureDetail {\n  type: string;\n  startX: number;\n  startY: number;\n  startTime: number;\n  currentX: number;\n  currentY: number;\n  velocityX: number;\n  velocityY: number;\n  deltaX: number;\n  deltaY: number;\n  currentTime: number;\n  event: UIEvent;\n  data?: any;\n}\n\nexport type GestureCallback = (detail: GestureDetail) => boolean | void;\n\nexport interface Gesture {\n  enable(enable?: boolean): void;\n  destroy(): void;\n}\n\nexport interface GestureConfig {\n  el: Node;\n  disableScroll?: boolean;\n\n  direction?: 'x' | 'y';\n  gestureName: string;\n  gesturePriority?: number;\n  passive?: boolean;\n  maxAngle?: number;\n  threshold?: number;\n  blurOnStart?: boolean;\n\n  canStart?: GestureCallback;\n  onWillStart?: (_: GestureDetail) => Promise<void>;\n  onStart?: GestureCallback;\n  onMove?: GestureCallback;\n  onEnd?: GestureCallback;\n  notCaptured?: GestureCallback;\n}\n\nexport { GESTURE_CONTROLLER };\n"]}

package/dist/nano-components/p-284dd9a2.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as i,c as t,h as e,a as s,g as n}from"./p-1fe12320.js";import{c as r}from"./p-ee045579.js";import{d as o}from"./p-9746b0a5.js";function h(i,t){function e(e){const s=i.getBoundingClientRect();const n=i.ownerDocument.defaultView;const r=s.left+n.pageXOffset;const o=s.top+n.pageYOffset;const h=e.pageX-r;const a=e.pageY-o;t(h,a)}function s(){document.removeEventListener("pointermove",e);document.removeEventListener("pointerup",s)}document.addEventListener("pointermove",e,{passive:true});document.addEventListener("pointerup",s)}const a=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:grid}.start,.end{overflow:hidden}.divider{flex:0 0 var(--divider-width);display:flex;position:relative;align-items:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical],[disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:flex;content:"";position:absolute;block-size:100%;inset-inline-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);inline-size:var(--divider-hit-area)}:host([vertical]){flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:"";position:absolute;inline-size:100%;inset-block-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);block-size:var(--divider-hit-area)}';const d=class{constructor(e){i(this,e);this.nanoReposition=t(this,"nanoReposition",7);this.nanoDragging=t(this,"nanoDragging",7);this.isAnimating=false;this.didLoad=false;this._shouldAnimate=true;this.handleDrag=i=>{if(this.disabled){return}i.preventDefault();h(this.host,((i,t)=>{let e=this.vertical?t:i;this.nanoDragging.emit(e);if(this.primary==="end"){e=this.size-e}if(this.snap){const i=this.snap.split(" ");i.forEach((i=>{let t;if(i.endsWith("%")){t=this.size*(parseFloat(i)/100)}else{t=parseFloat(i)}if(e>=t-this.snapThreshold&&e<=t+this.snapThreshold){e=t}}))}this.shouldAnimate=false;this.position=r(this.pixelsToPercentage(e),0,100);requestAnimationFrame((()=>this.shouldAnimate=true))}))};this.handleKeyDown=i=>{if(this.disabled){return}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(i.key)){let t=this.position;const e=(i.shiftKey?10:1)*(this.primary==="end"?-1:1);i.preventDefault();if(i.key==="ArrowLeft"&&!this.vertical||i.key==="ArrowUp"&&this.vertical){t-=e}if(i.key==="ArrowRight"&&!this.vertical||i.key==="ArrowDown"&&this.vertical){t+=e}if(i.key==="Home"){t=this.primary==="end"?100:0}if(i.key==="End"){t=this.primary==="end"?0:100}this.shouldAnimate=false;this.position=r(t,0,100);requestAnimationFrame((()=>this.shouldAnimate=true))}};this.handleResize=()=>{if(!this.didLoad||this.isAnimating)return;if(this.primary){this.shouldAnimate=false;this.position=this.pixelsToPercentage(this.cachedPositionInPixels);requestAnimationFrame((()=>this.shouldAnimate=true))}};this.positionInPixels=undefined;this.vertical=false;this.disabled=false;this.primary=undefined;this.snap=undefined;this.snapThreshold=12;this.animationDuration=.6;this.handlePositionChange=o(this.handlePositionChange.bind(this),100)}get size(){const{width:i,height:t}=this.host.getBoundingClientRect();return this.vertical?t:i}get shouldAnimate(){return this.didLoad&&this._shouldAnimate}set shouldAnimate(i){this._shouldAnimate=i}get position(){return this._position}set position(i){i=Math.min(Math.max(i,0),100);if(isNaN(i)||i===this._position)return;if(this.shouldAnimate&&this.animationDuration>0&&!isNaN(this.position)){this.animatePosition(i);return}this._position=i}handlePositionChange(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.positionInPixels=this.percentageToPixels(this.position);this.nanoReposition.emit()}handlePositionInPixelsChange(){this.position=this.pixelsToPercentage(this.positionInPixels)}async getPercentageToPixels(i){return this.percentageToPixels(i)}async getPixelsToPercentage(i){return this.pixelsToPercentage(i)}animatePosition(i){if(this.isAnimating)return;const t=this.animationDuration;const e=60;const s=this.position;const n=i-s;let r=s;let o=0;function h(i,t,e,s){if((i/=s/2)<1)return e/2*i*i+t;else return-e/2*(--i*(i-2)-1)+t}const a=()=>{o+=1/e;r=h(o,s,n,t);if(i>s&&r>=i||i<s&&r<=i){this.position=i;this.shouldAnimate=true;this.isAnimating=false;return}this.position=r;requestAnimationFrame(a)};this.shouldAnimate=false;this.isAnimating=true;requestAnimationFrame(a)}percentageToPixels(i){return this.size*(i/100)}pixelsToPercentage(i){return i/this.size*100}attachRO(){this.detachRO();this.ro=new ResizeObserver((()=>this.handleResize()));this.ro.observe(this.host)}detachRO(){if(!this.ro)return;this.ro.unobserve(this.host);this.ro=undefined}componentDidLoad(){if(this.positionInPixels)this.handlePositionInPixelsChange();setTimeout((()=>this.didLoad=true))}connectedCallback(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.attachRO()}disconnectedCallback(){this.detachRO()}componentDidRender(){requestAnimationFrame((()=>{if(typeof this.position==="undefined"){this.position=50}}))}render(){if(typeof this.position==="undefined")return;const i={};const t=this.vertical?"gridTemplateRows":"gridTemplateColumns";const n=`\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;const r="auto";if(this.primary==="end"){i[t]=`${r} var(--divider-width) ${n}`}else{i[t]=`${n} var(--divider-width) ${r}`}return e(s,{style:i},e("div",{part:"panel start",class:"start"},e("slot",{name:"start"})),e("div",{part:"divider",class:"divider",tabindex:this.disabled?undefined:"0",role:"separator","aria-label":"Resize",onKeyDown:this.handleKeyDown,onMouseDown:this.handleDrag,onTouchStart:this.handleDrag},e("slot",{name:"handle"},!this.disabled&&this.vertical?e("nano-icon",{slot:"handle",name:"solid/grip-lines"}):e("nano-icon",{slot:"handle",name:"solid/grip-lines-vertical"}))),e("div",{part:"panel end",class:"end"},e("slot",{name:"end"})))}get host(){return n(this)}static get watchers(){return{position:["handlePositionChange"],positionInPixels:["handlePositionInPixelsChange"]}}};d.style=a;export{d as nano_split_pane};
-//# sourceMappingURL=p-284dd9a2.entry.js.map

package/dist/nano-components/p-284dd9a2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/utils/drag.ts","src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","src/components/split-pane/split-pane.tsx"],"names":["drag","container","onMove","move","pointerEvent","dims","getBoundingClientRect","defaultView","ownerDocument","offsetX","left","pageXOffset","offsetY","top","pageYOffset","x","pageX","y","pageY","stop","document","removeEventListener","addEventListener","passive","splitPaneCss","SplitPane","[object Object]","hostRef","this","isAnimating","didLoad","_shouldAnimate","handleDrag","e","disabled","preventDefault","host","newPositionInPixels","vertical","nanoDragging","emit","primary","size","snap","snaps","split","forEach","value","snapPoint","endsWith","parseFloat","snapThreshold","shouldAnimate","position","clamp","pixelsToPercentage","requestAnimationFrame","handleKeyDown","event","includes","key","newPosition","incr","shiftKey","handleResize","cachedPositionInPixels","handlePositionChange","debounce","bind","width","height","sa","_position","pos","Math","min","max","isNaN","animationDuration","animatePosition","percentageToPixels","positionInPixels","nanoReposition","end","duration","fps","start","distance","time","easeInOutQuad","t","s","d","go","detachRO","ro","ResizeObserver","observe","unobserve","undefined","handlePositionInPixelsChange","setTimeout","attachRO","styles","gridTemplate","secondary","h","Host","style","part","class","name","tabindex","role","aria-label","onKeyDown","onMouseDown","onTouchStart","slot"],"mappings":"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","sourcesContent":["export function drag(\n  container: HTMLElement,\n  onMove: (x: number, y: number) => void\n) {\n  function move(pointerEvent: PointerEvent) {\n    const dims = container.getBoundingClientRect();\n    const defaultView = container.ownerDocument.defaultView!;\n    const offsetX = dims.left + defaultView.pageXOffset;\n    const offsetY = dims.top + defaultView.pageYOffset;\n    const x = pointerEvent.pageX - offsetX;\n    const y = pointerEvent.pageY - offsetY;\n\n    onMove(x, y);\n  }\n\n  function stop() {\n    document.removeEventListener('pointermove', move);\n    document.removeEventListener('pointerup', stop);\n  }\n\n  document.addEventListener('pointermove', move, { passive: true });\n  document.addEventListener('pointerup', stop);\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --divider-width: The width of the visible divider. Default 4px.\n  * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is\n  *  usually wider than the divider to facilitate easier dragging. Default 12px.\n  * @prop --min: The minimum allowed size of the primary panel. Default 0.\n  * @prop --max: The maximum allowed size of the primary panel. Default 100%.\n  * @prop --background-color: Handle background. Default #{map.get($colors, lightgrey)}.\n  * @prop --content-color: Handle color. Default #{map.get($colors, dimgrey)}.\n  */\n  --divider-width: 12px;\n  --divider-hit-area: 14px;\n  --min: 0%;\n  --max: 100%;\n  --background-color: #{map.get($colors, lightgrey)};\n  --content-color: #{map.get($colors, dimgrey)};\n\n  display: grid;\n}\n\n.start,\n.end {\n  overflow: hidden;\n}\n\n.divider {\n  flex: 0 0 var(--divider-width);\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--background-color);\n  color: var(--content-color);\n  z-index: 1;\n  font-size: 0.8rem;\n}\n\n.divider:focus {\n  outline: none;\n}\n\n:host(:not([disabled])) .divider:focus-visible {\n  background-color: #{$control-focus-color};\n}\n\n:host([disabled]) .divider {\n  cursor: not-allowed;\n}\n\n/* Horizontal */\n:host(:not([vertical], [disabled])) .divider {\n  cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n  display: flex;\n  content: '';\n  position: absolute;\n  block-size: 100%;\n  inset-inline-start: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  inline-size: var(--divider-hit-area);\n}\n\n/* Vertical */\n:host([vertical]) {\n  flex-direction: column;\n}\n\n:host([vertical]:not([disabled])) .divider {\n  cursor: row-resize;\n}\n\n:host([vertical]) .divider::after {\n  content: '';\n  position: absolute;\n  inline-size: 100%;\n  inset-block-start: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  block-size: var(--divider-hit-area);\n}\n","import {\n  Prop,\n  Component,\n  Watch,\n  Event,\n  EventEmitter,\n  ComponentInterface,\n  Element,\n  Host,\n  h,\n  Method,\n} from '@stencil/core';\nimport { drag } from '../../utils/drag';\nimport { clamp } from '../../utils/math';\nimport { debounce } from '../../utils/throttle';\n\n/**\n * Split panes display two adjacent panels, allowing the user to reposition them.\n *\n * @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n *\n * @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n */\n@Component({\n  tag: 'nano-split-pane',\n  styleUrl: 'split-pane.scss',\n  shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n  @Element() host: HTMLNanoSplitPaneElement;\n  private cachedPositionInPixels: number;\n  private ro: ResizeObserver;\n  private isAnimating = false;\n  private didLoad = false;\n\n  private get size() {\n    const { width, height } = this.host.getBoundingClientRect();\n    return this.vertical ? height : width;\n  }\n\n  private get shouldAnimate() {\n    return this.didLoad && this._shouldAnimate;\n  }\n  private set shouldAnimate(sa: boolean) {\n    this._shouldAnimate = sa;\n  }\n  private _shouldAnimate: boolean = true;\n\n  constructor() {\n    this.handlePositionChange = debounce(\n      this.handlePositionChange.bind(this),\n      100\n    );\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge\n   * as a percentage 0-100. Defaults to 50% of the container's initial size.\n   */\n  @Prop()\n  get position() {\n    return this._position;\n  }\n  set position(pos: number) {\n    // override too high / low\n    pos = Math.min(Math.max(pos, 0), 100);\n    if (isNaN(pos) || pos === this._position) return;\n\n    if (\n      this.shouldAnimate &&\n      this.animationDuration > 0 &&\n      !isNaN(this.position)\n    ) {\n      this.animatePosition(pos);\n      return;\n    }\n    this._position = pos;\n  }\n  private _position: number;\n\n  // eslint-disable-next-line @stencil/no-unused-watch\n  @Watch('position')\n  handlePositionChange() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.positionInPixels = this.percentageToPixels(this.position);\n    this.nanoReposition.emit();\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge in pixels.\n   */\n  @Prop({ mutable: true }) positionInPixels: number;\n\n  @Watch('positionInPixels')\n  handlePositionInPixelsChange() {\n    this.position = this.pixelsToPercentage(this.positionInPixels);\n  }\n\n  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */\n  @Prop({ reflect: true }) vertical = false;\n\n  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n   * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n   * host element is resized.\n   */\n  @Prop() primary?: 'start' | 'end';\n\n  /**\n   * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n   * `\"100px 50%\"`.\n   */\n  @Prop() snap?: string;\n\n  /** How close the divider must be to a snap point until snapping occurs. */\n  @Prop() snapThreshold = 12;\n\n  /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */\n  @Prop() animationDuration = 0.6;\n\n  /** Emitted when the divider's position changes. */\n  @Event() nanoReposition: EventEmitter;\n\n  /** Emitted when the divider is being dragged. */\n  @Event() nanoDragging: EventEmitter<number>;\n\n  /** Utility to convert % to pixels */\n  @Method()\n  async getPercentageToPixels(value: number) {\n    return this.percentageToPixels(value);\n  }\n\n  /** Utility to convert pixels to % (`position`) */\n  @Method()\n  async getPixelsToPercentage(value: number) {\n    return this.pixelsToPercentage(value);\n  }\n\n  // Private logic\n\n  private animatePosition(end: number) {\n    if (this.isAnimating) return;\n\n    const duration = this.animationDuration; // seconds\n    const fps = 60;\n    const start = this.position;\n    const distance = end - start;\n\n    let position = start;\n    let time = 0;\n\n    function easeInOutQuad(t: number, s: number, e: number, d: number) {\n      if ((t /= d / 2) < 1) return (e / 2) * t * t + s;\n      else return (-e / 2) * (--t * (t - 2) - 1) + s;\n    }\n\n    const go = () => {\n      time += 1 / fps;\n      position = easeInOutQuad(time, start, distance, duration);\n\n      if (\n        (end > start && position >= end) ||\n        (end < start && position <= end)\n      ) {\n        this.position = end;\n        this.shouldAnimate = true;\n        this.isAnimating = false;\n        return;\n      }\n      this.position = position;\n      requestAnimationFrame(go);\n    };\n\n    this.shouldAnimate = false;\n    this.isAnimating = true;\n    requestAnimationFrame(go);\n  }\n\n  private percentageToPixels(value: number) {\n    return this.size * (value / 100);\n  }\n\n  private pixelsToPercentage(value: number) {\n    return (value / this.size) * 100;\n  }\n\n  private attachRO() {\n    this.detachRO();\n    this.ro = new ResizeObserver(() => this.handleResize());\n    this.ro.observe(this.host);\n  }\n\n  private detachRO() {\n    if (!this.ro) return;\n    this.ro.unobserve(this.host);\n    this.ro = undefined;\n  }\n\n  // Event handlers\n\n  private handleDrag = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    // Prevent text selection when dragging\n    e.preventDefault();\n\n    drag(this.host, (x, y) => {\n      let newPositionInPixels = this.vertical ? y : x;\n\n      this.nanoDragging.emit(newPositionInPixels);\n\n      // Flip for end panels\n      if (this.primary === 'end') {\n        newPositionInPixels = this.size - newPositionInPixels;\n      }\n\n      // Check snap points\n      if (this.snap) {\n        const snaps = this.snap.split(' ');\n\n        snaps.forEach((value) => {\n          let snapPoint: number;\n\n          if (value.endsWith('%')) {\n            snapPoint = this.size * (parseFloat(value) / 100);\n          } else {\n            snapPoint = parseFloat(value);\n          }\n\n          if (\n            newPositionInPixels >= snapPoint - this.snapThreshold &&\n            newPositionInPixels <= snapPoint + this.snapThreshold\n          ) {\n            newPositionInPixels = snapPoint;\n          }\n        });\n      }\n      this.shouldAnimate = false;\n      this.position = clamp(\n        this.pixelsToPercentage(newPositionInPixels),\n        0,\n        100\n      );\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      let newPosition = this.position;\n      const incr =\n        (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n      event.preventDefault();\n\n      if (\n        (event.key === 'ArrowLeft' && !this.vertical) ||\n        (event.key === 'ArrowUp' && this.vertical)\n      ) {\n        newPosition -= incr;\n      }\n\n      if (\n        (event.key === 'ArrowRight' && !this.vertical) ||\n        (event.key === 'ArrowDown' && this.vertical)\n      ) {\n        newPosition += incr;\n      }\n\n      if (event.key === 'Home') {\n        newPosition = this.primary === 'end' ? 100 : 0;\n      }\n\n      if (event.key === 'End') {\n        newPosition = this.primary === 'end' ? 0 : 100;\n      }\n\n      this.shouldAnimate = false;\n\n      this.position = clamp(newPosition, 0, 100);\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    }\n  };\n\n  private handleResize = () => {\n    if (!this.didLoad || this.isAnimating) return;\n\n    // Resize when a primary panel is set\n    if (this.primary) {\n      this.shouldAnimate = false;\n      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    }\n  };\n\n  componentDidLoad(): void {\n    if (this.positionInPixels) this.handlePositionInPixelsChange();\n    setTimeout(() => (this.didLoad = true));\n  }\n\n  connectedCallback() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    this.detachRO();\n  }\n\n  componentDidRender(): void {\n    // bit hacky ... because we use getter / setter for position, there's a render *before* `position` is passed in via attribute\n    // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n    // so - wait a render, see if there's a position passed in via attribute, *then* set default if not\n    requestAnimationFrame(() => {\n      if (typeof this.position === 'undefined') {\n        this.position = 50;\n      }\n    });\n  }\n\n  render() {\n    if (typeof this.position === 'undefined') return;\n    const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n      {};\n    const gridTemplate = this.vertical\n      ? 'gridTemplateRows'\n      : 'gridTemplateColumns';\n    const primary = `\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;\n    const secondary = 'auto';\n\n    if (this.primary === 'end') {\n      styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n    } else {\n      styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n    }\n\n    return (\n      <Host style={styles}>\n        <div part=\"panel start\" class=\"start\">\n          <slot name=\"start\"></slot>\n        </div>\n        <div\n          part=\"divider\"\n          class=\"divider\"\n          tabindex={this.disabled ? undefined : '0'}\n          role=\"separator\"\n          aria-label=\"Resize\"\n          onKeyDown={this.handleKeyDown}\n          onMouseDown={this.handleDrag}\n          onTouchStart={this.handleDrag}\n        >\n          <slot name=\"handle\">\n            {!this.disabled && this.vertical ? (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n            ) : (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n            )}\n          </slot>\n        </div>\n        <div part=\"panel end\" class=\"end\">\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-2a97ef51.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as i,h as e,a as s,g as n}from"./p-1fe12320.js";import{p as a,a as o,c as h}from"./p-cecb9af1.js";import{c as d}from"./p-7b3638b7.js";const r=".sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{display:inline-block;inline-size:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:flex;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;inline-size:0 !important;inline-size:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{align-items:center;display:flex;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;-webkit-appearance:none;appearance:none}.date-field__open.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{-webkit-appearance:none;align-items:center;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:flex;block-size:24px;justify-content:center;padding:0;inline-size:24px}@media (min-width: 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}@media (min-width: 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input nano-icon.sc-nano-date-input{margin-block:0;margin-inline:auto}.date-field.sc-nano-date-input nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";const l={d:"(\\d{1,2})",m:"(\\d{1,2})",y:"(\\d{4})"};let c=0;const u=class{constructor(e){t(this,e);this.nanoChange=i(this,"nanoChange",7);this.nanoValidate=i(this,"nanoValidate",7);this.directInput=false;this.dateOrderIndeces={d:0,m:1,y:3};this.inputId=`nano-input-${c++}`;this.locale=window.navigator.languages||window.navigator.language||undefined;this._dropDownConfig={};this.onInputChange=t=>{t.stopPropagation();this.setValue(t.target.value)};this.onInputValidate=t=>{t.stopPropagation();this._invalid=!t.detail.isValid;this.nanoValidate.emit({isValid:t.detail.isValid,errorMessage:t.detail.errorMessage,originalEvent:t.detail.originalEvent})};this.onInputKey=()=>{this.directInput=true};this.onDatePicked=t=>{this.directInput=false;this.value=t.detail.value;if(this.closeAfterPicked)this.pickerOpen=false};this.onDropdownHide=()=>{setTimeout((t=>this.pickerOpen=false),200);setTimeout((t=>this.trigger.focus()),50)};this.onDropdownShow=()=>{setTimeout((t=>{this.pickerEle.setFocus(false,this.pickerOpenSource==="key");this.pickerOpenSource=null}),200)};this.onTriggerClick=()=>{if(!this.pickerOpen){this.pickerOpen=true;this.pickerOpenSource="mouse"}};this.onTriggerKey=t=>{if([" ","Enter"].includes(t.key)){if(!this.pickerOpen){this.pickerOpen=true;this.pickerOpenSource="key"}}};this.onCloseClick=()=>{if(this.pickerOpen)this.pickerOpen=false};this.onCloseKeyDown=t=>{if(t.key==="Tab"&&t.shiftKey){this.pickerEle.setFocus(true);t.preventDefault()}if(t.key===" "||t.key==="Enter"){if(this.pickerOpen)this.pickerOpen=false}};this.pattern=undefined;this.inputValue=undefined;this._invalid=false;this.helperText=true;this.helperTextFormat={year:"numeric",month:"long",day:"numeric"};this.floatLabel=false;this.name=this.inputId;this.readonly=false;this.size=undefined;this.form=undefined;this.firstDayOfWeek=undefined;this.localization=undefined;this.disabled=false;this.color=undefined;this.autofocus=false;this.clearInput=false;this.label=undefined;this.placeholder=undefined;this.value="";this.validateOn="submitThenDirty";this.showInlineError=true;this.dateOrder="dmy";this.required=false;this.min=undefined;this.max=undefined;this.hideLabel=false;this.picker=true;this.initialPickerDate=undefined;this.pickerOpen=false;this.closeAfterPicked=true;this.isDateDisabled=()=>false}get invalid(){return this._invalid}get validityMessage(){if(!this.input)return"";return this.input.validityMessage}handleValueChange(){if(!this.directInput)this.inputValue=this.formatIsoDate(this.value);setTimeout((()=>{this.nanoChange.emit({value:this.value,date:a(this.value)})}),20);this.directInput=false}handleDateOrderChange(){this.setDatePattern()}testDateValidity(){const t=a(this.value);let i,e,s="";if(this.value&&t){if(this.min&&(i=a(this.min))&&t<i){s="Date below the minimum: "+i.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.max&&(e=a(this.max))&&t>e){s="Date above the maximum: "+e.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.isDateDisabled(t)){s="Date selected is disabled."}}requestAnimationFrame((async i=>{if(!this.input)return;const e=await this.input.getInputElement();if(this.value.length&&!t)s="Please enter a valid date";e.setCustomValidity(s);if(this.input.validateOn==="dirty"){this.input.showError(s)}}))}handlePickerOpenChange(){this.dropdown.open=this.pickerOpen}get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}get dateValue(){return a(this.value)}async reportValidity(t){const i=await this.input.reportValidity(t);if(i.isValid&&t)this.testDateValidity();return await this.input.reportValidity(t)}async setFocus(){if(this.input)this.input.setFocus()}async getInputElement(){return await this.input.getInputElement()}async showError(t){if(!this.input)return;this.input.showError(t)}setDatePattern(){const t=[];const i=[];Array.from(this.dateOrder).map(((e,s)=>{t.push(l[e]);this.dateOrderIndeces[e]=s;i.push(e==="y"?"yyyy":e+e)}));this.pattern=t.join("\\W+");if(!this.placeholder&&this.placeholder!=="false")this.placeholder=i.join(" ")}formatIsoDate(t){const i=[];Array.from("ymd").map((t=>i.push(l[t])));const e=t.match(new RegExp(i.join("\\W+")));if(!e)return"";const s=[];s[this.dateOrderIndeces.d]=e[3];s[this.dateOrderIndeces.m]=e[2];s[this.dateOrderIndeces.y]=e[1];return s.join(" ")}setValue(t){const i=t.match(new RegExp(this.pattern));if(!i){this.value=t;return}let e=h(i[this.dateOrderIndeces.y+1],i[this.dateOrderIndeces.m+1],i[this.dateOrderIndeces.d+1]);if(!e){e=new Date(t);if(!e){this.value=t;return}}const s=o(e);this.value=s;return s}connectedCallback(){this.setDatePattern();this.handleValueChange()}componentDidLoad(){if(!this.pickerCloseBtn||!this.picker)return;this.pickerEle.firstFocusEle=this.pickerCloseBtn;this.dropdown.tetherTo=this.trigger;setTimeout((t=>this.handlePickerOpenChange()),300)}render(){this.locale=navigator.languages||navigator.language||undefined;this.dropDownConfig.placement=this.dropDownConfig.placement||"bottom-end";if(this.host.ownerDocument.dir==="rtl"){this.dropDownConfig.placement.replace("start","end")}if(this.trigger)this.dropDownConfig.tetherTo=this.trigger;const t=a(this.value);const i=!!this.host.querySelector('[slot="helper"]');return e(s,{class:{...d(this.color)}},e("div",{class:"date-field"},e("nano-input",{class:"date-field__input",slot:"trigger",required:this.required||undefined,showInlineError:this.showInlineError,validateOn:this.validateOn,placeholder:this.placeholder!=="false"?this.placeholder:undefined,pattern:this.pattern,label:this.label,disabled:this.disabled||undefined,color:this.color||undefined,autofocus:this.autofocus||undefined,clearInput:this.clearInput||undefined,onNanoChange:this.onInputChange,onNanoInput:this.onInputKey,onNanoValidate:this.onInputValidate,name:"",form:this.form||undefined,size:this.size||undefined,readonly:this.readonly,value:this.inputValue,ref:t=>this.input=t,floatLabel:this.floatLabel,hideLabel:this.hideLabel,inputmode:"numeric",part:"input"},e("slot",{name:"start",slot:"start"}),e("slot",{name:"label"}),e("slot",{name:"end",slot:"end"}),this.picker&&[e("button",{slot:"end",class:"date-field__open",type:"button",onKeyDown:this.onTriggerKey,onClick:this.onTriggerClick,ref:t=>this.trigger=t,disabled:this.disabled||this.readonly},e("nano-icon",{name:"light/calendar-alt"})),e("nano-dropdown",{slot:"end",onNanoHide:this.onDropdownHide,onNanoShow:this.onDropdownShow,dialogTitle:"Choose a date",class:"date-field__dropdown",ref:t=>this.dropdown=t,...this.dropDownConfig,part:"dropdown"},e("div",null,e("div",{class:"date-field__close-bar"},e("button",{class:"date-field__close",type:"button",onMouseDown:this.onCloseClick,onKeyDown:this.onCloseKeyDown,ref:t=>this.pickerCloseBtn=t},e("nano-icon",{name:"light/times"}),e("span",{class:"vhidden"},"Close window"))),e("nano-date-picker",{isDateDisabled:this.isDateDisabled,onNanoDatePicked:this.onDatePicked,min:this.min||undefined,max:this.max||undefined,"is-modal":true,ref:t=>this.pickerEle=t,localization:this.localization,selectedDate:this.value||this.initialPickerDate,firstDayOfWeek:this.firstDayOfWeek,color:this.color||undefined,part:"date-picker"})))],(i||this.helperText||this.showInlineError)&&e("span",{slot:"helper"},e("span",{class:{vhidden:!!this.value.length}},e("slot",{name:"helper"})),this.helperText&&!!t&&e("span",null,t.toLocaleDateString(this.locale,this.helperTextFormat)))),e("input",{type:"hidden",value:this.value,name:this.name})))}get host(){return n(this)}static get watchers(){return{value:["handleValueChange","testDateValidity"],dateOrder:["handleDateOrderChange"],min:["testDateValidity"],max:["testDateValidity"],pickerOpen:["handlePickerOpenChange"]}}};u.style=r;export{u as nano_date_input};
-//# sourceMappingURL=p-2a97ef51.entry.js.map

package/dist/nano-components/p-2a97ef51.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","src/components/date-input/date-input.tsx"],"names":["dateInputCss","DateRegxps","d","m","y","inputIds","DateInput","this","directInput","dateOrderIndeces","inputId","locale","window","navigator","languages","language","undefined","_dropDownConfig","onInputChange","e","stopPropagation","setValue","target","value","onInputValidate","_invalid","detail","isValid","nanoValidate","emit","errorMessage","originalEvent","onInputKey","onDatePicked","closeAfterPicked","pickerOpen","onDropdownHide","setTimeout","_","trigger","focus","onDropdownShow","pickerEle","setFocus","pickerOpenSource","onTriggerClick","onTriggerKey","includes","key","onCloseClick","onCloseKeyDown","shiftKey","preventDefault","year","month","day","invalid","validityMessage","input","[object Object]","inputValue","formatIsoDate","nanoChange","date","parseISODate","setDatePattern","valueDate","min","max","error","toLocaleDateString","helperTextFormat","isDateDisabled","requestAnimationFrame","async","getInputElement","length","setCustomValidity","validateOn","showError","dropdown","open","dropDownConfig","ddc","dateValue","validateFirst","initValidity","reportValidity","testDateValidity","message","dateRegexOrdered","dateStrOrd","Array","from","dateOrder","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","handleValueChange","pickerCloseBtn","picker","firstFocusEle","tetherTo","handlePickerOpenChange","placement","host","ownerDocument","dir","replace","hasHelperSlot","querySelector","h","Host","class","createColorClasses","color","slot","required","showInlineError","label","disabled","autofocus","clearInput","onNanoChange","onNanoInput","onNanoValidate","name","form","size","readonly","ref","floatLabel","hideLabel","inputmode","part","type","onKeyDown","onClick","onNanoHide","onNanoShow","dialogTitle","onMouseDown","pickerClose","onNanoDatePicked","is-modal","localization","selectedDate","initialPickerDate","firstDayOfWeek","helperText","vhidden"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/utilities/globals';\n\n:host {\n  /**\n   * @prop --focus-shadow: defaults to #{$control-focus-style};\n   * @prop --open-btn-color: defaults to #{$button-bg-color};\n   * @prop --open-btn-border: defaults to none;\n   * @prop --close-btn-color: defaults to #{map.get($colors, celsius)};\n   * @prop --picker-base-size: Base font size of the date picker component. Defaults to 16px;\n   */\n\n  display: inline-block;\n  inline-size: 100%;\n\n  --focus-shadow: #{$control-focus-style};\n  --open-btn-color: #{$button-bg-color};\n  --open-btn-border: none;\n  --close-btn-color: #{$button-bg-color};\n  --picker-base-size: 16px;\n}\n\n:host(.nano-color) {\n  --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\nnano-icon {\n  pointer-events: none;\n}\n\n.date-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  &__dropdown {\n    --padding: 0;\n    --overflow: visible;\n\n    padding: 0 !important;\n    inline-size: 0 !important;\n    inline-size: 100%;\n    z-index: $layer-index-dropdown !important;\n  }\n\n  &__close-bar {\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border: 0;\n    margin: 0;\n    overflow: visible;\n    padding: 0;\n    position: absolute;\n    inset-inline-end: -8px;\n    inset-block-start: -8px;\n    inline-size: auto;\n    z-index: 1;\n  }\n\n  &__open {\n    background: var(--open-btn-color);\n    border: var(--open-btn-border);\n    margin: 0;\n    appearance: none;\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n    }\n  }\n\n  &__close {\n    -webkit-appearance: none;\n    align-items: center;\n    appearance: none;\n    background: var(--close-btn-color);\n    border: 0;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    block-size: 24px;\n    justify-content: center;\n    padding: 0;\n    inline-size: 24px;\n\n    @media (min-width: 36em) {\n      opacity: 0;\n    }\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n\n      @media (min-width: 36em) {\n        opacity: 1;\n      }\n    }\n\n    nano-icon {\n      margin-block: 0;\n      margin-inline: auto;\n    }\n  }\n\n  nano-date-picker {\n    font-size: var(--picker-base-size);\n  }\n}\n\n.vhidden {\n  @include visually-hide();\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  h,\n  Prop,\n  Watch,\n  State,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n} from '@stencil/core';\nimport {\n  createDate,\n  DaysOfWeek,\n  printISODate,\n  parseISODate,\n} from '../../utils/date-utils';\n\nimport { createColorClasses } from '../../utils/theme';\nimport type {\n  PickerChangeEvent,\n  DateInputChangeEventDetail,\n  Color,\n  LocalDateOpts,\n  DuetLocalizedText,\n  ControlValidity,\n  ControlValidityEventDetail,\n  DateDisabledPredicate,\n  NanoInputCustomEvent,\n  InputChangeEventDetail,\n} from '../../interface';\nimport type { Dropdown } from '../dropdown/dropdown';\n\nconst DateRegxps = {\n  d: '(\\\\d{1,2})',\n  m: '(\\\\d{1,2})',\n  y: '(\\\\d{4})',\n};\n\nlet inputIds = 0;\n\n/**\n * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.\n *\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot start - input start slot\n * @slot end - input end slot\n */\n@Component({\n  tag: 'nano-date-input',\n  styleUrl: 'date-input.scss',\n  scoped: true,\n})\nexport class DateInput implements ComponentInterface {\n  private pickerEle!: HTMLNanoDatePickerElement;\n  private trigger!: HTMLButtonElement;\n  private pickerCloseBtn!: HTMLButtonElement;\n  private dropdown!: HTMLNanoDropdownElement;\n  private input: HTMLNanoInputElement;\n  private pickerOpenSource: 'key' | 'mouse';\n\n  private directInput = false;\n  private dateOrderIndeces = { d: 0, m: 1, y: 3 };\n  private inputId = `nano-input-${inputIds++}`;\n  private locale =\n    (window.navigator.languages as string[]) ||\n    window.navigator.language ||\n    undefined;\n\n  @Element() host: HTMLNanoDateInputElement;\n\n  // Private state\n\n  @State() pattern!: string;\n  @State() inputValue: string;\n\n  // Public Api / Prop\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.input) return '';\n    return this.input.validityMessage;\n  }\n\n  /**\n   * Whether to show a long form, confirmation date string of the one currently entered\n   */\n  @Prop() helperText: boolean = true;\n\n  /**\n   * Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.\n   */\n  @Prop() helperTextFormat: LocalDateOpts = {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  };\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The initial size (number of characters) of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @Prop() firstDayOfWeek?: DaysOfWeek;\n\n  /**\n   * Button labels, day names, month names, etc, used for localization.\n   * Default is English.\n   */\n  @Prop() localization?: DuetLocalizedText;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n   */\n  @Prop() clearInput = false;\n\n  /**\n   * String to place within a label element. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   * The pattern prop will be used to create a placeholder automatically if unused.\n   */\n  @Prop({ mutable: true }) placeholder: string;\n\n  /**\n   * Current value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.directInput) this.inputValue = this.formatIsoDate(this.value);\n    setTimeout(() => {\n      this.nanoChange.emit({\n        value: this.value,\n        date: parseISODate(this.value),\n      });\n    }, 20);\n    this.directInput = false;\n  }\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop() validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * The order of the date parts for entry and display.\n   * e.g. dmy = dd mm yyyy\n   */\n  @Prop() dateOrder: 'dmy' | 'mdy' | 'ymd' | 'dym' = 'dmy';\n\n  @Watch('dateOrder')\n  handleDateOrderChange() {\n    this.setDatePattern();\n  }\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() min?: string;\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() max?: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  @Watch('min')\n  @Watch('max')\n  @Watch('value')\n  testDateValidity() {\n    const valueDate = parseISODate(this.value);\n\n    let min: Date,\n      max: Date,\n      error: string = '';\n\n    if (this.value && valueDate) {\n      if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n        error =\n          'Date below the minimum: ' +\n          min.toLocaleDateString(this.locale, this.helperTextFormat);\n      }\n      if (this.max && (max = parseISODate(this.max)) && valueDate > max) {\n        error =\n          'Date above the maximum: ' +\n          max.toLocaleDateString(this.locale, this.helperTextFormat);\n      }\n      if (this.isDateDisabled(valueDate)) {\n        error = 'Date selected is disabled.';\n      }\n    }\n\n    requestAnimationFrame(async (_) => {\n      if (!this.input) return;\n      const input = await this.input.getInputElement();\n      if (this.value.length && !valueDate) error = 'Please enter a valid date';\n\n      input.setCustomValidity(error);\n      if (this.input.validateOn === 'dirty') {\n        this.input.showError(error);\n      }\n    });\n  }\n\n  /**\n   * Show a date picker. Date pickers are not very useful\n   * if the potential input is too far in the distance or past\n   * e.g. Birthdays\n   */\n  @Prop() picker: boolean = true;\n\n  /**\n   * Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\n   * Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop() initialPickerDate?: string;\n\n  /**\n   * Set / read whether the picker is currently open.\n   */\n  @Prop({ reflect: true, mutable: true }) pickerOpen: boolean = false;\n\n  @Watch('pickerOpen')\n  handlePickerOpenChange() {\n    this.dropdown.open = this.pickerOpen;\n  }\n\n  /**\n   * Close the picker after a date is selected\n   */\n  @Prop() closeAfterPicked: boolean = true;\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop()\n  get dropDownConfig() {\n    return this._dropDownConfig;\n  }\n  set dropDownConfig(ddc: Partial<Dropdown>) {\n    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n  }\n  private _dropDownConfig: Partial<Dropdown> = {};\n\n  /** @readonly get the value as a `Date` */\n  @Prop()\n  get dateValue() {\n    return parseISODate(this.value);\n  }\n\n  /** Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   * @returns `false` for not disabled and `true` for disabled */\n  @Prop() isDateDisabled: DateDisabledPredicate = () => false;\n\n  // Event emitters\n\n  /**\n   * Event emitted when a date is selected.\n   */\n  @Event() nanoChange: EventEmitter<DateInputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    const initValidity = await this.input.reportValidity(validateFirst);\n    if (initValidity.isValid && validateFirst) this.testDateValidity();\n    return await this.input.reportValidity(validateFirst);\n  }\n\n  /**\n   * Sets focus on the child `nano-input`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) this.input.setFocus();\n  }\n\n  /**\n   * Returns the native `<input>` element used under the hood.\n   */\n  @Method()\n  async getInputElement() {\n    return await this.input.getInputElement();\n  }\n\n  /**\n   * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (!this.input) return;\n    this.input.showError(message);\n  }\n\n  // Event handlers\n\n  private onInputChange = (e: NanoInputCustomEvent<InputChangeEventDetail>) => {\n    e.stopPropagation();\n    this.setValue(e.target.value);\n  };\n\n  private onInputValidate = (e: CustomEvent<ControlValidityEventDetail>) => {\n    e.stopPropagation();\n    this._invalid = !e.detail.isValid;\n\n    this.nanoValidate.emit({\n      isValid: e.detail.isValid,\n      errorMessage: e.detail.errorMessage,\n      originalEvent: e.detail.originalEvent,\n    });\n  };\n\n  private onInputKey = () => {\n    this.directInput = true;\n  };\n\n  private onDatePicked = (e: { detail: PickerChangeEvent }) => {\n    this.directInput = false;\n    this.value = e.detail.value;\n    if (this.closeAfterPicked) this.pickerOpen = false;\n  };\n\n  private onDropdownHide = () => {\n    setTimeout((_) => (this.pickerOpen = false), 200);\n    setTimeout((_) => this.trigger.focus(), 50);\n  };\n\n  private onDropdownShow = () => {\n    setTimeout((_) => {\n      this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');\n      this.pickerOpenSource = null;\n    }, 200);\n  };\n\n  private onTriggerClick = () => {\n    if (!this.pickerOpen) {\n      this.pickerOpen = true;\n      this.pickerOpenSource = 'mouse';\n    }\n  };\n\n  private onTriggerKey = (e: KeyboardEvent) => {\n    if ([' ', 'Enter'].includes(e.key)) {\n      if (!this.pickerOpen) {\n        this.pickerOpen = true;\n        this.pickerOpenSource = 'key';\n      }\n    }\n  };\n\n  private onCloseClick = () => {\n    if (this.pickerOpen) this.pickerOpen = false;\n  };\n\n  private onCloseKeyDown = (e: KeyboardEvent) => {\n    // this ensures focus is trapped inside the picker\n    if (e.key === 'Tab' && e.shiftKey) {\n      this.pickerEle.setFocus(true);\n      e.preventDefault();\n    }\n    if (e.key === ' ' || e.key === 'Enter') {\n      if (this.pickerOpen) this.pickerOpen = false;\n    }\n  };\n\n  // Private logic\n\n  // set the regexp input pattern and placeholder (if necessary)\n  private setDatePattern() {\n    const dateRegexOrdered = [];\n    const dateStrOrd = [];\n    Array.from(this.dateOrder).map((datepart, i) => {\n      dateRegexOrdered.push(DateRegxps[datepart]);\n      this.dateOrderIndeces[datepart] = i;\n      dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);\n    });\n    this.pattern = dateRegexOrdered.join('\\\\W+');\n\n    if (!this.placeholder && this.placeholder !== 'false')\n      this.placeholder = dateStrOrd.join(' ');\n  }\n\n  // set the public facing date string\n  private formatIsoDate(isoDate: string) {\n    const dateRegexOrdered = [];\n    Array.from('ymd').map((datepart) =>\n      dateRegexOrdered.push(DateRegxps[datepart])\n    );\n    const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\\\W+')));\n    if (!matches) return '';\n\n    const formatted = [];\n    formatted[this.dateOrderIndeces.d] = matches[3];\n    formatted[this.dateOrderIndeces.m] = matches[2];\n    formatted[this.dateOrderIndeces.y] = matches[1];\n\n    return formatted.join(' ');\n  }\n\n  // on manual user entry, set the value that will be sent with the form field\n  private setValue(inputValue: string) {\n    const matches = inputValue.match(new RegExp(this.pattern));\n\n    // it's an invalid date, but we still need to set it\n    if (!matches) {\n      this.value = inputValue;\n      return;\n    }\n\n    let date = createDate(\n      matches[this.dateOrderIndeces.y + 1],\n      matches[this.dateOrderIndeces.m + 1],\n      matches[this.dateOrderIndeces.d + 1]\n    );\n\n    if (!date) {\n      // last ditch attempt - see if the browser can get something\n      date = new Date(inputValue);\n\n      // it's definitely an invalid date, but set it anyway for validation messages\n      if (!date) {\n        this.value = inputValue;\n        return;\n      }\n    }\n\n    const dateStr = printISODate(date);\n    this.value = dateStr;\n    return dateStr;\n  }\n\n  connectedCallback() {\n    this.setDatePattern();\n    this.handleValueChange();\n  }\n\n  componentDidLoad() {\n    if (!this.pickerCloseBtn || !this.picker) return;\n    this.pickerEle.firstFocusEle = this.pickerCloseBtn;\n    this.dropdown.tetherTo = this.trigger;\n    setTimeout((_) => this.handlePickerOpenChange(), 300);\n  }\n\n  render() {\n    this.locale =\n      (navigator.languages as string[]) || navigator.language || undefined;\n\n    this.dropDownConfig.placement =\n      this.dropDownConfig.placement || 'bottom-end';\n\n    if ((this.host.ownerDocument as Document).dir === 'rtl') {\n      this.dropDownConfig.placement.replace('start', 'end');\n    }\n    if (this.trigger) this.dropDownConfig.tetherTo = this.trigger;\n\n    const valueDate = parseISODate(this.value);\n    const hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div class=\"date-field\">\n          <nano-input\n            class=\"date-field__input\"\n            slot=\"trigger\"\n            required={this.required || undefined}\n            showInlineError={this.showInlineError}\n            validateOn={this.validateOn}\n            placeholder={\n              this.placeholder !== 'false' ? this.placeholder : undefined\n            }\n            pattern={this.pattern}\n            label={this.label}\n            disabled={this.disabled || undefined}\n            color={this.color || undefined}\n            autofocus={this.autofocus || undefined}\n            clearInput={this.clearInput || undefined}\n            onNanoChange={this.onInputChange}\n            onNanoInput={this.onInputKey}\n            onNanoValidate={this.onInputValidate}\n            name=\"\"\n            form={this.form || undefined}\n            size={this.size || undefined}\n            readonly={this.readonly}\n            value={this.inputValue}\n            ref={(input) => (this.input = input)}\n            floatLabel={this.floatLabel}\n            hideLabel={this.hideLabel}\n            inputmode={'numeric'}\n            part=\"input\"\n          >\n            <slot name=\"start\" slot=\"start\" />\n            <slot name=\"label\" />\n            <slot name=\"end\" slot=\"end\" />\n            {this.picker && [\n              <button\n                slot=\"end\"\n                class=\"date-field__open\"\n                type=\"button\"\n                onKeyDown={this.onTriggerKey}\n                onClick={this.onTriggerClick}\n                ref={(trigger) => (this.trigger = trigger)}\n                disabled={this.disabled || this.readonly}\n              >\n                <nano-icon name=\"light/calendar-alt\"></nano-icon>\n              </button>,\n\n              <nano-dropdown\n                slot=\"end\"\n                onNanoHide={this.onDropdownHide}\n                onNanoShow={this.onDropdownShow}\n                dialogTitle=\"Choose a date\"\n                class=\"date-field__dropdown\"\n                ref={(dropdown) => (this.dropdown = dropdown)}\n                {...this.dropDownConfig}\n                part=\"dropdown\"\n              >\n                <div>\n                  <div class=\"date-field__close-bar\">\n                    <button\n                      class=\"date-field__close\"\n                      type=\"button\"\n                      onMouseDown={this.onCloseClick}\n                      onKeyDown={this.onCloseKeyDown}\n                      ref={(pickerClose) => (this.pickerCloseBtn = pickerClose)}\n                    >\n                      <nano-icon name=\"light/times\"></nano-icon>\n                      <span class=\"vhidden\">Close window</span>\n                    </button>\n                  </div>\n                  <nano-date-picker\n                    isDateDisabled={this.isDateDisabled}\n                    onNanoDatePicked={this.onDatePicked}\n                    min={this.min || undefined}\n                    max={this.max || undefined}\n                    is-modal={true}\n                    ref={(picker) => (this.pickerEle = picker)}\n                    localization={this.localization}\n                    selectedDate={this.value || this.initialPickerDate}\n                    firstDayOfWeek={this.firstDayOfWeek}\n                    color={this.color || undefined}\n                    part=\"date-picker\"\n                  ></nano-date-picker>\n                </div>\n              </nano-dropdown>,\n            ]}\n            {(hasHelperSlot || this.helperText || this.showInlineError) && (\n              <span slot=\"helper\">\n                <span class={{ vhidden: !!this.value.length }}>\n                  <slot name=\"helper\" />\n                </span>\n                {this.helperText && !!valueDate && (\n                  <span>\n                    {valueDate.toLocaleDateString(\n                      this.locale,\n                      this.helperTextFormat\n                    )}\n                  </span>\n                )}\n              </span>\n            )}\n          </nano-input>\n          <input type=\"hidden\" value={this.value} name={this.name} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-36842a50.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as i,h as a,a as e,g as s}from"./p-1fe12320.js";import{M as n}from"./p-c9a7c7ea.js";import{l as r,u as o}from"./p-885b6950.js";import{c as l}from"./p-7b3638b7.js";import"./p-45abbbdd.js";import"./p-845ae77e.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-block-start-width:4px;border-block-start-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;transform:scale(0.9);transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert--toasty,.alert--modal{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));margin:var(--nano-spacing-medium, 16px)}.alert__content{display:flex;align-items:stretch}.alert__modal-wrap{position:fixed;display:flex;align-items:center;justify-content:center;inset:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{--color:var(--close-button-color);flex:0 0 auto;display:flex;align-items:center;font-size:1.1em;padding-inline:0 var(--nano-spacing-medium, 16px);padding-block:0}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:flex;flex-direction:row;justify-content:space-around;align-items:center}.alert__footer ::slotted(*){flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.alert__overlay--open{opacity:1}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--icon-size)}.alert__icon ::slotted(*){color:var(--tint-color);margin-inline-start:var(--nano-spacing-medium, 16px)}";const c=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"});const d=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"});const u=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"});const f=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"});const m=class{constructor(e){t(this,e);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7);this.addedTransEnd=false;this.goingToHide=false;this.goingToShow=false;this.handleMouseMove=()=>{this.restartAutoHide()};this.handleCloseClick=()=>{this.hide()};this.handleTransitionEnd=t=>{if(t.propertyName==="opacity"&&(t.target===this.panel||t.target===this.overlay)){this.host.hidden=!this.open;this.isShowing=this.open;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleButtonClick=t=>{if(t.defaultPrevented)return;if(t.target.tagName&&t.target.tagName.toLowerCase()==="button")this.hide()};this.restartAutoHide=()=>{clearTimeout(this.autoHideTimeout);if(this.open&&this.duration<Infinity){this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}};this.Panel=()=>a("div",{ref:t=>this.panel=t,part:"panel",class:{alert:true,"alert--open":this.open,"alert--toasty":this.isToast,"alert--modal":!!this.isModal,"alert--showing":this.isShowing},role:!!this.isModal?"alertdialog":"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true","aria-modal":!!this.isModal?"true":undefined,"aria-label":this.label?this.label:undefined,onMouseMove:this.handleMouseMove,tabIndex:!!this.isModal?0:undefined},a("div",{class:"alert__content"},a("div",{part:"icon",class:"alert__icon"},a("slot",{name:"icon"})),a("div",{part:"message",class:"alert__message"},a("slot",null)),this.closable&&a("div",{class:"alert__close"},a("nano-icon-button",{class:"alert__close",iconName:"light/times",label:"close menu",onClick:this.handleCloseClick}))),a("div",{class:"alert__footer"},a("slot",{name:"footer"})));this.isModal=false;this.isToast=false;this.isShowing=false;this.label=undefined;this.open=false;this.closable=false;this.color=undefined;this.duration=Infinity}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}async show(){if(this.goingToShow){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return false}this.host.hidden=false;this.goingToShow=true;this.open=true;requestAnimationFrame((()=>{this.isShowing=true;this.goingToShow=false}));if(this.duration<Infinity){clearTimeout(this.autoHideTimeout);this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}}async hide(){if(this.goingToHide){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return false}this.goingToHide=true;this.open=false;requestAnimationFrame((()=>this.goingToHide=false));clearTimeout(this.autoHideTimeout)}async toast(t="tr"){this.isToast=true;return new Promise((i=>{let a;switch(t){case"tl":a=d;break;case"bl":a=u;break;case"br":a=f;break;default:a=c;break}if(!a.parentElement){document.body.appendChild(a)}a.appendChild(this.host);this.connectedCallback();this.show();const e=()=>{this.host.remove();this.isToast=false;i();if(!a.querySelector("nano-alert")){a.remove()}};this.host.addEventListener("nanoAfterHide",e,{once:true});this.host.addEventListener("nanoafterhide",e,{once:true})}))}async alert(t){this.isModal=true;this.label=t;return new Promise((t=>{if(!document.body.contains(this.host)){document.body.appendChild(this.host)}this.modal.activate();r(this.host);this.originalTrigger=document.activeElement;requestAnimationFrame((()=>{this.show()}));const i=()=>requestAnimationFrame((()=>this.panel.focus({preventScroll:true})));const a=()=>{this.modal.deactivate();this.host.remove();this.label=undefined;this.isModal=false;t();if(this.originalTrigger&&typeof this.originalTrigger.focus==="function"){setTimeout((()=>this.originalTrigger.focus()))}};this.host.addEventListener("nanoAfterShow",i,{once:true});this.host.addEventListener("nanoaftershow",i,{once:true});this.host.addEventListener("nanoAfterHide",a,{once:true});this.host.addEventListener("nanoafterhide",a,{once:true})}))}connectedCallback(){this.modal=new n(this.host);this.host.addEventListener("click",this.handleButtonClick);if(this.panel){this.addedTransEnd=true;this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}disconnectedCallback(){o(this.host);this.host.removeEventListener("click",this.handleButtonClick);this.addedTransEnd=false;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}componentDidLoad(){if(this.open){this.show()}if(!this.addedTransEnd){this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}render(){return a(e,{class:{...l(this.color)},showing:this.isShowing},this.isModal&&[a("div",{part:"overlay",class:{alert__overlay:true,"alert__overlay--open":this.open},ref:t=>this.overlay=t}),a("div",{class:"alert__modal-wrap"},a(this.Panel,null))],!this.isModal&&a(this.Panel,null))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}}};m.style=h;export{m as nano_alert};
-//# sourceMappingURL=p-36842a50.entry.js.map

package/dist/nano-components/p-36842a50.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"names":["alertCss","toastStackTr","Object","assign","document","createElement","className","toastStackTl","toastStackBl","toastStackBr","Alert","this","addedTransEnd","goingToHide","goingToShow","handleMouseMove","restartAutoHide","handleCloseClick","hide","handleTransitionEnd","event","propertyName","target","panel","overlay","host","hidden","open","isShowing","nanoAfterShow","emit","nanoAfterHide","handleButtonClick","e","defaultPrevented","tagName","toLowerCase","clearTimeout","autoHideTimeout","duration","Infinity","setTimeout","Panel","h","ref","el","part","class","alert","alert--open","alert--toasty","isToast","alert--modal","isModal","alert--showing","role","aria-live","aria-atomic","aria-hidden","aria-modal","undefined","aria-label","label","onMouseMove","tabIndex","name","closable","iconName","onClick","[object Object]","show","nanoShow","requestAnimationFrame","nanoHide","position","Promise","resolve","toastStack","parentElement","body","appendChild","connectedCallback","onClose","remove","querySelector","addEventListener","once","contains","modal","activate","lockBodyScrolling","originalTrigger","activeElement","onOpen","focus","preventScroll","deactivate","Modal","unlockBodyScrolling","removeEventListener","Host","createColorClasses","color","showing","alert__overlay","alert__overlay--open","div"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --border-radius: defaults to #{$layer-border-radius};\n   * @prop --border-color: defaults to #{$layer-border-color};\n   * @prop --border-width: defaults to #{$layer-border-width};\n   * @prop --background: defaults to #{$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{map.get($colors, mediumgrey)} ;\n   */\n\n  --border-radius: #{$layer-border-radius};\n  --border-color: #{$layer-border-color};\n  --border-width: #{$layer-border-width};\n  --background: #{$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{$layer-overlay-dark};\n  --close-button-color: #{map.get($colors, palegrey)};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-block-start-width: 4px;\n  border-block-start-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    #{$transition-medium} opacity ease,\n    #{$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty,\n  &--modal {\n    box-shadow: #{$layer-shadow-large};\n    margin: #{$spacing-medium};\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  --color: var(--close-button-color);\n\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  padding-inline: 0 #{$spacing-medium};\n  padding-block: 0;\n}\n\n.alert__footer {\n  padding: 0 #{$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*) {\n    flex: 1;\n    margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n  }\n}\n\n.alert__overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: #{$transition-fast} opacity;\n  z-index: #{$layer-index-alert};\n  backdrop-filter: blur(#{$layer-overlay-blur});\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  ::slotted(*) {\n    color: var(--tint-color);\n    margin-inline-start: #{$spacing-medium};\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  VNode,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { createColorClasses } from '../../utils/theme';\nimport type { Color } from '../../interface';\n\nconst toastStackTr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tr',\n});\nconst toastStackTl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tl',\n});\nconst toastStackBl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--bl',\n});\nconst toastStackBr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--br',\n});\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private addedTransEnd = false;\n  private goingToHide = false;\n  private goingToShow = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    if (this.goingToShow) {\n      return;\n    }\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.goingToShow = true;\n    this.open = true;\n    requestAnimationFrame(() => {\n      this.isShowing = true;\n      this.goingToShow = false;\n    });\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    if (this.goingToHide) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n    this.goingToHide = true;\n    this.open = false;\n\n    requestAnimationFrame(() => (this.goingToHide = false));\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>((resolve) => {\n      let toastStack: HTMLElement;\n      switch (position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      const onClose = () => {\n        this.host.remove();\n        this.isToast = false;\n        resolve();\n\n        // Remove the toast stack from the DOM when there are no more alerts\n        if (!toastStack.querySelector('nano-alert')) {\n          toastStack.remove();\n        }\n      };\n\n      this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n      this.host.addEventListener('nanoafterhide', onClose, { once: true });\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>((resolve) => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      requestAnimationFrame(() => {\n        this.show();\n      });\n\n      const onOpen = () =>\n        requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));\n\n      const onClose = () => {\n        this.modal.deactivate();\n        this.host.remove();\n        this.label = undefined;\n        this.isModal = false;\n        resolve();\n\n        // Restore focus to the original trigger\n        if (\n          this.originalTrigger &&\n          typeof this.originalTrigger.focus === 'function'\n        ) {\n          setTimeout(() => this.originalTrigger.focus());\n        }\n      };\n\n      this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n      this.host.addEventListener('nanoaftershow', onOpen, { once: true });\n\n      this.host.addEventListener('nanoAfterHide', onClose, {\n        once: true,\n      });\n      this.host.addEventListener('nanoafterhide', onClose, {\n        once: true,\n      });\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  };\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      (event.target === this.panel || event.target === this.overlay)\n    ) {\n      this.host.hidden = !this.open;\n      this.isShowing = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n    if (e.defaultPrevented) return;\n    if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n      this.hide();\n  };\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  };\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    this.host.addEventListener('click', this.handleButtonClick);\n\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  private Panel = (): VNode => {\n    return (\n      <div\n        ref={(el) => (this.panel = el)}\n        part=\"panel\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--toasty': this.isToast,\n          'alert--modal': !!this.isModal,\n          'alert--showing': this.isShowing,\n        }}\n        role={!!this.isModal ? 'alertdialog' : 'alert'}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        aria-modal={!!this.isModal ? 'true' : undefined}\n        aria-label={this.label ? this.label : undefined}\n        onMouseMove={this.handleMouseMove}\n        tabIndex={!!this.isModal ? 0 : undefined}\n      >\n        <div class=\"alert__content\">\n          <div part=\"icon\" class=\"alert__icon\">\n            <slot name=\"icon\" />\n          </div>\n          <div part=\"message\" class=\"alert__message\">\n            <slot />\n          </div>\n          {this.closable && (\n            <div class=\"alert__close\">\n              <nano-icon-button\n                class=\"alert__close\"\n                iconName=\"light/times\"\n                label=\"close menu\"\n                onClick={this.handleCloseClick}\n              ></nano-icon-button>\n            </div>\n          )}\n        </div>\n        <div class=\"alert__footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        showing={this.isShowing}\n      >\n        {this.isModal && [\n          <div\n            part=\"overlay\"\n            class={{\n              alert__overlay: true,\n              'alert__overlay--open': this.open,\n            }}\n            ref={(div) => (this.overlay = div)}\n          />,\n          <div class=\"alert__modal-wrap\">\n            <this.Panel />\n          </div>,\n        ]}\n        {!this.isModal && <this.Panel />}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-3a1026d1.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as e,c as n,h as t,a as s,g as a}from"./p-1fe12320.js";const l=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block;flex:1 1 100%}.main-search{display:flex;background:white;font-size:14px;min-height:calc(100vh - 63px);justify-content:space-between}.main-search__wrap{display:contents;height:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button:not(.result__tags-tag){-webkit-appearance:none;appearance:none;border:none;background:none;position:relative;inset-block-start:-2px}.main-search .icon-button{color:inherit;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.main-search__topbar{display:flex;align-items:center;flex-wrap:wrap;margin-block-end:1em}.main-search__topbar::after{content:"";width:calc(100% - 30px);inset-inline-start:30px;position:relative;border-block-end:1px solid #e5eef1;padding-block-start:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:flex;align-items:center;line-height:0.9;padding:5px 5px 0 5px;letter-spacing:2px;flex-wrap:wrap;margin-block-end:0.5rem}.main-search__applied-filters span{display:flex;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-inline:0 5px;margin-block:0 3px;padding-inline:7px;padding-block:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}.main-search__applied-filter{padding-inline:8px 2px;padding-block:5px 3px;margin-inline:0 5px;margin-block:0 5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}.main-search__applied-filter .icon-button{padding-inline:10px 4px;padding-block:2px 1px}.main-search__applied-filter .icon-button nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;inset-inline-start:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:flex;align-items:center;margin-block:0;margin-inline:1em 0;flex:1}.main-search .topbar__order{min-width:175px;max-width:200px;margin-inline-start:auto}:host(.small) .main-search .topbar__order{max-width:300px}.main-search .topbar nano-select{opacity:1;transition:0.1s ease opacity}.main-search .topbar nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-inline-start:0.5em;text-transform:uppercase;display:none;flex-direction:column;align-items:center}.main-search .topbar__show-filters nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:flex}.main-search .topbar__filter-count{width:12px;height:12px;box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;margin-block-end:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);width:70%;height:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{width:100%}.main-search__filters{outline:none;padding-inline:0 40px;padding-block:1.8em 1em;flex:1 1 30%;box-sizing:border-box}@media (max-width: 576px){.main-search__filters{padding-inline-end:20px}}:host(:not(.small)) .main-search__filters{max-width:350px;min-width:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;width:0;height:0;z-index:10;inset-block-start:0;inset-inline-end:0;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{height:100vh;width:100vw;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:"";background:rgba(0, 0, 0, 0.5);position:absolute;inset:0;z-index:-1;opacity:0;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-inline:auto 0;margin-block:0}.filters__old-posts{margin-inline-start:1rem}:host(.small) .filters-wrap{position:absolute;inset-block-start:0;inset-inline-end:0;background:#f7f6f6;transform:translateX(100%);width:300px;min-width:200px;max-width:80vw;transition:transform 0.3s ease;padding:1em;color:black;overflow:auto;height:100vh}:host(.small) .filters.show .filters-wrap{transform:translateX(0%);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters nano-details{--padding:0.8em;margin:0.8em 0}.filters nano-details strong[slot]{display:block;padding-inline-start:calc(20px - 0.8em)}.filters nano-details nano-icon[slot=icon-end]{padding-inline-start:calc(20px - 0.8em);padding-inline-end:calc(20px - 0.8em)}.filters li:last-child .filter-label{margin-block-end:0}.filters .filter-label{display:flex;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-inline:0 1em;margin-block:0;content:"";border:1px solid #007495;background:#fff;border-radius:3px;height:1em;width:1em;min-width:1em;min-height:1em;display:inline-block}.filters .filter-label::after{background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns=\'http://www.w3.org/2000/svg\'%20viewBox=\'0%200%20512%20512\'><path%20fill=\'%23ffffff\'%20d=\'M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z\'/></svg>");content:"";height:0.7em;width:0.7em;position:absolute;inset-inline-start:2px;inset-block-start:50%;transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}.filters .filter-cb{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7)}.filters-header{display:flex;align-items:center;border-block-end:1px solid #90c6e7;padding-block-end:0.5rem;margin-block-end:0.5rem}.filters-reset{color:#007495;font-size:12px;text-decoration:underline;margin-inline:auto 0;margin-block:0}:host(.small) .filters-reset{margin:0}.filters-title{margin:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:flex;flex-wrap:wrap;flex-direction:row;padding-block-end:14px;border-block-end:1px solid #90c6e7}.result *{word-wrap:break-word;word-break:break-word}.result__title{margin:1em 0 0.5em 0;width:70%;display:flex}.result__title a{color:#0084a9;font-size:14px;line-height:1.43;text-decoration:none;font-weight:600}.result__title nano-icon{margin-inline:0 0.5em;margin-block:0;min-width:20px;min-height:20px;opacity:0.8}@media (max-width: 992px){.result__title{width:100%}}.result__body{color:#455556;font-size:13px;width:70%;text-decoration:none}@media (max-width: 992px){.result__body{width:100%}}.result__pdf{display:inline-block;margin-inline-start:0.5rem;color:#b5aea7}.result__meta{display:flex;flex-flow:row wrap;color:#455556;font-size:11px;line-height:13px;width:100%;align-items:center}.result__meta>*{margin-block-start:0.5rem}.result__meta>*:not(:last-child){padding-inline-end:0}.result__meta>*:not(:last-child)::after{content:"";height:1rem;width:1px;background:#90c6e7;display:inline-block;margin-inline-start:0.7rem;margin-inline-end:0.7rem}@media (max-width: 576px){.result__meta>*:not(:last-child)::after{display:none}}@media (max-width: 576px){.result__meta{flex-flow:column;align-items:flex-start}}.result__tags{display:flex;flex-flow:row wrap}@media (max-width: 576px){.result__tags{padding-inline-start:0}}.result__tags-tag{color:#455556;display:inline-block;font-size:0.4375rem;letter-spacing:1.4px;background:#fff;border-radius:2px;text-transform:uppercase;padding:0 4px 1px 5px;font-weight:600;margin:3px 0.25rem 0.25rem 0;border:1px solid #b5aea7;white-space:nowrap;line-height:13px}.result__type{font-weight:600;text-transform:capitalize;white-space:nowrap;display:flex;align-items:center}.result__date{display:flex;align-items:center;color:#455556}.result__source{color:#455556;padding-inline-end:0.75rem}.result__authors{font-size:12px;color:#455556;margin-block-end:0.25rem;text-decoration:none;width:70%}.result__buttons{width:70%;margin-block-end:0.5rem}.result__buttons-button{background-color:#007495;color:#fff;padding:5px 8px 1px;border-radius:4px;display:inline-block;font-size:11px;text-decoration:none;border:none}.result__promo{width:70%;margin-block-end:0.5rem;text-decoration:none;color:#455556}.result__promo-box{width:300px;background-color:#e3eef1;padding:12px 12px 8px 4px;display:flex;flex-flow:row nowrap;margin-block-start:1rem}.result__promo-bigdate{flex:0 1 60px;text-align:center;font-weight:600;color:#007495;text-transform:uppercase;line-height:1.25;letter-spacing:1.5px}@media (max-width: 992px){.result__promo-bigdate{width:100%}}.result__promo-bigdate span{color:#455556;display:block}.result__promo-bigdate~div{padding-inline-start:1rem;border-inline-start:1px solid #c5dbe1}.result__promo-date{font-size:12px}.result__promo-venue{font-size:12px}.result__promo nano-icon{color:#007495;position:relative;inset-block-start:1px;padding-inline-end:2px}.result__image{display:block;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:4px;position:relative;width:100%;height:150px;margin-block-end:0.5rem}@media (min-width: 576px){.result__image{width:142px;height:80px}}.result__image nano-icon{position:absolute;inset-block-start:calc(50% - 0.75rem);inset-inline-start:calc(50% - 0.75rem);font-size:1.5rem;color:#0084a9;--primary-color:#fff;--secondary-color:#0084a9;--primary-opacity:1}@media (max-width: 576px){.result__image nano-icon{font-size:3rem;inset-block-start:calc(50% - 1.5rem);inset-inline-start:calc(50% - 1.5rem)}}.result__video-body{width:70%;text-decoration:none;display:flex;flex-flow:row wrap}@media (max-width: 992px){.result__video-body{width:100%}}@media (max-width: 576px){.result__video-body{flex-flow:column}}.result__video-body .result__body{padding-inline-start:1rem;display:flex;flex-direction:column;margin-block-end:0;flex:1}@media (max-width: 576px){.result__video-body .result__body{padding-inline-start:0}}.result__video-body .result__body p{display:inline;margin:0}.result__video-body .result__body u,.result__video-body .result__body li,.result__video-body .result__body a{text-decoration:none}.result__video-body .result__body .result__meta{margin-block-start:0.5rem}.result__video-body .result__body .result__description{flex:1 0 auto}.search-empty{padding:3rem 0;text-align:center;border-block-start:1px solid #e5eef1}.search-empty h2{color:#455556;font-size:1.125rem;margin-block-end:0.5rem}.search-empty-icon{font-size:7rem;--icon-color:#e4e6e8;margin-block-end:2rem}.search__highlight{background:#fbffbf;font-style:normal}';const i="created > "+Math.floor((Date.now()-631152e5)/1e3);const r=class{constructor(t){e(this,t);this.nanoSearchGoBack=n(this,"nanoSearchGoBack",7);this.tagClick=e=>{e.preventDefault();let n=e.target.dataset.value;n=n==="publication"?"publications":n;n=n.toLowerCase();const t=this.algoliaEle.querySelector('nano-algolia-filter[filter-name="tags"]');if(t.value.indexOf(n)===-1){t.value=t.value?[...t.value,n]:[n]}};this.algoliaEle=undefined;this.currentWidth=undefined;this.apiKey=undefined;this.appId=undefined;this.index=undefined}handleAlgoliaCredsChange(){if(!this.apiKey||!this.appId||!this.algoliaEle)return;this.algoliaEle.apiKey=this.apiKey;this.algoliaEle.appId=this.appId}handleAlgoliaIndexChange(){if(!this.index||!this.algoliaEle)return;this.algoliaEle.searchIndex=this.index}handleGlobalNavReset(e){if(e.target.tagName!=="NANO-GLOBAL-NAV")return;this.algoliaResultsEle=null;this.goback()}handleGlobalNavSearch(e){if(e.target.tagName!=="NANO-GLOBAL-NAV")return;const{detail:{results:n,client:t}}=e;const s=n.find((e=>e.selected));this.apiKey=t.apiKey;this.appId=t.appId;this.index={name:s.indexName,index:s.index,domain:s.domain,filters:s.filters};this.algoliaEle.query=s.query}handleReorder(e){if(e.composedPath().find((e=>e.classList&&e.classList.contains("indexchange")))&&!!this.algoliaResultsEle){this.changeOrder(e)}}attachListeners(e){if(!e.composedPath().find((e=>e.id&&e.id==="main-search")))return;this.algoliaResultsEle=this.algoliaEle.querySelector("#main-search-results");this.attachResultListeners();this.algoliaEle.querySelectorAll(".filters-reset").forEach((e=>{e.addEventListener("click",(()=>{this.removeAllFilters()}))}));this.algoliaEle.querySelectorAll(".close-filters").forEach((e=>{e.addEventListener("click",(()=>{this.closefilters()}))}));const n=this.algoliaEle.querySelector(".filters-wrap");if(n){n.addEventListener("click",(e=>{e.stopPropagation()}))}this.filtersDiv=this.algoliaEle.querySelector("#main-search-filters");const t=this.algoliaEle.querySelector(".old-posts");if(t){t.addEventListener("change",(e=>{this.toggleOldResults(e.target.checked)}))}}attachResultListeners(e){if(e&&e.composedPath().find((e=>e===this.algoliaEle))){this.algoliaResultsEle=this.algoliaEle.querySelector("nano-algolia-results")}if(!this.algoliaResultsEle)return;const n=this.algoliaResultsEle;n.querySelectorAll(".remove-filter").forEach((e=>{e.addEventListener("click",(e=>{const n=e.target;this.removeFilter(n.dataset.filter,n.dataset.filterVal)}))}));n.querySelectorAll(".back-btn").forEach((e=>{e.addEventListener("click",(()=>{this.goback()}))}));n.querySelectorAll(".topbar__show-filters").forEach((e=>{this.openFilterBtn=e;e.addEventListener("click",(()=>{this.filtersDiv.tabIndex=-1;this.filtersDiv.classList.add("show");this.filtersDiv.setAttribute("aria-expanded","true");document.body.style.overflow="hidden";setTimeout((()=>this.filtersDiv.focus()),20)}))}));const t=Array.from(n.querySelectorAll(".result__tags-tag"));t.forEach((e=>{e.removeEventListener("click",this.tagClick);e.addEventListener("click",this.tagClick)}))}changeOrder(e){this.algoliaEle.replicaIndex=e.detail.value}goback(){const e=this.nanoSearchGoBack.emit();if(e.defaultPrevented)return;this.removeAllFilters();this.algoliaEle.query="";this.algoliaEle.showResults=false}removeFilter(e,n){this.algoliaEle.removeFilters(e,n)}removeAllFilters(){this.algoliaEle.removeFilters()}closefilters(){if(!this.filtersDiv)return;this.filtersDiv.tabIndex=null;this.filtersDiv.classList.remove("show");this.filtersDiv.setAttribute("aria-expanded","false");document.body.style.overflow="";setTimeout((()=>this.openFilterBtn.focus()),20)}toggleOldResults(e){if(e)this.algoliaEle.filters=this.algoliaEle.filters.filter((e=>!e.startsWith("created > ")));else this.algoliaEle.filters=[...this.algoliaEle.filters,i]}componentDidLoad(){this.ro=new ResizeObserver((e=>{for(const n of e){if(!n.contentRect.width)return;this.currentWidth=n.contentRect.width}}));this.ro.observe(this.el);this.algoliaEle.filters=[i]}render(){return t(s,{class:{small:this.currentWidth<677},dir:this.el.ownerDocument.dir==="rtl"?"rtl":false},t("nano-algolia",{"store-id":"searchq","store-method":"url-hash-push",class:"main-search__wrap sc-nano-global-search-results",ref:e=>requestAnimationFrame((()=>this.algoliaEle=e)),id:"main-search"},t("script",{type:"text/template",slot:"template"},`<div class="main-search sc-nano-global-search-results">\n              <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>\n                <script type="text/template" slot="start-template">\n                  <div class="sc-nano-global-search-results main-search__topbar topbar">\n                    <button class="sc-nano-global-search-results topbar__bkbtn back-btn icon-button">\n                      <nano-icon class="sc-nano-global-search-results" name="light/chevron-left" size="small"></nano-icon>\n                    </button>\n                    <div>\n                      <em class="sc-nano-global-search-results topbar__query">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n                    </div>\n\n                    <div class="sc-nano-global-search-results topbar__filtering">\n                      {{ @if (it.results.length) }}\n\n                      {{ @if (it.indexName === 'All') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="all_prod_en">Sort by: Most relevant</nano-option>\n                          <nano-option value="all_prod_en_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="all_prod_en_date_asc">Sort by: Oldest</nano-option>\n                          <nano-option value="all_prod_en_activity_date_desc">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'www') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="cws_english_en">Sort by: Most relevant</nano-option>\n                          <nano-option value="cws_english_en_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="cws_english_en_date_asc">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Resources') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="cws_english_resources_en">Sort by: Most relevant</nano-option>\n                          <nano-option value="cws_english_resources_en_featured_desc">Sort by: Newest</nano-option>\n                          <nano-option value="cws_english_resources_en_featured_asc">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Store') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="store_prod">Sort by: Most relevant</nano-option>\n                          <nano-option value="store_prod_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="store_prod_date_asc">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Community') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--community indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="community_prod">Sort by: Most relevant</nano-option>\n                          <nano-option value="community_prod_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="community_prod_date_asc">Sort by: Oldest</nano-option>\n                          <nano-option value="community_prod_activity_date_desc">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n                      {{ /if }}\n\n                      <button class="sc-nano-global-search-results topbar__show-filters filters-title" aria-controls="main-search-filters">\n                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n                          <span class="sc-nano-global-search-results topbar__filter-count">\n                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n                          </span>\n                        {{ /if }}\n                        <nano-icon class="sc-nano-global-search-results" name="light/filter"></nano-icon>\n                      </button>\n                    </div>\n                  </div>\n\n                  {{ @if (it.results.length) }}\n                    <div class="sc-nano-global-search-results main-search__applied-filters">\n                      {{ @if (it.appliedFilters) }}\n                        {{ @each(it.appliedFilters) => filterObj }}\n                          {{ @each(filterObj.values) => filterVal }}\n                            <span class="sc-nano-global-search-results main-search__applied-filter">\n                              {{ filterVal | public_name }}\n                              <button class="sc-nano-global-search-results icon-button remove-filter" data-filter="{{ filterObj.name }}" data-filter-val="{{ filterVal }}">\n                                <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                              </button>\n                            </span>\n                          {{ /each }}\n                        {{ /each }}\n                      {{ #else }}\n                        <span class="sc-nano-global-search-results main-search__applied-nofilter">&nbsp;</span>\n                      {{ /if }}\n                    </div>\n                  {{ /if }}\n                <\/script>\n\n                <script type="text/template" slot="result-template">\n                  \x3c!-- START NO CONTENT --\x3e\n                  {{ @if ((!it.results || !it.results.length)) }}\n                    <div class="search-empty">\n                      <nano-icon name="light/search" class="search-empty-icon"></nano-icon>\n                      <h2>No matches found...</h2>\n                      <p>Please try a different search query.</p>\n                    </div>\n                  {{ /if }}\n                  \x3c!-- END NO CONTENT --\x3e\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      {{ contentType = result.content_type ? result.content_type : result.type }}\n                      <li class="sc-nano-global-search-results">\n                        <div class="sc-nano-global-search-results result">\n                          <h4 class="sc-nano-global-search-results result__title" data-icon-set="{{(iconSet = false)}}">\n                            <a href="{{ result.url | abs_url(it, result) }}">\n                            {{ result._snippetResult.title.value | safe }}\n                            {{ @if (contentType === 'technical_document' || contentType === 'literature' || contentType === 'white_paper' || contentType === 'protocol') }}\n                              <span class="sc-nano-global-search-results result__pdf">PDF</span>\n                            {{ /if }}\n                            </a>\n                          </h4>\n                          {{ @if (result.authors) }}\n                            {{ @if (typeof result.authors === 'string') }}\n                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Authors: {{ result.authors | trim_to(50) }}</a>\n                            {{ #else }}\n                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">\n                                {{ @each(result.authors) => author, index }}\n                                  \x3c!-- {{ @if(index == 0)}} --\x3e\n                                    Athors: {{ author | trim_to(60) }}\n                                  \x3c!-- {{ /if }} --\x3e\n                                {{ /each }}\n                              </a>\n                            {{ /if }}\n                          {{ /if }}\n                          {{ @if (contentType === 'video' || contentType === 'lc_lightning_talk' ) }}\n                            {{ @if (result.name) }}\n                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Speaker: {{ result.name | trim_to(50) }}</a>\n                            {{ /if }}\n                            <a class="sc-nano-global-search-results result__video-body" href="{{ result.url | abs_url(it, result) }}">\n                              {{ @if (result.image) }}\n                                <div class="sc-nano-global-search-results result__image" style="background-image: url('{{ result.image | abs_url(it, result) }}')">\n                                  <nano-icon class="sc-nano-global-search-results" name="duotone/play-circle"></nano-icon>\n                                </div>\n                              {{ /if }}\n                              <div class="sc-nano-global-search-results result__body">\n                                <div class="sc-nano-global-search-results result__description">\n                                  {{ @if (result.description) }}\n                                    {{ result._snippetResult.description.value | safe }}\n                                  {{ /if }}\n                                </div>\n                              </div>\n                              <div class="sc-nano-global-search-results result__meta">\n                                {{ @if (result.type || result.content_type) }}\n                                  <div class="sc-nano-global-search-results result__type">\n                                  {{ @if (contentType === 'lc_lightning_talk') }}\n                                    Presentation\n                                  {{ #else }}\n                                    {{ contentType }}\n                                  {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.tags) }}\n                                  <div class="sc-nano-global-search-results result__tags">\n                                    {{ @if (typeof result.tags === 'string') }}\n                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>\n                                    {{ #else }}\n                                      {{ @each(result.tags) => tag, index }}\n                                        {{ @if(index < 5)}}\n                                          {{ @if (tag !== "No video" && tag !== "Resources" && tag !== "Video") }}\n                                            <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>\n                                          {{ /if }}\n                                        {{ /if }}\n                                      {{ /each }}\n                                    {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.source) }}\n                                  <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>\n                                {{ /if }}\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (result.body) }}\n                            <a class="sc-nano-global-search-results result__body" href="{{ result.url | abs_url(it, result) }}">{{ result._snippetResult.body.value | safe }}</a>\n                          {{ /if }}\n                          {{ @if (contentType === 'product' }}\n                            <div class="sc-nano-global-search-results result__buttons">\n                              <a class="sc-nano-global-search-results result__buttons-button" href="{{ result.url | abs_url(it, result) }}">View product</a>\n                            </div>\n                          {{ /if }}\n                          {{ @if (contentType === 'event') }}\n                            <a class="sc-nano-global-search-results result__promo" href="{{ result.url | abs_url(it, result) }}">\n                              <div class="sc-nano-global-search-results result__promo-box">\n                                <div class="sc-nano-global-search-results result__promo-bigdate">\n                                  {{ result.start_date | date_long({year: undefined, month: 'short', day: undefined}) }}\n                                  <span>{{ result.start_date | date_long({year: undefined, month: undefined, day: 'numeric'}) }}</span>\n                                </div>\n                                <div>\n                                  <div class="sc-nano-global-search-results result__promo-date">\n                                    <nano-icon class="sc-nano-global-search-results" name="light/calendar-alt"></nano-icon>\n                                    {{ @if (result.end_date) }}\n                                      {{ @if (result.end_date !== result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', month: 'short'}) }} - {{ result.end_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ #else }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ #else }}\n                                      {{ @if (result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ /if }}\n                                  </div>\n                                  <div class="sc-nano-global-search-results result__promo-venue">\n                                    <nano-icon class="sc-nano-global-search-results" name="light/map-marker-alt"></nano-icon>\n                                    Venue\n                                  </div>\n                                </div>\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (contentType !== 'lc_lightning_talk' && contentType !== 'video') }}\n                            <div class="sc-nano-global-search-results result__meta">\n                              {{ @if (result.type || result.content_type) }}\n                                <div class="sc-nano-global-search-results result__type">\n                                {{ @if (contentType === 'news_item') }}\n                                  News\n                                {{ #elif (contentType === 'static_page' || contentType === 'bespoke') }}\n                                  Page\n                                {{ #elif (contentType === 'case_study') }}\n                                  Case study\n                                {{ #elif (contentType === 'lc_poster') }}\n                                  Poster\n                                {{ #elif (contentType === 'nanopore_live') }}\n                                  Live stream\n                                {{ #elif (contentType === 'data_release') }}\n                                  Data release\n                                {{ #elif (contentType === 'research_area') }}\n                                  Research area\n                                {{ #elif (contentType === 'white_paper') }}\n                                  White paper\n                                {{ #elif (contentType === 'technical_document') }}\n                                  Technical document\n                                {{ #elif (contentType === 'info_sheet') }}\n                                  Info sheet\n                                {{ #elif (contentType === 'lc_home' || contentType === 'lc_venue') }}\n                                  London Calling\n                                {{ #else }}\n                                  {{ contentType }}\n                                {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (contentType !== 'event') }}\n                                {{ @if (result.updated) }}\n                                  <div class="sc-nano-global-search-results result__date">{{ result.updated | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                {{ #else }}\n                                  {{ @if (result.created) }}\n                                    <div class="sc-nano-global-search-results result__date">{{ result.created | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                  {{ /if }}\n                                {{ /if }}\n                              {{ /if }}\n                              {{ @if (result.tags) }}\n                                <div class="sc-nano-global-search-results result__tags">\n                                  {{ @if (typeof result.tags === 'string') }}\n                                    {{ @if (result.tags !== "Resources" && result.tags !== "Tools" && result.tags !== "Publications" && result.tags !== "Case studies") }}\n                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>\n                                    {{ /if }}\n                                  {{ #else }}\n                                    {{ @each(result.tags) => tag, index }}\n                                      {{ @if(index < 5)}}\n                                        {{ @if (tag !== "Resources" && tag !== "Tools" && tag !== "Publications" && tag !== "Case studies") }}\n                                          <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>\n                                        {{ /if }}\n                                      {{ /if }}\n                                    {{ /each }}\n                                  {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (result.source) }}\n                                <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>\n                              {{ /if }}\n                            </div>\n                          {{ /if }}\n                        </div>\n                      </li>\n                    {{ /each }}\n                  {{ /if }}\n                <\/script>\n\n                <div slot="start-output"></div>\n                <ul slot="result-output" class="sc-nano-global-search-results"></ul>\n              </nano-algolia-results>\n\n              {{ @if(Object.keys(it.origFilters).length) }}\n                <div class="sc-nano-global-search-results main-search__filters filters close-filters" id="main-search-filters">\n                  <div class="sc-nano-global-search-results filters-wrap">\n                    {{ @if(it.totalHits) }}\n                      <div class="sc-nano-global-search-results filters-header">\n                        <strong class="sc-nano-global-search-results filters-title">Filters</strong>\n                        <button class="sc-nano-global-search-results filters-reset">Reset</button>\n                        <button class="sc-nano-global-search-results filters__close-filters close-filters icon-button" aria-controls="main-search-filters">\n                          <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                        </button>\n                      </div>\n                    {{ /if }}\n\n                    <div>\n                      <input class="sc-nano-global-search-results filter-cb old-posts filters__old-posts" type="checkbox" name="old-posts" id="old-posts" value="nice" />\n                      <label class="sc-nano-global-search-results filter-label" for="old-posts">\n                        <span>Include posts older than 2 years</span>\n                      </label>\n                      {{ @if(it.origFilters['type']) }}\n                        <nano-details class="sc-nano-global-search-results" open={true} icon-rotation="180">\n                          <strong slot="label">Type</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf1" store-method="url-hash-push" filter-name="type">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="type-{{ filter }}-{{x}}" />\n                                <label class="sc-nano-global-search-results filter-label" for="type-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['channel']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Channels</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf2" store-method="url-hash-push" filter-name="channel">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="channel-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="channel-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['authors']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Authors</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf3" store-method="url-hash-push" filter-name="authors">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="authors-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="authors-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['categories_without_path']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Category</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf4" store-method="url-hash-push" filter-name="categories_without_path">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                {{ @if(!filter.match(/publication/)) }}\n                                  <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                  <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="cwp-{{ filter }}-{{x}}" />\n                                  <label class="sc-nano-global-search-results filter-label" for="cwp-{{ filter }}-{{x}}">\n                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                  </label></li>\n                                {{ /if }}\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['tags']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Tags</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf5" store-method="url-hash-push" filter-name="tags">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter | lowercase }}" id="tags-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="tags-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n                    </div>\n                  </div>\n                </div>\n              {{ /if }}\n            </div>`),t("div",{slot:"output"}),t("slot",null)))}get el(){return a(this)}static get watchers(){return{algoliaEle:["handleAlgoliaCredsChange","handleAlgoliaIndexChange"],apiKey:["handleAlgoliaCredsChange"],appId:["handleAlgoliaCredsChange"],index:["handleAlgoliaIndexChange"]}}};r.style=l;export{r as nano_global_search_results};
-//# sourceMappingURL=p-3a1026d1.entry.js.map