@nanoporetech-digital/components 3.13.0 → 3.14.0

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

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

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

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,h as e,i as n,c as i,a as s,g as a}from"./p-6ef53fa1.js";import{b as o,g as r,c as l}from"./p-257432ff.js";import{d as c}from"./p-167b9165.js";import{g as h}from"./p-45abbbdd.js";import{g as d}from"./p-74a7fc4f.js";import{c as p}from"./p-411bb8f1.js";import{d as u,a as b}from"./p-9746b0a5.js";import{F as f,a as v}from"./p-76d8a8a8.js";const m=class{constructor(e){t(this,e);this.myAccountUser=undefined;this.userProfileUrl=undefined}render(){var t;return!!this.myAccountUser&&e("a",{href:this.userProfileUrl,class:"user-profile"},e("div",{class:"left"},e("div",{class:"avatar-container"},e("img",{class:"avatar",src:(t=this.myAccountUser)===null||t===void 0?void 0:t.small_avatar_url,alt:"User Avatar",height:75,width:75}),this.myAccountUser.is_nanopore_user&&e("img",{class:"logo-small",src:n(`../nano-assets/ont-wheel-light.svg`),alt:"Nanopore Logo"})),e("div",{class:"user-details"},e("span",{class:"name"},this.myAccountUser.name),e("span",{class:"bio"},this.myAccountUser.job_title," at ",this.myAccountUser.company))),e("div",{class:"right"},e("div",{class:"chevron-right"},e("nano-icon",{slot:"icon-end",name:"light/chevron-right","aria-label":"navigate to ..."}))))}};const g=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}:host .link ::slotted(nano-icon[slot=icon-end]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0}:host .link,:host button,:host a{-webkit-border-after:var(--border-bottom);border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.2s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translateX(100%)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translateX(0);transition:opacity 0.3s ease, transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:"";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{-webkit-padding-before:calc(var(--padding-top) / 2);padding-block-start:calc(var(--padding-top) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:calc(var(--padding-bottom) / 2);padding-block-end:calc(var(--padding-bottom) / 2);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}:host(.nano-menu-drawer) .text{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}';const _=class{constructor(e){t(this,e);this.nanoClose=i(this,"nanoClose",7);this.nanoOpen=i(this,"nanoOpen",7);this.nanoOpening=i(this,"nanoOpening",7);this.nanoClosing=i(this,"nanoClosing",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.hasSecondarySlot=false;this.animating=false;this.closeSecondary=async()=>{if(!this.hasSecondarySlot||!this.didOpen)return;this.open=false;await c(this.secondaryDiv,"open",false);this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});this.didOpen=false};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}if(!this.hasSecondarySlot||this.didOpen)return;this.open=true;await c(this.secondaryDiv,"open",true);this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});this.didOpen=true};this.toggleSecondary=()=>{if(!this.hasSecondarySlot)return;if(this.didOpen)this.closeSecondary();else this.openSecondary()};this.handleFocus=()=>{this.hasFocus=true;if(this.href&&!this.animating&&this.hasSecondarySlot)this.openSecondary();this.nanoFocus.emit()};this.handleHostBlur=()=>{if(this.animating)return;this.el.removeAttribute("tabindex");this.hasFocus=false;this.nanoBlur.emit()};this.handleHostClick=t=>{if(!this.hasAnchorEle)return;const e=t.target.closest("a, button");if(!e)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let t=0;if(o(this.el,".secondary-open.has-secondary").length)t=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),t);this.animating=false};this.handleMouseLeave=()=>{if(!this.href)return;clearTimeout(this.waitShow);this.fromHover=true;this.animating=true;this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300);this.animating=false};this.handleClick=()=>{this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary()};this.hasAnchorEle=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=()=>{};this.closeOnBlur=true;this.notification=false}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){setTimeout((()=>{if(!this.fromHover&&(!document.activeElement||document.activeElement===document.body))this.btn.focus({preventScroll:true});this.el.tabIndex=null;this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{if(!this.fromHover){const t=new window.IntersectionObserver((e=>{if(e[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});const e=h(this.secondaryDiv,true);if(e[0])e[0].focus();this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}handleClose(t){if(!this.didOpen||!this.hasSecondarySlot)return;if(!t.composedPath().some((t=>t===this.secondaryDiv)))this.toggleSecondary()}componentWillLoad(){const t=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!t;const e=r(this.el,"a, button")[0];this.hasAnchorEle=!!e;if(e){this.href=e.href?e.href:null;this.btn=e;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}}connectedCallback(){this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")}render(){return e(s,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:"menuitem"},e("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected},part:"ctrl-wrapper"},this.href&&!this.hasAnchorEle&&!this.disabled&&e("a",{part:"ctrl ctrl--anchor",target:this.target,ref:t=>this.btn=t,href:this.href,onFocus:this.handleFocus,class:{notification:this.notification}},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&e("button",{part:"ctrl ctrl--button",ref:t=>this.btn=t,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled,class:{notification:this.notification}},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&e("div",{class:"link"},e("slot",{name:"icon-start"}),e("slot",null),e("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&e("div",{class:"secondary-menu",ref:t=>this.secondaryDiv=t,tabIndex:-1},e("div",{class:"secondary-menu-content",part:"secondary-wrapper"},e("slot",{name:"secondary"})),e("div",{class:"secondary-menu-mask",onClick:this.closeSecondary,part:"secondary-mask"}))))}get el(){return a(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};_.style=g;const w='.sc-nano-select-h{box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{box-sizing:border-box}[hidden].sc-nano-select{display:none !important}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-select{min-inline-size:100%;display:block}.form-ctrl.has-helper-end.sc-nano-select{display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-select{opacity:1}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select{flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper.sc-nano-select{display:none}.form-ctrl__wrapper.sc-nano-select{display:block}label.sc-nano-select,.form-ctrl__more.sc-nano-select,.form-ctrl__error.sc-nano-select,.form-ctrl__helper.sc-nano-select{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.form-ctrl__more.visually-hide.sc-nano-select,.form-ctrl__error.visually-hide.sc-nano-select,.form-ctrl__helper.visually-hide.sc-nano-select{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}.form-ctrl__float-label.sc-nano-select{padding-block:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;transform:translateY(-50%);transform-origin:top left;inset-block-start:50%;transition:all 0.125s ease-in;opacity:1}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:1}.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:50%}.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);-webkit-padding-after:var(--padding-bottom);padding-block-end:var(--padding-bottom);line-height:1;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{margin-block:unset;-webkit-margin-end:5px;margin-inline-end:5px;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;appearance:none;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-block:unset;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--invalid)}.has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:1}.form-ctrl__more.sc-nano-select{block-size:1em;position:relative;margin-block:4px var(--padding-bottom);margin-inline:3px 0}.form-ctrl__helper.sc-nano-select,.form-ctrl__error.sc-nano-select{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-select{opacity:0}.form-ctrl__helper-end.sc-nano-select{flex:1 1 30%;min-inline-size:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .form-ctrl__error.sc-nano-select{opacity:1}.form-ctrl__input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);inline-size:100%;padding:0 !important;position:relative;flex:1 0 auto;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:flex;align-items:stretch;flex:1;max-inline-size:100%}.form-ctrl__clear-btn.sc-nano-select,.form-ctrl__slot-end.sc-nano-select,.form-ctrl__slot-start.sc-nano-select,.form-ctrl__slot-value-end.sc-nano-select{--nano-icon-size:1.4em;margin-block:0;margin-inline:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:flex;align-items:stretch;inline-size:auto}.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select{display:none}.form-ctrl__slot-start.sc-nano-select-s>*,.form-ctrl__slot-start .sc-nano-select-s>*,.form-ctrl__slot-end.sc-nano-select-s>*,.form-ctrl__slot-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;padding-inline:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;align-items:center;display:flex;block-size:100%;z-index:1}.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;inline-size:0;-webkit-appearance:none;appearance:none;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{padding-block:0;padding-inline:var(--padding-start) var(--padding-end);opacity:1;inline-size:auto}.form-ctrl__clear-btn.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239 65 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0 116 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgb(var(--color-invalid) / 100%);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgb(var(--color--focus-rgb) / 100%);--clear-btn-color--invalid:rgb(var(--color-invalid) / 100%);--label-color:var(--nano-input-label-color, "currentcolor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentcolor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186 220 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.select__native-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding:unset;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;appearance:none;margin:0;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;-webkit-padding-before:1.4em;padding-block-start:1.4em}.select__native-input.sc-nano-select::selection{background:transparent}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.select__native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.select__native-input.sc-nano-select::-webkit-search-decoration,.select__native-input.sc-nano-select::-webkit-search-cancel-button,.select__native-input.sc-nano-select::-webkit-search-results-button,.select__native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.select__native-input.sc-nano-select:invalid{box-shadow:none}.select__native-input.sc-nano-select::-ms-clear,.select__native-input.sc-nano-select::-ms-reveal{display:none}.select__native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select{line-height:1.5em;padding-block:var(--padding-top) var(--padding-bottom);white-space:pre-wrap}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select{-webkit-padding-before:1.8em;padding-block-start:1.8em}.masked.sc-nano-select-h .select__native-input.sc-nano-select{opacity:0;position:absolute;inset-inline-start:0;inset-block-start:0}.select__mask.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);pointer-events:none;line-height:2.5em;min-height:2.5em}.select__multi-wrap.sc-nano-select{padding-block:0 var(--padding-bottom);padding-inline:0 0;display:flex;flex:1;flex-wrap:wrap;overflow:hidden;align-items:flex-start}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{-webkit-padding-before:1em;padding-block-start:1em}.select__multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-bottom) 0;min-width:50px;width:100%;max-height:100%;-webkit-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;flex:0;position:relative;box-sizing:border-box;line-height:calc(2.5em - var(--padding-bottom));height:calc(2.5em - var(--padding-bottom))}.select__multi-input.sc-nano-select:last-child{flex:1}.select__multi-value.sc-nano-select{margin-block:var(--padding-bottom) 0;margin-inline:var(--padding-start) -3px;background:rgb(var(--multi-input-value-bg)/80%);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.35em 0.5em;max-width:100%;display:flex;align-items:center;font-size:var(--input-font-size);letter-spacing:1px;max-height:calc(2.5em - 8px)}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1}.select__multi-value-remove.sc-nano-select{background-position:center;-webkit-padding-start:0.5em;padding-inline-start:0.5em;margin:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;appearance:none;display:flex;align-items:center;inset-block-start:0;font-size:1em}.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.form-ctrl__float-label.sc-nano-select{width:calc(100% - (1em + var(--padding-start) * 2))}.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(21%);inset-block-start:0}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}';let y=0;const x=class{get inputCtrl(){return this._inputCtrl}set inputCtrl(t){if(t===this._inputCtrl)return;this._inputCtrl=t;this.setDataListOpts()}get selectWrap(){return this._selectWrap}set selectWrap(t){if(this._selectWrap===t)return;this._selectWrap=t;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(t){if(this._datalist===t)return;this._datalist=t;this.setDataListOpts()}constructor(e){t(this,e);this.nanoChange=i(this,"nanoChange",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.nanoDidLoad=i(this,"nanoDidLoad",7);this.nanoDidUnload=i(this,"nanoDidUnload",7);this.nanoSearchChange=i(this,"nanoSearchChange",7);this.nanoValidate=i(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${y++}`;this.rtl=false;this.onInit=true;this.customError="";this._value=this.multiple?[]:"";this._options=[];this.customValidate=()=>{if(!this.nativeSelect||!!this.customError||!this.nativeSelect["setCustomValidity"])return;this.nativeSelect.setCustomValidity("");if(this.required&&!this.valArray.length){this.nativeSelect.setCustomValidity("Please fill in this field.");return true}if(this.valArray.length&&!this.allowCustomValues&&!this.isValidValues()){this.nativeSelect.setCustomValidity("Please choose an item from this field.");return true}if(this.max&&this.valArray.length>this.max){this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);return true}if(this.min&&this.valArray.length<this.min){this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);return true}return false};this.showInlineValidation=t=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this._invalid=false;this.showErrorMsg=false;this.errorMessage="";if(!this.nativeSelect.validity.valid){this.errorMessage=this.nativeSelect.validationMessage;this._invalid=true;this.showErrorMsg=true}this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:t})};this.handleInvalid=t=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)t.preventDefault();requestAnimationFrame((()=>this.showInlineValidation(t)))};this.setValue=t=>{t.preventDefault();if(!this.multiple){this.value=t.detail.value;return}if(this.value&&this.value.length&&this.value.includes(t.detail.value))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=[...this.value.slice(0,this.currInsertIndex),t.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=t=>{if(!this.multiple||!this.value.length)return;if(!t)t=this.value[this.value.length-1];this.value=this.value.filter((e=>e!==t));this.currInsertIndex--;this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._eOptions=this.datalist.activeOptions.map((t=>{const{value:e,selected:n,label:i,filterMeta:s}=t;return{value:e,selected:n,label:i,filterMeta:s}}));this.customValidate()};this.handleDocumentKeyDown=t=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let e;switch(t.key){case"Backspace":if(this.inputCtrl.previousElementSibling)e=this.inputCtrl.previousElementSibling;else break;this.removeValue(e.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)e=this.inputCtrl.nextElementSibling;else break;this.removeValue(e.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(t.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(t.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);t.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;requestAnimationFrame((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}));this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=t=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const e=new window.Event("change");this.inputCtrl.dispatchEvent(e)};this.onClick=()=>{this.setFocus()};this.onDragStart=t=>{const e=t.target;this.dragVal=e.dataset.value};this.onDragEnd=t=>{this.dragVal=null;t.preventDefault()};this.onDragLeave=t=>{const e=t.target;const n=e.dataset&&e.dataset.value?e.dataset.value:null;if(!n||this.dragVal===n||!this.value.includes(this.dragVal)){t.preventDefault();return}const i=this.value.indexOf(n);const s=this.value.indexOf(this.dragVal);const a=this.value;const o=a[i];a[i]=a[s];a[s]=o;this.value=[...a]};this.onMultiInput=t=>{this.inputSearchVal=t.target.value.trim();this.nanoSearchChange.emit({value:t.target.value.trim()})};this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.inputSearchVal="";this._invalid=false;this.color=undefined;this.autofocus=false;this.disabled=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.label=undefined;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.placeholder=undefined;this.readonly=false;this.required=false;this.size=undefined;this.max=undefined;this.min=undefined;this.form=undefined;this.allowCustomValues=false;this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.showInlineValidation=u(this.showInlineValidation,50)}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeSelect)return"";return this.nativeSelect.validationMessage}get value(){return this._value}set value(t){if(typeof t==="string"){if(this.multiple)this._value=t.split(",");else this._value=t}else if(Array.isArray(t)){if(this.multiple)this._value=t;else this._value=t[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((t=>{const{value:e,selected:n,label:i,filterMeta:s}=t;return{value:e,selected:n,label:i,filterMeta:s}}))}set options(t){this._options=t.map((t=>{if(typeof t==="string")return{value:t,label:t};else return t}))}debounceChanged(){this.nanoSearchChange=b(this.nanoSearchChange,this.debounce)}shouldValidate(){if(this.onInit)return;if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}valueChanged(){this.customValidate();if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}requestAnimationFrame((()=>{this.shouldValidate();this.nanoChange.emit({value:this.value})}))}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;this.datalist.input=this.inputCtrl;const t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign(Object.assign({},t),this.dropDownConfig),{tetherTo:this.selectWrap})}async reportValidity(t){return new Promise((e=>{if(t){this.customValidate();this.showInlineValidation()}setTimeout((()=>{e({isValid:!this._invalid,errorMessage:this.nativeSelect.validationMessage})}),50)}))}async setFocus(){if(!this.inputCtrl)return;this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(t){if(this.nativeSelect){this.customError=t;this.nativeSelect.setCustomValidity(t);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((t=>this.options.find((e=>e.value===t))))}slotChangeObserver(){if(!window["MutationObserver"])return;const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]')}getLabel(t){const e=this.options.find((e=>{var n;return!e.disabled&&((n=e.value)===null||n===void 0?void 0:n.length)&&e.value===t}));return e&&e.label?e.label:t}onReset(t){const e=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!e||t.target!==this.el.closest("form"))return;this.clearSelectValue()}handleBlur(t){if(!this.hasFocus)return;const e=t;let n;requestAnimationFrame((()=>{if(e.key){if(e.key!=="Tab")return;n=d()}else n=t.target;if(l(this.el.tagName.toLowerCase(),n)!==this.el){this.onBlur()}}))}connectedCallback(){this.debounceChanged();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.customValidate();this.setDataListOpts();requestAnimationFrame((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const t=this.selectId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";const i=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const a=(({el:t,floatLabel:e,label:n,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h})=>({el:t,floatLabel:e,label:n,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h}))(this);const o=Object.assign(Object.assign({},a),{labelId:t,moreId:n,helperEndId:i,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId});const r=(({readonly:t,disabled:e})=>({readonly:t,disabled:e,clearControl:this.clearSelect}))(this);return e(s,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},p(this.color)),{"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"has-clr-btn":this.clearSelect,masked:this.mask})},e(f,Object.assign({},o),e(v,Object.assign({},r,{onClearText:this.clearSelectValue,control:this.el,ref:t=>this.selectWrap=t,endValueSlot:e("slot",{name:"down-arrow"},e("nano-icon",{slot:"value-end",name:"light/chevron-down"}))}),this.multiple&&e("div",{class:"select__multi-wrap select"},this.multipleValues(t,n,i)),!this.multiple&&[this.mask&&e("div",{class:"select__mask"},this.getLabel(this.value)),e("input",{id:this.selectId,class:"select__native-input",ref:t=>this.inputCtrl=t,"aria-labelledby":t+" "+n+" "+i,disabled:this.disabled,form:this.form,placeholder:this.placeholder,readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&e("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:t=>this.datalist=t,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:t=>{t.preventDefault();this.removeValue(t.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&e("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},e("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),e("slot",null)),e("select",{id:this.selectId+"-hidden",class:"select__native-ctrl",ref:t=>this.nativeSelect=t,"aria-labelledby":t+" "+n+" "+i,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((t=>e("option",{value:t,selected:true},t))),!this.allowCustomValues&&this.options.map((t=>e("option",{value:t.value,selected:this.valArray.includes(t.value),disabled:t.disabled,label:t.label},this.valArray.includes(t.value))))))}multipleValues(t,n,i){const s=e("input",{class:"select__multi-input",id:this.selectId,ref:t=>this.inputCtrl=t,readOnly:this.readonly,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onKeyDown:this.handleDocumentKeyDown,onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder&&!this.value.length?this.placeholder:"","aria-labelledby":t+" "+n+" "+i});if(!this.value.length)return s;return this.value.map(((t,n)=>{let i=e("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:t=>t.preventDefault(),draggable:true,"data-value":t,ref:t=>this.valueItems.push(t),class:"select__multi-value"},e("span",null,this.getLabel(t)),e("button",{class:"select__multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(t)},onMouseUp:()=>{this.removeValue(t)}},e("nano-icon",{name:"light/times"})));if(n===0&&this.currInsertIndex<0)i=[s,i];else if(n===this.currInsertIndex)i=[i,s];return i}))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};x.style=w;export{m as nano_global_nav_user_profile,_ as nano_nav_item,x as nano_select};
+//# sourceMappingURL=p-fa676bc6.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["GlobalNavUserProfile","render","this","myAccountUser","h","href","userProfileUrl","class","src","_a","small_avatar_url","alt","height","width","is_nanopore_user","getAssetPath","name","job_title","company","slot","navItemCss","NavItem","hasSecondarySlot","animating","closeSecondary","async","didOpen","open","displayTransition","secondaryDiv","nanoClosing","emit","secondaryMenu","openSecondary","window","innerWidth","secondaryActiveWidth","secondaryFallback","call","nanoOpening","toggleSecondary","handleFocus","hasFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","hasAnchorEle","foundlink","target","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","focus","openChange","didOpenChange","document","activeElement","body","preventScroll","tabIndex","nanoClose","panelio","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","focusableChild","getTabbableElements","nanoOpen","handleClose","e","composedPath","some","componentWillLoad","secondaryEle","querySelector","link","getDirectChildren","addEventListener","connectedCallback","isInGlobalNav","isInMenuDrawer","isInMenu","parentElement","Host","selected","disabled","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","part","ref","a","onFocus","notification","div","selectCss","selectIds","Select","inputCtrl","_inputCtrl","input","setDataListOpts","selectWrap","_selectWrap","ele","datalist","_datalist","constructor","hostRef","valueItems","selectId","rtl","onInit","customError","_value","multiple","_options","customValidate","nativeSelect","setCustomValidity","required","valArray","allowCustomValues","isValidValues","max","min","showInlineValidation","validateOn","_invalid","showErrorMsg","errorMessage","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","showInlineError","preventDefault","requestAnimationFrame","setValue","value","detail","includes","currInsertIndex","slice","inputSearchVal","removeValue","toFind","filter","val","setFocus","setOptions","activeOptions","_eOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","clearSelect","readonly","stopPropagation","onDragStart","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","debounce","validityMessage","split","Array","isArray","options","opts","opt","debounceChanged","debounceEvent","shouldValidate","valueChanged","nanoChange","currDWConfig","dropDownConfig","Object","assign","tetherTo","validateFirst","Promise","resolve","getSelectElement","message","find","slotChangeObserver","mo","MutationObserver","processSlottedContent","childList","subtree","hasLabelSlot","querySelectorAll","hasHelperSlot","hasHelperEndSlot","getLabel","onReset","form","handleBlur","kev","getActiveElement","closestElement","tagName","toLowerCase","CustomEvent","disconnectedCallback","componentDidLoad","labelId","moreId","helperEndId","compWrapOptions","floatLabel","hideLabel","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","createColorClasses","color","masked","mask","FormControlWrap","FormControl","onClearText","control","endValueSlot","multipleValues","id","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autofocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","span","push","tabindex","onTouchEnd","onMouseUp"],"sources":["./src/components/global-nav/global-nav-user-profile.tsx","./src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","./src/components/nav-item/nav-item.tsx","./src/components/select/select.scss?tag=nano-select&encapsulation=scoped","./src/components/select/select.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  getAssetPath,\n  ComponentInterface,\n} from '@stencil/core';\nimport { MyAccountUser } from './global-nav-interface';\n\n/**\n * Nanopore digital global navigation user profile.\n */\n@Component({\n  tag: 'nano-global-nav-user-profile',\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n  /**\n   * Logged in user details automatically populated from MyAccount\n   */\n  @Prop() myAccountUser: MyAccountUser;\n\n  /**\n   * Link to the user profile\n   */\n  @Prop() userProfileUrl: string;\n\n  // Render output\n\n  render() {\n    return (\n      !!this.myAccountUser && (\n        <a href={this.userProfileUrl} class=\"user-profile\">\n          <div class=\"left\">\n            <div class=\"avatar-container\">\n              <img\n                class=\"avatar\"\n                src={this.myAccountUser?.small_avatar_url}\n                alt=\"User Avatar\"\n                height={75}\n                width={75}\n              />\n              {this.myAccountUser.is_nanopore_user && (\n                <img\n                  class=\"logo-small\"\n                  src={getAssetPath(`../nano-assets/ont-wheel-light.svg`)}\n                  alt=\"Nanopore Logo\"\n                />\n              )}\n            </div>\n\n            <div class=\"user-details\">\n              <span class=\"name\">{this.myAccountUser.name}</span>\n\n              <span class=\"bio\">\n                {this.myAccountUser.job_title} at {this.myAccountUser.company}\n              </span>\n            </div>\n          </div>\n\n          <div class=\"right\">\n            <div class=\"chevron-right\">\n              <nano-icon\n                slot=\"icon-end\"\n                name=\"light/chevron-right\"\n                aria-label=\"navigate to ...\"\n              ></nano-icon>\n            </div>\n          </div>\n        </a>\n      )\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are automatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n  outline: none !important;\n\n  .nav-item,\n  .link {\n    outline: none !important;\n    border-radius: inherit;\n  }\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n    margin: 0;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-top) var(--padding-bottom);\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n    line-height: inherit;\n    outline: none !important;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline-end: var(--padding-end);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline-start: var(--padding-start);\n  }\n\n  .link {\n    ::slotted(nano-icon[slot='icon-start']) {\n      padding-inline-start: var(--padding-start);\n      padding-inline-end: 0;\n    }\n\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding-inline-end: var(--padding-end);\n      padding-inline-start: 0;\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-block-end: var(--border-bottom);\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus-visible,\n  a:focus-visible {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    box-shadow: #{$control-focus-style};\n  }\n\n  ::slotted(a:focus-visible),\n  ::slotted(button:focus-visible) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    box-shadow: #{$control-focus-style};\n  }\n}\n\n.nav-item {\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-selected,\n          var(--bg-color-open, var(--bg-color))\n        );\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-open,\n          var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n        );\n    }\n  }\n\n  &.disabled {\n    opacity: 0.6;\n\n    button,\n    a {\n      color: var(--color-disabled, var(--color)) !important;\n    }\n  }\n\n  &:not(.nano-menu) {\n    ::slotted(a:hover),\n    ::slotted(button:hover),\n    .link:hover,\n    button:hover,\n    a:hover {\n      color: var(--color-hover, var(--color-hover, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-hover,\n          var(--bg-color-focus, var(--bg-color))\n        );\n    }\n  }\n}\n\n:host(.has-focus) {\n  .link {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentcolor;\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    padding-inline-start: 0;\n    padding-inline-end: var(--padding-end);\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, currentcolor);\n    min-height: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 0.2s ease, transform 0.3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translateX(100%);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translateX(0);\n      transition: opacity 0.3s ease, transform 0.2s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button,\n  a {\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu-content {\n    padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n    padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    margin-inline: var(--padding-end) 0;\n    margin-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    margin-inline: 0 var(--padding-start);\n    margin-block: 0;\n  }\n\n  ::slotted(a),\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background-color: rgb(12 90 113);\n      height: 9px;\n      inset-inline: 0 5px;\n      inset-block-end: -22px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: 0.2s ease transform;\n    }\n  }\n\n  .selected button::before,\n  .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n}\n\n:host(.nano-global-nav-bar.selected) {\n  ::slotted(a) {\n    &::before {\n      transform: translateZ(0) scaleX(1);\n    }\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  .secondary-open button::before {\n    opacity: 0.7;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform 0.3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgb(0 0 0 / 15%);\n    inset-inline: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    padding-block-start: calc(var(--padding-top) / 2);\n    padding-inline-end: 0;\n    padding-block-end: calc(var(--padding-bottom) / 2);\n    padding-inline-start: var(--padding-start);\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentcolor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    padding-inline-end: var(--padding-end);\n    padding-inline-start: 0;\n    text-align: start;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n    font-size: var(--icon-size);\n    width: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding: 0 var(--padding-end) 0 0;\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    height: 100vh;\n    inset-inline: auto 0;\n    inset-block: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.2s ease;\n    overflow-y: auto;\n    width: var(--secondary-width, 400px);\n    max-width: 62vw;\n    opacity: 1;\n    padding-inline:\n      var(--secondary-padding-start, var(--padding-start))\n      var(--secondary-padding-end, var(--padding-end));\n    padding-block:\n      var(--secondary-padding-top, var(--padding-top))\n      var(--secondary-padding-bottom, var(--padding-bottom));\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n    }\n  }\n\n  .notification {\n    position: relative;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      width: 6px;\n      height: 6px;\n      background-color: #ef4135;\n      inset-inline-start: 10px;\n      inset-block-start: 7px;\n      border-radius: 50%;\n\n      @media (min-width: 52em) {\n        width: 7px;\n        height: 7px;\n        inset-inline-start: 8px;\n        inset-block-start: 5px;\n      }\n    }\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n  Listen,\n} from '@stencil/core';\nimport { getSiblings, getDirectChildren } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n *\n * @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() hasAnchorEle: boolean = false;\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    this.open ? this.openSecondary() : this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      setTimeout(() => {\n        if (\n          !this.fromHover &&\n          (!document.activeElement || document.activeElement === document.body)\n        )\n          this.btn.focus({ preventScroll: true });\n        this.el.tabIndex = null;\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      /* the secondadry panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelio = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelio.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelio.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        const focusableChild = getTabbableElements(this.secondaryDiv, true);\n        if (focusableChild[0]) focusableChild[0].focus();\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  @Listen('click', { target: 'body' })\n  @Listen('keyup', { target: 'body' })\n  handleClose(e: MouseEvent | KeyboardEvent) {\n    if (!this.didOpen || !this.hasSecondarySlot) return;\n    if (!e.composedPath().some((el) => el === this.secondaryDiv))\n      this.toggleSecondary();\n  }\n\n  private closeSecondary = async () => {\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n    this.open = false;\n    await displayTransition(this.secondaryDiv, 'open', false);\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = false;\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n\n    if (!this.hasSecondarySlot || this.didOpen) return;\n    this.open = true;\n    await displayTransition(this.secondaryDiv, 'open', true);\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = true;\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    const foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n  };\n\n  componentWillLoad() {\n    const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    const link = getDirectChildren<HTMLAnchorElement | HTMLButtonElement>(\n      this.el,\n      'a, button'\n    )[0];\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n  }\n\n  connectedCallback() {\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n          part=\"ctrl-wrapper\"\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              part=\"ctrl ctrl--anchor\"\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              part=\"ctrl ctrl--button\"\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabIndex={-1}\n            >\n              <div class=\"secondary-menu-content\" part=\"secondary-wrapper\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n                part=\"secondary-mask\"\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: $font-family-base;\n  display: block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus:\n    #{$input-border-style} var(\n      --nano-color-tint,\n      #{nano-color(\n        primary,\n        tint\n      )}\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n\n  color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n  --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.select__native-input {\n  @include text-inherit();\n\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-height: 2.1em;\n    padding-block-start: 1.4em;\n  }\n\n  &::selection {\n    background: transparent;\n  }\n\n  /* stylelint-disable-next-line selector-no-vendor-prefix */\n  &::-moz-selection {\n    background: transparent;\n  }\n\n  &::placeholder {\n    color: var(--placeholder-color);\n    font-family: inherit;\n    font-style: var(--placeholder-font-style);\n    font-weight: var(--placeholder-font-weight);\n    opacity: var(--placeholder-opacity);\n    line-height: inherit;\n    min-height: initial;\n  }\n\n  /* stylelint-disable-next-line selector-no-vendor-prefix */\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .form-ctrl__textarea & {\n    line-height: 1.5em;\n    padding-block: var(--padding-top) var(--padding-bottom);\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n  }\n\n  .has-float-label.textarea & {\n    padding-block-start: 1.8em;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n  }\n}\n\n.select__mask {\n  @include text-inherit();\n\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n// multi stuff\n\n.select__multi {\n  &-wrap {\n    padding-block: 0 var(--padding-bottom);\n    padding-inline: 0 0;\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    overflow: hidden;\n    align-items: flex-start;\n\n    :host(.has-float-label) & {\n      padding-block-start: 1em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-bottom) 0;\n    min-width: 50px;\n    width: 100%;\n    max-height: 100%;\n    appearance: none;\n    border: 0;\n    outline: none;\n    display: inline-block;\n    background: transparent;\n    flex: 0;\n    position: relative;\n    box-sizing: border-box;\n    line-height: calc(2.5em - var(--padding-bottom));\n    height: calc(2.5em - var(--padding-bottom));\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-value {\n    margin-block: var(--padding-bottom) 0;\n    margin-inline: var(--padding-start) -3px;\n    background: rgb(var(--multi-input-value-bg) / 80%);\n    color: var(--multi-input-value-text-color);\n    border: 1px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.35em 0.5em;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    letter-spacing: 1px;\n    max-height: calc(2.5em - 8px);\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1;\n    }\n  }\n\n  &-value-remove {\n    @include background-position(center);\n\n    padding-inline-start: 0.5em;\n    margin: 0;\n    color: inherit;\n    border: 0;\n    outline: none;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    inset-block-start: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n.form-ctrl__float-label {\n  width: calc(100% - (1em + (var(--padding-start) * 2)));\n\n  :host(.has-focus.has-multiple) & {\n    transform: translateY(-110%);\n    font-size: 0.8em;\n  }\n\n  :host(.has-value.has-multiple) & {\n    transform: translateY(21%);\n    inset-block-start: 0;\n  }\n}\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  VNode,\n  Listen,\n} from '@stencil/core';\n\nimport { getActiveElement } from '../../utils/active-element';\nimport { closestElement } from '../../utils/dom';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounce, debounceEvent } from '../../utils/throttle';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-interface';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\n\nlet selectIds = 0;\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot helper-end - helper text to accompany the form field on the side.\n * @slot down-arrow - use this to replace the default down arrow\n * @slot - default slot; nest `nano-option` elements\n */\n@Component({\n  tag: 'nano-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select implements ComponentInterface {\n  private nativeSelect?: HTMLSelectElement;\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private onInit: boolean = true;\n  private customError: string = '';\n\n  private get inputCtrl() {\n    return this._inputCtrl;\n  }\n  private set inputCtrl(input) {\n    if (input === this._inputCtrl) return;\n    this._inputCtrl = input;\n    this.setDataListOpts();\n  }\n  private _inputCtrl?: HTMLInputElement;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. Use get/set to set datalist options\n  private _selectWrap: HTMLElement;\n  private get selectWrap() {\n    return this._selectWrap;\n  }\n  private set selectWrap(ele: HTMLElement) {\n    if (this._selectWrap === ele) return;\n    this._selectWrap = ele;\n    this.setDataListOpts();\n  }\n\n  private _datalist: HTMLNanoDatalistElement;\n  private get datalist() {\n    return this._datalist;\n  }\n  private set datalist(ele: HTMLNanoDatalistElement) {\n    if (this._datalist === ele) return;\n    this._datalist = ele;\n    this.setDataListOpts();\n  }\n\n  constructor() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 50);\n  }\n\n  @State() currInsertIndex: number = -1;\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() hasHelperEndSlot = false;\n  @State() inputSearchVal: string = '';\n\n  @Element() el!: HTMLNanoSelectElement;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set.\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.nativeSelect) return '';\n    return this.nativeSelect.validationMessage;\n  }\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively use the 'label' slot\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId + '-name';\n\n  /**\n   * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * The initial size of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * Maximum number of options that can be selected when multiple is true\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum number of options that can be selected when multiple is true\n   */\n  @Prop() min?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * in multiple mode, allow users to enter their own values\n   */\n  @Prop() allowCustomValues: boolean = false;\n\n  /**\n   * The value of the select.\n   */\n  @Prop()\n  get value() {\n    return this._value;\n  }\n  set value(val: string | string[]) {\n    if (typeof val === 'string') {\n      if (this.multiple) this._value = val.split(',');\n      else this._value = val;\n    } else if (Array.isArray(val)) {\n      if (this.multiple) this._value = val;\n      else this._value = val[0];\n    }\n  }\n  private _value: Array<string> | string = this.multiple ? [] : '';\n\n  /**\n   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\n   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\n   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`\n   * Regardless - reading `options` will return the current component options - slotted or otherwise\n   */\n  @Prop()\n  get options(): Array<OptionInterface | string> {\n    if (this._options.length) return this._options;\n\n    if (!this.datalist || !this.datalist.activeOptions) return [];\n\n    return this._eOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  }\n  set options(opts: Array<OptionInterface | string>) {\n    this._options = opts.map((opt) => {\n      if (typeof opt === 'string') return { value: opt, label: opt };\n      else return opt;\n    });\n  }\n  private _options: OptionInterface[] = [];\n  @State() _eOptions: OptionInterface[] = [];\n\n  /**\n   * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n   */\n  @Prop() clearSelect = false;\n\n  /**\n   * Hide the native select element and cover with a value 'mask'.\n   * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n   */\n  @Prop() mask = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('readonly')\n  protected shouldValidate() {\n    if (this.onInit) return;\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n\n    this.customValidate();\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  /**\n   * Update the native select element when the value changes\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('value')\n  valueChanged() {\n    this.customValidate();\n\n    if (this.onInit) {\n      if (this.multiple) this.currInsertIndex = this.value.length - 1;\n      return;\n    }\n    requestAnimationFrame(() => {\n      this.shouldValidate();\n      this.nanoChange.emit({ value: this.value });\n    });\n  }\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop({ mutable: true }) dropDownConfig?: Partial<Dropdown> = {};\n\n  @Watch('dropDownConfig')\n  setDataListOpts() {\n    if (!this.datalist || !this.selectWrap) return;\n\n    this.datalist.input = this.inputCtrl;\n\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      ...this.dropDownConfig,\n      tetherTo: this.selectWrap,\n    };\n  }\n\n  // Custom Events\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Emitted when a keyboard input occurred on a multiple=\"true\" input\n   */\n  @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Public Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) {\n        this.customValidate();\n        this.showInlineValidation();\n      }\n      setTimeout(() => {\n        resolve({\n          isValid: !this._invalid,\n          errorMessage: this.nativeSelect.validationMessage,\n        });\n      }, 50);\n    });\n  }\n\n  /**\n   * Sets focus on the specified `nano-select`. Use this method instead of the global\n   * `select.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.inputCtrl) return;\n    this.inputCtrl.focus();\n    setTimeout(() => this.inputCtrl.click(), 50);\n  }\n\n  /**\n   * @returns the native `<select>` element used under the hood.\n   */\n  @Method()\n  getSelectElement(): Promise<HTMLSelectElement> {\n    return Promise.resolve(this.nativeSelect!);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeSelect) {\n      this.customError = message;\n      this.nativeSelect.setCustomValidity(message);\n      this.showInlineValidation();\n    }\n  }\n\n  /* Logic */\n\n  private get valArray() {\n    return typeof this.value === 'string'\n      ? this.value.length\n        ? [this.value]\n        : []\n      : this.value;\n  }\n\n  private isValidValues() {\n    return this.valArray.find((val) =>\n      (this.options as OptionInterface[]).find((opt) => opt.value === val)\n    );\n  }\n\n  private customValidate = () => {\n    if (\n      !this.nativeSelect ||\n      !!this.customError ||\n      !this.nativeSelect['setCustomValidity']\n    )\n      return;\n\n    this.nativeSelect.setCustomValidity('');\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.valArray.length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.valArray.length &&\n      !this.allowCustomValues &&\n      !this.isValidValues()\n    ) {\n      this.nativeSelect.setCustomValidity(\n        'Please choose an item from this field.'\n      );\n      return true;\n    }\n    if (this.max && this.valArray.length > this.max) {\n      this.nativeSelect.setCustomValidity(\n        `Only up to ${this.max} values are allowed.`\n      );\n      return true;\n    }\n    if (this.min && this.valArray.length < this.min) {\n      this.nativeSelect.setCustomValidity(\n        `You must select a minimum of ${this.min} values.`\n      );\n      return true;\n    }\n    return false;\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.showErrorMsg = false;\n    this.errorMessage = '';\n\n    if (!this.nativeSelect.validity.valid) {\n      this.errorMessage = this.nativeSelect.validationMessage;\n      this._invalid = true;\n      this.showErrorMsg = true;\n    }\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (this.showInlineError) ev.preventDefault();\n\n    requestAnimationFrame(() => this.showInlineValidation(ev));\n  };\n\n  private setValue = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.preventDefault();\n\n    if (!this.multiple) {\n      this.value = e.detail.value;\n      return;\n    }\n    if (this.value && this.value.length && this.value.includes(e.detail.value))\n      return;\n    if (this.max && this.value.length === this.max) return;\n\n    this.currInsertIndex++;\n    this.value = [\n      ...this.value.slice(0, this.currInsertIndex),\n      e.detail.value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n    this.inputSearchVal = '';\n    // this.selectWrap.clientWidth; // force reflow\n  };\n\n  private removeValue = (toFind?: string) => {\n    if (!this.multiple || !this.value.length) return;\n\n    if (!toFind) toFind = this.value[this.value.length - 1];\n    this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n    this.currInsertIndex--;\n    // this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n  };\n\n  private slotChangeObserver() {\n    if (!window['MutationObserver']) return;\n\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / helper content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n    this.hasHelperEndSlot = !!this.el.querySelector('[slot=\"helper-end\"]');\n  }\n\n  private getLabel(toFind: string) {\n    const label = (this.options as OptionInterface[]).find((opt) => {\n      return !opt.disabled && opt.value?.length && opt.value === toFind;\n    });\n    return label && label.label ? label.label : toFind;\n  }\n\n  /* Event handling */\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.el.closest('form');\n    if (!form || e.target !== this.el.closest('form')) return;\n\n    this.clearSelectValue();\n  }\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let target: Element;\n\n    requestAnimationFrame(() => {\n      if (kev.key) {\n        if (kev.key !== 'Tab') return;\n        target = getActiveElement();\n      } else target = e.target as Element;\n\n      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n        this.onBlur();\n      }\n    });\n  }\n\n  private setOptions = () => {\n    if (\n      !this.datalist ||\n      !this.datalist.activeOptions ||\n      !this.datalist.activeOptions.length\n    )\n      return;\n\n    this._eOptions = this.datalist.activeOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n    this.customValidate();\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple || !this.hasFocus) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.inputCtrl.previousElementSibling)\n            rm = this.inputCtrl.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.inputCtrl.nextElementSibling)\n            rm = this.inputCtrl.nextElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          if (!this.value.length) break;\n\n          if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.inputCtrl.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty' && !this.hasFocus)\n        this.showInlineValidation();\n    });\n    this.nanoBlur.emit();\n\n    if (!this.allowCustomValues && this.multiple) {\n      this.inputSearchVal = '';\n      const event = new window.Event('change');\n      this.inputCtrl.dispatchEvent(event);\n    }\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private clearSelectValue = (ev?: Event) => {\n    if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    if (this.multiple) {\n      this.value = [];\n      this.currInsertIndex = -1;\n    } else this.value = '';\n\n    this.inputCtrl.value = '';\n    const event = new window.Event('change');\n    this.inputCtrl.dispatchEvent(event);\n  };\n\n  private onClick = () => {\n    this.setFocus();\n  };\n\n  /* Multi event handlers */\n\n  private onDragStart = (ev: MouseEvent) => {\n    const ele = ev.target as HTMLSpanElement;\n    this.dragVal = ele.dataset.value;\n  };\n\n  private onDragEnd = (ev) => {\n    this.dragVal = null;\n    ev.preventDefault();\n  };\n\n  private onDragLeave = (ev: MouseEvent) => {\n    const ele = ev.target as HTMLSpanElement;\n    const spanVal: string =\n      ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n    if (\n      !spanVal ||\n      this.dragVal === spanVal ||\n      !this.value.includes(this.dragVal)\n    ) {\n      ev.preventDefault();\n      return;\n    }\n\n    const to = this.value.indexOf(spanVal);\n    const from = this.value.indexOf(this.dragVal);\n    const tmpArr = this.value as Array<string>;\n    const tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value.trim();\n    this.nanoSearchChange.emit({ value: ev.target.value.trim() });\n  };\n\n  /* Stencil Component lifecycle hooks */\n\n  connectedCallback() {\n    this.debounceChanged();\n\n    if (!Build.isBrowser) return;\n\n    this.el.dispatchEvent(\n      new CustomEvent('nanoDidLoad', {\n        detail: this.el,\n      })\n    );\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('nanoDidUnload', {\n        detail: this.el,\n      })\n    );\n\n    if (!Build.isBrowser) return;\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.customValidate();\n    this.setDataListOpts();\n    requestAnimationFrame(() => (this.onInit = false));\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n    const helperEndId = this.hasHelperEndSlot ? this.selectId + '-helper' : '';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.valueItems = [];\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      helperEndId,\n      hasValue: !!this.value.length || !!this.inputSearchVal.length,\n      controlId: this.selectId,\n    };\n\n    const controlOptions = (({ readonly, disabled }) => ({\n      readonly,\n      disabled,\n      clearControl: this.clearSelect,\n    }))(this);\n\n    return (\n      <Host\n        type={this.multiple ? 'select-multiple' : 'select-one'}\n        aria-disabled={this.disabled ? 'true' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': !!this.value.length || !!this.inputSearchVal.length,\n          'has-focus': this.hasFocus,\n          'is-invalid': this.invalid,\n          'has-label': this.label !== null && !this.floatLabel,\n          'has-float-label': this.label !== null && this.floatLabel,\n          rtl: this.rtl,\n          'has-multiple': this.multiple,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n        }}\n      >\n        <FormControlWrap {...wrapOptions}>\n          <FormControl\n            {...controlOptions}\n            onClearText={this.clearSelectValue}\n            control={this.el}\n            ref={(el) => (this.selectWrap = el)}\n            endValueSlot={\n              <slot name=\"down-arrow\">\n                <nano-icon slot=\"value-end\" name=\"light/chevron-down\" />\n              </slot>\n            }\n          >\n            {this.multiple && (\n              <div class=\"select__multi-wrap select\">\n                {this.multipleValues(labelId, moreId, helperEndId)}\n              </div>\n            )}\n            {!this.multiple && [\n              this.mask && (\n                <div class=\"select__mask\">\n                  {this.getLabel(this.value as string)}\n                </div>\n              ),\n              <input\n                id={this.selectId}\n                class=\"select__native-input\"\n                ref={(input) => (this.inputCtrl = input)}\n                aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n                disabled={this.disabled}\n                form={this.form}\n                placeholder={this.placeholder}\n                readOnly={true}\n                required={this.required}\n                value={this.getLabel(this.value as string)}\n                onFocus={this.onFocus}\n              />,\n            ]}\n          </FormControl>\n        </FormControlWrap>\n        {!this.readonly && !this.disabled && (\n          <nano-datalist\n            onNanoOptionsUpdated={this.setOptions}\n            ref={(el) => (this.datalist = el)}\n            selected={this.valArray}\n            type={this.multiple ? 'selctMulti' : 'select'}\n            onNanoSelect={this.setValue}\n            onNanoDeselect={(e) => {\n              e.preventDefault();\n              this.removeValue(e.detail.value);\n            }}\n            options={this._options.length ? this._options : undefined}\n          >\n            {this.allowCustomValues &&\n              this.multiple &&\n              !!this.inputSearchVal && (\n                <nano-option\n                  slot=\"list-top\"\n                  value={this.inputSearchVal}\n                  selected={false}\n                  label={this.inputSearchVal}\n                  onNanoSelect={() => this.inputCtrl.focus()}\n                >\n                  <span slot=\"check-icon\"></span>\n                  Add '{this.inputSearchVal}'\n                </nano-option>\n              )}\n            <slot />\n          </nano-datalist>\n        )}\n\n        <select\n          id={this.selectId + '-hidden'}\n          class=\"select__native-ctrl\"\n          ref={(select) => (this.nativeSelect = select)}\n          aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n          disabled={this.disabled}\n          form={this.form}\n          multiple={this.multiple}\n          name={this.name}\n          required={this.required}\n          onInvalid={this.handleInvalid}\n        >\n          {this.allowCustomValues &&\n            this.valArray.map((val) => {\n              return (\n                <option value={val} selected={true}>\n                  {val}\n                </option>\n              );\n            })}\n          {!this.allowCustomValues &&\n            this.options.map((opt: OptionInterface) => {\n              return (\n                <option\n                  value={opt.value}\n                  selected={this.valArray.includes(opt.value)}\n                  disabled={opt.disabled}\n                  label={opt.label}\n                >\n                  {this.valArray.includes(opt.value)}\n                </option>\n              );\n            })}\n        </select>\n      </Host>\n    );\n  }\n\n  private multipleValues(\n    labelId: string,\n    moreId: string,\n    helperEndId: string\n  ): VNode | (VNode | VNode[])[] {\n    const input: VNode = (\n      <input\n        class=\"select__multi-input\"\n        id={this.selectId}\n        ref={(input) => (this.inputCtrl = input)}\n        readOnly={this.readonly}\n        disabled={this.disabled}\n        autoFocus={this.autofocus}\n        autocomplete=\"off\"\n        onKeyDown={this.handleDocumentKeyDown}\n        onInput={this.onMultiInput}\n        value={this.inputSearchVal}\n        onTouchStart={this.onClick}\n        onMouseDown={this.onClick}\n        onFocus={this.onFocus}\n        placeholder={\n          this.placeholder && !this.value.length ? this.placeholder : ''\n        }\n        aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n      />\n    );\n    if (!this.value.length) return input;\n\n    return (this.value as Array<string>).map((val, i) => {\n      let toReturn: VNode | VNode[] = (\n        <span\n          onDragStart={this.onDragStart}\n          onDragLeave={this.onDragLeave}\n          onDragEnd={this.onDragEnd}\n          onDragOver={(e) => e.preventDefault()}\n          draggable\n          data-value={val}\n          ref={(span) => this.valueItems.push(span)}\n          class=\"select__multi-value\"\n        >\n          <span>{this.getLabel(val)}</span>\n          <button\n            class=\"select__multi-value-remove\"\n            type=\"button\"\n            tabindex=\"-1\"\n            onTouchEnd={() => {\n              this.removeValue(val);\n            }}\n            onMouseUp={() => {\n              this.removeValue(val);\n            }}\n          >\n            <nano-icon name=\"light/times\"></nano-icon>\n          </button>\n        </span>\n      );\n      if (i === 0 && this.currInsertIndex < 0)\n        toReturn = [input, toReturn as VNode];\n      else if (i === this.currInsertIndex)\n        toReturn = [toReturn as VNode, input];\n      return toReturn;\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/themes/nanopore.cn.css

@@ -0,0 +1 @@
+html{font-family:var(--nano-font-family);font-weight:var(--nano-font-weight, 500);color:var(--nano-text-color, #4a4a4a);font-size:var(--nano-base-font-size)}a{color:var(--nano-color-primary, #007495);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-block:16px 10px;font-weight:600;line-height:1.2}h1{margin-block-start:10px;font-size:28px}h2{margin-block-start:18px;font-size:24px}h3{font-size:22px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}small{font-size:75%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{inset-block-start:-0.5em}sub{inset-block-end:-0.25em}p{font-size:1.125rem;line-height:1.4;margin-block:0 1rem}p.supporting{font-size:.875rem}.heading{font-weight:500;line-height:1.3;margin-block:0 1.5rem;margin-inline:0}.heading__highlight{color:#007495}@media print{.heading{color:#4a4a4a}}.heading--one{font-size:2.5rem}@media(min-width: 768px){.heading--one{font-size:3.25rem}}.heading--two{font-size:1.5rem}@media(min-width: 768px){.heading--two{font-size:2rem}}.heading--three{font-size:1.125rem}@media(min-width: 768px){.heading--three{font-size:1.375rem}}.heading--four{font-size:1.125rem}.heading--five{font-size:1rem}.heading--light{font-weight:200}.heading--upper{text-transform:uppercase}.heading--meta{font-size:.875rem;text-transform:uppercase;letter-spacing:1.3px;font-weight:bold;margin-block-end:1rem}.button{padding:0;border:none;background-color:rgba(0,0,0,0);font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out,box-shadow 100ms ease-in-out,border-color 100ms ease-in-out,color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:500;cursor:pointer;background:rgba(0,0,0,.02)}.button::-moz-focus-inner{border:0;padding:0}.button:hover,.button:focus{text-decoration:none;color:inherit}@media print{.button{display:none}}.button:focus,.button.button--focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.button nano-icon,.button nano-spinner{--base-color-rgb: 255 255 255;margin-inline-start:.5em;margin-inline-end:0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.button.button--icon-start nano-icon,.button.button--icon-start nano-spinner{margin-inline-start:0;margin-inline-end:.5em}.button:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.button:active:not(.button--disabled):not(:disabled){box-shadow:none}.button--disabled,.button:disabled{opacity:.6}.button--disabled:hover,.button:disabled:hover{cursor:default}.button--primary{background-color:var(--nano-color-primary, #007495);color:var(--nano-color-primary-contrast, #fff)}.button--primary:hover:not(.button--disabled):not(:disabled),.button--primary.button--active{background-color:var(--nano-color-primary-shade, #00637f);color:var(--nano-color-primary-contrast, #fff)}.button--primary:hover:not(.button--disabled):not(:disabled).button--keyline,.button--primary.button--active.button--keyline{background-color:var(--nano-color-primary, #007495);color:var(--nano-color-primary-contrast, #fff)}.button--primary:focus{color:var(--nano-color-primary-contrast, #fff)}.button--primary.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--nano-color-primary, #007495);border-color:var(--nano-color-primary, #007495)}.button--primary.button--keyline:hover:not(.button--disabled):not(:disabled),.button--primary.button--keyline:not(:focus):not(.button--focus),.button--primary.button--keyline.button--active{box-shadow:none}.button--secondary{background-color:#17bb75;color:#fff}.button--secondary:hover:not(.button--disabled):not(:disabled),.button--secondary.button--active{background-color:#0b814f;color:#fff}.button--secondary:hover:not(.button--disabled):not(:disabled).button--keyline,.button--secondary.button--active.button--keyline{background-color:#17bb75;color:#fff}.button--secondary:focus{color:#fff}.button--secondary.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#17bb75;border-color:#17bb75}.button--secondary.button--keyline:hover:not(.button--disabled):not(:disabled),.button--secondary.button--keyline:not(:focus):not(.button--focus),.button--secondary.button--keyline.button--active{box-shadow:none}.button--light{background-color:#fff;color:#007495}.button--light:hover:not(.button--disabled):not(:disabled),.button--light.button--active{background-color:#fff;color:#0c5a71}.button--light:hover:not(.button--disabled):not(:disabled).button--keyline,.button--light.button--active.button--keyline{background-color:#fff;color:#007495}.button--light:focus{color:#007495}.button--light.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#fff;border-color:#fff}.button--light.button--keyline:hover:not(.button--disabled):not(:disabled),.button--light.button--keyline:not(:focus):not(.button--focus),.button--light.button--keyline.button--active{box-shadow:none}.button--danger{background-color:#ef4135;color:#fff}.button--danger:hover:not(.button--disabled):not(:disabled),.button--danger.button--active{background-color:#be2a20;color:#fff}.button--danger:hover:not(.button--disabled):not(:disabled).button--keyline,.button--danger.button--active.button--keyline{background-color:#ef4135;color:#fff}.button--danger:focus{color:#fff}.button--danger.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#ef4135;border-color:#ef4135}.button--danger.button--keyline:hover:not(.button--disabled):not(:disabled),.button--danger.button--keyline:not(:focus):not(.button--focus),.button--danger.button--keyline.button--active{box-shadow:none}.button--warning{background-color:#f57e20;color:#fff}.button--warning:hover:not(.button--disabled):not(:disabled),.button--warning.button--active{background-color:#b95e17;color:#fff}.button--warning:hover:not(.button--disabled):not(:disabled).button--keyline,.button--warning.button--active.button--keyline{background-color:#f57e20;color:#fff}.button--warning:focus{color:#fff}.button--warning.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#f57e20;border-color:#f57e20}.button--warning.button--keyline:hover:not(.button--disabled):not(:disabled),.button--warning.button--keyline:not(:focus):not(.button--focus),.button--warning.button--keyline.button--active{box-shadow:none}.button--tertiary{background:rgba(0,0,0,0);box-shadow:none;text-decoration:underline;font-weight:400}.button--tertiary:hover:not(.button--disabled):not(:disabled),.button--tertiary:hover.button--active,.button--tertiary:focus:not(.button--disabled):not(:disabled),.button--tertiary:focus.button--active{color:#b5aea7;box-shadow:none;text-decoration:underline}.nano-color-primary{--nano-color-base: var(--nano-color-primary, #007495) ;--nano-color-base-rgb: var( --nano-color-primary-rgb, 0 116 149 ) ;--nano-color-contrast: var(--nano-color-primary-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-primary-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-primary-shade, #00637f) ;--nano-color-tint: var(--nano-color-primary-tint, #2689a5) ;--nano-color-tint-rgb: var( --nano-color-primary-tint-rgb, 38 137 165 ) }.nano-color-secondary{--nano-color-base: var(--nano-color-secondary, #548caf) ;--nano-color-base-rgb: var( --nano-color-secondary-rgb, 84 140 175 ) ;--nano-color-contrast: var(--nano-color-secondary-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-secondary-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-secondary-shade, #477795) ;--nano-color-tint: var(--nano-color-secondary-tint, #6e9dbb) ;--nano-color-tint-rgb: var( --nano-color-secondary-tint-rgb, 110 157 187 ) }.nano-color-tertiary{--nano-color-base: var(--nano-color-tertiary, #b5aea7) ;--nano-color-base-rgb: var( --nano-color-tertiary-rgb, 181 174 167 ) ;--nano-color-contrast: var(--nano-color-tertiary-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-tertiary-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-tertiary-shade, #9a948e) ;--nano-color-tint: var(--nano-color-tertiary-tint, #c0bab4) ;--nano-color-tint-rgb: var( --nano-color-tertiary-tint-rgb, 192 186 180 ) }.nano-color-success{--nano-color-base: var(--nano-color-success, #17bb75) ;--nano-color-base-rgb: var( --nano-color-success-rgb, 23 187 117 ) ;--nano-color-contrast: var(--nano-color-success-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-success-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-success-shade, #149f63) ;--nano-color-tint: var(--nano-color-success-tint, #3ac58a) ;--nano-color-tint-rgb: var( --nano-color-success-tint-rgb, 58 197 138 ) }.nano-color-warning{--nano-color-base: var(--nano-color-warning, #f57e20) ;--nano-color-base-rgb: var( --nano-color-warning-rgb, 245 126 32 ) ;--nano-color-contrast: var(--nano-color-warning-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-warning-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-warning-shade, #d06b1b) ;--nano-color-tint: var(--nano-color-warning-tint, #f79141) ;--nano-color-tint-rgb: var( --nano-color-warning-tint-rgb, 247 145 65 ) }.nano-color-danger{--nano-color-base: var(--nano-color-danger, #ef4135) ;--nano-color-base-rgb: var( --nano-color-danger-rgb, 239 65 53 ) ;--nano-color-contrast: var(--nano-color-danger-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-danger-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-danger-shade, #cb372d) ;--nano-color-tint: var(--nano-color-danger-tint, #f15e53) ;--nano-color-tint-rgb: var( --nano-color-danger-tint-rgb, 241 94 83 ) }.nano-color-light{--nano-color-base: var(--nano-color-light, #f2f7f9) ;--nano-color-base-rgb: var( --nano-color-light-rgb, 242 247 249 ) ;--nano-color-contrast: var(--nano-color-light-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-light-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-light-shade, #ced2d4) ;--nano-color-tint: var(--nano-color-light-tint, #f4f8fa) ;--nano-color-tint-rgb: var( --nano-color-light-tint-rgb, 244 248 250 ) }.nano-color-medium{--nano-color-base: var(--nano-color-medium, #005c75) ;--nano-color-base-rgb: var( --nano-color-medium-rgb, 0 92 117 ) ;--nano-color-contrast: var(--nano-color-medium-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-medium-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-medium-shade, #004e63) ;--nano-color-tint: var(--nano-color-medium-tint, #26748a) ;--nano-color-tint-rgb: var( --nano-color-medium-tint-rgb, 38 116 138 ) }.nano-color-dark{--nano-color-base: var(--nano-color-dark, #455556) ;--nano-color-base-rgb: var( --nano-color-dark-rgb, 69 85 86 ) ;--nano-color-contrast: var(--nano-color-dark-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-dark-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-dark-shade, #3b4849) ;--nano-color-tint: var(--nano-color-dark-tint, #616f6f) ;--nano-color-tint-rgb: var( --nano-color-dark-tint-rgb, 97 111 111 ) }:root{--nano-base-font-size: 16px;--nano-padding: 1rem;--nano-font-family: helvetica, arial, "Lucida Grande", sans-serif;--nano-color-white:#fff;--nano-color-white-rgb:255 255 255;--nano-color-lightblue:#90c6e7;--nano-color-lightblue-rgb:144 198 231;--nano-color-blue:#007495;--nano-color-blue-rgb:0 116 149;--nano-color-darkblue:#0c5a71;--nano-color-darkblue-rgb:12 90 113;--nano-color-darkgrey:#455556;--nano-color-darkgrey-rgb:69 85 86;--nano-color-palegrey:#b5aea7;--nano-color-palegrey-rgb:181 174 167;--nano-color-dimgrey:#918b86;--nano-color-dimgrey-rgb:145 139 134;--nano-color-lightgrey:#e4e6e8;--nano-color-lightgrey-rgb:228 230 232;--nano-color-mediumgrey:#687576;--nano-color-mediumgrey-rgb:104 117 118;--nano-color-green:#17bb75;--nano-color-green-rgb:23 187 117;--nano-color-orange:#f57e20;--nano-color-orange-rgb:245 126 32;--nano-color-paleyellow:#ede797;--nano-color-paleyellow-rgb:237 231 151;--nano-color-purple:#a53f97;--nano-color-purple-rgb:165 63 151;--nano-color-red:#ef4135;--nano-color-red-rgb:239 65 53;--nano-color-yellow:#f5cc49;--nano-color-yellow-rgb:245 204 73;--nano-color-background:#f0efed;--nano-color-background-rgb:240 239 237;--nano-color-black:#4a4a4a;--nano-color-black-rgb:74 74 74;--nano-color-celsius:#f0efed;--nano-color-celsius-rgb:240 239 237;--nano-color-offwhite:#f9f9fb;--nano-color-offwhite-rgb:249 249 251;--nano-color-darkblue--faded:#005c75;--nano-color-darkblue--faded-rgb:0 92 117;--nano-color-red--faded:#fee8de;--nano-color-red--faded-rgb:254 232 222;--nano-color-orange--faded:#feeddb;--nano-color-orange--faded-rgb:254 237 219;--nano-color-yellow--faded:#fefcf2;--nano-color-yellow--faded-rgb:254 252 242;--nano-color-green--faded:#edf5f2;--nano-color-green--faded-rgb:237 245 242;--nano-color-blue--faded:#f2f7f9;--nano-color-blue--faded-rgb:242 247 249;--nano-color-blue--darker:#245a6f;--nano-color-blue--darker-rgb:36 90 111;--nano-color-green--darker:#0b814f;--nano-color-green--darker-rgb:11 129 79;--nano-color-red--darker:#be2a20;--nano-color-red--darker-rgb:190 42 32;--nano-color-purple--darker:#772c6d;--nano-color-purple--darker-rgb:119 44 109;--nano-color-orange--darker:#b95e17;--nano-color-orange--darker-rgb:185 94 23;--nano-color-palegrey--darker:#8c8379;--nano-color-palegrey--darker-rgb:140 131 121;--nano-color-lightblue--darker:#548caf;--nano-color-lightblue--darker-rgb:84 140 175}@media(max-width: 576px){:root{--nano-base-font-size: 14px}}body{background-color:var(--nano-background-color, #f0efed)}hr,.horizontal-rule,.content-divider{display:block;block-size:1px;border:0;background-color:rgba(181,174,167,.5);margin-block:.5em;margin-inline:0;padding:0}area[href]:not([tabindex="-1"]):focus,iframe:not([tabindex="-1"]):focus,[contentEditable=true]:not([tabindex="-1"]):focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));border-radius:3px}/*# sourceMappingURL=nanopore.cn.css.map */

package/dist/themes/nanopore.cn.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/global/style/nano-theme/typography.scss","../src/global/style/nano-theme/_colours.scss","../src/global/style/utilities/_mixins.scss","../src/global/style/nano-theme/buttons.scss","../src/global/style/utilities/css-patterns/_unstyled_input.scss","../src/global/style/utilities/css-patterns/_unstyled_anchor.scss","../src/global/style/nano-theme/_button.scss","../src/themes/nanopore.cn.scss","../src/global/style/utilities/_colours.scss","../src/global/style/nano-theme/_form.scss"],"names":[],"mappings":"AAuBA,KACE,oCACA,yCACA,MCsGW,gCDrGX,qCAGF,EACE,yCACA,qBAEA,QACE,0BAIJ,kBAME,uBACA,YAvCqB,IAwCrB,YAtCqB,IAyCvB,GACE,wBACA,UAzCa,KA4Cf,GACE,wBACA,UA5Ca,KA+Cf,GACE,UA9Ca,KAiDf,GACE,UAhDa,KAmDf,GACE,UAlDa,KAqDf,GACE,UApDa,KAuDf,MACE,cAGF,QAEE,kBACA,cACA,cACA,wBAGF,IACE,yBAGF,IACE,wBAGF,EACE,mBACA,gBACA,oBAEA,aACE,kBAIJ,SACE,gBACA,gBACA,sBACA,gBAEA,oBACE,cAGF,aAVF,SAWI,eAGF,cACE,iBEVA,yBFSF,cAII,mBAIJ,cACE,iBElBA,yBFiBF,cAII,gBAIJ,gBACE,mBE1BA,yBFyBF,gBAII,oBAIJ,eACE,mBAGF,eACE,eAGF,gBACE,gBAGF,gBACE,yBAGF,eACE,kBACA,yBACA,qBACA,iBACA,sBG/JJ,QCHE,UACA,YACA,+BACA,aACA,yBCJA,qBACA,cCgBA,WACE,uHAyDF,qFACA,yFACA,yEACA,qBACA,iDACA,+CACA,gBACA,eACA,2BFzEA,0BACE,SACA,UCTF,4BAEE,qBACA,cC+EF,aHlFF,QGmFI,cAGF,oCAEE,aACA,wHAGF,uCAEE,8BAEA,yBACA,oBACA,yCACA,sBACA,4BACA,qBAIA,6EAEE,sBACA,uBAIJ,qCACE,wEAGF,qDACE,gBAGF,mCAEE,WAEA,+CACE,eHzHN,iBGqCE,iBHnCE,mCGoCF,MHnCE,yCGqCF,6FAEE,iBAPS,yCAQT,MATW,yCAWX,6HACE,iBH5CF,mCG6CE,MH5CF,yCGgDF,uBACE,MHjDA,yCGoDF,iCArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MHxDA,mCGyDA,aHzDA,mCGwBF,8LAGE,gBHrBJ,mBG6BE,iBH3BE,QG4BF,MH3BE,KG6BF,iGAEE,iBAPS,QAQT,MATW,KAWX,iIACE,iBHpCF,QGqCE,MHpCF,KGwCF,yBACE,MHzCA,KG4CF,mCArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MHhDA,QGiDA,aHjDA,QGgBF,oMAGE,gBHbJ,eGqBE,iBHnBE,KGoBF,MHnBE,QGqBF,yFAEE,iBAPS,KAQT,MATW,QAWX,yHACE,iBH5BF,KG6BE,MH5BF,QGgCF,qBACE,MHjCA,QGoCF,+BArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MHxCA,KGyCA,aHzCA,KGQF,wLAGE,gBHJJ,gBGYE,iBHVE,QGWF,MHVE,KGYF,2FAEE,iBAPS,QAQT,MATW,KAWX,2HACE,iBHnBF,QGoBE,MHnBF,KGuBF,sBACE,MHxBA,KG2BF,gCArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MH/BA,QGgCA,aHhCA,QGDF,2LAGE,gBHIJ,iBGIE,iBHFE,QGGF,MHFE,KGIF,6FAEE,iBAPS,QAQT,MATW,KAWX,6HACE,iBHXF,QGYE,MHXF,KGeF,uBACE,MHhBA,KGmBF,iCArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MHvBA,QGwBA,aHxBA,QGTF,8LAGE,gBHYJ,kBACE,yBACA,gBACA,0BACA,gBAIE,0MAEE,cACA,gBACA,0BIrDJ,oBC6FA,uDACA,mEAMA,iEAGA,kFAMA,8DACA,4DACA,yED/GA,sBC6FA,yDACA,sEAMA,mEAGA,oFAMA,gEACA,8DACA,4ED/GA,qBC6FA,wDACA,sEAMA,qEAGA,gFAMA,+DACA,6DACA,2ED/GA,oBC6FA,uDACA,oEAMA,oEAGA,+EAMA,8DACA,4DACA,yED/GA,oBC6FA,uDACA,oEAMA,iEAGA,kFAMA,8DACA,4DACA,yED/GA,mBC6FA,sDACA,kEAMA,gEAGA,iFAMA,6DACA,2DACA,uED/GA,kBC6FA,qDACA,mEAMA,kEAGA,6EAMA,4DACA,0DACA,wED/GA,mBC6FA,sDACA,iEAMA,gEAGA,iFAMA,6DACA,2DACA,wED/GA,iBC6FA,oDACA,+DAMA,8DAGA,+EAMA,2DACA,yDACA,sED1GF,MACE,4BAMA,qBACA,kEAOE,wBACA,mCADA,+BACA,uCADA,0BACA,gCADA,8BACA,oCADA,8BACA,mCADA,8BACA,sCADA,6BACA,qCADA,+BACA,uCADA,gCACA,wCADA,2BACA,kCADA,4BACA,mCADA,gCACA,wCADA,4BACA,mCADA,yBACA,+BADA,4BACA,mCADA,gCACA,wCADA,2BACA,gCADA,6BACA,qCADA,8BACA,sCADA,qCACA,0CADA,gCACA,wCADA,mCACA,2CADA,mCACA,2CADA,kCACA,0CADA,iCACA,yCADA,kCACA,wCADA,mCACA,yCADA,iCACA,uCADA,oCACA,2CADA,oCACA,0CADA,sCACA,8CADA,uCACA,8CLiIA,yBKjJJ,MAII,6BAgBJ,KACE,iBN+FiB,sCM5FnB,qCAGE,cACA,eACA,SACA,sCACA,kBACA,gBACA,UAMA,0HACE,aACA,WE8DkB,6GF7DlB","file":"nanopore.cn.css","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../utilities/globals';\n@import 'colours';\n\n/// @prop - Font weight of all headings\n$headings-font-weight: 600 !default;\n/// @prop - Line height of all headings\n$headings-line-height: 1.2 !default;\n/// @prop - Font size of heading level 1\n$h1-font-size: 28px !default;\n/// @prop - Font size of heading level 2\n$h2-font-size: 24px !default;\n/// @prop - Font size of heading level 3\n$h3-font-size: 22px !default;\n/// @prop - Font size of heading level 4\n$h4-font-size: 20px !default;\n/// @prop - Font size of heading level 5\n$h5-font-size: 18px !default;\n/// @prop - Font size of heading level 6\n$h6-font-size: 16px !default;\n\nhtml {\n  font-family: var(--nano-font-family);\n  font-weight: var(--nano-font-weight, 500);\n  color: $text-color;\n  font-size: var(--nano-base-font-size);\n}\n\na {\n  color: nano-color(primary, base);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-block: 16px 10px;\n  font-weight: $headings-font-weight;\n  line-height: $headings-line-height;\n}\n\nh1 {\n  margin-block-start: 10px;\n  font-size: $h1-font-size;\n}\n\nh2 {\n  margin-block-start: 18px;\n  font-size: $h2-font-size;\n}\n\nh3 {\n  font-size: $h3-font-size;\n}\n\nh4 {\n  font-size: $h4-font-size;\n}\n\nh5 {\n  font-size: $h5-font-size;\n}\n\nh6 {\n  font-size: $h6-font-size;\n}\n\nsmall {\n  font-size: 75%;\n}\n\nsub,\nsup {\n  position: relative;\n  font-size: 75%;\n  line-height: 0;\n  vertical-align: baseline;\n}\n\nsup {\n  inset-block-start: -0.5em;\n}\n\nsub {\n  inset-block-end: -0.25em;\n}\n\np {\n  font-size: 1.125rem;\n  line-height: 1.4;\n  margin-block: 0 1rem;\n\n  &.supporting {\n    font-size: 0.875rem;\n  }\n}\n\n.heading {\n  font-weight: 500;\n  line-height: 1.3;\n  margin-block: 0 1.5rem;\n  margin-inline: 0;\n\n  &__highlight {\n    color: map.get($colors, blue);\n  }\n\n  @media print {\n    color: map.get($colors, black);\n  }\n\n  &--one {\n    font-size: 2.5rem;\n\n    @include media-breakpoint-up('md') {\n      font-size: 3.25rem;\n    }\n  }\n\n  &--two {\n    font-size: 1.5rem;\n\n    @include media-breakpoint-up('md') {\n      font-size: 2rem;\n    }\n  }\n\n  &--three {\n    font-size: 1.125rem;\n\n    @include media-breakpoint-up('md') {\n      font-size: 1.375rem;\n    }\n  }\n\n  &--four {\n    font-size: 1.125rem;\n  }\n\n  &--five {\n    font-size: 1rem;\n  }\n\n  &--light {\n    font-weight: 200;\n  }\n\n  &--upper {\n    text-transform: uppercase;\n  }\n\n  &--meta {\n    font-size: 0.875rem;\n    text-transform: uppercase;\n    letter-spacing: 1.3px;\n    font-weight: bold;\n    margin-block-end: 1rem;\n  }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../utilities/colours';\n\n$colors: (\n  white: #fff,\n  lightblue: #90c6e7,\n  blue: darken(#0084a9, 4%),\n  darkblue: #0c5a71,\n  darkgrey: #455556,\n  palegrey: #b5aea7,\n  dimgrey: #918b86,\n  lightgrey: #e4e6e8,\n  mediumgrey: #687576,\n  green: #17bb75,\n  orange: #f57e20,\n  paleyellow: #ede797,\n  purple: #a53f97,\n  red: #ef4135,\n  yellow: #f5cc49,\n  background: #f0efed,\n  black: #4a4a4a,\n  // Bg Colors\n  celsius: #f0efed,\n  offwhite: #f9f9fb,\n  darkblue--faded: #005c75,\n  // Faded Colors\n  red--faded: #fee8de,\n  orange--faded: #feeddb,\n  yellow--faded: #fefcf2,\n  green--faded: #edf5f2,\n  blue--faded: #f2f7f9,\n  // Darkened Colours\n  blue--darker: #245a6f,\n  green--darker: #0b814f,\n  red--darker: #be2a20,\n  purple--darker: #772c6d,\n  orange--darker: #b95e17,\n  palegrey--darker: #8c8379,\n  lightblue--darker: #548caf,\n);\n\n// Text\n$dark-text-default: map.get($colors, black);\n$light-text-default: map.get($colors, white);\n\n// Theme\n$primary: map.get($colors, blue) !default;\n$secondary: map.get($colors, lightblue--darker) !default;\n$tertiary: map.get($colors, palegrey) !default;\n$success: map.get($colors, green) !default;\n$warning: map.get($colors, orange) !default;\n$danger: map.get($colors, red) !default;\n$light: map.get($colors, blue--faded) !default;\n$medium: map.get($colors, darkblue--faded) !default;\n$dark: map.get($colors, darkgrey) !default;\n\n// Theme css variables and variations\n$themes: (\n  primary: (\n    base: $primary,\n    contrast: color-contrast($primary),\n    shade: get-color-shade($primary),\n    tint: get-color-tint($primary),\n  ),\n  secondary: (\n    base: $secondary,\n    contrast: color-contrast($secondary),\n    shade: get-color-shade($secondary),\n    tint: get-color-tint($secondary),\n  ),\n  tertiary: (\n    base: $tertiary,\n    contrast: color-contrast($tertiary),\n    shade: get-color-shade($tertiary),\n    tint: get-color-tint($tertiary),\n  ),\n  success: (\n    base: $success,\n    contrast: color-contrast($tertiary),\n    shade: get-color-shade($success),\n    tint: get-color-tint($success),\n  ),\n  warning: (\n    base: $warning,\n    contrast: color-contrast($warning),\n    shade: get-color-shade($warning),\n    tint: get-color-tint($warning),\n  ),\n  danger: (\n    base: $danger,\n    contrast: color-contrast($danger),\n    shade: get-color-shade($danger),\n    tint: get-color-tint($danger),\n  ),\n  light: (\n    base: $light,\n    contrast: color-contrast($light),\n    shade: get-color-shade($light),\n    tint: get-color-tint($light),\n  ),\n  medium: (\n    base: $medium,\n    contrast: color-contrast($medium),\n    shade: get-color-shade($medium),\n    tint: get-color-tint($medium),\n  ),\n  dark: (\n    base: $dark,\n    contrast: color-contrast($dark),\n    shade: get-color-shade($dark),\n    tint: get-color-tint($dark),\n  ),\n) !default;\n\n// Default Foreground and Background Colors\n// -------------------------------------------------------------------------------------------\n// Used internally to calculate the default steps\n\n$background-color-value: map.get($colors, background) !default;\n$background-color-rgb-value: color-to-rgb-list(\n  $background-color-value\n) !default;\n\n$text-color-value: map.get($colors, black) !default;\n$text-color-rgb-value: color-to-rgb-list($text-color-value) !default;\n\n$text-color: var(--nano-text-color, $text-color-value) !default;\n$text-color-rgb: var(--nano-text-color-rgb, $text-color-rgb-value) !default;\n\n$background-color: var(\n  --nano-background-color,\n  $background-color-value\n) !default;\n$background-color-rgb: var(\n  --nano-background-color-rgb,\n  $background-color-rgb-value\n) !default;\n","@mixin input-cover() {\n  inset-block: 0;\n  inset-inline: auto;\n  margin: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n}\n\n@mixin text-inherit() {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n}\n\n// A transition-friendly alternative to `display: none` for hiding content\n@mixin hidden {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden; // prevent tab stops and screen reader discovery\n}\n\n// Hides content visually while still making it available to screen readers\n@mixin visually-hide {\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n  $keys: map-keys($map);\n\n  @return nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n  $min: map-get($breakpoints, $name);\n\n  @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) ==null, '', '-#{$name}');\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  }\n\n  @else {\n    @content;\n  }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next(\n  $name,\n  $breakpoints: $screen-breakpoints,\n  $breakpoint-names: map-keys($breakpoints)\n) {\n  $n: index($breakpoint-names, $name);\n\n  @return if(\n    $n < length($breakpoint-names),\n    nth($breakpoint-names, $n + 1),\n    null\n  );\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is calculated as the minimum of the current one.\n//\n//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @return if($min, breakpoint-min($name, $breakpoints), null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  }\n\n  @else {\n    @content;\n  }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n  @content;\n\n  // $root: #{&};\n  // @at-root [dir] {\n  //   #{$root} {\n  //     @content;\n  //   }\n  // }\n}\n\n@mixin host($hostCtx: null) {\n  $root: #{&};\n\n  @if $hostCtx {\n    @at-root :host(#{$hostCtx}) {\n      #{$root} {\n        @content;\n      }\n    }\n  }\n\n  @else {\n    @at-root :host {\n      #{$root} {\n        @content;\n      }\n    }\n  }\n}\n\n@mixin rtl-host($hostCtx: '') {\n  $root: #{&};\n\n  @at-root :host(#{$hostCtx}[dir='rtl']) {\n    #{$root} {\n      @content;\n    }\n  }\n}\n\n@mixin ltr-host($hostCtx: '') {\n  $root: #{&};\n\n  @at-root :host(#{$hostCtx}:not([dir='rtl'])) {\n    #{$root} {\n      @content;\n    }\n  }\n}\n\n@mixin rtl() {\n  $root: #{&};\n\n  @at-root #{$root + '[dir=rtl]'} {\n    @content;\n  }\n}\n\n@mixin ltr() {\n  @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n  $url: url-encode($svg);\n  $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), ' ');\n\n  @if $flip-rtl !=true or $viewBox==null {\n    @include multi-dir() {\n      background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n    }\n  }\n\n  @else {\n    $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n    $flipped-url: $svg;\n    $flipped-url: str-replace($flipped-url, '<path', '<path #{$transform}');\n    $flipped-url: str-replace($flipped-url, '<line', '<line #{$transform}');\n    $flipped-url: str-replace(\n      $flipped-url,\n      '<polygon',\n      '<polygon #{$transform}'\n    );\n    $flipped-url: url-encode($flipped-url);\n\n    @include ltr() {\n      background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n    }\n\n    @include rtl() {\n      background-image: url('data:image/svg+xml;charset=utf-8,#{$flipped-url}');\n    }\n  }\n}\n\n@mixin background-position(\n  $horizontal,\n  $horizontal-amount: null,\n  $vertical: null,\n  $vertical-amount: null\n) {\n  @if $horizontal==start or $horizontal==end {\n    $horizontal-ltr: null;\n    $horizontal-rtl: null;\n\n    @if $horizontal==start {\n      $horizontal-ltr: left;\n      $horizontal-rtl: right;\n    }\n\n    @else {\n      $horizontal-ltr: right;\n      $horizontal-rtl: left;\n    }\n\n    @include ltr() {\n      background-position:\n        $horizontal-ltr $horizontal-amount $vertical\n        $vertical-amount;\n    }\n\n    @include rtl() {\n      background-position:\n        $horizontal-rtl $horizontal-amount $vertical\n        $vertical-amount;\n    }\n  }\n\n  @else {\n    @include multi-dir() {\n      background-position:\n        $horizontal $horizontal-amount $vertical\n        $vertical-amount;\n    }\n  }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n  @if $x-axis==start {\n    @include ltr() {\n      transform-origin: left $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: right $y-axis;\n    }\n  }\n\n  @else if $x-axis==end {\n    @include ltr() {\n      transform-origin: right $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: left $y-axis;\n    }\n  }\n\n  @else if $x-axis==left or $x-axis==right {\n    @include multi-dir() {\n      transform-origin: $x-axis $y-axis;\n    }\n  }\n\n  @else {\n    @include ltr() {\n      transform-origin: $x-axis $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: calc(100% - #{$x-axis}) $y-axis;\n    }\n  }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n  $extra: null;\n\n  $x: null;\n  $ltr-translate: null;\n  $rtl-translate: null;\n\n  @each $transform in $transforms {\n    @if (str-index($transform, translate3d)) {\n      $transform: str-replace($transform, 'translate3d(');\n      $transform: str-replace($transform, ')');\n\n      $coordinates: str-split($transform, ',');\n\n      $x: nth($coordinates, 1);\n      $y: nth($coordinates, 2);\n      $z: nth($coordinates, 3);\n\n      $ltr-translate: translate3d($x, $y, $z);\n      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n    }\n\n    @else {\n      @if $extra==null {\n        $extra: $transform;\n      }\n\n      @else {\n        $extra: $extra $transform;\n      }\n    }\n  }\n\n  @if $x== '0' or $x==null {\n    @include multi-dir() {\n      transform: $ltr-translate $extra;\n    }\n  }\n\n  @else {\n    @include ltr() {\n      transform: $ltr-translate $extra;\n    }\n\n    @include rtl() {\n      transform: $rtl-translate $extra;\n    }\n  }\n}\n\n@mixin hide-scrollbar() {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    inline-size: 0;\n    block-size: 0;\n  }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import './colours';\n@import './button';\n\n.button {\n  @include button-base;\n}\n\n.button--primary {\n  @include button-standard(\n    #{nano-color(primary, base)},\n    #{nano-color(primary, contrast)},\n    #{nano-color(primary, shade)}\n  );\n}\n\n.button--secondary {\n  @include button-standard(\n    map.get($colors, green),\n    map.get($colors, white),\n    map.get($colors, green--darker)\n  );\n}\n\n.button--light {\n  @include button-standard(\n    map.get($colors, white),\n    map.get($colors, blue),\n    map.get($colors, white),\n    map.get($colors, darkblue)\n  );\n}\n\n.button--danger {\n  @include button-standard(\n    map.get($colors, red),\n    map.get($colors, white),\n    map.get($colors, red--darker)\n  );\n}\n\n.button--warning {\n  @include button-standard(\n    map.get($colors, orange),\n    map.get($colors, white),\n    map.get($colors, orange--darker)\n  );\n}\n\n.button--tertiary {\n  background: transparent;\n  box-shadow: none;\n  text-decoration: underline;\n  font-weight: 400;\n\n  &:hover,\n  &:focus {\n    &:not(.button--disabled):not(:disabled),\n    &.button--active {\n      color: map.get($colors, palegrey);\n      box-shadow: none;\n      text-decoration: underline;\n    }\n  }\n}\n","/// Strips browser styling from an input.\n\n@mixin unstyled-input($outline: false) {\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  font: inherit;\n  -webkit-box-align: center;\n\n  @if $outline == false {\n    outline: none;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n    padding: 0;\n  }\n}\n","/// Displays an anchor as plain text.\n\n@mixin unstyled-anchor {\n  text-decoration: none;\n  color: inherit;\n\n  &:hover,\n  &:focus {\n    text-decoration: none;\n    color: inherit;\n  }\n}\n","@import '../utilities/css-patterns/patterns';\n@import './layers';\n@import './form';\n\n// Border\n$btn-border-radius: var(--nano-btn-border-radius, 5px);\n$btn-border-width: var(--nano-btn-border-width, 2px);\n$btn-border-style: var(--nano-btn-border-style, solid);\n\n// Spacing\n$btn-padding-top: var(--nano-btn-padding-top, 0.5rem);\n$btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5rem);\n$btn-padding-start: var(--nano-btn-padding-start, 1rem);\n$btn-padding-end: var(--nano-btn-padding-end, 1rem);\n$btn-line-height: var(--nano-btn-line-height, 1.5em);\n\n// Misc\n$btn-icon-size: var(--nano-btn-icon-size, 1em);\n\n@mixin transition-hover {\n  transition:\n    background-color 100ms ease-in-out,\n    box-shadow 100ms ease-in-out,\n    border-color 100ms ease-in-out,\n    color 100ms ease-in-out;\n}\n\n@mixin button-keyline {\n  background: transparent;\n  border-style: #{$btn-border-style};\n  border-width: #{$btn-border-width};\n  border-radius: #{$btn-border-radius};\n  padding-block:\n    calc(#{$btn-padding-top} - #{$btn-border-width})\n    calc(#{$btn-padding-bottom} - #{$btn-border-width});\n\n  &:hover:not(.button--disabled):not(:disabled),\n  &:not(:focus):not(.button--focus),\n  &.button--active {\n    box-shadow: none;\n  }\n}\n\n@mixin button-standard($bg, $font, $bg-hover: false, $font-hover: false) {\n  $font-hover: if($font-hover, $font-hover, $font);\n  $bg-hover: if($bg-hover, $bg-hover, $bg);\n\n  background-color: $bg;\n  color: $font;\n\n  &:hover:not(.button--disabled):not(:disabled),\n  &.button--active {\n    background-color: $bg-hover;\n    color: $font-hover;\n\n    &.button--keyline {\n      background-color: $bg;\n      color: $font;\n    }\n  }\n\n  &:focus {\n    color: $font;\n  }\n\n  &.button--keyline {\n    @include button-keyline;\n\n    color: $bg;\n    border-color: $bg;\n  }\n}\n\n@mixin button-base {\n  @include unstyled-input($outline: true);\n  @include unstyled-anchor;\n  @include transition-hover;\n\n  padding-inline: #{$btn-padding-start} #{$btn-padding-end};\n  padding-block: #{$btn-padding-top} #{$btn-padding-bottom};\n  box-shadow: #{$layer-shadow-medium};\n  display: inline-block;\n  border-radius: #{$btn-border-radius};\n  line-height: #{$btn-line-height};\n  font-weight: 500;\n  cursor: pointer;\n  background: rgb(0 0 0 / 2%);\n\n  @media print {\n    display: none;\n  }\n\n  &:focus,\n  &.button--focus {\n    outline: none;\n    box-shadow: #{$control-focus-style};\n  }\n\n  nano-icon,\n  nano-spinner {\n    --base-color-rgb: 255 255 255;\n\n    margin-inline-start: 0.5em;\n    margin-inline-end: 0;\n    font-size: #{$btn-icon-size};\n    vertical-align: middle;\n    margin-block-start: -0.188em;\n    display: inline-block;\n  }\n\n  &.button--icon-start {\n    nano-icon,\n    nano-spinner {\n      margin-inline-start: 0;\n      margin-inline-end: 0.5em;\n    }\n  }\n\n  &:hover:not(.button--disabled) {\n    box-shadow: #{$layer-shadow-large};\n  }\n\n  &:active:not(.button--disabled):not(:disabled) {\n    box-shadow: none;\n  }\n\n  &--disabled,\n  &:disabled {\n    opacity: 0.6;\n\n    &:hover {\n      cursor: default;\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../global/style/utilities/globals';\n@import '../global/style/nano-theme/colours';\n@import '../global/style/nano-theme/typography';\n@import '../global/style/nano-theme/buttons';\n@import '../global/style/nano-theme/form';\n\n@each $color-name, $value in $themes {\n  .nano-color-#{$color-name} {\n    @include generate-color($color-name);\n  }\n}\n\n:root {\n  --nano-base-font-size: 16px;\n\n  @include media-breakpoint-down('sm') {\n    --nano-base-font-size: 14px;\n  }\n\n  --nano-padding: 1rem;\n  --nano-font-family:\n    helvetica,\n    arial,\n    'Lucida Grande',\n    sans-serif;\n\n  @each $key, $value in $colors {\n    #{'--nano-color-' + $key}: #{$value};\n    #{'--nano-color-' + $key + '-rgb'}: #{color-to-rgb-list($value)};\n  }\n}\n\nbody {\n  background-color: $background-color;\n}\n\nhr,\n.horizontal-rule,\n.content-divider {\n  display: block;\n  block-size: 1px;\n  border: 0;\n  background-color: rgba(map.get($colors, palegrey), 0.5);\n  margin-block: 0.5em;\n  margin-inline: 0;\n  padding: 0;\n}\n\narea[href]:not([tabindex='-1']),\niframe:not([tabindex='-1']),\n[contentEditable='true']:not([tabindex='-1']) {\n  &:focus {\n    outline: none;\n    box-shadow: $control-focus-style;\n    border-radius: 3px;\n  }\n}\n","@use 'sass:math';\n\n@import 'mixins';\n\n$dark-text-default: #000 !default;\n$light-text-default: #fff !default;\n\n@function current-color($variation, $alpha: null) {\n  @if not $alpha {\n    @return var(--nano-color-#{$variation});\n  }\n\n  @else {\n    @return rgb(var(--nano-color-#{$variation}-rgb) / #{$alpha});\n  }\n}\n\n// Mixes a color with black to create its shade.\n// --------------------------------------------------------------------------------------------\n@function get-color-shade($color) {\n  @return mix(#000, $color, 15%);\n}\n\n// Mixes a color with white to create its tint.\n// --------------------------------------------------------------------------------------------\n@function get-color-tint($color) {\n  @return mix(#fff, $color, 15%);\n}\n\n// Converts a color to a comma separated hsl.\n// --------------------------------------------------------------------------------------------\n@function color-to-hsl-list($color) {\n  @return #{hue($color)} #{saturation($color)} #{lightness($color)};\n}\n\n// Converts a color to a comma separated rgb.\n// --------------------------------------------------------------------------------------------\n@function color-to-rgb-list($color) {\n  @return #{red($color)} #{green($color)} #{blue($color)};\n}\n\n// Calculeate brightness of a given color.\n@function brightness($color) {\n  @return math.div(\n    (red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114),\n    255\n    ) * 100%;\n}\n\n// Compares contrast of a given color to the light/dark arguments and returns whichever is most \"contrasty\"\n@function color-contrast(\n  $color,\n  $dark: $dark-text-default,\n  $light: $light-text-default\n) {\n  @if $color==null {\n    @return null;\n  }\n\n  @else {\n    $color-brightness: brightness($color);\n    $light-text-brightness: brightness($light);\n    $dark-text-brightness: brightness($dark);\n\n    @return if(\n      abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness),\n      $light,\n      $dark\n    );\n  }\n}\n\n@function nano-color($name, $variation, $alpha: null, $rgb: null) {\n  $values: map-get($themes, $name);\n  $value: map-get($values, $variation);\n  $variable: --nano-color-#{$name}-#{$variation};\n\n  @if ($variation == base) {\n    $variable: --nano-color-#{$name};\n  }\n\n  @if ($alpha) {\n    $value: color-to-rgb-list($value);\n\n    @return rgb(var(#{$variable}-rgb, $value) / $alpha);\n  }\n\n  @if ($rgb) {\n    $value: color-to-rgb-list($value);\n    $variable: #{$variable}-rgb;\n  }\n\n  @return var(#{$variable}, $value);\n}\n\n@mixin generate-color($color-name, $important: '') {\n  $value: map-get($themes, $color-name);\n\n  $base: map-get($value, base);\n  $contrast: map-get($value, contrast);\n  $shade: map-get($value, shade);\n  $tint: map-get($value, tint);\n\n  --nano-color-base: var(--nano-color-#{$color-name}, #{$base}) #{$important};\n  --nano-color-base-rgb:\n    var(\n      --nano-color-#{$color-name}-rgb,\n      #{color-to-rgb-list($base)}\n    )\n    #{$important};\n  --nano-color-contrast:\n    var(--nano-color-#{$color-name}-contrast, #{$contrast})\n    #{$important};\n  --nano-color-contrast-rgb:\n    var(\n      --nano-color-#{$color-name}-contrast-rgb,\n      #{color-to-rgb-list($contrast)}\n    )\n    #{$important};\n  --nano-color-shade: var(--nano-color-#{$color-name}-shade, #{$shade}) #{$important};\n  --nano-color-tint: var(--nano-color-#{$color-name}-tint, #{$tint}) #{$important};\n  --nano-color-tint-rgb:\n    var(\n      --nano-color-#{$color-name}-tint-rgb,\n      #{color-to-rgb-list($tint)}\n    )\n    #{$important};\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import 'colours';\n\n// Defaults\n\n$df-input-padding-top: 8px;\n$df-input-padding-bottom: 6px;\n$df-input-padding-start: 8px;\n$df-input-padding-end: 8px;\n\n$df-input-background-color: map.get($colors, white);\n$df-input-background-color--invalid: white;\n\n$df-input-text-color: $text-color-value;\n$df-input-font-size: 0.87em;\n\n$df-input-border-width: 1px;\n$df-input-border-style: solid;\n$df-input-border-radius: 0;\n\n$df-input-border-color: map.get($colors, lightgrey);\n$df-input-border--focus-color: map.get($colors, lightblue);\n$df-input-border--invalid-color: map.get($colors, lightgrey);\n$df-input-border--invalid-focus-color: map.get($colors, red);\n\n$df-clear-btn-color: rgb(0 0 0 / 30%);\n$df-clear-btn-color--invalid: lighten(map.get($colors, red), 30%);\n\n$df-label-color: 'currentcolor';\n$df-label-font-size: 1em;\n\n$df-input-help-font-size: 0.75em;\n$df-input-help-color: darken(map.get($colors, mediumgrey), 3%);\n\n$df-input-tag-bg: color-to-rgb-list(#badcf0);\n$df-input-tag-color: #455556;\n$df-input-tag-border-color: #badcf0;\n\n// Setup global / theme css variables with default fallbacks\n\n// Placeholders\n$input-placeholder-color: var(--nano-input-placeholder-color, initial);\n$input-placeholder-style: var(--nano-input-placeholder-style, initial);\n$input-placeholder-weight: var(--nano-input-placeholder-weight, initial);\n$input-placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n\n// Space around labels, help, errors and inside inputs\n$input-padding-bottom: var(\n  --nano-input-padding-bottom,\n  var(--nano-input-padding, $df-input-padding-bottom)\n);\n$input-padding-start: var(\n  --nano-input-padding-start,\n  var(--nano-input-padding, $df-input-padding-start)\n);\n$input-padding-end: var(\n  --nano-input-padding-end,\n  var(--nano-input-padding, $df-input-padding-end)\n);\n$input-padding-top: var(\n  --nano-input-padding-top,\n  var(--nano-input-padding, $df-input-padding-top)\n);\n\n// Input background\n$input-background-color: var(\n  --nano-input-background-color,\n  $df-input-background-color\n);\n$input-background-color--invalid: var(\n  --nano-input-background-color,\n  $df-input-background-color--invalid\n);\n\n// Input text\n$input-text-color: var(--nano-input-text-color, $df-input-text-color);\n$input-font-size: var(--nano-input-font-size, $df-input-font-size);\n\n// Input border\n$input-border-width: var(--nano-input-border-width, $df-input-border-width);\n$input-border-color: var(--nano-input-border-color, $df-input-border-color);\n$input-border-style: var(--nano-input-border-style, $df-input-border-style);\n$input-border-radius: var(--nano-input-border-radius, $df-input-border-radius);\n\n// Input border state variants\n$input-border--focus-color: var(\n  --nano-input-border-color--focus,\n  $df-input-border--focus-color\n);\n$input-border--invalid-color: var(\n  --nano-input-border-color--invalid,\n  $df-input-border--invalid-color\n);\n$input-border--invalid-focus-color: var(\n  --nano-input-border-color--invalid,\n  $df-input-border--invalid-focus-color\n);\n\n// Clear button\n$clear-btn-color: var(--nano-clear-btn-color, $df-clear-btn-color);\n$clear-btn-color--invalid: var(\n  --nano-clear-btn-color--invalid,\n  $df-clear-btn-color--invalid\n);\n\n// Label\n$label-color: var(--nano-input-label-color, $df-label-color);\n$label-color-invalid: var(--nano-input-label-color-invalid, $df-label-color);\n$label-font-size: var(--nano-input-label-color, $df-label-font-size);\n\n// Focus shadow / outline\n$control-focus-color: var(\n  --nano-control-focus-color,\n  rgba(map.get($colors, lightblue), 0.8)\n);\n$control-focus-size: 0 0 0 0.1875rem;\n$control-focus-style: var(\n  --nano-control-focus-shadow,\n  #{$control-focus-size + ' ' $control-focus-color}\n);\n$control-invalid-style: var(\n  --nano-control-focus-shadow,\n  #{$control-focus-size + ' ' $df-input-border--invalid-color}\n);\n\n// Helper / Error text\n$input-help-font-size: var(\n  --nano-input-help-font-size,\n  $df-input-help-font-size\n);\n$input-help-color: var(--nano-input-help-color, $df-input-help-color);\n\n// General button\n$button-bg-color: var(--nano-button-color, #{map.get($colors, celsius)});\n\n// Tags / Multi value\n$input-tag-bg: var(--nano-input-tag-bg, $df-input-tag-bg);\n$input-tag-color: var(--nano-input-tag-color, $df-input-tag-color);\n$input-tag-border-color: var(\n  --nano-input-tag-color,\n  $df-input-tag-border-color\n);\n\n// Select\n$select-opt-focus: var(\n  --nano-select-opt-bg,\n  darken(map.get($colors, blue--faded), 5%)\n);\n$select-opt-selected: var(--nano-select-opt-bg, map.get($colors, blue--faded));\n"]}

package/dist/types/components/global-nav/global-nav.d.ts

@@ -44,6 +44,7 @@ export declare class GlobalNav implements ComponentInterface {
   private aboutNavItms;
   private siteNavItms;
   private loggedInNavItms;
+  constructor();
   userProfileUrl: string;
   private mo?;
   hasLoggedinSlot: boolean;