@nanoporetech-digital/components 3.7.1 → 3.8.1

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/file-upload/file-upload.scss?tag=nano-file-upload&encapsulation=scoped","src/components/file-upload/file-upload.tsx"],"names":["fileUploadCss","fileInputIds","getDataTransfer","DataTransfer","ClipboardEvent","clipboardData","FileUpload","this","fileInputId","canChangeFileList","removeFiles","onClearClick","value","onBlur","hasFocus","validate","validateOn","showInlineValidation","nanoBlur","emit","onFocus","nanoFocus","errorMessage","inputEl","setCustomValidity","error","validity","valid","validationMessage","fileList","forEach","fileItem","checkFileSize","file","size","maxFileSize","checkFileType","type","accept","length","maxFiles","onInvalid","ev","showInlineError","preventDefault","onFileChoose","e","files","target","addNewFiles","onFileRemoveFileClick","push","closest","classList","remove","onFileRemoveAnim","filter","find","rmFile","f","location","URL","revokeObjectURL","onInputChange","nanoChange","onDragStop","stopPropagation","isDragging","onDragStart","onDrop","dataTransfer","FileUploadInput","eleType","listId","labelId","moreId","hasHelperSlot","h","class","htmlFor","id","onDragEnd","onDragLeave","onDragEnter","onDragOver","label","hasLabelSlot","hideLabel","name","placeholder","clearInput","disabled","tabindex","onClick","aria-labelledby","multiple","undefined","form","ref","input","publicInputEl","onChange","onReset","tabIndex","required","button","dropArea","map","key","onAnimationEnd","_","content","placement","iconName","href","[object Object]","arrToFileList","setTimeout","requestAnimationFrame","invalid","_invalid","validityMessage","Array","from","objectURL","createObjectURL","fs","val","validateFirst","isValid","focus","Promise","resolve","message","composedPath","every","node","host","document","querySelector","i","len","items","add","match","nanoValidate","originalEvent","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","newFiles","findFile","slotChangeObserver","Host","file-upload","file-upload--dragging","file-upload--focus","file-upload--invalid"],"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/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/button';\n\n:host {\n  /**\n   * @prop --invalid-msg-color: Default value #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default value #{$input-help-font-size};\n\n   * @prop --help-msg-color: Default value #{$input-help-color};\n\n   * @prop --label-color: Default value #{$label-color};\n   * @prop --label-color--invalid: Default value #{$label-color-invalid};\n   * @prop --label-font-size: Default value #{$label-font-size};\n   * @prop --label-padding: Default value #{$input-padding-bottom};\n   * @prop --label-color--invalid: Default value #{$label-color-invalid};\n\n   * @prop --drop-bg: Default value #{map.get($colors, blue--faded)};\n   * @prop --drop-text: Default value #{map.get($colors, dimgrey)};\n   * @prop --drop-height: Default value 3.5em;\n   * @prop --drop-border-tint: Default value #{nano-color(primary, base, null, true)};\n   * @prop --drop-border-width: Default value 2px;\n   * @prop --drop-border-radius: Default value 5px;\n   * @prop --drop-bg--invalid: Default value #{$input-background-color--invalid};\n   * @prop --drop-border--invalid: Default value #{nano-color(danger, base, null, true)};\n\n   * @prop --btn-bg: Default value #{nano-color(primary, base)};\n   * @prop --btn-text: Default value #{nano-color(primary, contrast)};\n   * @prop --btn-icon-size: Default value var(--nano-btn-icon-size, 1.4em);\n   * @prop --btn-padding-top: Default value var(--nano-btn-padding-top, .5em);\n   * @prop --btn-padding-bottom: Default value var(--nano-btn-padding-bottom, .5em);\n   * @prop --btn-padding-start: Default value var(--nano-btn-padding-start, 1em);\n   * @prop --btn-padding-end: Default value var(--nano-btn-padding-end, 1em);\n   */\n\n  min-height: 1rem;\n  display: block;\n\n  --invalid-msg-color: #{nano-color(danger, base)};\n  --invalid-msg-font-size: #{$input-help-font-size};\n  --help-msg-color: #{$input-help-color};\n  --label-color: #{$label-color};\n  --label-font-size: #{$label-font-size};\n  --label-padding: #{$input-padding-bottom};\n  --label-color--invalid: #{$label-color-invalid};\n  --drop-bg: #{map.get($colors, blue--faded)};\n  --drop-text: #{darken(map.get($colors, dimgrey), 11%)};\n  --drop-height: 3.5em;\n  --drop-border-tint: #{nano-color(primary, base, null, true)};\n  --drop-border-width: 2px;\n  --drop-border-radius: 5px;\n  --drop-bg--invalid: #{$input-background-color--invalid};\n  --drop-border--invalid: #{nano-color(danger, base, null, true)};\n  --btn-bg: #{nano-color(primary, base)};\n  --btn-text: #{nano-color(primary, contrast)};\n  --btn-icon-size: var(--nano-btn-icon-size, 1.4em);\n  --btn-padding-top: var(--nano-btn-padding-top, 0.5em);\n  --btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5em);\n  --btn-padding-start: var(--nano-btn-padding-start, 1rem);\n  --btn-padding-end: var(--nano-btn-padding-end, 1rem);\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  * {\n    pointer-events: none !important;\n  }\n}\n\n.file-upload {\n  $self: &;\n\n  /* Common */\n\n  &__label {\n    font-size: var(--label-font-size);\n    padding: 0 0 var(--label-padding);\n    margin: 0;\n    line-height: 1;\n\n    :host([invalid]:not([invalid='false'])) & {\n      color: var(--label-color--invalid);\n    }\n  }\n\n  &__input {\n    @include visually-hide();\n  }\n\n  &__error,\n  &__help,\n  &__more,\n  &__label {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__more {\n    height: 1em;\n    margin-block-start: calc(var(--label-padding) / 2);\n    margin-inline-end: 0;\n    margin-block-end: var(--label-padding);\n    margin-inline-start: 3px;\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    position: absolute;\n    font-size: var(--invalid-msg-font-size);\n    line-height: 1.2;\n    transition: 0.3s ease-out opacity;\n\n    .file-upload--invalid & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\n    font-stretch: condensed;\n    opacity: 0;\n\n    .file-upload--invalid & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .file-upload--invalid & {\n      opacity: 0;\n    }\n  }\n\n  /* Drop area / Multi file upload */\n\n  &__drop {\n    position: relative;\n    width: 100%;\n    display: inline-block;\n  }\n\n  &__drop-area {\n    flex-direction: column;\n    background-color: var(--drop-bg);\n    color: var(--drop-text);\n    min-height: var(--drop-height);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.9em;\n    position: relative;\n    transition: background-color 0.15s ease-in-out;\n    padding: 0.5rem;\n\n    :host([disabled]:not([disabled='false'])) & {\n      opacity: 0.7;\n    }\n\n    .file-upload--invalid & {\n      background-color: var(--drop-bg--invalid);\n    }\n\n    .file-upload--dragging & {\n      background-color: #{map.get($colors, white)};\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      border-radius: var(--drop-border-radius);\n      border-width: var(--drop-border-width);\n      border-color: rgba(var(--drop-border-tint), 0.5);\n      border-style: dashed;\n      inset: 0;\n      transition:\n        top 0.1s ease-in-out,\n        bottom 0.1s ease-in-out,\n        left 0.1s ease-in-out,\n        right 0.1s ease-in-out;\n\n      .file-upload--invalid & {\n        border-color: rgba(var(--drop-border--invalid), 1);\n      }\n\n      .file-upload--dragging & {\n        inset: 5px;\n      }\n    }\n\n    span {\n      color: rgba(var(--drop-border-tint), 1);\n      text-decoration: underline;\n      border-radius: 2px;\n      z-index: 1;\n      cursor: pointer;\n      position: relative;\n\n      .file-upload--focus & {\n        box-shadow: #{$control-focus-style};\n      }\n    }\n  }\n\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    &-wrap {\n      position: relative;\n      inset-block-start: -4px;\n    }\n\n    &-item {\n      width: 100%;\n      margin: 0 0 2px;\n      display: flex;\n      align-items: center;\n      transform: translateZ(0);\n      animation: hideListItem 0.3s ease-in-out forwards;\n\n      @keyframes hideListItem {\n        0% {\n          opacity: 1;\n          transform: translateY(0);\n          transform: translateZ(0);\n        }\n\n        100% {\n          opacity: 0;\n          transform: translateY(10px);\n          transform: translateZ(0);\n        }\n      }\n\n      &--active {\n        animation: showListItem 0.3s ease-in-out forwards;\n\n        @keyframes showListItem {\n          0% {\n            opacity: 0;\n            transform: translateY(10px);\n            transform: translateZ(0);\n          }\n\n          100% {\n            opacity: 1;\n            transform: translateY(0);\n            transform: translateZ(0);\n          }\n        }\n      }\n    }\n\n    .list-title {\n      background: var(--nano-color-blue--faded);\n      border-radius: 5px;\n      padding: 5px 5px;\n      margin-inline-end: 2px;\n      display: block;\n      width: 100%;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      font-size: 0.9em;\n      color: var(--help-msg-color);\n    }\n\n    .list-button {\n      background: var(--nano-color-blue--faded);\n      border-radius: 5px;\n      margin: 2px;\n    }\n\n    .list-error {\n      --color: rgba(var(--drop-border--invalid), 1);\n    }\n  }\n\n  /* Button display / Single file upload */\n\n  &__button {\n    @include button-base;\n    @include button-standard(\n      var(--btn-bg),\n      var(--btn-text),\n      #{nano-color(primary, shade)}\n    );\n\n    --nano-btn-icon-size: var(--btn-icon-size);\n    --nano-btn-line-height: var(--btn-icon-size);\n    --nano-btn-padding-top: var(--btn-padding-top);\n    --nano-btn-padding-bottom: var(--btn-padding-bottom);\n    --nano-btn-padding-start: var(--btn-padding-start);\n    --nano-btn-padding-end: var(--btn-padding-end);\n\n    max-width: 100%;\n    font-size: 0.9em;\n\n    :host([disabled]:not([disabled='false'])) & {\n      opacity: 0.4;\n    }\n\n    .file-upload--dragging & {\n      --nano-btn-border-style: dashed;\n    }\n    #{$self}__clear-btn {\n      margin: 0;\n      font-size: inherit;\n      padding: 0;\n      border: 0;\n      outline: none;\n      background-color: transparent;\n      display: flex;\n      align-items: stretch;\n      width: auto;\n      color: var(--clear-btn-color);\n\n      :host(.is-invalid) & {\n        color: var(--clear-btn-color--invalid);\n      }\n\n      nano-icon {\n        margin-inline: 0.4rem 0;\n        margin-block: 0;\n      }\n    }\n    #{$self}__btn-content {\n      display: flex;\n      align-items: center;\n\n      span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        min-width: 0;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Event,\n  EventEmitter,\n  Watch,\n  VNode,\n  Method,\n  Listen,\n} from '@stencil/core';\nimport type {\n  ControlValidity,\n  ControlValidityEventDetail,\n  FileInputChangeEventDetail,\n  FileWithUrl,\n} from '../../interface';\n\nlet fileInputIds = 0;\n\nlet getDataTransfer = () => new DataTransfer();\ntry {\n  getDataTransfer();\n} catch {\n  try {\n    getDataTransfer = () => new ClipboardEvent('').clipboardData;\n    getDataTransfer();\n  } catch {\n    getDataTransfer = null;\n  }\n}\n\ninterface FileValidation {\n  file: File;\n  valid: boolean;\n  validationMessage?: string;\n  location?: string;\n}\n/**\n * A better UI experience for `input type=\"file\"` form controls.\n *\n *   - Drag and Drop\n *   - Validation options\n *   - Preview and manage multiple files\n */\n@Component({\n  tag: 'nano-file-upload',\n  styleUrl: 'file-upload.scss',\n  scoped: true,\n})\nexport class FileUpload implements ComponentInterface {\n  private inputEl: HTMLInputElement;\n  private publicInputEl: HTMLInputElement;\n  private mo!: MutationObserver;\n  private fileInputId = `nano-file-upload-${fileInputIds++}`;\n  private canChangeFileList = !!getDataTransfer;\n  private removeFiles: FileValidation[] = [];\n\n  @State() hasHelperSlot: boolean;\n  @State() hasLabelSlot: boolean;\n  @State() errorMessage: string = '';\n  @State() isDragging = false;\n  @State() fileList: FileValidation[] = [];\n  @Watch('fileList')\n  fileListChange() {\n    if (this.canChangeFileList) {\n      this.publicInputEl.value = '';\n      this.inputEl.files = this.arrToFileList(\n        this.fileList.map((file) => file.file)\n      );\n      setTimeout(() => {\n        this.nanoChange.emit({ value: this.value, files: this.files });\n      }, 20);\n    }\n  }\n  @State() hasFocus: boolean;\n\n  @Element() host: HTMLNanoFileUploadElement;\n\n  // public props\n\n  /** Name of the form control. Submitted with the form as part of a name/value pair. */\n  @Prop() name!: string;\n\n  /** The accept attribute value is a string that defines the file types the file input should accept.\n   * E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document` */\n  @Prop() accept?: string;\n\n  /** Specifies which camera to use for capture of image or video data. `user` for the user-facing camera and/or microphone.\n   * `environment` specifies the the outward-facing camera and/or microphone. If the requested facing mode isn't available,\n   * the user agent may fall back to its preferred default mode. */\n  @Prop() capture?: 'user' | 'environment';\n\n  /** The maximum file size allowed per file (Megabytes) */\n  @Prop() maxFileSize: number = 1;\n\n  /** The maximum file size allowed per file (bytes).  */\n  @Prop() maxFiles: number = 1;\n\n  /** String to place within a label element. */\n  @Prop() label!: string;\n\n  /** Placeholder only used within single file uploads. */\n  @Prop() placeholder: string = 'Choose a file...';\n\n  /** Visually hide the label - but make it accessible. */\n  @Prop() hideLabel?: boolean = false;\n\n  /** If `true`, the user must select a file to upload before submitting a form. */\n  @Prop() required = false;\n\n  /** If `true`, the user cannot interact with the select. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** If `true`, a clear icon will appear in the input when there is a value.\n   * Clicking it clears the input. Only used within single file uploads. */\n  @Prop() clearInput = false;\n\n  /** Whether to show validation errors underneath input */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /** When should the field perform validation */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  /** The form element to associate with this input (its form owner). Must be the id of a form. */\n  @Prop() form?: string | null;\n\n  @Watch('maxFiles')\n  @Watch('maxFileSize')\n  @Watch('capture')\n  @Watch('accept')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('fileList')\n  protected shouldValidate() {\n    if (!this.inputEl) return;\n\n    this.validate();\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty') this.showInlineValidation();\n    });\n  }\n\n  @State() _invalid = false;\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  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.inputEl) return '';\n    return this.inputEl.validationMessage;\n  }\n\n  /** A File array that lists every selected file.\n   * Has an added `objectURL` property returning a `DOMString`\n   * containing an object URL that can be used to reference the contents of the specified source\n   * This list has no more than one member unless the multiple attribute is specified */\n  @Prop()\n  get files(): FileWithUrl[] {\n    return this.inputEl\n      ? Array.from(this.inputEl.files).map((file: FileWithUrl) => {\n          file.objectURL = URL.createObjectURL(file);\n          return file;\n        })\n      : [];\n  }\n  set files(fs: FileWithUrl[]) {\n    this.addNewFiles(this.arrToFileList(fs));\n  }\n\n  /** A file input's value attribute contains a DOMString that represents the path to the selected file(s).\n   * If the user selected multiple files, the value represents the first file in the list of files they selected.\n   * You can reset the file-upload control by setting the value to an emptry string e.g. `var input.value = ''` */\n  @Prop()\n  get value() {\n    return this.inputEl ? this.inputEl.value : '';\n  }\n  set value(val: string) {\n    if (val === '' && this.inputEl) {\n      this.fileList = [];\n      this.inputEl.value = '';\n    }\n  }\n\n  // Events\n\n  /** Emitted when the value has changed. */\n  @Event() nanoChange!: EventEmitter<FileInputChangeEventDetail>;\n\n  /** Emited when the checkbox is focused */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emited when the checkbox is blurred */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`. */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Public methods\n\n  /** Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }` */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    if (validateFirst) {\n      this.validate();\n      this.showInlineValidation();\n    }\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.inputEl.validationMessage,\n    };\n  }\n\n  /** Sets focus on the specified `nano-input`. Use this method instead of the global\n   * `input.focus()`. */\n  @Method()\n  async setFocus() {\n    if (this.inputEl) this.inputEl.focus();\n  }\n\n  /** @returns the native `<input>` element used under the hood */\n  @Method()\n  getInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement> {\n    return Promise.resolve(this.inputEl!);\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   * @param message */\n  @Method()\n  async showError(message: string) {\n    if (this.inputEl) {\n      this.inputEl.setCustomValidity(message);\n      this.validate();\n      this.showInlineValidation();\n    }\n  }\n\n  // Listeners\n\n  @Listen('click', { target: 'window' })\n  globalClickHandler(e: Event) {\n    if (!this.hasFocus) return;\n    if (e.composedPath().every((node) => node !== this.host)) this.onBlur();\n  }\n\n  @Listen('keydown', { target: 'window' })\n  globalKeydownHandler(e: KeyboardEvent) {\n    if (!this.hasFocus || e.key !== 'Tab') return;\n    if (e.target !== this.inputEl) this.onBlur();\n  }\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.host.closest('form');\n    if (!form || e.target !== this.host.closest('form')) return;\n\n    this.value = '';\n  }\n\n  // Private methods\n\n  private onClearClick = () => {\n    this.value = '';\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    this.validate();\n    if (this.validateOn === 'dirty') this.showInlineValidation();\n    this.nanoBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private arrToFileList(files: File[]): FileList {\n    const fileList = getDataTransfer();\n    for (let i = 0, len = files.length; i < len; i++)\n      fileList.items.add(files[i]);\n    return fileList.files;\n  }\n\n  private checkFileSize(size: number): boolean {\n    return size / 1000000 <= this.maxFileSize;\n  }\n\n  private checkFileType(type: string): boolean {\n    if (!this.accept) return true;\n    return this.accept.match(type) && this.accept.match(type).length > 0;\n  }\n\n  private validate = () => {\n    this.errorMessage = '';\n    this.inputEl.setCustomValidity('');\n    let error: string;\n\n    if (!this.inputEl.validity.valid) {\n      error = this.inputEl.validationMessage;\n    } else {\n      this.fileList.forEach((fileItem) => {\n        error = null;\n        if (!this.checkFileSize(fileItem.file.size)) {\n          error =\n            'Maximum file size exceeded. Max file size is ' +\n            this.maxFileSize +\n            'Mb';\n        } else if (!this.checkFileType(fileItem.file.type))\n          error = `File type is not allowed (${this.accept})`;\n\n        fileItem.validationMessage = error;\n        fileItem.valid = !error;\n      });\n      if (this.fileList.length > this.maxFiles)\n        error = `Maxinum number of files exceeded (${this.maxFiles})`;\n    }\n\n    if (!!error) this.inputEl.setCustomValidity(error);\n  };\n\n  private showInlineValidation(ev?: Event) {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.errorMessage = '';\n\n    if (!this.inputEl.validity.valid) {\n      this.errorMessage = this.inputEl.validationMessage;\n      this._invalid = true;\n    }\n\n    this.nanoValidate.emit({\n      isValid: !this._invalid,\n      errorMessage: this.inputEl.validationMessage,\n      originalEvent: ev,\n    });\n  }\n\n  private slotChangeObserver() {\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have slot content\n    this.hasLabelSlot = !!this.host.querySelectorAll('[slot=\"label\"]');\n    this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n  }\n\n  private addNewFiles(files: FileList) {\n    const fileList: FileValidation[] = Array.from(files).map((file) => {\n      return {\n        file: file,\n        location: URL.createObjectURL(file),\n        valid: true,\n        validationMessage: null,\n      };\n    });\n\n    // if we have a list and we're in a browser that can amend files\n    // append files to the list, otherwise replace\n    if (this.canChangeFileList && this.maxFiles > 1) {\n      const newFiles = fileList.filter(\n        (findFile) =>\n          !this.fileList.find((file) => file.file.name === findFile.file.name)\n      );\n      this.fileList = [...this.fileList, ...newFiles];\n    } else this.fileList = fileList;\n  }\n\n  // event handlers & hooks\n\n  private onInvalid = (ev: Event) => {\n    if (this.showInlineError) ev.preventDefault();\n    this.validate();\n    this.showInlineValidation(ev);\n  };\n\n  private onFileChoose = (e: Event) => {\n    const files = (e.target as HTMLInputElement).files;\n    if (files && files.length)\n      this.addNewFiles((e.target as HTMLInputElement).files);\n  };\n\n  private onFileRemoveFileClick = (e: Event, file: FileValidation) => {\n    if (!this.canChangeFileList) return;\n    this.removeFiles.push(file);\n\n    (e.target as HTMLElement)\n      .closest('.file-upload__list-item--active')\n      .classList.remove('file-upload__list-item--active');\n  };\n\n  private onFileRemoveAnim = () => {\n    if (!this.canChangeFileList || !this.removeFiles.length) return;\n    this.fileList = this.fileList.filter(\n      (fileItem) => !this.removeFiles.find((rmFile) => rmFile === fileItem)\n    );\n    try {\n      this.removeFiles.forEach((f) =>\n        f.location ? URL.revokeObjectURL(f.location) : ''\n      );\n    } catch (e) {}\n    this.removeFiles = [];\n  };\n\n  private onInputChange = () => {\n    this.nanoChange.emit({ value: this.value, files: this.files });\n  };\n\n  private onDragStop = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = false;\n  };\n\n  private onDragStart = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = true;\n  };\n\n  private onDrop = (e: DragEvent) => {\n    this.onDragStop(e);\n    if (e.dataTransfer.files && e.dataTransfer.files.length)\n      this.addNewFiles(e.dataTransfer.files);\n  };\n\n  // Component lifecycle\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private FileUploadInput = (\n    eleType: 'drop' | 'btn',\n    listId?: string\n  ): VNode[] => {\n    const labelId = this.fileInputId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.fileInputId + '-more'\n        : '';\n\n    return [\n      <div class={'file-upload__' + eleType + '-wrap'}>\n        <label\n          class={`file-upload__` + eleType}\n          htmlFor={this.fileInputId}\n          id={labelId}\n          onDrop={(e) => {\n            this.onDrop(e);\n            this.onDragStop(e);\n          }}\n          onDragEnd={this.onDragStop}\n          onDragLeave={this.onDragStop}\n          onDragEnter={this.onDragStart}\n          onDragOver={this.onDragStart}\n        >\n          {(!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (\n            <div\n              class={`file-upload__label ${\n                this.hideLabel ? 'visually-hide' : ''\n              }`}\n            >\n              {!!this.label && !!this.label.length ? this.label : ''}\n              {!this.label && this.hasLabelSlot && eleType !== 'drop' && (\n                <slot name=\"label\" />\n              )}\n            </div>\n          )}\n          {eleType === 'drop' && (\n            <div class=\"file-upload__drop-area\">\n              <div>{this.hasLabelSlot && <slot name=\"label\" />}</div>\n              <div>\n                Drag and drop or&nbsp;<span>browse</span>\n              </div>\n            </div>\n          )}\n          {eleType === 'btn' && (\n            <div\n              class={`file-upload__button button--keyline button--icon-start ${\n                this.hasFocus ? 'button--focus' : ''\n              }`}\n            >\n              <div class={`file-upload__btn-content`}>\n                <nano-icon name=\"regular/cloud-upload\" />\n                <span>\n                  {!!this.fileList.length\n                    ? this.fileList[0].file.name\n                    : this.placeholder}\n                </span>\n                {!!this.value && this.clearInput && !this.disabled && (\n                  <button\n                    type=\"button\"\n                    class=\"icon file-upload__clear-btn\"\n                    tabindex=\"-1\"\n                    onClick={this.onClearClick}\n                  >\n                    <nano-icon name=\"light/times\"></nano-icon>\n                  </button>\n                )}\n              </div>\n            </div>\n          )}\n          <input\n            aria-labelledby={labelId + ' ' + moreId + ' ' + listId}\n            type=\"file\"\n            id={this.fileInputId}\n            accept={this.accept}\n            class=\"file-upload__input\"\n            multiple={this.maxFiles > 1}\n            disabled={this.disabled}\n            name={this.canChangeFileList ? undefined : this.name}\n            form={this.form}\n            ref={(input) => {\n              if (this.canChangeFileList) {\n                this.publicInputEl = input;\n                return;\n              }\n              this.inputEl = input;\n            }}\n            onChange={this.onFileChoose}\n            onFocus={this.onFocus}\n            onReset={this.onInputChange}\n          />\n        </label>\n        <input\n          name={!this.canChangeFileList ? undefined : this.name}\n          form={this.form}\n          ref={(input) => {\n            if (!this.canChangeFileList) return;\n            this.inputEl = input;\n          }}\n          type=\"file\"\n          id={this.fileInputId + '-hidden'}\n          tabIndex={-1}\n          multiple={true}\n          class=\"file-upload__input\"\n          disabled={this.disabled}\n          required={this.required}\n          accept={this.accept}\n          onInvalid={this.onInvalid}\n          onChange={this.onInputChange}\n        />\n      </div>,\n      this.showInlineError || this.hasHelperSlot ? (\n        <div class=\"file-upload__more\" id={moreId}>\n          {this.showInlineError && !!this.errorMessage.length ? (\n            <div class=\"file-upload__error\">{this.errorMessage}</div>\n          ) : (\n            ''\n          )}\n          <div class=\"file-upload__help\">\n            <slot name=\"helper\" />\n          </div>\n        </div>\n      ) : (\n        ''\n      ),\n    ];\n  };\n\n  private button = (): VNode[] => {\n    return this.FileUploadInput('btn');\n  };\n\n  private dropArea = (): VNode[] => {\n    const listId = this.fileInputId + '-list';\n    return [\n      this.FileUploadInput('drop', listId),\n      <output class=\"file-upload__list-wrap\" id={listId}>\n        {!!this.fileList && this.fileList.length > 0 && (\n          <ul class=\"file-upload__list list\">\n            {this.fileList.map((file) => {\n              return (\n                <li\n                  key={file.file.name}\n                  class=\"file-upload__list-item file-upload__list-item--active list-item\"\n                  onAnimationEnd={(_) => this.onFileRemoveAnim()}\n                >\n                  <span class=\"list-title\">{file.file.name}</span>\n                  {!file.valid && (\n                    <nano-tooltip\n                      content={file.validationMessage}\n                      placement=\"left\"\n                    >\n                      <nano-icon-button\n                        class=\"list-button list-error\"\n                        iconName=\"light/exclamation-triangle\"\n                        label=\"File error\"\n                      />\n                    </nano-tooltip>\n                  )}\n                  {this.canChangeFileList && (\n                    <nano-icon-button\n                      class=\"list-button list-button--view\"\n                      type=\"button\"\n                      iconName=\"light/eye\"\n                      label=\"View file\"\n                      target=\"_blank\"\n                      href={file.location}\n                    />\n                  )}\n                  {this.canChangeFileList && (\n                    <nano-icon-button\n                      onClick={(e) => this.onFileRemoveFileClick(e, file)}\n                      class=\"list-button list-button--remove\"\n                      iconName=\"light/times\"\n                      label=\"Remove file\"\n                    />\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        )}\n      </output>,\n    ];\n  };\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'file-upload': true,\n            'file-upload--dragging': this.isDragging,\n            'file-upload--focus': this.hasFocus,\n            'file-upload--invalid': this._invalid,\n          }}\n        >\n          {this.maxFiles > 1 ? <this.dropArea /> : <this.button />}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-d565991d.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as i,c as t,h as s,g as e}from"./p-1fe12320.js";import{g as n}from"./p-74a7fc4f.js";import{P as o}from"./p-8d747891.js";import{a as r}from"./p-45abbbdd.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentColor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-block-size:50vh}.dropdown__accessible-title{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}";let h=0;const d=class{constructor(s){i(this,s);this.nanoShow=t(this,"nanoShow",7);this.nanoAfterShow=t(this,"nanoAfterShow",7);this.nanoHide=t(this,"nanoHide",7);this.nanoAfterHide=t(this,"nanoAfterHide",7);this.dropdownId=`dropdown-${h++}`;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.togglePanel=()=>{if(!this.autoOpen)return;this.open?this.hide():this.show()};this.handleTriggerKeyDown=i=>{if(["ArrowDown","ArrowUp"," "].includes(i.key)){this.show();i.preventDefault();i.stopPropagation();if(this.menu)this.menu.setFocus()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.containingElement=undefined;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.dialogTitle=undefined;this.eventType=undefined}get menu(){return this.host.querySelector("nano-menu")}handleOpenChange(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()}handleTetherToChange(){this.createPopover();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}secondaryOpen(i){if(!i.detail.secondaryMenu)return;i.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=i.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(i){if(!i.detail.secondaryMenu)return;i.stopPropagation();if(!i.target.parentElement)return;this.panel.style.minHeight=i.target.parentElement.scrollHeight+"px"}handlePanelSelect(i){const t=i.target;if(this.closeOnSelect&&t.tagName.toLowerCase()==="nano-menu")this.hide()}async show(){this.ignoreOpenWatcher=true;this.open=true;const i=this.nanoShow.emit();if(i.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return}this.popover.show();this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){this.ignoreOpenWatcher=true;this.open=false;const i=this.nanoHide.emit();if(i.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}}focusEleInDropDwn(i){const t=n();if(i&&i.composedPath()?.length){const t=i.composedPath().includes(this.containingElement);return!i.composedPath().includes(this.accessibleTrigger)&&t}return t&&t.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&t!==this.accessibleTrigger}updateAccessibleTrigger(){if(!this.didLoad)return;let i;this.accessibleTrigger=null;if(!this.tetherTo){const t=Array.from(this.host.querySelectorAll('[slot="trigger"]'));i=t.map(r)[0]}else{i=r(this.tetherTo)}if(i){i.setAttribute("aria-haspopup","true");i.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=i}}handleDocumentKeyDown(i){if(i.key==="Escape"){this.hide();return}if(i.key==="Tab"){setTimeout((()=>{if(document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(i.key)){if(!this.open||this.focusEleInDropDwn(i))return;i.preventDefault();this.menu.setFocus();return}const t=i.composedPath();if(this.menu&&t.length&&!t.find((i=>i!==this.menu))){this.menu.dispatchEvent(new KeyboardEvent(i.type,i));return}}handleDocumentMouseDown(i){if(!this.focusEleInDropDwn(i)){this.hide();return}}createPopover(){if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new o(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit(),onTransitionEnd:()=>{if(!this.open){this.panel.scrollTop=0}else if(this.menu){this.menu.showActiveElement()}}});if(this.open){this.show()}}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host}componentDidLoad(){this.didLoad=true;this.createPopover();setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){if(this.host.isConnected)this.hide();if(this.popover)this.popover.destroy()}render(){return s("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{part:"trigger",class:"dropdown__trigger",ref:i=>this.trigger=i,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:i=>this.positioner=i,class:"dropdown__positioner"},s("div",{ref:i=>this.panel=i,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:this.host.getAttribute("role")==="group"?"group":"dialog","aria-modal":this.host.getAttribute("role")==="group"?undefined:"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&s("span",{id:this.labelId,class:"dropdown__accessible-title","aria-live":this.host.getAttribute("role")==="group"?undefined:"polite"},this.dialogTitle),s("slot",null))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};d.style=a;export{d as nano_dropdown};
-//# sourceMappingURL=p-d565991d.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"names":["dropdownCss","dropDownIds","Dropdown","this","dropdownId","labelId","ignoreOpenWatcher","didLoad","togglePanel","autoOpen","open","hide","show","handleTriggerKeyDown","event","includes","key","preventDefault","stopPropagation","menu","setFocus","handleTriggerSlotChange","updateAccessibleTrigger","host","querySelector","[object Object]","accessibleTrigger","setAttribute","toString","createPopover","popover","setOptions","strategy","hoist","placement","skidding","distance","ev","detail","secondaryMenu","panel","classList","add","addEventListener","remove","once","style","minHeight","scrollHeight","target","parentElement","closeOnSelect","tagName","toLowerCase","nanoShow","emit","defaultPrevented","document","handleDocumentMouseDown","handleDocumentKeyDown","nanoHide","removeEventListener","focusEleInDropDwn","focus","e","activeElement","getActiveElement","composedPath","length","ddInPath","containingElement","closest","tetherTo","assignedElements","Array","from","querySelectorAll","map","getNearestTabbableElement","setTimeout","ePath","find","el","dispatchEvent","KeyboardEvent","type","destroy","Popover","trigger","positioner","transitionElement","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","onTransitionEnd","scrollTop","showActiveElement","bind","isConnected","h","part","id","class","dropdown","dropdown--open","ref","onKeyDown","onClick","name","onSlotchange","split","join","aria-hidden","role","getAttribute","aria-modal","undefined","aria-labelledby","dialogTitle","aria-live"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --width: width of the dropdown. Defaults to 'auto'\n   * @prop --border: Defaults to #{$layer-border-style}\n   * @prop --border-radius: Defaults to #{$layer-bg-color};\n   * @prop --background: Defaults to #{$layer-bg-color};\n   * @prop --padding: padding of the drop down. Default to '10px 0';\n   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n   * @prop --dropdown-z-index: Defaults to #{$layer-index-dropdown};\n   * @prop --min-width: Defaults to 0;\n   * @prop --box-shadow: #{$layer-shadow-large};\n   */\n\n  --width: auto;\n  --border: #{$layer-border-style};\n  --border-radius: #{$layer-border-radius};\n  --background: #{$layer-bg-color};\n  --padding: 10px 0;\n  --overflow: hidden;\n  --dropdown-z-index: #{$layer-index-dropdown};\n  --min-width: 0;\n  --box-shadow: #{$layer-shadow-large};\n\n  display: flex;\n}\n\n.dropdown {\n  position: relative;\n\n  &__trigger {\n    display: block;\n  }\n\n  &__positioner {\n    position: absolute;\n    z-index: var(--dropdown-z-index);\n    min-inline-size: var(--min-width);\n\n    @media (max-width: 35.9375em) {\n      z-index: 100;\n    }\n  }\n\n  &__panel {\n    padding: var(--padding);\n    background: var(--background);\n    min-inline-size: var(--min-width);\n    inline-size: var(--width);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    color: currentColor;\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;\n    min-block-size: 20px;\n    overflow: var(--overflow);\n    box-sizing: content-box !important;\n\n    &.loading {\n      overflow-y: hidden;\n    }\n\n    &.top {\n      transform: translateY(-20px) translateZ(0);\n    }\n\n    &.bottom {\n      transform: translateY(20px) translateZ(0);\n    }\n\n    .dropdown__positioner.popover-visible & {\n      opacity: 1;\n      transform: translateY(0) translateZ(0);\n    }\n\n    ::slotted(nano-menu) {\n      max-block-size: 50vh;\n    }\n  }\n\n  &__accessible-title {\n    @include visually-hide();\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n  ComponentInterface,\n  EventEmitter,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private accessibleTrigger: HTMLElement;\n  private didLoad = false;\n  private get menu() {\n    return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n  }\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.ignoreOpenWatcher) return;\n\n    this.open ? this.show() : this.hide();\n\n    if (this.accessibleTrigger) {\n      this.accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open.toString()\n      );\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop({ mutable: true }) containingElement: HTMLElement;\n\n  /**\n   * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n   * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n   */\n  @Prop() tetherTo: HTMLElement = null;\n\n  @Watch('tetherTo')\n  handleTetherToChange() {\n    this.createPopover();\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle!: string;\n\n  // Events\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // this is a massive hack to make stencil expose the `EventEmitter` type in the final build\n  // because the `Dropdown` class is used as a type in `nano-datalist`\n  /** @internal */\n  @Prop() eventType: EventEmitter;\n\n  // Listeners\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    this.panel.addEventListener(\n      'transitionend',\n      () => {\n        this.panel.classList.remove('loading');\n      },\n      { once: true }\n    );\n\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n      this.hide();\n  }\n\n  // Methods\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    this.popover.show();\n    this.ignoreOpenWatcher = false;\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n      this.accessibleTrigger.focus();\n    }\n  }\n\n  // Private methods\n\n  /**\n   * Decides if the current active element or element\n   * connected to the current event is connected to the Dropdown\n   * @param e\n   * @returns whether the current focus is within the dropdown\n   */\n  private focusEleInDropDwn(e?: Event) {\n    const activeElement = getActiveElement();\n\n    if (e && e.composedPath()?.length) {\n      const ddInPath = e.composedPath().includes(this.containingElement);\n      return !e.composedPath().includes(this.accessibleTrigger) && ddInPath;\n    }\n\n    return (\n      activeElement &&\n      activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n        this.containingElement &&\n      activeElement !== this.accessibleTrigger\n    );\n  }\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    this.open ? this.hide() : this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    if (!this.didLoad) return;\n\n    let accessibleTrigger: HTMLElement;\n    this.accessibleTrigger = null;\n\n    if (!this.tetherTo) {\n      const assignedElements = Array.from(\n        this.host.querySelectorAll('[slot=\"trigger\"]')\n      );\n      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n    } else {\n      accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n    }\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n      this.accessibleTrigger = accessibleTrigger;\n    }\n  }\n\n  // Handlers\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      // must have menu item, must have pressed down, must be open and must not have focus within dd\n      if (!this.open || this.focusEleInDropDwn(event)) return;\n      event.preventDefault();\n      this.menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    const ePath = event.composedPath();\n    if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n      this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the close element\n\n    if (!this.focusEleInDropDwn(event)) {\n      this.hide();\n      return;\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (this.menu) this.menu.setFocus();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private createPopover() {\n    if (this.popover) {\n      if (this.open) this.hide();\n      this.popover.destroy();\n      this.popover = null;\n    }\n\n    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        } else if (this.menu) {\n          this.menu.showActiveElement();\n        }\n      },\n    });\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  // Stencil hooks\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.createPopover();\n    setTimeout(() => this.updateAccessibleTrigger(), 100);\n  }\n\n  disconnectedCallback() {\n    if (this.host.isConnected) this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.dropdownId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onKeyDown={this.handleTriggerKeyDown}\n          onClick={this.togglePanel}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        <div ref={(el) => (this.positioner = el)} class=\"dropdown__positioner\">\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n            aria-hidden={!this.open}\n            role={\n              this.host.getAttribute('role') === 'group' ? 'group' : 'dialog'\n            }\n            aria-modal={\n              this.host.getAttribute('role') === 'group' ? undefined : 'true'\n            }\n            aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n          >\n            {this.dialogTitle && (\n              <span\n                id={this.labelId}\n                class=\"dropdown__accessible-title\"\n                aria-live={\n                  this.host.getAttribute('role') === 'group'\n                    ? undefined\n                    : 'polite'\n                }\n              >\n                {this.dialogTitle}\n              </span>\n            )}\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/aspect-ratio/aspect-ratio.scss?tag=nano-aspect-ratio&encapsulation=shadow","src/components/aspect-ratio/aspect-ratio.tsx"],"names":["aspectRatioCss","AspectRatio","this","handleSlotChange","setAspectRatio","[object Object]","aspectRatio","console","warn","match","split","x","parseInt","y","base","style","paddingBottom","h","ref","el","part","class","aspect-ratio","aspect-ratio--cover","fit","aspect-ratio--contain","onSlotchange"],"mappings":";;;2CAAA,MAAMA,EAAiB,msBCaVC,EAAW,+BAedC,KAAAC,iBAAmB,KACzBD,KAAKE,mCAXe,gBAGa,QAGnCC,0BACEH,KAAKE,iBAOCC,iBACN,UAAWH,KAAKI,cAAgB,SAAU,CACxCC,QAAQC,KAAK,mCACb,YACK,IAAKN,KAAKI,YAAYG,MAAM,qBAAsB,CACvDF,QAAQC,KAAK,6DACb,OAEF,MAAME,EAAQR,KAAKI,YAAYI,MAAM,KACrC,MAAMC,EAAIC,SAASF,EAAM,IACzB,MAAMG,EAAID,SAASF,EAAM,IACzBR,KAAKY,KAAKC,MAAMC,cAAgBL,GAAKE,EAAI,GAAIA,EAAIF,EAAK,OAAS,KAGjEN,SACE,OACEY,EAAA,MAAA,CACEC,IAAMC,GAAQjB,KAAKY,KAAOK,EAC1BC,KAAK,OACLC,MAAO,CACLC,eAAgB,KAChBC,sBAAuBrB,KAAKsB,MAAQ,QACpCC,wBAAyBvB,KAAKsB,MAAQ,YAGxCP,EAAA,OAAA,CAAMS,aAAcxB,KAAKC","sourcesContent":[":host {\n  display: block;\n}\n\n.aspect-ratio {\n  position: relative;\n\n  ::slotted(*) {\n    position: absolute !important;\n    inset-block-start: 0 !important;\n    inset-inline-start: 0 !important;\n    inline-size: 100% !important;\n    block-size: 100% !important;\n  }\n\n  &--cover {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: cover !important;\n    }\n  }\n\n  &--contain {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: contain !important;\n    }\n  }\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Displays media in the desired aspect ratio.\n * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.\n * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.\n * The default aspect ratio is 16:9.\n */\n@Component({\n  tag: 'nano-aspect-ratio',\n  styleUrl: 'aspect-ratio.scss',\n  shadow: true,\n})\nexport class AspectRatio implements ComponentInterface {\n  private base: HTMLElement;\n\n  /** The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`.\n   * Ratios not in this format will be ignored. */\n  @Prop() aspectRatio = '16:9';\n\n  /** Determines how content will be resized to fit its container. */\n  @Prop() fit: 'cover' | 'contain' = 'cover';\n\n  @Watch('aspectRatio')\n  handleAspectRatioChange() {\n    this.setAspectRatio();\n  }\n\n  private handleSlotChange = () => {\n    this.setAspectRatio();\n  };\n\n  private setAspectRatio() {\n    if (typeof this.aspectRatio !== 'string') {\n      console.warn('aspectRatio should be a string.');\n      return;\n    } else if (!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)) {\n      console.warn('aspectRatio is an incorrect format. Should be e.g. \"16:9\"');\n      return;\n    }\n    const split = this.aspectRatio.split(':');\n    const x = parseInt(split[0]);\n    const y = parseInt(split[1]);\n    this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : null;\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.base = el)}\n        part=\"base\"\n        class={{\n          'aspect-ratio': true,\n          'aspect-ratio--cover': this.fit === 'cover',\n          'aspect-ratio--contain': this.fit === 'contain',\n        }}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-dc50b93c.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as a,h as n,a as o,g as i}from"./p-1fe12320.js";import{g as s,a as r}from"./p-845ae77e.js";import{f as e}from"./p-f8f89998.js";import{s as h}from"./p-885b6950.js";import{C as l}from"./p-e3860f00.js";import{c}from"./p-7b3638b7.js";import{d}from"./p-167b9165.js";import"./p-9746b0a5.js";import"./p-69a3e911.js";const b=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgba(var(--nano-color-base-rgb), 0.7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;width:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow-x:auto;overflow-y:hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-start-start-radius:0;border-start-end-radius:var(--content-border-radius);border-end-end-radius:var(--content-border-radius);border-end-start-radius:0}';const p=class{constructor(n){t(this,n);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const n=a.closest("nano-tab");if(n)this.setActiveTab(n)};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const a=t.target;const n=a.closest("nano-tab");if(n){this.setActiveTab(n);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const a=document.activeElement;if(a&&a.tagName.toLowerCase()==="nano-tab"){const n=this.getAllActiveTabs;let o=n.indexOf(a);if(t.key==="Home"){o=0}else if(t.key==="End"){o=n.length-1}else if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){o=Math.max(0,o-1)}else if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){o=Math.min(n.length-1,o+1)}n[o].setFocus();if(["top"].includes(this.placement)){h(n[o],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()}}};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let n;if(t)n=this.nav.scrollLeft+a-20;else n=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:n,behavior:"smooth"})}catch(t){this.nav.scrollLeft=n}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const n=a.pageX-this.initialTouchX;const o=a.pageY-this.initialTouchY;const i=70;const s=this.initialTouchX-a.clientX;const r=this.initialTouchY-a.clientY;const e=Math.abs(n)>=i&&Math.abs(o)<=i;const h=this.getAllActiveTabs;const l=h.findIndex((t=>t.active));if(e){const t=n<0&&this.placement==="top"||n>0&&this.placement!=="top"?1:-1;if(h[l+t]){this.setActiveTab(h[l+t]);if(Math.abs(s)>Math.abs(r)){if(s>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedElements({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.tab=undefined;this.placement="top";this.noScrollControls=false;this.color=undefined;this.storeId=undefined;this.storeMethod="session";this.disableSwipe=undefined}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;d(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){if(!this.leftBtn)return;d(this.leftBtn,"is-shown",!this.hideControlLeft)}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return s(this.host,"nano-tab")}get getAllPanels(){return s(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const n=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(["top"].includes(this.placement)){h(this.activeTab,this.nav,"horizontal","center")}if(a){if(n){this.nanoTabHide.emit({name:n.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map((t=>{const n=a.find((a=>a.name===t.panel));if(n){t.setAttribute("aria-controls",n.getAttribute("id"));n.setAttribute("aria-labelledby",t.getAttribute("id"))}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const n=t.clientHeight;const o=r(t,this.tabs);const i=o.top+this.nav.scrollTop;const s=o.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${s}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${n}px`;this.activeTabIndicator.style.transform=`translateY(${i}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){let a=this.getAllActiveTabs.indexOf(t.target);const n=t.target;if(a<0)return;const o=this.getAllPanels.find((t=>t.name===n.panel));if(!o)return;t.stopImmediatePropagation();const i=this.nanoTabWillClose.emit({name:n.panel});if(i.defaultPrevented)return;if(n.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}n.remove();o.remove();this.nanoTabClose.emit({name:n.panel})}componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)l.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);e.observe(this.tabGroup);if(this.leftBtn){e.observe(this.leftBtn);e.observe(this.rightBtn)}this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();h(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()))}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){e.unobserve(this.tabGroup);if(this.leftBtn){e.unobserve(this.leftBtn);e.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return n(o,{class:{...c(this.color)},dir:this.isRtl?"rtl":null},n("div",{part:"base",ref:t=>this.tabGroup=t,class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&n("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},n("nano-icon",{name:"light/chevron-left"})),n("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},n("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},n("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),n("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&n("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},n("nano-icon",{name:"light/chevron-right"}))),n("slot",{name:"tab-content-header"}),n("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},n("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return i(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};p.style=b;export{p as nano_tab_group};
-//# sourceMappingURL=p-dc50b93c.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["tabGroupCss","TabGroup","this","initialTouchX","initialTouchY","mutationObservers","WeakMap","updateScrollControls","noScrollControls","hasScrollControls","includes","placement","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","document","activeElement","tagName","toLowerCase","getAllActiveTabs","index","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","stopPropagation","handleTabScroll","hideControlLeft","hideControlRight","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","disableSwipe","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","handleContentSlotChange","setTimeout","setAriaLabels","getActiveTab","handleTabSlotChange","ev","nodes","assignedElements","flatten","forEach","node","get","mo","MutationObserver","syncActiveTabIndicator","set","observe","characterData","childList","subtree","[object Object]","activeTab","panel","find","rightBtn","displayTransition","leftBtn","_","getAllTabs","filter","disabled","getDirectChildren","host","getAllPanels","emitEvents","previousTab","map","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","getAttribute","width","shadowRoot","querySelector","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","tabIndex","stopImmediatePropagation","closeEv","nanoTabWillClose","defaultPrevented","prevTab","show","remove","nanoTabClose","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","storeMethod","unobserve","focusVisible","tabGroup","resizeObserver","ResizeObserver","requestAnimationFrame","dir","ownerDocument","h","Host","class","createColorClasses","color","part","ref","nano-tab-group","nano-tab-group--top","nano-tab-group--start","nano-tab-group--has-scroll-controls","nano-tab-group--has-scroll-controls-left","nano-tab-group--has-scroll-controls-right","onClick","onKeyDown","nano-tab-group__scroll-button","nano-tab-group__scroll-button--left","btn","onScroll","role","onSlotchange","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"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/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n  * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n  * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n  * @prop --scroll-btn-color: defaults to 'currentColor';\n\n  * @prop --content-padding: defaults to 2rem 2.5rem;\n  * @prop --content-bg: defaults to rgb(var(--background-rgb));\n  * @prop --content-border-radius: defaults to var(--border-radius);\n\n  * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-top: defaults to 0;\n  * @prop --tabs-padding-bottom: defaults to 0;\n  * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n  * @prop --tab-border-radius: defaults to var(--border-radius);\n  * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($colors, darkgrey)} on placement 'start';\n  * @prop --fade-transparency: controls the strength of the fade on overflowing tabs, defaults to 0;\n  */\n\n:host {\n  --indicator-transition: #{$transition-fast};\n  --indicator-color: #{map.get($colors, lightblue)};\n  --indicator-track-color: #{map.get($colors, lightgrey)};\n  --indicator-size: 0;\n  --border-radius: #{$layer-border-radius};\n  --background-rgb: #{$layer-bg-color-rgb};\n  --scroll-btn-color: 'currentColor';\n  --content-padding: 2rem 2.5rem;\n  --content-bg: rgb(var(--background-rgb));\n  --content-border-radius: var(--border-radius);\n  --tabs-padding-start: 2.5rem;\n  --tabs-padding-end: 2.5rem;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tabs-container-bg: 'transparent';\n  --tabs-bg-rgb: var(--background-rgb);\n  --tab-border-radius: var(--border-radius);\n  --tab-text-color: #{map.get($colors, blue)};\n  --shadow-opacity: 0.1;\n  --fade-transparency: 0;\n\n  display: block;\n  position: relative;\n  z-index: #{$layer-index-raised};\n\n  @media only screen and (max-width: 768px) {\n    --tabs-padding-start: 1.5rem;\n    --tabs-padding-end: 1.5rem;\n  }\n\n  ::slotted(nano-tab) {\n    --tab-indicator-color: var(--indicator-color);\n    --bg-rgb: var(--tabs-bg-rgb);\n    --border-radius: var(--tab-border-radius);\n  }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n  --content-padding: 1rem;\n  --tabs-padding-start: 0;\n  --tabs-padding-end: 0;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tab-text-color: #{map.get($colors, darkgrey)};\n  --indicator-color: #{map.get($colors, blue)};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --tab-text-color: rgba(var(--nano-color-base-rgb), 0.7);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  width: 100%;\n  flex: inherit;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  &:not(.focus-visible) ::slotted(nano-tab) {\n    --focus-shadow: none;\n  }\n\n  .nano-tab-group__nav-container {\n    position: relative;\n    display: flex;\n    background: var(--tabs-container-bg);\n  }\n\n  button {\n    appearance: none;\n    background-color: transparent;\n  }\n\n  &__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    inset-block: 0;\n    border: unset;\n    z-index: 2;\n    transition: #{$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n    }\n\n    &.focus-visible:focus {\n      box-shadow: #{$control-focus-style} inset;\n    }\n\n    &--left {\n      inset-inline-start: 0;\n    }\n\n    &--right {\n      inset-inline-end: 0;\n    }\n\n    nano-icon {\n      font-size: 16px;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Top\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--top {\n    flex-direction: column;\n\n    .nano-tab-group__nav-container {\n      &::after {\n        content: '';\n        width: 86%;\n        box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));\n        height: 10px;\n        position: absolute;\n        inset-inline-start: 7%;\n        inset-block-end: -10px;\n        border-radius: 10px;\n        z-index: -1;\n      }\n    }\n\n    .nano-tab-group__nav {\n      @include hide-scrollbar();\n\n      padding-inline: var(--tabs-padding-start) var(--tabs-padding-end);\n      padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n      display: flex;\n      overflow-x: auto;\n      overflow-y: hidden;\n      transition: #{$transition-medium} ease;\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);\n      mask-repeat: no-repeat;\n      mask-image:\n        linear-gradient(\n          to left,\n          rgba(0, 0, 0, var(--fade-transparency)) 0,\n          rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start),\n          rgba(0, 0, 0, 1) calc(var(--tabs-padding-start) * 2),\n          rgba(0, 0, 0, 1) calc(100% - (var(--tabs-padding-end) * 2)),\n          rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)),\n          rgba(0, 0, 0, var(--fade-transparency))\n        );\n      mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n      mask-position: calc(var(--tabs-padding-end) * -2);\n\n      &::after {\n        content: ' ';\n        padding-inline: 0 var(--tabs-padding-end);\n        padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n        line-height: 1;\n        flex: 0 0 auto;\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left {\n      .nano-tab-group__nav {\n        mask-position: 0;\n        mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-position: calc(var(--tabs-padding-end) * -1);\n        mask-size: calc(100% + var(--tabs-padding-end));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-size: 100%;\n        mask-position: 0;\n      }\n    }\n\n    .nano-tab-group__tabs {\n      flex: 1 1 auto;\n      position: relative;\n      flex-direction: row;\n      text-align: center;\n      color: var(--tab-text-color);\n      width: auto;\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      inset-block-end: -2px;\n      border-block-end: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    .nano-tab-group__body {\n      order: 2;\n      background: var(--content-bg);\n      position: relative;\n      overflow: hidden;\n      width: auto;\n      display: flex;\n      justify-content: center;\n      padding: var(--content-padding);\n      border-radius: var(--content-border-radius);\n      flex: 1 1 auto;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Start\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--start {\n    flex-direction: row;\n\n    .nano-tab-group__tabs {\n      flex: 0 0 auto;\n      flex-direction: column;\n      color: var(--tab-text-color);\n      background: rgb(var(--tabs-bg-rgb));\n      border-inline-start: solid var(--indicator-size) var(--indicator-track-color);\n      text-align: start;\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      inset-inline-start: calc(-1 * 2px);\n      border-inline-start: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    .nano-tab-group__body {\n      flex: 1 1 auto;\n      order: 2;\n      padding: var(--content-padding);\n      overflow: hidden;\n      border-start-start-radius: 0;\n      border-start-end-radius: var(--content-border-radius);\n      border-end-end-radius: var(--content-border-radius);\n      border-end-start-radius: 0;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  Listen,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { scrollIntoView } from '../../utils/scroll';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\n/**\n * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizonal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n *\n * @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n */\n\n@Component({\n  tag: 'nano-tab-group',\n  styleUrl: 'tab-group.scss',\n  shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n  private activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabGroup: HTMLElement;\n  private tabs: HTMLElement;\n  private rightBtn: HTMLButtonElement;\n  private leftBtn: HTMLButtonElement;\n\n  private isRtl: boolean;\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private resizeObserver: ResizeObserver;\n  private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n  @Element() host: HTMLNanoTabGroupElement;\n\n  @State() hasScrollControls = false;\n  @State() hideControlRight = true;\n  @State() hideControlLeft = true;\n  @State() tab: string;\n\n  /**\n   * The placement of the tabs.\n   */\n  @Prop() placement: 'top' | 'start' = 'top';\n\n  /**\n   * Disables the scroll arrows that appear when tabs overflow.\n   */\n  @Prop() noScrollControls = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Store the currently open tab (against this ID) in the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Disable 'swipe to change tab' on devices with touch\n   */\n  @Prop() disableSwipe: boolean;\n\n  @Watch('tab')\n  handleTabNameChange() {\n    if (this.activeTab && this.activeTab.panel === this.tab) return;\n    const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n    this.setActiveTab(tab);\n  }\n\n  @Watch('placement')\n  handlePlacementChange() {\n    this.syncActiveTabIndicator();\n  }\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  @Watch('hideControlRight')\n  hideRightBtn() {\n    if (!this.rightBtn) return;\n    displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n  }\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n    else\n      setTimeout((_) => {\n        this.hideControlLeft = this.hideControlRight = true;\n      }, 20);\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n  /** Emitted when a tab is hidden. */\n  @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n  /** Emitted when a closable tab is removed. */\n  @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    if (this.activeTab && this.activeTab.panel === panel) return;\n\n    const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n    if (tab) this.setActiveTab(tab);\n  }\n\n  // Internal Methods\n\n  get getAllActiveTabs() {\n    return this.getAllTabs.filter((el: any) => !el.disabled);\n  }\n\n  get getAllTabs() {\n    return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n  }\n\n  get getAllPanels() {\n    return getDirectChildren<HTMLNanoTabContentElement>(\n      this.host,\n      'nano-tab-content'\n    );\n  }\n\n  get getActiveTab() {\n    return this.getAllActiveTabs.find((el) => el.active);\n  }\n\n  private updateScrollControls = () => {\n    if (this.noScrollControls) {\n      this.hasScrollControls = false;\n    } else {\n      this.hasScrollControls =\n        ['top'].includes(this.placement) &&\n        this.nav.scrollWidth > this.nav.clientWidth &&\n        this.nav.scrollWidth > this.tabs.clientWidth;\n    }\n  };\n\n  private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n    if (\n      tab &&\n      tab !== this.activeTab &&\n      !tab.disabled &&\n      this.getAllActiveTabs.includes(tab)\n    ) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n      this.tab = tab.panel;\n\n      // Sync tabs and panels\n      this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels.map((el) => {\n        if (el.name === this.activeTab.panel) {\n          el.active = true;\n          this.activePanel = el;\n        } else el.active = false;\n        el.removeAttribute('animation-dir');\n      });\n      // active tab can be changed on init - this won't be ready. No big thing\n      this.syncActiveTabIndicator();\n      if (['top'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab) {\n          this.nanoTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.nanoTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllActiveTabs;\n    const panels = this.getAllPanels;\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id'));\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n      }\n    });\n  }\n\n  private syncActiveTabIndicator() {\n    this.getAllTabs.forEach((tab) =>\n      tab.setAttribute(\n        'direction',\n        this.placement === 'top' ? 'horizontal' : 'vertical'\n      )\n    );\n\n    const tab = this.getActiveTab;\n    const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.tabs);\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left;\n\n    switch (this.placement) {\n      case 'top':\n        this.activeTabIndicator.style.width = `${width}px`;\n        this.activeTabIndicator.style.height = null;\n        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'start':\n        this.activeTabIndicator.style.width = null;\n        this.activeTabIndicator.style.height = `${height}px`;\n        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n  }\n\n  private getNavWidth() {\n    if (!this.nav) return 0;\n    const computedStyle = getComputedStyle(this.nav);\n    let clientWidth = this.nav.clientWidth;\n    return (clientWidth -=\n      parseFloat(computedStyle.paddingLeft) +\n      parseFloat(computedStyle.paddingRight));\n  }\n\n  // Event handlers\n\n  @Listen('nanoTabClose')\n  handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n    let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n    const tab = ev.target;\n    if (tabIndex < 0) return;\n\n    const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n    if (!panel) return;\n\n    ev.stopImmediatePropagation();\n\n    const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n    if (closeEv.defaultPrevented) return;\n\n    // Show the previous tab if the tab is currently active\n    if (tab.active) {\n      tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n      const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n      if (prevTab) this.host.show(prevTab);\n    }\n\n    tab.remove();\n    panel.remove();\n    this.nanoTabClose.emit({ name: tab.panel });\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('nano-tab');\n\n    if (tab) this.setActiveTab(tab);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const target = event.target as HTMLElement;\n      const tab = target.closest('nano-tab');\n\n      if (tab) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const activeEl = document.activeElement as any;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n        const tabs = this.getAllActiveTabs;\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (\n          (this.isRtl && event.key === 'ArrowRight') ||\n          (!this.isRtl && event.key === 'ArrowLeft')\n        ) {\n          index = Math.max(0, index - 1);\n        } else if (\n          (this.isRtl && event.key === 'ArrowLeft') ||\n          (!this.isRtl && event.key === 'ArrowRight')\n        ) {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n        tabs[index].setFocus();\n\n        if (['top'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n        }\n        // need to stop bubbling otherwise it will focus on parent tabs if nested\n        event.stopPropagation();\n        // stop the browser moving about\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleTabScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlLeft = this.hideControlRight = true;\n      return;\n    }\n    const endRight = this.isRtl\n      ? this.nav.scrollLeft === 0\n      : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n    const endLeft = this.isRtl\n      ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n      : this.nav.scrollLeft === 0;\n\n    if (endLeft) {\n      this.hideControlLeft = true;\n      this.hideControlRight = false;\n    } else if (endRight) {\n      this.hideControlLeft = false;\n      this.hideControlRight = true;\n    } else {\n      this.hideControlRight = false;\n      this.hideControlLeft = false;\n    }\n  };\n\n  private handleBtnClick = (goRight: boolean = false) => {\n    const navWidth = this.getNavWidth();\n    let leftAmt;\n    if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n    else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n    try {\n      this.nav.scroll({\n        left: leftAmt,\n        behavior: 'smooth',\n      });\n    } catch (e) {\n      this.nav.scrollLeft = leftAmt;\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    const xDiff = this.initialTouchX - touch.clientX;\n    const yDiff = this.initialTouchY - touch.clientY;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    const tabs = this.getAllActiveTabs;\n    const currIndex = tabs.findIndex((el) => el.active);\n\n    if (isHorizontalSwipe) {\n      const toGo =\n        (distX < 0 && this.placement === 'top') ||\n        (distX > 0 && this.placement !== 'top')\n          ? 1\n          : -1;\n\n      if (tabs[currIndex + toGo]) {\n        this.setActiveTab(tabs[currIndex + toGo]);\n\n        if (Math.abs(xDiff) > Math.abs(yDiff)) {\n          if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n          else this.activePanel.setAttribute('animation-dir', 'right');\n        }\n      }\n    }\n    this.initialTouchX = null;\n    this.initialTouchY = null;\n  };\n\n  private handleContentSlotChange = () => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n    });\n  };\n\n  private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.handleTabScroll();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n      this.updateScrollControls();\n    }, 500);\n\n    /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n    const nodes = ev.target.assignedElements({ flatten: true });\n    nodes.forEach((node) => {\n      if (!this.mutationObservers.get(node)) {\n        const mo = new MutationObserver(() => {\n          setTimeout(() => {\n            this.syncActiveTabIndicator();\n            this.handleTabScroll();\n            this.updateScrollControls();\n          }, 500);\n        });\n        this.mutationObservers.set(node, mo);\n\n        mo.observe(node, {\n          characterData: true,\n          childList: true,\n          subtree: true,\n        });\n      }\n    });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    // Initial IO - watching for all content to be loaded\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n\n        if (this.storeId)\n          ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n    focusVisible.observe(this.tabGroup);\n\n    if (this.leftBtn) {\n      focusVisible.observe(this.leftBtn);\n      focusVisible.observe(this.rightBtn);\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      setTimeout(() => {\n        this.updateScrollControls();\n        this.syncActiveTabIndicator();\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }, 500);\n    });\n    this.resizeObserver.observe(this.nav);\n\n    requestAnimationFrame(() => this.updateScrollControls());\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.tabGroup);\n    if (this.leftBtn) {\n      focusVisible.unobserve(this.leftBtn);\n      focusVisible.unobserve(this.rightBtn);\n    }\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        dir={this.isRtl ? 'rtl' : null}\n      >\n        <div\n          part=\"base\"\n          ref={(el) => (this.tabGroup = el)}\n          class={{\n            'nano-tab-group': true,\n            'nano-tab-group--top': this.placement === 'top',\n            'nano-tab-group--start': this.placement === 'start',\n            'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n            'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n            'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--left': true,\n                }}\n                ref={(btn) => (this.leftBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n              >\n                <nano-icon name=\"light/chevron-left\"></nano-icon>\n              </button>\n            )}\n            <div\n              ref={(el) => (this.nav = el)}\n              class=\"nano-tab-group__nav\"\n              onScroll={this.handleTabScroll}\n            >\n              <div\n                ref={(el) => (this.tabs = el)}\n                part=\"tabs\"\n                class=\"nano-tab-group__tabs\"\n                role=\"tablist\"\n              >\n                <div\n                  ref={(el) => (this.activeTabIndicator = el)}\n                  part=\"active-tab-indicator\"\n                  class=\"nano-tab-group__active-tab-indicator\"\n                />\n                <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n              </div>\n            </div>\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--right': true,\n                }}\n                ref={(btn) => (this.rightBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n              >\n                <nano-icon name=\"light/chevron-right\"></nano-icon>\n              </button>\n            )}\n          </div>\n          <slot name=\"tab-content-header\" />\n          <div\n            part=\"body\"\n            class=\"nano-tab-group__body\"\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <slot onSlotchange={this.handleContentSlotChange} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-e3860f00.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{g as r}from"./p-1fe12320.js";import{d as e}from"./p-9746b0a5.js";import{c as t,g as n}from"./p-69a3e911.js";var o=function r(){if(typeof Symbol!=="function"||typeof Object.getOwnPropertySymbols!=="function"){return false}if(typeof Symbol.iterator==="symbol"){return true}var e={};var t=Symbol("test");var n=Object(t);if(typeof t==="string"){return false}if(Object.prototype.toString.call(t)!=="[object Symbol]"){return false}if(Object.prototype.toString.call(n)!=="[object Symbol]"){return false}var o=42;e[t]=o;for(t in e){return false}if(typeof Object.keys==="function"&&Object.keys(e).length!==0){return false}if(typeof Object.getOwnPropertyNames==="function"&&Object.getOwnPropertyNames(e).length!==0){return false}var i=Object.getOwnPropertySymbols(e);if(i.length!==1||i[0]!==t){return false}if(!Object.prototype.propertyIsEnumerable.call(e,t)){return false}if(typeof Object.getOwnPropertyDescriptor==="function"){var a=Object.getOwnPropertyDescriptor(e,t);if(a.value!==o||a.enumerable!==true){return false}}return true};var i=typeof Symbol!=="undefined"&&Symbol;var a=function r(){if(typeof i!=="function"){return false}if(typeof Symbol!=="function"){return false}if(typeof i("foo")!=="symbol"){return false}if(typeof Symbol("bar")!=="symbol"){return false}return o()};var f="Function.prototype.bind called on incompatible ";var u=Array.prototype.slice;var c=Object.prototype.toString;var y="[object Function]";var p=function r(e){var t=this;if(typeof t!=="function"||c.call(t)!==y){throw new TypeError(f+t)}var n=u.call(arguments,1);var o;var i=function(){if(this instanceof o){var r=t.apply(this,n.concat(u.call(arguments)));if(Object(r)===r){return r}return this}else{return t.apply(e,n.concat(u.call(arguments)))}};var a=Math.max(0,t.length-n.length);var p=[];for(var s=0;s<a;s++){p.push("$"+s)}o=Function("binder","return function ("+p.join(",")+"){ return binder.apply(this,arguments); }")(i);if(t.prototype){var l=function r(){};l.prototype=t.prototype;o.prototype=new l;l.prototype=null}return o};var s=Function.prototype.bind||p;var l=s.call(Function.call,Object.prototype.hasOwnProperty);var v;var d=SyntaxError;var b=Function;var h=TypeError;var m=function(r){try{return b('"use strict"; return ('+r+").constructor;")()}catch(r){}};var g=Object.getOwnPropertyDescriptor;var S=function(){throw new h};var j=g?function(){try{return S}catch(r){try{return g(arguments,"callee").get}catch(r){return S}}}():S;var w=a();var A=Object.getPrototypeOf||function(r){return r.__proto__};var O={};var P=typeof Uint8Array==="undefined"?v:A(Uint8Array);var E={"%AggregateError%":typeof AggregateError==="undefined"?v:AggregateError,"%Array%":Array,"%ArrayBuffer%":typeof ArrayBuffer==="undefined"?v:ArrayBuffer,"%ArrayIteratorPrototype%":w?A([][Symbol.iterator]()):v,"%AsyncFromSyncIteratorPrototype%":v,"%AsyncFunction%":O,"%AsyncGenerator%":O,"%AsyncGeneratorFunction%":O,"%AsyncIteratorPrototype%":O,"%Atomics%":typeof Atomics==="undefined"?v:Atomics,"%BigInt%":typeof BigInt==="undefined"?v:BigInt,"%Boolean%":Boolean,"%DataView%":typeof DataView==="undefined"?v:DataView,"%Date%":Date,"%decodeURI%":decodeURI,"%decodeURIComponent%":decodeURIComponent,"%encodeURI%":encodeURI,"%encodeURIComponent%":encodeURIComponent,"%Error%":Error,"%eval%":eval,"%EvalError%":EvalError,"%Float32Array%":typeof Float32Array==="undefined"?v:Float32Array,"%Float64Array%":typeof Float64Array==="undefined"?v:Float64Array,"%FinalizationRegistry%":typeof FinalizationRegistry==="undefined"?v:FinalizationRegistry,"%Function%":b,"%GeneratorFunction%":O,"%Int8Array%":typeof Int8Array==="undefined"?v:Int8Array,"%Int16Array%":typeof Int16Array==="undefined"?v:Int16Array,"%Int32Array%":typeof Int32Array==="undefined"?v:Int32Array,"%isFinite%":isFinite,"%isNaN%":isNaN,"%IteratorPrototype%":w?A(A([][Symbol.iterator]())):v,"%JSON%":typeof JSON==="object"?JSON:v,"%Map%":typeof Map==="undefined"?v:Map,"%MapIteratorPrototype%":typeof Map==="undefined"||!w?v:A((new Map)[Symbol.iterator]()),"%Math%":Math,"%Number%":Number,"%Object%":Object,"%parseFloat%":parseFloat,"%parseInt%":parseInt,"%Promise%":typeof Promise==="undefined"?v:Promise,"%Proxy%":typeof Proxy==="undefined"?v:Proxy,"%RangeError%":RangeError,"%ReferenceError%":ReferenceError,"%Reflect%":typeof Reflect==="undefined"?v:Reflect,"%RegExp%":RegExp,"%Set%":typeof Set==="undefined"?v:Set,"%SetIteratorPrototype%":typeof Set==="undefined"||!w?v:A((new Set)[Symbol.iterator]()),"%SharedArrayBuffer%":typeof SharedArrayBuffer==="undefined"?v:SharedArrayBuffer,"%String%":String,"%StringIteratorPrototype%":w?A(""[Symbol.iterator]()):v,"%Symbol%":w?Symbol:v,"%SyntaxError%":d,"%ThrowTypeError%":j,"%TypedArray%":P,"%TypeError%":h,"%Uint8Array%":typeof Uint8Array==="undefined"?v:Uint8Array,"%Uint8ClampedArray%":typeof Uint8ClampedArray==="undefined"?v:Uint8ClampedArray,"%Uint16Array%":typeof Uint16Array==="undefined"?v:Uint16Array,"%Uint32Array%":typeof Uint32Array==="undefined"?v:Uint32Array,"%URIError%":URIError,"%WeakMap%":typeof WeakMap==="undefined"?v:WeakMap,"%WeakRef%":typeof WeakRef==="undefined"?v:WeakRef,"%WeakSet%":typeof WeakSet==="undefined"?v:WeakSet};var F=function r(e){var t;if(e==="%AsyncFunction%"){t=m("async function () {}")}else if(e==="%GeneratorFunction%"){t=m("function* () {}")}else if(e==="%AsyncGeneratorFunction%"){t=m("async function* () {}")}else if(e==="%AsyncGenerator%"){var n=r("%AsyncGeneratorFunction%");if(n){t=n.prototype}}else if(e==="%AsyncIteratorPrototype%"){var o=r("%AsyncGenerator%");if(o){t=A(o.prototype)}}E[e]=t;return t};var I={"%ArrayBufferPrototype%":["ArrayBuffer","prototype"],"%ArrayPrototype%":["Array","prototype"],"%ArrayProto_entries%":["Array","prototype","entries"],"%ArrayProto_forEach%":["Array","prototype","forEach"],"%ArrayProto_keys%":["Array","prototype","keys"],"%ArrayProto_values%":["Array","prototype","values"],"%AsyncFunctionPrototype%":["AsyncFunction","prototype"],"%AsyncGenerator%":["AsyncGeneratorFunction","prototype"],"%AsyncGeneratorPrototype%":["AsyncGeneratorFunction","prototype","prototype"],"%BooleanPrototype%":["Boolean","prototype"],"%DataViewPrototype%":["DataView","prototype"],"%DatePrototype%":["Date","prototype"],"%ErrorPrototype%":["Error","prototype"],"%EvalErrorPrototype%":["EvalError","prototype"],"%Float32ArrayPrototype%":["Float32Array","prototype"],"%Float64ArrayPrototype%":["Float64Array","prototype"],"%FunctionPrototype%":["Function","prototype"],"%Generator%":["GeneratorFunction","prototype"],"%GeneratorPrototype%":["GeneratorFunction","prototype","prototype"],"%Int8ArrayPrototype%":["Int8Array","prototype"],"%Int16ArrayPrototype%":["Int16Array","prototype"],"%Int32ArrayPrototype%":["Int32Array","prototype"],"%JSONParse%":["JSON","parse"],"%JSONStringify%":["JSON","stringify"],"%MapPrototype%":["Map","prototype"],"%NumberPrototype%":["Number","prototype"],"%ObjectPrototype%":["Object","prototype"],"%ObjProto_toString%":["Object","prototype","toString"],"%ObjProto_valueOf%":["Object","prototype","valueOf"],"%PromisePrototype%":["Promise","prototype"],"%PromiseProto_then%":["Promise","prototype","then"],"%Promise_all%":["Promise","all"],"%Promise_reject%":["Promise","reject"],"%Promise_resolve%":["Promise","resolve"],"%RangeErrorPrototype%":["RangeError","prototype"],"%ReferenceErrorPrototype%":["ReferenceError","prototype"],"%RegExpPrototype%":["RegExp","prototype"],"%SetPrototype%":["Set","prototype"],"%SharedArrayBufferPrototype%":["SharedArrayBuffer","prototype"],"%StringPrototype%":["String","prototype"],"%SymbolPrototype%":["Symbol","prototype"],"%SyntaxErrorPrototype%":["SyntaxError","prototype"],"%TypedArrayPrototype%":["TypedArray","prototype"],"%TypeErrorPrototype%":["TypeError","prototype"],"%Uint8ArrayPrototype%":["Uint8Array","prototype"],"%Uint8ClampedArrayPrototype%":["Uint8ClampedArray","prototype"],"%Uint16ArrayPrototype%":["Uint16Array","prototype"],"%Uint32ArrayPrototype%":["Uint32Array","prototype"],"%URIErrorPrototype%":["URIError","prototype"],"%WeakMapPrototype%":["WeakMap","prototype"],"%WeakSetPrototype%":["WeakSet","prototype"]};var R=s.call(Function.call,Array.prototype.concat);var k=s.call(Function.apply,Array.prototype.splice);var M=s.call(Function.call,String.prototype.replace);var x=s.call(Function.call,String.prototype.slice);var N=s.call(Function.call,RegExp.prototype.exec);var U=/[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g;var W=/\\(\\)?/g;var T=function r(e){var t=x(e,0,1);var n=x(e,-1);if(t==="%"&&n!=="%"){throw new d("invalid intrinsic syntax, expected closing `%`")}else if(n==="%"&&t!=="%"){throw new d("invalid intrinsic syntax, expected opening `%`")}var o=[];M(e,U,(function(r,e,t,n){o[o.length]=t?M(n,W,"$1"):e||r}));return o};var B=function r(e,t){var n=e;var o;if(l(I,n)){o=I[n];n="%"+o[0]+"%"}if(l(E,n)){var i=E[n];if(i===O){i=F(n)}if(typeof i==="undefined"&&!t){throw new h("intrinsic "+e+" exists, but is not available. Please file an issue!")}return{alias:o,name:n,value:i}}throw new d("intrinsic "+e+" does not exist!")};var D=function r(e,t){if(typeof e!=="string"||e.length===0){throw new h("intrinsic name must be a non-empty string")}if(arguments.length>1&&typeof t!=="boolean"){throw new h('"allowMissing" argument must be a boolean')}if(N(/^%?[^%]*%?$/g,e)===null){throw new d("`%` may not be present anywhere but at the beginning and end of the intrinsic name")}var n=T(e);var o=n.length>0?n[0]:"";var i=B("%"+o+"%",t);var a=i.name;var f=i.value;var u=false;var c=i.alias;if(c){o=c[0];k(n,R([0,1],c))}for(var y=1,p=true;y<n.length;y+=1){var s=n[y];var b=x(s,0,1);var m=x(s,-1);if((b==='"'||b==="'"||b==="`"||(m==='"'||m==="'"||m==="`"))&&b!==m){throw new d("property names with quotes must have matching quotes")}if(s==="constructor"||!p){u=true}o+="."+s;a="%"+o+"%";if(l(E,a)){f=E[a]}else if(f!=null){if(!(s in f)){if(!t){throw new h("base intrinsic for "+e+" exists, but the property is not available.")}return void v}if(g&&y+1>=n.length){var S=g(f,s);p=!!S;if(p&&"get"in S&&!("originalValue"in S.get)){f=S.get}else{f=f[s]}}else{p=l(f,s);f=f[s]}if(p&&!u){E[a]=f}}}return f};var C=t((function(r){var e=D("%Function.prototype.apply%");var t=D("%Function.prototype.call%");var n=D("%Reflect.apply%",true)||s.call(t,e);var o=D("%Object.getOwnPropertyDescriptor%",true);var i=D("%Object.defineProperty%",true);var a=D("%Math.max%");if(i){try{i({},"a",{value:1})}catch(r){i=null}}r.exports=function r(e){var f=n(s,t,arguments);if(o&&i){var u=o(f,"length");if(u.configurable){i(f,"length",{value:1+a(0,e.length-(arguments.length-1))})}}return f};var f=function r(){return n(s,e,arguments)};if(i){i(r.exports,"apply",{value:f})}else{r.exports.apply=f}}));var _=C(D("String.prototype.indexOf"));var q=function r(e,t){var n=D(e,!!t);if(typeof n==="function"&&_(e,".prototype.")>-1){return C(n)}return n};const G={};const $=Object.freeze({__proto__:null,default:G});const J=n($);var V=typeof Map==="function"&&Map.prototype;var H=Object.getOwnPropertyDescriptor&&V?Object.getOwnPropertyDescriptor(Map.prototype,"size"):null;var L=V&&H&&typeof H.get==="function"?H.get:null;var z=V&&Map.prototype.forEach;var Q=typeof Set==="function"&&Set.prototype;var Y=Object.getOwnPropertyDescriptor&&Q?Object.getOwnPropertyDescriptor(Set.prototype,"size"):null;var K=Q&&Y&&typeof Y.get==="function"?Y.get:null;var X=Q&&Set.prototype.forEach;var Z=typeof WeakMap==="function"&&WeakMap.prototype;var rr=Z?WeakMap.prototype.has:null;var er=typeof WeakSet==="function"&&WeakSet.prototype;var tr=er?WeakSet.prototype.has:null;var nr=typeof WeakRef==="function"&&WeakRef.prototype;var or=nr?WeakRef.prototype.deref:null;var ir=Boolean.prototype.valueOf;var ar=Object.prototype.toString;var fr=Function.prototype.toString;var ur=String.prototype.match;var cr=String.prototype.slice;var yr=String.prototype.replace;var pr=String.prototype.toUpperCase;var sr=String.prototype.toLowerCase;var lr=RegExp.prototype.test;var vr=Array.prototype.concat;var dr=Array.prototype.join;var br=Array.prototype.slice;var hr=Math.floor;var mr=typeof BigInt==="function"?BigInt.prototype.valueOf:null;var gr=Object.getOwnPropertySymbols;var Sr=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?Symbol.prototype.toString:null;var jr=typeof Symbol==="function"&&typeof Symbol.iterator==="object";var wr=typeof Symbol==="function"&&Symbol.toStringTag&&(typeof Symbol.toStringTag===jr?"object":"symbol")?Symbol.toStringTag:null;var Ar=Object.prototype.propertyIsEnumerable;var Or=(typeof Reflect==="function"?Reflect.getPrototypeOf:Object.getPrototypeOf)||([].__proto__===Array.prototype?function(r){return r.__proto__}:null);function Pr(r,e){if(r===Infinity||r===-Infinity||r!==r||r&&r>-1e3&&r<1e3||lr.call(/e/,e)){return e}var t=/[0-9](?=(?:[0-9]{3})+(?![0-9]))/g;if(typeof r==="number"){var n=r<0?-hr(-r):hr(r);if(n!==r){var o=String(n);var i=cr.call(e,o.length+1);return yr.call(o,t,"$&_")+"."+yr.call(yr.call(i,/([0-9]{3})/g,"$&_"),/_$/,"")}}return yr.call(e,t,"$&_")}var Er=J.custom;var Fr=Dr(Er)?Er:null;var Ir=function r(e,t,n,o){var i=t||{};if(qr(i,"quoteStyle")&&(i.quoteStyle!=="single"&&i.quoteStyle!=="double")){throw new TypeError('option "quoteStyle" must be "single" or "double"')}if(qr(i,"maxStringLength")&&(typeof i.maxStringLength==="number"?i.maxStringLength<0&&i.maxStringLength!==Infinity:i.maxStringLength!==null)){throw new TypeError('option "maxStringLength", if provided, must be a positive integer, Infinity, or `null`')}var a=qr(i,"customInspect")?i.customInspect:true;if(typeof a!=="boolean"&&a!=="symbol"){throw new TypeError("option \"customInspect\", if provided, must be `true`, `false`, or `'symbol'`")}if(qr(i,"indent")&&i.indent!==null&&i.indent!=="\t"&&!(parseInt(i.indent,10)===i.indent&&i.indent>0)){throw new TypeError('option "indent" must be "\\t", an integer > 0, or `null`')}if(qr(i,"numericSeparator")&&typeof i.numericSeparator!=="boolean"){throw new TypeError('option "numericSeparator", if provided, must be `true` or `false`')}var f=i.numericSeparator;if(typeof e==="undefined"){return"undefined"}if(e===null){return"null"}if(typeof e==="boolean"){return e?"true":"false"}if(typeof e==="string"){return Kr(e,i)}if(typeof e==="number"){if(e===0){return Infinity/e>0?"0":"-0"}var u=String(e);return f?Pr(e,u):u}if(typeof e==="bigint"){var c=String(e)+"n";return f?Pr(e,c):c}var y=typeof i.depth==="undefined"?5:i.depth;if(typeof n==="undefined"){n=0}if(n>=y&&y>0&&typeof e==="object"){return Mr(e)?"[Array]":"[Object]"}var p=ne(i,n);if(typeof o==="undefined"){o=[]}else if(Jr(o,e)>=0){return"[Circular]"}function s(e,t,a){if(t){o=br.call(o);o.push(t)}if(a){var f={depth:i.depth};if(qr(i,"quoteStyle")){f.quoteStyle=i.quoteStyle}return r(e,f,n+1,o)}return r(e,i,n+1,o)}if(typeof e==="function"&&!Nr(e)){var l=$r(e);var v=ie(e,s);return"[Function"+(l?": "+l:" (anonymous)")+"]"+(v.length>0?" { "+dr.call(v,", ")+" }":"")}if(Dr(e)){var d=jr?yr.call(String(e),/^(Symbol\(.*\))_[^)]*$/,"$1"):Sr.call(e);return typeof e==="object"&&!jr?Zr(d):d}if(Yr(e)){var b="<"+sr.call(String(e.nodeName));var h=e.attributes||[];for(var m=0;m<h.length;m++){b+=" "+h[m].name+"="+Rr(kr(h[m].value),"double",i)}b+=">";if(e.childNodes&&e.childNodes.length){b+="..."}b+="</"+sr.call(String(e.nodeName))+">";return b}if(Mr(e)){if(e.length===0){return"[]"}var g=ie(e,s);if(p&&!te(g)){return"["+oe(g,p)+"]"}return"[ "+dr.call(g,", ")+" ]"}if(Ur(e)){var S=ie(e,s);if(!("cause"in Error.prototype)&&"cause"in e&&!Ar.call(e,"cause")){return"{ ["+String(e)+"] "+dr.call(vr.call("[cause]: "+s(e.cause),S),", ")+" }"}if(S.length===0){return"["+String(e)+"]"}return"{ ["+String(e)+"] "+dr.call(S,", ")+" }"}if(typeof e==="object"&&a){if(Fr&&typeof e[Fr]==="function"&&J){return J(e,{depth:y-n})}else if(a!=="symbol"&&typeof e.inspect==="function"){return e.inspect()}}if(Vr(e)){var j=[];z.call(e,(function(r,t){j.push(s(t,e,true)+" => "+s(r,e))}));return ee("Map",L.call(e),j,p)}if(zr(e)){var w=[];X.call(e,(function(r){w.push(s(r,e))}));return ee("Set",K.call(e),w,p)}if(Hr(e)){return re("WeakMap")}if(Qr(e)){return re("WeakSet")}if(Lr(e)){return re("WeakRef")}if(Tr(e)){return Zr(s(Number(e)))}if(Cr(e)){return Zr(s(mr.call(e)))}if(Br(e)){return Zr(ir.call(e))}if(Wr(e)){return Zr(s(String(e)))}if(!xr(e)&&!Nr(e)){var A=ie(e,s);var O=Or?Or(e)===Object.prototype:e instanceof Object||e.constructor===Object;var P=e instanceof Object?"":"null prototype";var E=!O&&wr&&Object(e)===e&&wr in e?cr.call(Gr(e),8,-1):P?"Object":"";var F=O||typeof e.constructor!=="function"?"":e.constructor.name?e.constructor.name+" ":"";var I=F+(E||P?"["+dr.call(vr.call([],E||[],P||[]),": ")+"] ":"");if(A.length===0){return I+"{}"}if(p){return I+"{"+oe(A,p)+"}"}return I+"{ "+dr.call(A,", ")+" }"}return String(e)};function Rr(r,e,t){var n=(t.quoteStyle||e)==="double"?'"':"'";return n+r+n}function kr(r){return yr.call(String(r),/"/g,"&quot;")}function Mr(r){return Gr(r)==="[object Array]"&&(!wr||!(typeof r==="object"&&wr in r))}function xr(r){return Gr(r)==="[object Date]"&&(!wr||!(typeof r==="object"&&wr in r))}function Nr(r){return Gr(r)==="[object RegExp]"&&(!wr||!(typeof r==="object"&&wr in r))}function Ur(r){return Gr(r)==="[object Error]"&&(!wr||!(typeof r==="object"&&wr in r))}function Wr(r){return Gr(r)==="[object String]"&&(!wr||!(typeof r==="object"&&wr in r))}function Tr(r){return Gr(r)==="[object Number]"&&(!wr||!(typeof r==="object"&&wr in r))}function Br(r){return Gr(r)==="[object Boolean]"&&(!wr||!(typeof r==="object"&&wr in r))}function Dr(r){if(jr){return r&&typeof r==="object"&&r instanceof Symbol}if(typeof r==="symbol"){return true}if(!r||typeof r!=="object"||!Sr){return false}try{Sr.call(r);return true}catch(r){}return false}function Cr(r){if(!r||typeof r!=="object"||!mr){return false}try{mr.call(r);return true}catch(r){}return false}var _r=Object.prototype.hasOwnProperty||function(r){return r in this};function qr(r,e){return _r.call(r,e)}function Gr(r){return ar.call(r)}function $r(r){if(r.name){return r.name}var e=ur.call(fr.call(r),/^function\s*([\w$]+)/);if(e){return e[1]}return null}function Jr(r,e){if(r.indexOf){return r.indexOf(e)}for(var t=0,n=r.length;t<n;t++){if(r[t]===e){return t}}return-1}function Vr(r){if(!L||!r||typeof r!=="object"){return false}try{L.call(r);try{K.call(r)}catch(r){return true}return r instanceof Map}catch(r){}return false}function Hr(r){if(!rr||!r||typeof r!=="object"){return false}try{rr.call(r,rr);try{tr.call(r,tr)}catch(r){return true}return r instanceof WeakMap}catch(r){}return false}function Lr(r){if(!or||!r||typeof r!=="object"){return false}try{or.call(r);return true}catch(r){}return false}function zr(r){if(!K||!r||typeof r!=="object"){return false}try{K.call(r);try{L.call(r)}catch(r){return true}return r instanceof Set}catch(r){}return false}function Qr(r){if(!tr||!r||typeof r!=="object"){return false}try{tr.call(r,tr);try{rr.call(r,rr)}catch(r){return true}return r instanceof WeakSet}catch(r){}return false}function Yr(r){if(!r||typeof r!=="object"){return false}if(typeof HTMLElement!=="undefined"&&r instanceof HTMLElement){return true}return typeof r.nodeName==="string"&&typeof r.getAttribute==="function"}function Kr(r,e){if(r.length>e.maxStringLength){var t=r.length-e.maxStringLength;var n="... "+t+" more character"+(t>1?"s":"");return Kr(cr.call(r,0,e.maxStringLength),e)+n}var o=yr.call(yr.call(r,/(['\\])/g,"\\$1"),/[\x00-\x1f]/g,Xr);return Rr(o,"single",e)}function Xr(r){var e=r.charCodeAt(0);var t={8:"b",9:"t",10:"n",12:"f",13:"r"}[e];if(t){return"\\"+t}return"\\x"+(e<16?"0":"")+pr.call(e.toString(16))}function Zr(r){return"Object("+r+")"}function re(r){return r+" { ? }"}function ee(r,e,t,n){var o=n?oe(t,n):dr.call(t,", ");return r+" ("+e+") {"+o+"}"}function te(r){for(var e=0;e<r.length;e++){if(Jr(r[e],"\n")>=0){return false}}return true}function ne(r,e){var t;if(r.indent==="\t"){t="\t"}else if(typeof r.indent==="number"&&r.indent>0){t=dr.call(Array(r.indent+1)," ")}else{return null}return{base:t,prev:dr.call(Array(e+1),t)}}function oe(r,e){if(r.length===0){return""}var t="\n"+e.prev+e.base;return t+dr.call(r,","+t)+"\n"+e.prev}function ie(r,e){var t=Mr(r);var n=[];if(t){n.length=r.length;for(var o=0;o<r.length;o++){n[o]=qr(r,o)?e(r[o],r):""}}var i=typeof gr==="function"?gr(r):[];var a;if(jr){a={};for(var f=0;f<i.length;f++){a["$"+i[f]]=i[f]}}for(var u in r){if(!qr(r,u)){continue}if(t&&String(Number(u))===u&&u<r.length){continue}if(jr&&a["$"+u]instanceof Symbol){continue}else if(lr.call(/[^\w$]/,u)){n.push(e(u,r)+": "+e(r[u],r))}else{n.push(u+": "+e(r[u],r))}}if(typeof gr==="function"){for(var c=0;c<i.length;c++){if(Ar.call(r,i[c])){n.push("["+e(i[c])+"]: "+e(r[i[c]],r))}}}return n}var ae=D("%TypeError%");var fe=D("%WeakMap%",true);var ue=D("%Map%",true);var ce=q("WeakMap.prototype.get",true);var ye=q("WeakMap.prototype.set",true);var pe=q("WeakMap.prototype.has",true);var se=q("Map.prototype.get",true);var le=q("Map.prototype.set",true);var ve=q("Map.prototype.has",true);var de=function(r,e){for(var t=r,n;(n=t.next)!==null;t=n){if(n.key===e){t.next=n.next;n.next=r.next;r.next=n;return n}}};var be=function(r,e){var t=de(r,e);return t&&t.value};var he=function(r,e,t){var n=de(r,e);if(n){n.value=t}else{r.next={key:e,next:r.next,value:t}}};var me=function(r,e){return!!de(r,e)};var ge=function r(){var e;var t;var n;var o={assert:function(r){if(!o.has(r)){throw new ae("Side channel does not contain "+Ir(r))}},get:function(r){if(fe&&r&&(typeof r==="object"||typeof r==="function")){if(e){return ce(e,r)}}else if(ue){if(t){return se(t,r)}}else{if(n){return be(n,r)}}},has:function(r){if(fe&&r&&(typeof r==="object"||typeof r==="function")){if(e){return pe(e,r)}}else if(ue){if(t){return ve(t,r)}}else{if(n){return me(n,r)}}return false},set:function(r,o){if(fe&&r&&(typeof r==="object"||typeof r==="function")){if(!e){e=new fe}ye(e,r,o)}else if(ue){if(!t){t=new ue}le(t,r,o)}else{if(!n){n={key:{},next:null}}he(n,r,o)}}};return o};var Se=String.prototype.replace;var je=/%20/g;var we={RFC1738:"RFC1738",RFC3986:"RFC3986"};var Ae={default:we.RFC3986,formatters:{RFC1738:function(r){return Se.call(r,je,"+")},RFC3986:function(r){return String(r)}},RFC1738:we.RFC1738,RFC3986:we.RFC3986};var Oe=Object.prototype.hasOwnProperty;var Pe=Array.isArray;var Ee=function(){var r=[];for(var e=0;e<256;++e){r.push("%"+((e<16?"0":"")+e.toString(16)).toUpperCase())}return r}();var Fe=function r(e){while(e.length>1){var t=e.pop();var n=t.obj[t.prop];if(Pe(n)){var o=[];for(var i=0;i<n.length;++i){if(typeof n[i]!=="undefined"){o.push(n[i])}}t.obj[t.prop]=o}}};var Ie=function r(e,t){var n=t&&t.plainObjects?Object.create(null):{};for(var o=0;o<e.length;++o){if(typeof e[o]!=="undefined"){n[o]=e[o]}}return n};var Re=function r(e,t,n){if(!t){return e}if(typeof t!=="object"){if(Pe(e)){e.push(t)}else if(e&&typeof e==="object"){if(n&&(n.plainObjects||n.allowPrototypes)||!Oe.call(Object.prototype,t)){e[t]=true}}else{return[e,t]}return e}if(!e||typeof e!=="object"){return[e].concat(t)}var o=e;if(Pe(e)&&!Pe(t)){o=Ie(e,n)}if(Pe(e)&&Pe(t)){t.forEach((function(t,o){if(Oe.call(e,o)){var i=e[o];if(i&&typeof i==="object"&&t&&typeof t==="object"){e[o]=r(i,t,n)}else{e.push(t)}}else{e[o]=t}}));return e}return Object.keys(t).reduce((function(e,o){var i=t[o];if(Oe.call(e,o)){e[o]=r(e[o],i,n)}else{e[o]=i}return e}),o)};var ke=function r(e,t){return Object.keys(t).reduce((function(r,e){r[e]=t[e];return r}),e)};var Me=function(r,e,t){var n=r.replace(/\+/g," ");if(t==="iso-8859-1"){return n.replace(/%[0-9a-f]{2}/gi,unescape)}try{return decodeURIComponent(n)}catch(r){return n}};var xe=function r(e,t,n,o,i){if(e.length===0){return e}var a=e;if(typeof e==="symbol"){a=Symbol.prototype.toString.call(e)}else if(typeof e!=="string"){a=String(e)}if(n==="iso-8859-1"){return escape(a).replace(/%u[0-9a-f]{4}/gi,(function(r){return"%26%23"+parseInt(r.slice(2),16)+"%3B"}))}var f="";for(var u=0;u<a.length;++u){var c=a.charCodeAt(u);if(c===45||c===46||c===95||c===126||c>=48&&c<=57||c>=65&&c<=90||c>=97&&c<=122||i===Ae.RFC1738&&(c===40||c===41)){f+=a.charAt(u);continue}if(c<128){f=f+Ee[c];continue}if(c<2048){f=f+(Ee[192|c>>6]+Ee[128|c&63]);continue}if(c<55296||c>=57344){f=f+(Ee[224|c>>12]+Ee[128|c>>6&63]+Ee[128|c&63]);continue}u+=1;c=65536+((c&1023)<<10|a.charCodeAt(u)&1023);f+=Ee[240|c>>18]+Ee[128|c>>12&63]+Ee[128|c>>6&63]+Ee[128|c&63]}return f};var Ne=function r(e){var t=[{obj:{o:e},prop:"o"}];var n=[];for(var o=0;o<t.length;++o){var i=t[o];var a=i.obj[i.prop];var f=Object.keys(a);for(var u=0;u<f.length;++u){var c=f[u];var y=a[c];if(typeof y==="object"&&y!==null&&n.indexOf(y)===-1){t.push({obj:a,prop:c});n.push(y)}}}Fe(t);return e};var Ue=function r(e){return Object.prototype.toString.call(e)==="[object RegExp]"};var We=function r(e){if(!e||typeof e!=="object"){return false}return!!(e.constructor&&e.constructor.isBuffer&&e.constructor.isBuffer(e))};var Te=function r(e,t){return[].concat(e,t)};var Be=function r(e,t){if(Pe(e)){var n=[];for(var o=0;o<e.length;o+=1){n.push(t(e[o]))}return n}return t(e)};var De={arrayToObject:Ie,assign:ke,combine:Te,compact:Ne,decode:Me,encode:xe,isBuffer:We,isRegExp:Ue,maybeMap:Be,merge:Re};var Ce=Object.prototype.hasOwnProperty;var _e={brackets:function r(e){return e+"[]"},comma:"comma",indices:function r(e,t){return e+"["+t+"]"},repeat:function r(e){return e}};var qe=Array.isArray;var Ge=String.prototype.split;var $e=Array.prototype.push;var Je=function(r,e){$e.apply(r,qe(e)?e:[e])};var Ve=Date.prototype.toISOString;var He=Ae["default"];var Le={addQueryPrefix:false,allowDots:false,charset:"utf-8",charsetSentinel:false,delimiter:"&",encode:true,encoder:De.encode,encodeValuesOnly:false,format:He,formatter:Ae.formatters[He],indices:false,serializeDate:function r(e){return Ve.call(e)},skipNulls:false,strictNullHandling:false};var ze=function r(e){return typeof e==="string"||typeof e==="number"||typeof e==="boolean"||typeof e==="symbol"||typeof e==="bigint"};var Qe={};var Ye=function r(e,t,n,o,i,a,f,u,c,y,p,s,l,v,d){var b=e;var h=d;var m=0;var g=false;while((h=h.get(Qe))!==void undefined&&!g){var S=h.get(e);m+=1;if(typeof S!=="undefined"){if(S===m){throw new RangeError("Cyclic object value")}else{g=true}}if(typeof h.get(Qe)==="undefined"){m=0}}if(typeof f==="function"){b=f(t,b)}else if(b instanceof Date){b=y(b)}else if(n==="comma"&&qe(b)){b=De.maybeMap(b,(function(r){if(r instanceof Date){return y(r)}return r}))}if(b===null){if(o){return a&&!l?a(t,Le.encoder,v,"key",p):t}b=""}if(ze(b)||De.isBuffer(b)){if(a){var j=l?t:a(t,Le.encoder,v,"key",p);if(n==="comma"&&l){var w=Ge.call(String(b),",");var A="";for(var O=0;O<w.length;++O){A+=(O===0?"":",")+s(a(w[O],Le.encoder,v,"value",p))}return[s(j)+(qe(b)&&w.length===1?"[]":"")+"="+A]}return[s(j)+"="+s(a(b,Le.encoder,v,"value",p))]}return[s(t)+"="+s(String(b))]}var P=[];if(typeof b==="undefined"){return P}var E;if(n==="comma"&&qe(b)){E=[{value:b.length>0?b.join(",")||null:void undefined}]}else if(qe(f)){E=f}else{var F=Object.keys(b);E=u?F.sort(u):F}var I=n==="comma"&&qe(b)&&b.length===1?t+"[]":t;for(var R=0;R<E.length;++R){var k=E[R];var M=typeof k==="object"&&typeof k.value!=="undefined"?k.value:b[k];if(i&&M===null){continue}var x=qe(b)?typeof n==="function"?n(I,k):I:I+(c?"."+k:"["+k+"]");d.set(e,m);var N=ge();N.set(Qe,d);Je(P,r(M,x,n,o,i,a,f,u,c,y,p,s,l,v,N))}return P};var Ke=function r(e){if(!e){return Le}if(e.encoder!==null&&typeof e.encoder!=="undefined"&&typeof e.encoder!=="function"){throw new TypeError("Encoder has to be a function.")}var t=e.charset||Le.charset;if(typeof e.charset!=="undefined"&&e.charset!=="utf-8"&&e.charset!=="iso-8859-1"){throw new TypeError("The charset option must be either utf-8, iso-8859-1, or undefined")}var n=Ae["default"];if(typeof e.format!=="undefined"){if(!Ce.call(Ae.formatters,e.format)){throw new TypeError("Unknown format option provided.")}n=e.format}var o=Ae.formatters[n];var i=Le.filter;if(typeof e.filter==="function"||qe(e.filter)){i=e.filter}return{addQueryPrefix:typeof e.addQueryPrefix==="boolean"?e.addQueryPrefix:Le.addQueryPrefix,allowDots:typeof e.allowDots==="undefined"?Le.allowDots:!!e.allowDots,charset:t,charsetSentinel:typeof e.charsetSentinel==="boolean"?e.charsetSentinel:Le.charsetSentinel,delimiter:typeof e.delimiter==="undefined"?Le.delimiter:e.delimiter,encode:typeof e.encode==="boolean"?e.encode:Le.encode,encoder:typeof e.encoder==="function"?e.encoder:Le.encoder,encodeValuesOnly:typeof e.encodeValuesOnly==="boolean"?e.encodeValuesOnly:Le.encodeValuesOnly,filter:i,format:n,formatter:o,serializeDate:typeof e.serializeDate==="function"?e.serializeDate:Le.serializeDate,skipNulls:typeof e.skipNulls==="boolean"?e.skipNulls:Le.skipNulls,sort:typeof e.sort==="function"?e.sort:null,strictNullHandling:typeof e.strictNullHandling==="boolean"?e.strictNullHandling:Le.strictNullHandling}};var Xe=function(r,e){var t=r;var n=Ke(e);var o;var i;if(typeof n.filter==="function"){i=n.filter;t=i("",t)}else if(qe(n.filter)){i=n.filter;o=i}var a=[];if(typeof t!=="object"||t===null){return""}var f;if(e&&e.arrayFormat in _e){f=e.arrayFormat}else if(e&&"indices"in e){f=e.indices?"indices":"repeat"}else{f="indices"}var u=_e[f];if(!o){o=Object.keys(t)}if(n.sort){o.sort(n.sort)}var c=ge();for(var y=0;y<o.length;++y){var p=o[y];if(n.skipNulls&&t[p]===null){continue}Je(a,Ye(t[p],p,u,n.strictNullHandling,n.skipNulls,n.encode?n.encoder:null,n.filter,n.sort,n.allowDots,n.serializeDate,n.format,n.formatter,n.encodeValuesOnly,n.charset,c))}var s=a.join(n.delimiter);var l=n.addQueryPrefix===true?"?":"";if(n.charsetSentinel){if(n.charset==="iso-8859-1"){l+="utf8=%26%2310003%3B&"}else{l+="utf8=%E2%9C%93&"}}return s.length>0?l+s:""};var Ze=Object.prototype.hasOwnProperty;var rt=Array.isArray;var et={allowDots:false,allowPrototypes:false,allowSparse:false,arrayLimit:20,charset:"utf-8",charsetSentinel:false,comma:false,decoder:De.decode,delimiter:"&",depth:5,ignoreQueryPrefix:false,interpretNumericEntities:false,parameterLimit:1e3,parseArrays:true,plainObjects:false,strictNullHandling:false};var tt=function(r){return r.replace(/&#(\d+);/g,(function(r,e){return String.fromCharCode(parseInt(e,10))}))};var nt=function(r,e){if(r&&typeof r==="string"&&e.comma&&r.indexOf(",")>-1){return r.split(",")}return r};var ot="utf8=%26%2310003%3B";var it="utf8=%E2%9C%93";var at=function r(e,t){var n={};var o=t.ignoreQueryPrefix?e.replace(/^\?/,""):e;var i=t.parameterLimit===Infinity?undefined:t.parameterLimit;var a=o.split(t.delimiter,i);var f=-1;var u;var c=t.charset;if(t.charsetSentinel){for(u=0;u<a.length;++u){if(a[u].indexOf("utf8=")===0){if(a[u]===it){c="utf-8"}else if(a[u]===ot){c="iso-8859-1"}f=u;u=a.length}}}for(u=0;u<a.length;++u){if(u===f){continue}var y=a[u];var p=y.indexOf("]=");var s=p===-1?y.indexOf("="):p+1;var l,v;if(s===-1){l=t.decoder(y,et.decoder,c,"key");v=t.strictNullHandling?null:""}else{l=t.decoder(y.slice(0,s),et.decoder,c,"key");v=De.maybeMap(nt(y.slice(s+1),t),(function(r){return t.decoder(r,et.decoder,c,"value")}))}if(v&&t.interpretNumericEntities&&c==="iso-8859-1"){v=tt(v)}if(y.indexOf("[]=")>-1){v=rt(v)?[v]:v}if(Ze.call(n,l)){n[l]=De.combine(n[l],v)}else{n[l]=v}}return n};var ft=function(r,e,t,n){var o=n?e:nt(e,t);for(var i=r.length-1;i>=0;--i){var a;var f=r[i];if(f==="[]"&&t.parseArrays){a=[].concat(o)}else{a=t.plainObjects?Object.create(null):{};var u=f.charAt(0)==="["&&f.charAt(f.length-1)==="]"?f.slice(1,-1):f;var c=parseInt(u,10);if(!t.parseArrays&&u===""){a={0:o}}else if(!isNaN(c)&&f!==u&&String(c)===u&&c>=0&&(t.parseArrays&&c<=t.arrayLimit)){a=[];a[c]=o}else if(u!=="__proto__"){a[u]=o}}o=a}return o};var ut=function r(e,t,n,o){if(!e){return}var i=n.allowDots?e.replace(/\.([^.[]+)/g,"[$1]"):e;var a=/(\[[^[\]]*])/;var f=/(\[[^[\]]*])/g;var u=n.depth>0&&a.exec(i);var c=u?i.slice(0,u.index):i;var y=[];if(c){if(!n.plainObjects&&Ze.call(Object.prototype,c)){if(!n.allowPrototypes){return}}y.push(c)}var p=0;while(n.depth>0&&(u=f.exec(i))!==null&&p<n.depth){p+=1;if(!n.plainObjects&&Ze.call(Object.prototype,u[1].slice(1,-1))){if(!n.allowPrototypes){return}}y.push(u[1])}if(u){y.push("["+i.slice(u.index)+"]")}return ft(y,t,n,o)};var ct=function r(e){if(!e){return et}if(e.decoder!==null&&e.decoder!==undefined&&typeof e.decoder!=="function"){throw new TypeError("Decoder has to be a function.")}if(typeof e.charset!=="undefined"&&e.charset!=="utf-8"&&e.charset!=="iso-8859-1"){throw new TypeError("The charset option must be either utf-8, iso-8859-1, or undefined")}var t=typeof e.charset==="undefined"?et.charset:e.charset;return{allowDots:typeof e.allowDots==="undefined"?et.allowDots:!!e.allowDots,allowPrototypes:typeof e.allowPrototypes==="boolean"?e.allowPrototypes:et.allowPrototypes,allowSparse:typeof e.allowSparse==="boolean"?e.allowSparse:et.allowSparse,arrayLimit:typeof e.arrayLimit==="number"?e.arrayLimit:et.arrayLimit,charset:t,charsetSentinel:typeof e.charsetSentinel==="boolean"?e.charsetSentinel:et.charsetSentinel,comma:typeof e.comma==="boolean"?e.comma:et.comma,decoder:typeof e.decoder==="function"?e.decoder:et.decoder,delimiter:typeof e.delimiter==="string"||De.isRegExp(e.delimiter)?e.delimiter:et.delimiter,depth:typeof e.depth==="number"||e.depth===false?+e.depth:et.depth,ignoreQueryPrefix:e.ignoreQueryPrefix===true,interpretNumericEntities:typeof e.interpretNumericEntities==="boolean"?e.interpretNumericEntities:et.interpretNumericEntities,parameterLimit:typeof e.parameterLimit==="number"?e.parameterLimit:et.parameterLimit,parseArrays:e.parseArrays!==false,plainObjects:typeof e.plainObjects==="boolean"?e.plainObjects:et.plainObjects,strictNullHandling:typeof e.strictNullHandling==="boolean"?e.strictNullHandling:et.strictNullHandling}};var yt=function(r,e){var t=ct(e);if(r===""||r===null||typeof r==="undefined"){return t.plainObjects?Object.create(null):{}}var n=typeof r==="string"?at(r,t):r;var o=t.plainObjects?Object.create(null):{};var i=Object.keys(n);for(var a=0;a<i.length;++a){var f=i[a];var u=ut(f,n[f],t,typeof r==="string");o=De.merge(o,u,t)}if(t.allowSparse===true){return o}return De.compact(o)};var pt={formats:Ae,parse:yt,stringify:Xe};const st="nano-component-store:";const lt=(r="hash",e=window)=>{if(!e||!e.location)return{};if(r==="hash"&&e.location.hash)return pt.parse(e.location.hash.replace(/^\#/,""),{strictNullHandling:true});else if(r==="query"&&e.location.search)return pt.parse(e.location.search,{ignoreQueryPrefix:true});return{}};const vt=(r,e="hash",t=window,n="replace")=>{if(!t||!t.history)return;const o=e==="query"?t.location.search:t.location.hash;const i=e==="query"?t.location.pathname:t.location.pathname+t.location.search;let a=pt.stringify(r,{strictNullHandling:true,addQueryPrefix:false,encodeValuesOnly:true});if(!a||!a.length){if(!o||!o.length)return;if(n==="replace")t.history.replaceState(null,null,i);else t.history.pushState(null,null,i);return}if(e==="hash"&&t.location.hash==="#"+a){try{document.querySelector("#"+a).focus()}catch(r){}return}a=(e==="hash"?"#":"?")+a;if(a===o)return;if(n==="replace")t.history.replaceState(null,null,i+a);else t.history.pushState(null,null,i+a)};const dt=(r,e,t="hash",n=window,o="replace")=>{r=Object.keys(pt.parse(r))[0];const i={};i[r]=e;let a=lt(t,n);a={...a,...i};vt(a,t,n,o)};const bt=(r,e="hash",t=window)=>{r=Object.keys(pt.parse(r))[0];const n=lt(e,t);return n[r]||null};const ht=(r,e,t=window)=>{try{if(!e){t.sessionStorage.removeItem(st+r);return}t.sessionStorage.setItem(st+r,JSON.stringify(e))}catch(r){throw r}};const mt=(r,e=window)=>{try{const t=e.sessionStorage.getItem(st+r);return t!==null?JSON.parse(t):null}catch(r){throw r}};const gt=(r,e,t=window)=>{try{if(!e){t.localStorage.removeItem(st+r);return}t.localStorage.setItem(st+r,JSON.stringify(e))}catch(r){throw r}};const St=(r,e=window)=>{try{const t=e.localStorage.getItem(st+r);return t!==null?JSON.parse(t):null}catch(r){throw r}};const jt=new Map;const wt={init(e,t,n,o){const i=o||e.storeId||r(e).id;if(!i){console.error("No id set. You can only instantiate a new component store with an id. ");return}if(jt.get(i)){console.error("Duplicate store id usage. A store ID must be unique!",i);return}const a=t.reduce(((r,t)=>{if(typeof e[t]!==undefined)r[t]=e[t];return r}),{});jt.set(i,new At(i,e,t,a,n));const f=jt.get(i);f.dispatchToProps();const u=e.connectedCallback;e.connectedCallback=function(){jt.set(i,new At(i,e,t,a,n));const r=jt.get(i);if(u){u.call(e)}if(r)r.dispatchToProps()};const c=e.componentDidRender;e.componentDidRender=function(){const r=jt.get(i);if(c){c.call(e)}if(r)r.savePropsToStore()};const y=e.disconnectedCallback;e.disconnectedCallback=function(){const r=jt.get(i);if(r)r.delete();jt.delete(i);if(y){y.call(e)}}}};class At{constructor(r,t,n,o,i){this.method="session";this.initialState={};this.updateStore=true;this.onUrlChange=()=>{this.dispatchToProps(false)};this.savePropsToStore=()=>{if(this.updateStore){this.save(this.getData)}else if(!this.updateStore)this.updateStore=true};this.dispatchToProps=(r=true)=>{const e=this.retrieve();if(!e&&r)return;this.updateStore=r;this.keys.forEach((r=>{this.component[r]=e?e[r]:undefined}))};this.delete=()=>{if(this.method==="url-hash-push"||this.method==="url-query-push"){window.removeEventListener("popstate",this.onUrlChange)}};if(!r)throw new Error("No id set. You can only instantiate a new component store with an id");this.id=r;this.keys=n;this.component=t;if(o)this.initialState=o;if(i)this.method=i;this.savePropsToStore=e(this.savePropsToStore,500);if(this.method==="url-hash-push"||this.method==="url-query-push"){window.addEventListener("popstate",this.onUrlChange)}}equality(r,e){if(typeof r!==typeof e)return false;if(typeof r!=="object")return r===e;return JSON.stringify(r)===JSON.stringify(e)}get getData(){const r=this.keys.reduce(((r,e)=>{const t=this.equality(this.component[e],this.initialState[e]);if(typeof this.component[e]!=="undefined"&&!t){r[e]=this.component[e]}else if(t)delete r[e];return r}),{});return Object.keys(r).length?r:undefined}retrieve(){switch(this.method){case"url-hash":case"url-hash-push":return bt(this.id,"hash");case"url-query":case"url-query-push":return bt(this.id,"query");case"local":return St(this.id);default:return mt(this.id)}}save(r){switch(this.method){case"url-hash":return dt(this.id,r,"hash");case"url-query":return dt(this.id,r,"query");case"url-hash-push":return dt(this.id,r,"hash",window,"push");case"url-query-push":return dt(this.id,r,"query",window,"push");case"local":return gt(this.id,r);default:return ht(this.id,r)}}}export{wt as C};
-//# sourceMappingURL=p-e3860f00.js.map