@nanoporetech-digital/components 7.6.0 → 7.7.0

package/dist/nano-components/nano-icon-button_2.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconButtonCss","NanoIconButtonStyle0","IconButton","button","iconName","iconSrc","type","name","value","label","showTooltip","disabled","href","rel","target","form","setFocus","this","focus","findForm","host","closest","HTMLFormElement","el","document","getElementById","handleClick","ev","formEl","preventDefault","fakeButton","createElement","style","display","appendChild","click","remove","componentDidLoad","focusVisible","observe","connectedCallback","disconnectedCallback","unobserve","content","TagType","undefined","h","onClick","part","ref","class","src","lazy","render","Host","tooltipCss","NanoTooltipStyle0","Tooltip","isVisible","popover","tooltipPositioner","tooltip","_target","newTarget","removeAttribute","setAttribute","setLabel","contentSlotNodes","Array","from","querySelectorAll","textContent","map","node","join","trim","getTarget","placement","distance","open","skidding","hoist","trigger","handleOpenChange","show","hide","nanoShow","nanoAfterShow","nanoHide","nanoAfterHide","slShow","emit","defaultPrevented","showPopover","slHide","setTimeout","hidePopover","children","find","tagName","toLowerCase","getAttribute","Error","hasTrigger","triggerType","triggers","split","includes","syncOptions","setOptions","strategy","transitionElement","onAfterHide","onAfterShow","handleBlur","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","Popover","hidden","componentDidUpdate","destroy","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onSlotchange","role"],"sources":["src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\n@use '../../global/style/utilities/mixins' as mx;\n\n:host {\n  /**\n    * @prop --color: defaults to #{map.get(tokens.$colors, palegrey)};\n    * @prop --active-color: defaults to #{map.get(tokens.$colors, darkblue--faded)};\n    * @prop --hover-color: defaults to #{map.get(tokens.$colors, blue)};\n    * @prop --background: defaults to transparent;\n    * @prop --padding: defaults to #{tokens.$spacing-small};\n    * @prop --box-shadow: defaults to none;\n    */\n\n  --border-radius: #{tokens.$border-radius-medium};\n  --active-color: #{map.get(tokens.$colors, darkblue--faded)};\n  --hover-color: #{map.get(tokens.$colors, blue)};\n  --nano-color-base: var(--color, #{map.get(tokens.$colors, mediumgrey)});\n  --background: transparent;\n  --padding: #{tokens.$spacing-small};\n  --box-shadow: none;\n  --button-bg: var(--background);\n\n  border-radius: var(--border-radius);\n  display: inline-block;\n}\n\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  border: none;\n  border-radius: inherit;\n  background: var(--button-bg);\n  font-size: inherit;\n  color: var(--color);\n  padding: var(--padding);\n  cursor: pointer;\n  appearance: none;\n  transition: box-shadow #{tokens.$transition-xfast} ease-in-out;\n  box-shadow: var(--box-shadow);\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--hover-color);\n\n    --nano-color-base: var(--hover-color);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--active-color);\n\n    --nano-color-base: var(--active-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.icon-button__label {\n  @include mx.visually-hide();\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n  box-shadow: #{tokens.$control-focus-style};\n}\n","import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  Method,\n  Element,\n  Host,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n *\n * @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n */\n@Component({\n  tag: 'nano-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n  private button: HTMLButtonElement;\n\n  @Element() host: HTMLNanoIconButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop() iconName?: string;\n\n  /** An external URL of an SVG file. */\n  @Prop() iconSrc?: string;\n\n  /** The default behavior of the button. */\n  @Prop({ reflect: true }) type: 'submit' | 'reset' | 'button' = 'button';\n\n  /** The name of the button, submitted as a pair with the button’s value as part of the form data. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Defines the value associated with the button’s name when it’s submitted with the form data. */\n  @Prop({ reflect: true }) value?: string;\n\n  /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does. */\n  @Prop() label!: string;\n\n  /** display the label as a `<nano-tooltip />` */\n  @Prop() showTooltip: boolean = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered. */\n  @Prop() href: string | undefined;\n\n  /** Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) */\n  @Prop() rel: string | undefined;\n\n  /** Specifies where to display the linked URL. Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n  @Prop() target: string | undefined;\n\n  /** The HTML form element or form element id.\n   * Used to submit a form when the button is not a child of the form. */\n  @Prop() form: HTMLFormElement | string;\n\n  /** Sets focus on the internal button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  /**\n   * Finds the form element based on the provided `form` selector\n   * or element reference provided.\n   * @returns the found form element (if found)\n   */\n  private findForm(): HTMLFormElement | null {\n    const { form, host } = this;\n    if (!form) return host.closest('form');\n\n    if (form instanceof HTMLFormElement) {\n      return form;\n    }\n    if (typeof form === 'string') {\n      const el = document.getElementById(form);\n      if (el instanceof HTMLFormElement) {\n        return el;\n      }\n    }\n    return null;\n  }\n\n  private handleClick = (ev: Event) => {\n    if (this.type === 'button') return;\n    const formEl = this.findForm();\n\n    if (formEl) {\n      ev.preventDefault();\n\n      const fakeButton = document.createElement('button');\n      fakeButton.type = this.type;\n      fakeButton.style.display = 'none';\n      formEl.appendChild(fakeButton);\n      fakeButton.click();\n      fakeButton.remove();\n    }\n  };\n\n  componentDidLoad() {\n    focusVisible.observe(this.button);\n  }\n\n  connectedCallback() {\n    if (this.button) focusVisible.observe(this.button);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.button);\n  }\n\n  private content() {\n    const TagType: 'a' | 'button' = this.href === undefined ? 'button' : 'a';\n\n    return (\n      <TagType\n        onClick={this.handleClick}\n        part=\"base\"\n        ref={(el) => (this.button = el)}\n        class={{\n          'icon-button': true,\n          'icon-button--disabled': this.disabled,\n        }}\n        name={this.name}\n        value={this.value}\n        href={this.href || undefined}\n        target={this.href && this.target ? this.target : undefined}\n        rel={this.rel || undefined}\n        type={!this.href && this.type ? this.type : undefined}\n      >\n        <span class=\"icon-button__label\">{this.label}</span>\n        <nano-icon\n          name={this.iconName}\n          src={this.iconSrc}\n          aria-hidden=\"true\"\n          lazy={false}\n          part=\"icon\"\n        />\n      </TagType>\n    );\n  }\n\n  render() {\n    if (this.showTooltip) {\n      return (\n        <Host aria-disabled={this.disabled ? 'true' : null}>\n          <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>\n        </Host>\n      );\n    }\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        {this.content()}\n      </Host>\n    );\n  }\n}\n","@use '../../global/style/nano-theme/tokens';\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: 0.125s;\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  --background: #{tokens.$tooltip-bg-color};\n  --color: #{tokens.$tooltip-color};;\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: #{tokens.$tooltip-border-radius};\n  background-color: var(--background);\n  font-size: #{tokens.$tooltip-fontsize};\n  line-height: 1.5;\n  color: var(--color);\n  opacity: 0;\n  padding: #{tokens.$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: var(--background);\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{tokens.$layer-index-tooltip};\n    border: 0;\n    background: none;\n    padding: 0;\n    overflow: visible;\n    color: unset;\n\n    &::backdrop { display: none; }\n\n    &[popover],\n    &:popover-open {\n      inset: unset;\n    }\n\n    #{$self} {\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\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    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      inset-block-end: 100%;\n      inset-inline-start: calc(50% - #{tokens.$tooltip-arrow-size});\n      border-block-end: #{tokens.$tooltip-arrow-size} solid;\n      border-inline-start: #{tokens.$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{tokens.$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      inset-inline-start: #{tokens.$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      inset-inline: auto #{tokens.$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% - #{tokens.$tooltip-arrow-size});\n      border-block-start: #{tokens.$tooltip-arrow-size} solid;\n      border-inline-start: #{tokens.$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{tokens.$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      inset-inline-start: #{tokens.$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      inset-inline: auto #{tokens.$tooltip-arrow-offset};\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{tokens.$tooltip-arrow-size});\n      inset-inline-start: 100%;\n      border-inline-start: #{tokens.$tooltip-arrow-size} solid;\n      border-block-start: #{tokens.$tooltip-arrow-size} solid transparent;\n      border-block-end: #{tokens.$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      inset-block-start: #{tokens.$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      inset-block: auto #{tokens.$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{tokens.$tooltip-arrow-size});\n      inset-inline-end: 100%;\n      border-inline-end: #{tokens.$tooltip-arrow-size} solid;\n      border-block-start: #{tokens.$tooltip-arrow-size} solid transparent;\n      border-block-end: #{tokens.$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      inset-block-start: #{tokens.$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      inset-block: auto #{tokens.$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\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 isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: HTMLElement;\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-label');\n    }\n    newTarget.setAttribute('aria-label', this.label);\n    this._target = newTarget;\n  }\n\n  private label = '';\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  @Watch('content')\n  setLabel() {\n    const contentSlotNodes = Array.from(\n      this.host.querySelectorAll('[slot=\"content\"]')\n    );\n    const textContent = contentSlotNodes\n      .map((node) => node.textContent)\n      .join(' ')\n      .trim();\n\n    if (!this.target) {\n      this.target = this.getTarget();\n\n      if (!this.target) return;\n    }\n\n    this.label = textContent || this.content;\n    this.target.setAttribute('aria-label', this.label);\n  }\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({ mutable: true }) 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    if (this.open) this.show();\n    else 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    if (typeof this.tooltipPositioner?.showPopover === 'function') {\n      this.hoist = true;\n      this.popover.show();\n      this.tooltipPositioner.showPopover();\n    } else {\n      this.popover.show();\n    }\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    setTimeout(() => {\n      if (\n        !this.open &&\n        typeof this.tooltipPositioner?.hidePopover === 'function'\n      ) {\n        this.tooltipPositioner.hidePopover();\n      }\n    }, 300);\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      if (this.open) this.hide();\n      else 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  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n    this.setLabel();\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    if (this.popover) 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          popover=\"manual\"\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.setLabel()}>\n              {this.content}\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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","ignoreList":[]}
+{"version":3,"names":["iconButtonCss","NanoIconButtonStyle0","IconButton","button","iconName","iconSrc","type","name","value","label","showTooltip","disabled","href","rel","target","form","setFocus","this","focus","findForm","host","closest","HTMLFormElement","el","document","getElementById","handleClick","ev","formEl","preventDefault","fakeButton","createElement","style","display","appendChild","click","remove","componentDidLoad","focusVisible","observe","connectedCallback","disconnectedCallback","unobserve","content","TagType","undefined","h","onClick","part","ref","class","src","lazy","render","Host","tooltipCss","NanoTooltipStyle0","Tooltip","isVisible","popover","tooltipPositioner","tooltip","_target","newTarget","removeAttribute","setAttribute","setLabel","contentSlotNodes","Array","from","querySelectorAll","textContent","map","node","join","trim","getTarget","placement","distance","open","skidding","hoist","trigger","handleOpenChange","show","hide","nanoShow","nanoAfterShow","nanoHide","nanoAfterHide","slShow","emit","defaultPrevented","showPopover","slHide","setTimeout","hidePopover","children","find","tagName","toLowerCase","getAttribute","Error","hasTrigger","triggerType","triggers","split","includes","syncOptions","setOptions","strategy","transitionElement","onAfterHide","onAfterShow","handleBlur","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","Popover","hidden","componentDidUpdate","destroy","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onSlotchange","role"],"sources":["src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\n@use '../../global/style/utilities/mixins' as mx;\n\n:host {\n  /**\n    * @prop --color: defaults to #{map.get(tokens.$colors, palegrey)};\n    * @prop --active-color: defaults to #{map.get(tokens.$colors, darkblue--faded)};\n    * @prop --hover-color: defaults to #{map.get(tokens.$colors, blue)};\n    * @prop --background: defaults to transparent;\n    * @prop --padding: defaults to #{tokens.$spacing-small};\n    * @prop --box-shadow: defaults to none;\n    */\n\n  --border-radius: #{tokens.$border-radius-medium};\n  --active-color: #{map.get(tokens.$colors, darkblue--faded)};\n  --hover-color: #{map.get(tokens.$colors, blue)};\n  --nano-color-base: var(--color, #{map.get(tokens.$colors, mediumgrey)});\n  --background: transparent;\n  --padding: #{tokens.$spacing-small};\n  --box-shadow: none;\n  --button-bg: var(--background);\n\n  border-radius: var(--border-radius);\n  display: inline-block;\n}\n\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  border: none;\n  border-radius: inherit;\n  background: var(--button-bg);\n  font-size: inherit;\n  color: var(--color);\n  padding: var(--padding);\n  cursor: pointer;\n  appearance: none;\n  transition: box-shadow #{tokens.$transition-xfast} ease-in-out;\n  box-shadow: var(--box-shadow);\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--hover-color);\n\n    --nano-color-base: var(--hover-color);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--active-color);\n\n    --nano-color-base: var(--active-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.icon-button__label {\n  @include mx.visually-hide();\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n  box-shadow: #{tokens.$control-focus-style};\n}\n","import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  Method,\n  Element,\n  Host,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n *\n * @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n */\n@Component({\n  tag: 'nano-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n  private button: HTMLButtonElement;\n\n  @Element() host: HTMLNanoIconButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop() iconName?: string;\n\n  /** An external URL of an SVG file. */\n  @Prop() iconSrc?: string;\n\n  /** The default behavior of the button. */\n  @Prop({ reflect: true }) type: 'submit' | 'reset' | 'button' = 'button';\n\n  /** The name of the button, submitted as a pair with the button’s value as part of the form data. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Defines the value associated with the button’s name when it’s submitted with the form data. */\n  @Prop({ reflect: true }) value?: string;\n\n  /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does. */\n  @Prop() label!: string;\n\n  /** display the label as a `<nano-tooltip />` */\n  @Prop() showTooltip: boolean = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered. */\n  @Prop() href: string | undefined;\n\n  /** Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) */\n  @Prop() rel: string | undefined;\n\n  /** Specifies where to display the linked URL. Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n  @Prop() target: string | undefined;\n\n  /** The HTML form element or form element id.\n   * Used to submit a form when the button is not a child of the form. */\n  @Prop() form: HTMLFormElement | string;\n\n  /** Sets focus on the internal button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  /**\n   * Finds the form element based on the provided `form` selector\n   * or element reference provided.\n   * @returns the found form element (if found)\n   */\n  private findForm(): HTMLFormElement | null {\n    const { form, host } = this;\n    if (!form) return host.closest('form');\n\n    if (form instanceof HTMLFormElement) {\n      return form;\n    }\n    if (typeof form === 'string') {\n      const el = document.getElementById(form);\n      if (el instanceof HTMLFormElement) {\n        return el;\n      }\n    }\n    return null;\n  }\n\n  private handleClick = (ev: Event) => {\n    if (this.type === 'button') return;\n    const formEl = this.findForm();\n\n    if (formEl) {\n      ev.preventDefault();\n\n      const fakeButton = document.createElement('button');\n      fakeButton.type = this.type;\n      fakeButton.style.display = 'none';\n      formEl.appendChild(fakeButton);\n      fakeButton.click();\n      fakeButton.remove();\n    }\n  };\n\n  componentDidLoad() {\n    focusVisible.observe(this.button);\n  }\n\n  connectedCallback() {\n    if (this.button) focusVisible.observe(this.button);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.button);\n  }\n\n  private content() {\n    const TagType: 'a' | 'button' = this.href === undefined ? 'button' : 'a';\n\n    return (\n      <TagType\n        onClick={this.handleClick}\n        part=\"base\"\n        ref={(el) => (this.button = el)}\n        class={{\n          'icon-button': true,\n          'icon-button--disabled': this.disabled,\n        }}\n        name={this.name}\n        value={this.value}\n        href={this.href || undefined}\n        target={this.href && this.target ? this.target : undefined}\n        rel={this.rel || undefined}\n        type={!this.href && this.type ? this.type : undefined}\n      >\n        <span class=\"icon-button__label\">{this.label}</span>\n        <nano-icon\n          name={this.iconName}\n          src={this.iconSrc}\n          aria-hidden=\"true\"\n          lazy={false}\n          part=\"icon\"\n        />\n      </TagType>\n    );\n  }\n\n  render() {\n    if (this.showTooltip) {\n      return (\n        <Host\n          class=\"nano-icon-button\"\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>\n        </Host>\n      );\n    }\n    return (\n      <Host\n        class=\"nano-icon-button\"\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        {this.content()}\n      </Host>\n    );\n  }\n}\n","@use '../../global/style/nano-theme/tokens';\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: 0.125s;\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  --background: #{tokens.$tooltip-bg-color};\n  --color: #{tokens.$tooltip-color};;\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: #{tokens.$tooltip-border-radius};\n  background-color: var(--background);\n  font-size: #{tokens.$tooltip-fontsize};\n  line-height: 1.5;\n  color: var(--color);\n  opacity: 0;\n  padding: #{tokens.$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: var(--background);\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{tokens.$layer-index-tooltip};\n    border: 0;\n    background: none;\n    padding: 0;\n    overflow: visible;\n    color: unset;\n\n    &::backdrop { display: none; }\n\n    &[popover],\n    &:popover-open {\n      inset: unset;\n    }\n\n    #{$self} {\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\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    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      inset-block-end: 100%;\n      inset-inline-start: calc(50% - #{tokens.$tooltip-arrow-size});\n      border-block-end: #{tokens.$tooltip-arrow-size} solid;\n      border-inline-start: #{tokens.$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{tokens.$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      inset-inline-start: #{tokens.$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      inset-inline: auto #{tokens.$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% - #{tokens.$tooltip-arrow-size});\n      border-block-start: #{tokens.$tooltip-arrow-size} solid;\n      border-inline-start: #{tokens.$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{tokens.$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      inset-inline-start: #{tokens.$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      inset-inline: auto #{tokens.$tooltip-arrow-offset};\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{tokens.$tooltip-arrow-size});\n      inset-inline-start: 100%;\n      border-inline-start: #{tokens.$tooltip-arrow-size} solid;\n      border-block-start: #{tokens.$tooltip-arrow-size} solid transparent;\n      border-block-end: #{tokens.$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      inset-block-start: #{tokens.$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      inset-block: auto #{tokens.$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{tokens.$tooltip-arrow-size});\n      inset-inline-end: 100%;\n      border-inline-end: #{tokens.$tooltip-arrow-size} solid;\n      border-block-start: #{tokens.$tooltip-arrow-size} solid transparent;\n      border-block-end: #{tokens.$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      inset-block-start: #{tokens.$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      inset-block: auto #{tokens.$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} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport Popover from '../../utils/popover';\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 isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: HTMLElement;\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-label');\n    }\n    newTarget.setAttribute('aria-label', this.label);\n    this._target = newTarget;\n  }\n\n  private label = '';\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  @Watch('content')\n  setLabel() {\n    const contentSlotNodes = Array.from(\n      this.host.querySelectorAll('[slot=\"content\"]')\n    );\n    const textContent = contentSlotNodes\n      .map((node) => node.textContent)\n      .join(' ')\n      .trim();\n\n    if (!this.target) {\n      this.target = this.getTarget();\n\n      if (!this.target) return;\n    }\n\n    this.label = textContent || this.content;\n    this.target.setAttribute('aria-label', this.label);\n  }\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({ mutable: true }) 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    if (this.open) this.show();\n    else 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    if (typeof this.tooltipPositioner?.showPopover === 'function') {\n      this.hoist = true;\n      this.popover.show();\n      this.tooltipPositioner.showPopover();\n    } else {\n      this.popover.show();\n    }\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    setTimeout(() => {\n      if (\n        !this.open &&\n        typeof this.tooltipPositioner?.hidePopover === 'function'\n      ) {\n        this.tooltipPositioner.hidePopover();\n      }\n    }, 300);\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      if (this.open) this.hide();\n      else 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  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n    this.setLabel();\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    if (this.popover) 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        class=\"nano-tooltip\"\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n        <div\n          ref={(el) => (this.tooltipPositioner = el)}\n          class=\"tooltip-positioner\"\n          popover=\"manual\"\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.setLabel()}>\n              {this.content}\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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","ignoreList":[]}

package/dist/nano-components/nano-icon.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{i,r as n,g as o,h as t,a as r}from"./index-3118109b.js";import{c as s}from"./theme-d553c17a.js";let e;const a=()=>{if(!e){const i=window;i.Nanoicons=i.Nanoicons||{};e=i.Nanoicons.map=i.Nanoicons.map||new Map}return e};const c=i=>{let n=h(i.src);if(n){return n}n=f(i.name,i.icon);if(n){return l(n)}if(i.icon){n=h(i.icon);if(n){return n}}return null};const l=n=>{const o=a().get(n);if(o){return o}return i(`../nano-assets/fontawesome-pro/svgs/${n}.svg`)};const f=(i,n)=>{if(!i&&n&&!d(n)){i=n}if(u(i)){i=p(i)}if(!u(i)||i.trim()===""){return null}const o=i.replace(/[a-z]|-|\/|\d/gi,"");if(o!==""){console.warn("invalid characters in icon name "+i);return null}return i};const h=i=>{if(u(i)){i=i.trim();if(d(i)){return i}}return null};const d=i=>i.length>0&&/(\/|\.)/.test(i);const u=i=>typeof i==="string";const p=i=>i.toLowerCase();const m=i=>{if(i){const n=document.createElement("div");n.innerHTML=i;for(let i=n.childNodes.length-1;i>=0;i--){if(n.childNodes[i].nodeName.toLowerCase()!=="svg"){n.removeChild(n.childNodes[i])}}const o=n.firstElementChild;if(o&&o.nodeName.toLowerCase()==="svg"){const i=o.getAttribute("class")||"";o.setAttribute("class",(i+" sc-nano-icon s-nano-icon svg").trim());if(b(o)){return n.innerHTML}}}return""};const b=i=>{if(i.nodeType===1){if(i.nodeName.toLowerCase()==="script"){return false}for(let n=0;n<i.attributes.length;n++){const o=i.attributes[n].value;if(u(o)&&o.toLowerCase().indexOf("on")===0){return false}}for(let n=0;n<i.childNodes.length;n++){if(!b(i.childNodes[n])){return false}}}return true};const g=new Map;const v=new Map;const y=i=>{let n=v.get(i);if(!n){n=fetch(i).then((n=>{if(n.ok){return n.text().then((n=>{g.set(i,m(n))}))}g.set(i,"")}));v.set(i,n)}return n};const w=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--color:var(--nano-color-base, currentcolor);--primary-color:var(--nano-color-tint, currentcolor);--secondary-color:var(--nano-color-shade, currentcolor);--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;inline-size:var(--icon-size);block-size:var(--icon-size);min-inline-size:var(--icon-size);min-block-size:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:var(--color);margin-inline:var(--icon-margin-start) var(--icon-margin-end);margin-block:var(--icon-margin-top) var(--icon-margin-bottom)}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;block-size:100%;inline-size:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}";const z=w;const x=class{constructor(i){n(this,i)}io;get el(){return o(this)}svgContent;isVisible=false;isLoading=true;color;role;ariaLabel;flipRtl;name;src;icon;size;lazy=true;udpateRole(){if(this.ariaLabel)this.role="img";else if(!this.ariaLabel)this.role="presentation"}setAriaLabel(){if(!this.ariaLabel&&!this.el.ariaLabel){if(!this.role||this.role!=="presentation"){const i=f(this.name,this.icon);if(i){this.ariaLabel=i.split("/").slice(-1)[0].replace(/-/g," ")}}}else if(this.role==="presentation"){this.ariaLabel=undefined}}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=true;this.loadIcon()}))}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}componentWillLoad(){this.udpateRole();this.setAriaLabel()}waitUntilVisible(i,n,o){if(this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){const t=this.io=new window.IntersectionObserver((i=>{if(i[0].isIntersecting||i[1]&&i[1].isIntersecting){t.disconnect();this.io=undefined;o()}}),{rootMargin:n});t.observe(i)}else{o()}}loadIcon(){if(this.isVisible){const i=c(this);if(i){if(g.has(i)){this.svgContent=g.get(i);requestAnimationFrame((()=>this.isLoading=false))}else{y(i).then((()=>{this.svgContent=g.get(i);requestAnimationFrame((()=>this.isLoading=false));this.setAriaLabel()}))}}}}isRtl(){if(this.el.ownerDocument?.dir==="rtl")return true;if(this.el.closest('[dir="rtl"]'))return true;const i=this.el.getRootNode();const n=i.host;if(n&&n.closest('[dir="rtl"]'))return true;return false}render(){const i=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.isRtl()&&this.flipRtl!==false;return t(r,{key:"2f552d1b452a5c6a2b3aba09d5eba30e22ba756c",class:{...s(this.color),loading:this.isLoading,[`icon-${this.size}`]:!!this.size,"flip-rtl":!!i}},this.svgContent?t("div",{class:"icon-inner",innerHTML:this.svgContent}):t("div",{class:"icon-inner"}))}static get watchers(){return{ariaLabel:["udpateRole"],role:["setAriaLabel"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};x.style=z;export{x as nano_icon};
+import{j as i,r as n,g as o,a as t}from"./index-6cc72cd9.js";import{h as r}from"./renderer-4bc3e2dc.js";import{c as s}from"./theme-d553c17a.js";let e;const a=()=>{if(!e){const i=window;i.Nanoicons=i.Nanoicons||{};e=i.Nanoicons.map=i.Nanoicons.map||new Map}return e};const c=i=>{let n=h(i.src);if(n){return n}n=f(i.name,i.icon);if(n){return l(n)}if(i.icon){n=h(i.icon);if(n){return n}}return null};const l=n=>{const o=a().get(n);if(o){return o}return i(`../nano-assets/fontawesome-pro/svgs/${n}.svg`)};const f=(i,n)=>{if(!i&&n&&!d(n)){i=n}if(u(i)){i=m(i)}if(!u(i)||i.trim()===""){return null}const o=i.replace(/[a-z]|-|\/|\d/gi,"");if(o!==""){console.warn("invalid characters in icon name "+i);return null}return i};const h=i=>{if(u(i)){i=i.trim();if(d(i)){return i}}return null};const d=i=>i.length>0&&/(\/|\.)/.test(i);const u=i=>typeof i==="string";const m=i=>i.toLowerCase();const p=i=>{if(i){const n=document.createElement("div");n.innerHTML=i;for(let i=n.childNodes.length-1;i>=0;i--){if(n.childNodes[i].nodeName.toLowerCase()!=="svg"){n.removeChild(n.childNodes[i])}}const o=n.firstElementChild;if(o&&o.nodeName.toLowerCase()==="svg"){const i=o.getAttribute("class")||"";o.setAttribute("class",(i+" sc-nano-icon s-nano-icon svg").trim());if(b(o)){return n.innerHTML}}}return""};const b=i=>{if(i.nodeType===1){if(i.nodeName.toLowerCase()==="script"){return false}for(let n=0;n<i.attributes.length;n++){const o=i.attributes[n].value;if(u(o)&&o.toLowerCase().indexOf("on")===0){return false}}for(let n=0;n<i.childNodes.length;n++){if(!b(i.childNodes[n])){return false}}}return true};const g=new Map;const v=new Map;const y=i=>{let n=v.get(i);if(!n){n=fetch(i).then((n=>{if(n.ok){return n.text().then((n=>{g.set(i,p(n))}))}g.set(i,"")}));v.set(i,n)}return n};const w=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--color:var(--nano-color-base, currentcolor);--primary-color:var(--nano-color-tint, currentcolor);--secondary-color:var(--nano-color-shade, currentcolor);--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;inline-size:var(--icon-size);block-size:var(--icon-size);min-inline-size:var(--icon-size);min-block-size:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:var(--color);margin-inline:var(--icon-margin-start) var(--icon-margin-end);margin-block:var(--icon-margin-top) var(--icon-margin-bottom)}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;block-size:100%;inline-size:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}";const z=w;const x=class{constructor(i){n(this,i)}io;get el(){return o(this)}svgContent;isVisible=false;isLoading=true;color;role;ariaLabel;flipRtl;name;src;icon;size;lazy=true;udpateRole(){if(this.ariaLabel)this.role="img";else if(!this.ariaLabel)this.role="presentation"}setAriaLabel(){if(!this.ariaLabel&&!this.el.ariaLabel){if(!this.role||this.role!=="presentation"){const i=f(this.name,this.icon);if(i){this.ariaLabel=i.split("/").slice(-1)[0].replace(/-/g," ")}}}else if(this.role==="presentation"){this.ariaLabel=undefined}}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=true;this.loadIcon()}))}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}componentWillLoad(){this.udpateRole();this.setAriaLabel()}waitUntilVisible(i,n,o){if(this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){const t=this.io=new window.IntersectionObserver((i=>{if(i[0].isIntersecting||i[1]&&i[1].isIntersecting){t.disconnect();this.io=undefined;o()}}),{rootMargin:n});t.observe(i)}else{o()}}loadIcon(){if(this.isVisible){const i=c(this);if(i){if(g.has(i)){this.svgContent=g.get(i);requestAnimationFrame((()=>this.isLoading=false))}else{y(i).then((()=>{this.svgContent=g.get(i);requestAnimationFrame((()=>this.isLoading=false));this.setAriaLabel()}))}}}}isRtl(){if(this.el.ownerDocument?.dir==="rtl")return true;if(this.el.closest('[dir="rtl"]'))return true;const i=this.el.getRootNode();const n=i.host;if(n&&n.closest('[dir="rtl"]'))return true;return false}render(){const i=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.isRtl()&&this.flipRtl!==false;return r(t,{key:"b63eb962d8abc727b57cbb63b665296a2801f4a0",class:{...s(this.color),loading:this.isLoading,[`icon-${this.size}`]:!!this.size,"flip-rtl":!!i,"nano-icon":true}},this.svgContent?r("div",{class:"icon-inner",innerHTML:this.svgContent}):r("div",{class:"icon-inner"}))}static get watchers(){return{ariaLabel:["udpateRole"],role:["setAriaLabel"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};x.style=z;export{x as nano_icon};
 //# sourceMappingURL=nano-icon.entry.js.map

package/dist/nano-components/nano-icon.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["CACHED_MAP","getIconMap","win","window","Nanoicons","map","Map","getUrl","i","url","getSrc","src","getName","name","icon","getNamedUrl","iconName","get","getAssetPath","isSrc","isStr","toLower","trim","invalidChars","replace","console","warn","str","length","test","val","toLowerCase","validateContent","svgContent","div","document","createElement","innerHTML","childNodes","nodeName","removeChild","svgElm","firstElementChild","svgClass","getAttribute","setAttribute","isValid","elm","nodeType","attributes","value","indexOf","iconContent","requests","getSvgContent","req","fetch","then","rsp","ok","text","set","iconCss","NanoIconStyle0","Icon","io","isVisible","isLoading","color","role","ariaLabel","flipRtl","size","lazy","udpateRole","this","setAriaLabel","el","label","split","slice","undefined","connectedCallback","waitUntilVisible","loadIcon","disconnectedCallback","disconnect","componentWillLoad","rootMargin","cb","IntersectionObserver","data","isIntersecting","observe","has","requestAnimationFrame","isRtl","ownerDocument","dir","closest","rootNode","getRootNode","ownerHost","host","render","h","Host","key","class","createColorClasses","loading"],"sources":["src/components/icon/utils.ts","src/components/icon/validate.ts","src/components/icon/request.ts","src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n  if (!CACHED_MAP) {\n    const win = window as any;\n    win.Nanoicons = win.Nanoicons || {};\n    CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();\n  }\n  return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n  const map = getIconMap();\n  Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n  let url = getSrc(i.src);\n  if (url) {\n    return url;\n  }\n\n  url = getName(i.name, i.icon);\n  if (url) {\n    return getNamedUrl(url);\n  }\n\n  if (i.icon) {\n    url = getSrc(i.icon);\n    if (url) {\n      return url;\n    }\n  }\n  return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n  const url = getIconMap().get(iconName);\n  if (url) {\n    return url;\n  }\n  return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n  iconName: string | undefined,\n  icon: string | undefined\n) => {\n  if (!iconName && icon && !isSrc(icon)) {\n    iconName = icon;\n  }\n  if (isStr(iconName)) {\n    iconName = toLower(iconName);\n  }\n\n  if (!isStr(iconName) || iconName.trim() === '') {\n    return null;\n  }\n\n  // only allow alpha characters and dash\n  const invalidChars = iconName.replace(/[a-z]|-|\\/|\\d/gi, '');\n  if (invalidChars !== '') {\n    console.warn('invalid characters in icon name ' + iconName);\n    return null;\n  }\n  return iconName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n  if (isStr(src)) {\n    src = src.trim();\n    if (isSrc(src)) {\n      return src;\n    }\n  }\n  return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string | null) => {\n  if (svgContent) {\n    const div = document.createElement('div');\n    div.innerHTML = svgContent;\n\n    // setup this way to ensure it works on our buddy IE\n    for (let i = div.childNodes.length - 1; i >= 0; i--) {\n      if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n        div.removeChild(div.childNodes[i]);\n      }\n    }\n\n    // must only have 1 root element\n    const svgElm = div.firstElementChild;\n    if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n      const svgClass = svgElm.getAttribute('class') || '';\n      svgElm.setAttribute(\n        'class',\n        (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n      );\n\n      // root element must be an svg\n      // lets double check we've got valid elements\n      // do not allow scripts\n      if (isValid(svgElm as any)) {\n        return div.innerHTML;\n      }\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const val = elm.attributes[i].value;\n      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as any)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n  // see if we already have a request for this url\n  let req = requests.get(url);\n  if (!req) {\n    // we don't already have a request\n    req = fetch(url).then((rsp) => {\n      if (rsp.ok) {\n        return rsp.text().then((svgContent) => {\n          iconContent.set(url, validateContent(svgContent));\n        });\n      }\n      iconContent.set(url, '');\n    });\n\n    // cache for the same requests\n    requests.set(url, req);\n  }\n  return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n  /**\n  * @prop --color: defaults to current context color\n  * @prop --primary-color: used for duotone icons to set the primary color\n  * @prop --secondary-color: used for duotone icons to set the secondary color\n  * @prop --primary-opacity: used for duotone icons to set the primary opacity\n  * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n  * @prop --stroke-width: 32px default stroke width\n  */\n\n  --color: var(--nano-color-base, currentcolor);\n  --primary-color: var(--nano-color-tint, currentcolor);\n  --secondary-color: var(--nano-color-shade, currentcolor);\n  --stroke-width: 32px;\n  --primary-opacity: 0.8;\n  --secondary-opacity: 1;\n  --icon-size: var(--nano-icon-size, 1em);\n  --icon-margin-top: var(--nano-icon-margin-top, 0);\n  --icon-margin-end: var(--nano-icon-margin-end, 0);\n  --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n  --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n  display: inline-block;\n  inline-size: var(--icon-size);\n  block-size: var(--icon-size);\n  min-inline-size: var(--icon-size);\n  min-block-size: var(--icon-size);\n  contain: strict;\n  fill: currentcolor;\n  box-sizing: content-box !important;\n  transition: opacity 0.3s ease;\n  color: var(--color);\n  margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n  margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n  stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n  fill: none;\n}\n\n.nanoicon-stroke-width {\n  stroke-width: 32px;\n  stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n  display: block;\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: visible;\n}\n\n:host(.loading) {\n  opacity: 0;\n}\n\n.fa-primary {\n  color: var(--primary-color);\n  opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n  color: var(--secondary-color);\n  opacity: var(--secondary-opacity) !important;\n}\n\n/* Icon RTL\n * -----------------------------------------------------------\n */\n:host(.flip-rtl) .icon-inner {\n  transform: scaleX(-1);\n}\n\n/* Icon Sizes\n * -----------------------------------------------------------\n */\n:host(.icon-small) {\n  font-size: 18px !important;\n}\n\n:host(.icon-large) {\n  font-size: 32px !important;\n}\n","import {\n  Build,\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../types/shared';\n\n/**\n * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n */\n@Component({\n  tag: 'nano-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLNanoIconElement;\n\n  @State() svgContent?: string;\n  @State() isVisible = false;\n  @State() isLoading = true;\n\n  /**\n   * 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   * Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)\n   */\n  @Prop({ mutable: true, reflect: true }) role: string;\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the icon name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n  /**\n   * Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n   */\n  @Prop() flipRtl?: boolean;\n\n  /**\n   * Specifies which icon to use from the built-in set of icons.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() icon?: any;\n\n  /**\n   * The size of the icon.\n   * Available options are: `\"small\"` and `\"large\"`.\n   */\n  @Prop() size?: 'small' | 'large';\n\n  /**\n   * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n   * Default, `true`.\n   */\n  @Prop() lazy = true;\n\n  @Watch('ariaLabel')\n  udpateRole() {\n    // force the role to be 'img' if the aria-label is explicitly set\n    if (this.ariaLabel) this.role = 'img';\n    else if (!this.ariaLabel) this.role = 'presentation';\n  }\n\n  @Watch('role')\n  setAriaLabel() {\n    if (!this.ariaLabel && !this.el.ariaLabel) {\n      if (!this.role || this.role !== 'presentation') {\n        // if the role is not 'presentation' and the user did not explicitly set a role,\n        // let's try and derive one from the icon name\n\n        const label = getName(this.name, this.icon);\n        // user did not provide a label\n        // come up with the label based on the icon name\n        if (label) {\n          this.ariaLabel = label.split('/').slice(-1)[0].replace(/-/g, ' ');\n        }\n      }\n    } else if (this.role === 'presentation') {\n      this.ariaLabel = undefined;\n    }\n  }\n\n  connectedCallback() {\n    // purposely do not return the promise here because loading\n    // the svg file should not hold up loading the app\n    // only load the svg if it's visible\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIcon();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  componentWillLoad() {\n    this.udpateRole();\n    this.setAriaLabel();\n  }\n\n  private waitUntilVisible(\n    el: HTMLElement,\n    rootMargin: string,\n    cb: () => void\n  ) {\n    if (\n      Build.isBrowser &&\n      this.lazy &&\n      typeof window !== 'undefined' &&\n      (window as any).IntersectionObserver\n    ) {\n      const io = (this.io = new (window as any).IntersectionObserver(\n        (data: IntersectionObserverEntry[]) => {\n          if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n            io.disconnect();\n            this.io = undefined;\n            cb();\n          }\n        },\n        { rootMargin }\n      ));\n\n      io.observe(el);\n    } else {\n      // not a browser env (e.g. node)\n      // or we're not loading lazily\n      // or env doesn't support IntersectionObserver (testing?)\n      // - immediately fetch icon\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('icon')\n  loadIcon() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (iconContent.has(url)) {\n          // sync if it's already loaded\n          this.svgContent = iconContent.get(url);\n          requestAnimationFrame(() => (this.isLoading = false));\n        } else {\n          // async if it hasn't been loaded\n          getSvgContent(url).then(() => {\n            this.svgContent = iconContent.get(url);\n            requestAnimationFrame(() => (this.isLoading = false));\n            this.setAriaLabel();\n          });\n        }\n      }\n    }\n  }\n\n  private isRtl() {\n    // doc is in rtl\n    if (this.el.ownerDocument?.dir === 'rtl') return true;\n    // html element is in rtl element\n    if (this.el.closest('[dir=\"rtl\"]')) return true;\n\n    // nested in a shadow dom - see if that host element is contained in an rtl element\n    const rootNode = this.el.getRootNode() as ShadowRoot;\n    const ownerHost = rootNode.host;\n    if (ownerHost && ownerHost.closest('[dir=\"rtl\"]')) return true;\n\n    return false;\n  }\n\n  render() {\n    const flipRtl =\n      this.flipRtl ||\n      (this.name &&\n        (this.name.indexOf('arrow') > -1 ||\n          this.name.indexOf('chevron') > -1) &&\n        this.isRtl() &&\n        this.flipRtl !== false);\n\n    return (\n      <Host\n        class={{\n          ...createColorClasses(this.color),\n          loading: this.isLoading,\n          [`icon-${this.size}`]: !!this.size,\n          'flip-rtl': !!flipRtl,\n        }}\n      >\n        {Build.isBrowser && this.svgContent ? (\n          <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n        ) : (\n          <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["CACHED_MAP","getIconMap","win","window","Nanoicons","map","Map","getUrl","i","url","getSrc","src","getName","name","icon","getNamedUrl","iconName","get","getAssetPath","isSrc","isStr","toLower","trim","invalidChars","replace","console","warn","str","length","test","val","toLowerCase","validateContent","svgContent","div","document","createElement","innerHTML","childNodes","nodeName","removeChild","svgElm","firstElementChild","svgClass","getAttribute","setAttribute","isValid","elm","nodeType","attributes","value","indexOf","iconContent","requests","getSvgContent","req","fetch","then","rsp","ok","text","set","iconCss","NanoIconStyle0","Icon","io","isVisible","isLoading","color","role","ariaLabel","flipRtl","size","lazy","udpateRole","this","setAriaLabel","el","label","split","slice","undefined","connectedCallback","waitUntilVisible","loadIcon","disconnectedCallback","disconnect","componentWillLoad","rootMargin","cb","IntersectionObserver","data","isIntersecting","observe","has","requestAnimationFrame","isRtl","ownerDocument","dir","closest","rootNode","getRootNode","ownerHost","host","render","h","Host","key","class","createColorClasses","loading"],"sources":["src/components/icon/utils.ts","src/components/icon/validate.ts","src/components/icon/request.ts","src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n  if (!CACHED_MAP) {\n    const win = window as any;\n    win.Nanoicons = win.Nanoicons || {};\n    CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();\n  }\n  return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n  const map = getIconMap();\n  Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n  let url = getSrc(i.src);\n  if (url) {\n    return url;\n  }\n\n  url = getName(i.name, i.icon);\n  if (url) {\n    return getNamedUrl(url);\n  }\n\n  if (i.icon) {\n    url = getSrc(i.icon);\n    if (url) {\n      return url;\n    }\n  }\n  return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n  const url = getIconMap().get(iconName);\n  if (url) {\n    return url;\n  }\n  return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n  iconName: string | undefined,\n  icon: string | undefined\n) => {\n  if (!iconName && icon && !isSrc(icon)) {\n    iconName = icon;\n  }\n  if (isStr(iconName)) {\n    iconName = toLower(iconName);\n  }\n\n  if (!isStr(iconName) || iconName.trim() === '') {\n    return null;\n  }\n\n  // only allow alpha characters and dash\n  const invalidChars = iconName.replace(/[a-z]|-|\\/|\\d/gi, '');\n  if (invalidChars !== '') {\n    console.warn('invalid characters in icon name ' + iconName);\n    return null;\n  }\n  return iconName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n  if (isStr(src)) {\n    src = src.trim();\n    if (isSrc(src)) {\n      return src;\n    }\n  }\n  return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string | null) => {\n  if (svgContent) {\n    const div = document.createElement('div');\n    div.innerHTML = svgContent;\n\n    // setup this way to ensure it works on our buddy IE\n    for (let i = div.childNodes.length - 1; i >= 0; i--) {\n      if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n        div.removeChild(div.childNodes[i]);\n      }\n    }\n\n    // must only have 1 root element\n    const svgElm = div.firstElementChild;\n    if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n      const svgClass = svgElm.getAttribute('class') || '';\n      svgElm.setAttribute(\n        'class',\n        (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n      );\n\n      // root element must be an svg\n      // lets double check we've got valid elements\n      // do not allow scripts\n      if (isValid(svgElm as any)) {\n        return div.innerHTML;\n      }\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const val = elm.attributes[i].value;\n      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as any)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n  // see if we already have a request for this url\n  let req = requests.get(url);\n  if (!req) {\n    // we don't already have a request\n    req = fetch(url).then((rsp) => {\n      if (rsp.ok) {\n        return rsp.text().then((svgContent) => {\n          iconContent.set(url, validateContent(svgContent));\n        });\n      }\n      iconContent.set(url, '');\n    });\n\n    // cache for the same requests\n    requests.set(url, req);\n  }\n  return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n  /**\n  * @prop --color: defaults to current context color\n  * @prop --primary-color: used for duotone icons to set the primary color\n  * @prop --secondary-color: used for duotone icons to set the secondary color\n  * @prop --primary-opacity: used for duotone icons to set the primary opacity\n  * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n  * @prop --stroke-width: 32px default stroke width\n  */\n\n  --color: var(--nano-color-base, currentcolor);\n  --primary-color: var(--nano-color-tint, currentcolor);\n  --secondary-color: var(--nano-color-shade, currentcolor);\n  --stroke-width: 32px;\n  --primary-opacity: 0.8;\n  --secondary-opacity: 1;\n  --icon-size: var(--nano-icon-size, 1em);\n  --icon-margin-top: var(--nano-icon-margin-top, 0);\n  --icon-margin-end: var(--nano-icon-margin-end, 0);\n  --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n  --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n  display: inline-block;\n  inline-size: var(--icon-size);\n  block-size: var(--icon-size);\n  min-inline-size: var(--icon-size);\n  min-block-size: var(--icon-size);\n  contain: strict;\n  fill: currentcolor;\n  box-sizing: content-box !important;\n  transition: opacity 0.3s ease;\n  color: var(--color);\n  margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n  margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n  stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n  fill: none;\n}\n\n.nanoicon-stroke-width {\n  stroke-width: 32px;\n  stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n  display: block;\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: visible;\n}\n\n:host(.loading) {\n  opacity: 0;\n}\n\n.fa-primary {\n  color: var(--primary-color);\n  opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n  color: var(--secondary-color);\n  opacity: var(--secondary-opacity) !important;\n}\n\n/* Icon RTL\n * -----------------------------------------------------------\n */\n:host(.flip-rtl) .icon-inner {\n  transform: scaleX(-1);\n}\n\n/* Icon Sizes\n * -----------------------------------------------------------\n */\n:host(.icon-small) {\n  font-size: 18px !important;\n}\n\n:host(.icon-large) {\n  font-size: 32px !important;\n}\n","import {\n  Build,\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../types/shared';\n\n/**\n * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n */\n@Component({\n  tag: 'nano-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLNanoIconElement;\n\n  @State() svgContent?: string;\n  @State() isVisible = false;\n  @State() isLoading = true;\n\n  /**\n   * 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   * Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)\n   */\n  @Prop({ mutable: true, reflect: true }) role: string;\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the icon name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n  /**\n   * Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n   */\n  @Prop() flipRtl?: boolean;\n\n  /**\n   * Specifies which icon to use from the built-in set of icons.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() icon?: any;\n\n  /**\n   * The size of the icon.\n   * Available options are: `\"small\"` and `\"large\"`.\n   */\n  @Prop() size?: 'small' | 'large';\n\n  /**\n   * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n   * Default, `true`.\n   */\n  @Prop() lazy = true;\n\n  @Watch('ariaLabel')\n  udpateRole() {\n    // force the role to be 'img' if the aria-label is explicitly set\n    if (this.ariaLabel) this.role = 'img';\n    else if (!this.ariaLabel) this.role = 'presentation';\n  }\n\n  @Watch('role')\n  setAriaLabel() {\n    if (!this.ariaLabel && !this.el.ariaLabel) {\n      if (!this.role || this.role !== 'presentation') {\n        // if the role is not 'presentation' and the user did not explicitly set a role,\n        // let's try and derive one from the icon name\n\n        const label = getName(this.name, this.icon);\n        // user did not provide a label\n        // come up with the label based on the icon name\n        if (label) {\n          this.ariaLabel = label.split('/').slice(-1)[0].replace(/-/g, ' ');\n        }\n      }\n    } else if (this.role === 'presentation') {\n      this.ariaLabel = undefined;\n    }\n  }\n\n  connectedCallback() {\n    // purposely do not return the promise here because loading\n    // the svg file should not hold up loading the app\n    // only load the svg if it's visible\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIcon();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  componentWillLoad() {\n    this.udpateRole();\n    this.setAriaLabel();\n  }\n\n  private waitUntilVisible(\n    el: HTMLElement,\n    rootMargin: string,\n    cb: () => void\n  ) {\n    if (\n      Build.isBrowser &&\n      this.lazy &&\n      typeof window !== 'undefined' &&\n      (window as any).IntersectionObserver\n    ) {\n      const io = (this.io = new (window as any).IntersectionObserver(\n        (data: IntersectionObserverEntry[]) => {\n          if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n            io.disconnect();\n            this.io = undefined;\n            cb();\n          }\n        },\n        { rootMargin }\n      ));\n\n      io.observe(el);\n    } else {\n      // not a browser env (e.g. node)\n      // or we're not loading lazily\n      // or env doesn't support IntersectionObserver (testing?)\n      // - immediately fetch icon\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('icon')\n  loadIcon() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (iconContent.has(url)) {\n          // sync if it's already loaded\n          this.svgContent = iconContent.get(url);\n          requestAnimationFrame(() => (this.isLoading = false));\n        } else {\n          // async if it hasn't been loaded\n          getSvgContent(url).then(() => {\n            this.svgContent = iconContent.get(url);\n            requestAnimationFrame(() => (this.isLoading = false));\n            this.setAriaLabel();\n          });\n        }\n      }\n    }\n  }\n\n  private isRtl() {\n    // doc is in rtl\n    if (this.el.ownerDocument?.dir === 'rtl') return true;\n    // html element is in rtl element\n    if (this.el.closest('[dir=\"rtl\"]')) return true;\n\n    // nested in a shadow dom - see if that host element is contained in an rtl element\n    const rootNode = this.el.getRootNode() as ShadowRoot;\n    const ownerHost = rootNode.host;\n    if (ownerHost && ownerHost.closest('[dir=\"rtl\"]')) return true;\n\n    return false;\n  }\n\n  render() {\n    const flipRtl =\n      this.flipRtl ||\n      (this.name &&\n        (this.name.indexOf('arrow') > -1 ||\n          this.name.indexOf('chevron') > -1) &&\n        this.isRtl() &&\n        this.flipRtl !== false);\n\n    return (\n      <Host\n        class={{\n          ...createColorClasses(this.color),\n          loading: this.isLoading,\n          [`icon-${this.size}`]: !!this.size,\n          'flip-rtl': !!flipRtl,\n          'nano-icon': true,\n        }}\n      >\n        {Build.isBrowser && this.svgContent ? (\n          <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n        ) : (\n          <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-input.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as n,c as t,g as i,h as a,a as o}from"./index-3118109b.js";import{c as e}from"./dom-d7f9f24c.js";import{c as r}from"./theme-d553c17a.js";import{d as s,a as l}from"./throttle-df960210.js";import{F as c,a as p}from"./form-control-812999d0.js";const u='.sc-nano-input-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n  display: none !important;\n}\n.sc-nano-input-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n  display: none !important;\n}\n[disabled].sc-nano-input-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-input {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-input {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-input {\n  display: block;\n}\n\nlabel.sc-nano-input, .form-ctrl__more.sc-nano-input, .form-ctrl__error.sc-nano-input, .form-ctrl__helper.sc-nano-input {\n  display: block;\n  inline-size: 100%;\n  overflow: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-input, .form-ctrl__more.visually-hide.sc-nano-input, .form-ctrl__error.visually-hide.sc-nano-input, .form-ctrl__helper.visually-hide.sc-nano-input {\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.form-ctrl__float-label.sc-nano-input {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-input {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input {\n  flex: 1;\n  overflow-x: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.85em;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__label.sc-nano-input {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-input {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-input, .form-ctrl__error.sc-nano-input {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-input {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-input-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-input {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-input {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-input {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__error.sc-nano-input {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-input {\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  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-input {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-input, .form-ctrl__slot-end.sc-nano-input, .form-ctrl__slot-start.sc-nano-input, .form-ctrl__slot-value-end.sc-nano-input {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, [disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-input {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-input:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-input-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: nano-color(danger, base, , true);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      nano-color(primary, base, , true)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, "currentcolor");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, "currentcolor");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  color: currentcolor;\n  display: block;\n}\n\n.nano-color.sc-nano-input-h {\n  color: var(--nano-color-base);\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n}\n\n.input__native-ctrl.sc-nano-input {\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  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\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  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 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  line-height: 2.5em;\n  \n}\n.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.input__native-ctrl.sc-nano-input::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-block-size: initial;\n}\n.input__native-ctrl.sc-nano-input::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.input__native-ctrl.sc-nano-input:-webkit-autofill {\n  background-color: transparent;\n}\n.input__native-ctrl.sc-nano-input::-webkit-search-decoration, .input__native-ctrl.sc-nano-input::-webkit-search-cancel-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-decoration {\n  appearance: none;\n}\n.input__native-ctrl.sc-nano-input:invalid {\n  box-shadow: none;\n}\n.input__native-ctrl.sc-nano-input::-ms-clear, .input__native-ctrl.sc-nano-input::-ms-reveal {\n  display: none;\n}\n.input__native-ctrl.input__resizable.sc-nano-input {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) 0.25em;\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n  padding-block-start: 1.75em;\n}\n[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input {\n  -webkit-user-select: none;\n          user-select: none;\n}';const d=u;let h=0;const f=class{nativeInput;inputId=`nano-input-${h++}`;didBlurAfterEdit=false;rtl=false;mo;charCount=0;hasRendered=false;_nativeInputWrap;get nativeInputWrap(){return this._nativeInputWrap}set nativeInputWrap(n){if(this._nativeInputWrap===n)return;this._nativeInputWrap=n;this.setDataListOpts()}constructor(i){n(this,i);this.nanoInput=t(this,"nanoInput",7);this.nanoChange=t(this,"nanoChange",7);this.nanoBlur=t(this,"nanoBlur",7);this.nanoFocus=t(this,"nanoFocus",7);this.nanoDidLoad=t(this,"nanoDidLoad",7);this.nanoDidUnload=t(this,"nanoDidUnload",7);this.nanoValidate=t(this,"nanoValidate",7);this.validate=s(this.validate,50);this.handleBlur=this.handleBlur.bind(this)}hasFocus=false;hasLabelSlot=false;hasHelperSlot=false;hasHelperEndSlot=false;errorMessage="";datalist=null;setDataListOpts(){if(!this.datalist)return;const n=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig={...n,skidding:-1,tetherTo:this.nativeInputWrap}}get el(){return i(this)}get invalid(){return this._invalid}_invalid=false;get validityMessage(){if(!this.nativeInput)return"";return this.nativeInput.validationMessage}color;accept;autocapitalise="none";autocomplete="off";autocorrect="off";autofocus=false;clearInput=false;clearOnEdit;debounce=0;disabled=false;inputmode;validateOn="submitThenDirty";showInlineError=true;label;hideLabel=false;floatLabel=false;max;maxlength;min;minlength;multiple;name=this.inputId;pattern;placeholder;readonly=false;required=false;spellcheck=false;step;size;type="text";form;value="";resize="auto";rows=2;showCharCount=false;shouldValidate(){if(!this.hasRendered)return;requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.validate()}))}valueChanged(){this.nanoChange.emit({value:this.value});this.charCount=this.value?.length||0;if(this.type==="textarea"&&this.resize==="auto"){this.nativeInput.style.height="auto";if(this.value?.length)this.nativeInput.style.height=this.nativeInput.scrollHeight+"px"}requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.validate()}))}debounceChanged(){this.nanoChange=l(this.nanoChange,this.debounce)}nanoInput;nanoChange;nanoBlur;nanoFocus;nanoDidLoad;nanoDidUnload;nanoValidate;async reportValidity(n){return new Promise((t=>{if(n)this.validate();setTimeout((()=>{t({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage})}),50)}))}async setFocus(){if(this.nativeInput){this.nativeInput.focus();this.nativeInput.click()}}async select(){if(this.nativeInput){this.nativeInput.select()}}getInputElement(){return Promise.resolve(this.nativeInput)}async showError(n){if(this.nativeInput){this.nativeInput.setCustomValidity(n);this.validate()}}onReset(n){const t=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!t||n.target!==this.el.closest("form"))return;this.value=""}handleBlur(n){if(!this.hasFocus)return;const t=n;let i;requestAnimationFrame((()=>{if(n instanceof KeyboardEvent&&t.key){if(t.key!=="Tab")return;i=document.activeElement}else if(n instanceof FocusEvent){i=document.activeElement}else i=n.target;if(e(this.el.tagName.toLowerCase(),i)!==this.el){this.onBlur()}}))}shouldClearOnEdit(){const{type:n,clearOnEdit:t}=this;return t===undefined?n==="password":t}getValue(){return this.value||""}validate=n=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";if(!this.nativeInput.validity.valid){if(this.showInlineError){if(n)n.preventDefault();this.errorMessage=this.nativeInput.validationMessage}this._invalid=true}else this._invalid=false;this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage,originalEvent:n})};onInput=n=>{const t=n.target;this.value=t?.value||"";this.nanoInput.emit(n)};onBlur=()=>{this.hasFocus=false;this.focusChanged();if(this.validateOn==="dirty")this.validate();this.nanoBlur.emit()};onFocus=()=>{this.hasFocus=true;this.focusChanged();this.nanoFocus.emit()};onKeydown=()=>{if(this.shouldClearOnEdit()){if(this.didBlurAfterEdit&&this.hasValue()){this.clearTextInput()}this.didBlurAfterEdit=false}};clearTextInput=n=>{if(this.clearInput&&!this.readonly&&!this.disabled&&n){n.preventDefault();n.stopPropagation()}this.value="";this.nativeInput.value="";const t=new window.Event("change");this.nativeInput.dispatchEvent(t)};focusChanged(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}}hasValue(){return this.getValue().length>0}slotChangeObserver(){if(this.mo)this.mo.disconnect();const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]');this.datalist=this.el.querySelector("nano-datalist:not([slot])");if(this.el.querySelector('[slot="inline-button"]')){console.warn("The `inline-button` slot was renamed to `end` in v2 - please update your code",this.el)}}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.hasRendered=true;if(this.autofocus)setTimeout((n=>this.setFocus()),300)}componentWillLoad(){this.processSlottedContent()}render(){const n=this.getValue();const t=this.inputId+"-lbl";const i=this.showInlineError||this.hasHelperSlot?this.inputId+"-more":"";const e=this.hasHelperEndSlot?this.inputId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";const s=(({el:n,floatLabel:t,label:i,errorMessage:a,type:o,showInlineError:e,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:c,maxlength:p,charCount:u,showCharCount:d,rtl:h,hasHelperEndSlot:f})=>({el:n,floatLabel:t,label:i,errorMessage:a,type:o,showInlineError:e,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:c,maxlength:p,charCount:u,showCharCount:d,rtl:h,hasHelperEndSlot:f}))(this);const l={...s,labelId:t,moreId:i,helperEndId:e,hasValue:this.hasValue(),controlId:this.inputId};const u=(({clearInput:n,readonly:t,disabled:i})=>({clearInput:n,readonly:t,disabled:i,clearControl:this.clearInput}))(this);return a(o,{key:"d3ba5aeef1a8b0dc6d8184a5baf858a80525c907","aria-disabled":this.disabled?"true":null,dir:this.rtl?"rtl":null,class:{...r(this.color),"has-value":this.hasValue(),"has-focus":this.hasFocus,"is-invalid":this._invalid}},a("div",{key:"d8c8488f37aa9474f946d165aa2f91c55886f74f",style:{width:"100%"}},a(c,{key:"50dc939d11a2704aacc6f967670e2945fd063b89",...l},a(p,{key:"fbe48f48485af685c0787dcfdc67a198b9904bd2",...u,onClearText:this.clearTextInput,control:this.el,ref:n=>this.nativeInputWrap=n},this.type!=="textarea"&&a("input",{key:"9851de702e37a25a86ccf1935372ec0b3992e127",id:this.inputId,class:"input__native-ctrl",ref:n=>this.nativeInput=n,"aria-labelledby":t+" "+i+" "+e,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalise,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,size:this.size,type:this.type,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onBlur:this.handleBlur,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.type==="textarea"&&a("textarea",{key:"b0e639724c3458e45854b31dd17e26839737479d",rows:this.floatLabel?1:this.rows,id:this.inputId,class:{"input__native-ctrl":true,input__resizable:this.resize==="true"},ref:n=>this.nativeInput=n,"aria-labelledby":t+" "+i+" "+e,disabled:this.disabled,autoCapitalize:this.autocapitalise,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,minLength:this.minlength,maxLength:this.maxlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate,onBlur:this.handleBlur}))),a("slot",{key:"3d2663183a74f118a092ae196855922ab336f43b"})))}static get watchers(){return{datalist:["setDataListOpts"],minlength:["shouldValidate"],maxlength:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],readonly:["shouldValidate"],pattern:["shouldValidate"],inputmode:["shouldValidate"],value:["valueChanged"],debounce:["debounceChanged"]}}};f.style=d;export{f as nano_input};
+import{r as n,c as t,g as i,a}from"./index-6cc72cd9.js";import{c as o}from"./dom-fafdec9a.js";import{c as e}from"./theme-d553c17a.js";import{d as r,a as s}from"./throttle-df960210.js";import{F as l,a as c}from"./form-control-f48fa873.js";import{t as p,h as u}from"./renderer-4bc3e2dc.js";const d='.sc-nano-input-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n  display: none !important;\n}\n.sc-nano-input-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n  display: none !important;\n}\n[disabled].sc-nano-input-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-input {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-input {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-input {\n  display: block;\n}\n\nlabel.sc-nano-input, .form-ctrl__more.sc-nano-input, .form-ctrl__error.sc-nano-input, .form-ctrl__helper.sc-nano-input {\n  display: block;\n  inline-size: 100%;\n  overflow: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-input, .form-ctrl__more.visually-hide.sc-nano-input, .form-ctrl__error.visually-hide.sc-nano-input, .form-ctrl__helper.visually-hide.sc-nano-input {\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.form-ctrl__float-label.sc-nano-input {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-input {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input {\n  flex: 1;\n  overflow-x: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.85em;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__label.sc-nano-input {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-input {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-input, .form-ctrl__error.sc-nano-input {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-input {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-input-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-input {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-input {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-input {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__error.sc-nano-input {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-input {\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  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-input {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-input, .form-ctrl__slot-end.sc-nano-input, .form-ctrl__slot-start.sc-nano-input, .form-ctrl__slot-value-end.sc-nano-input {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, [disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-input {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-input:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-input-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: nano-color(danger, base, , true);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      nano-color(primary, base, , true)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, "currentcolor");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, "currentcolor");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  color: currentcolor;\n  display: block;\n}\n\n.nano-color.sc-nano-input-h {\n  color: var(--nano-color-base);\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n}\n\n.input__native-ctrl.sc-nano-input {\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  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\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  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 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  line-height: 2.5em;\n  \n}\n.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.input__native-ctrl.sc-nano-input::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-block-size: initial;\n}\n.input__native-ctrl.sc-nano-input::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.input__native-ctrl.sc-nano-input:-webkit-autofill {\n  background-color: transparent;\n}\n.input__native-ctrl.sc-nano-input::-webkit-search-decoration, .input__native-ctrl.sc-nano-input::-webkit-search-cancel-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-decoration {\n  appearance: none;\n}\n.input__native-ctrl.sc-nano-input:invalid {\n  box-shadow: none;\n}\n.input__native-ctrl.sc-nano-input::-ms-clear, .input__native-ctrl.sc-nano-input::-ms-reveal {\n  display: none;\n}\n.input__native-ctrl.input__resizable.sc-nano-input {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) 0.25em;\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n  padding-block-start: 1.75em;\n}\n[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input {\n  -webkit-user-select: none;\n          user-select: none;\n}';const h=d;let f=0;const b=class{nativeInput;inputId=`nano-input-${f++}`;didBlurAfterEdit=false;rtl=false;mo;charCount=0;hasRendered=false;_nativeInputWrap;get nativeInputWrap(){return this._nativeInputWrap}set nativeInputWrap(n){if(this._nativeInputWrap===n)return;this._nativeInputWrap=n;this.setDataListOpts()}constructor(i){n(this,i);this.nanoInput=t(this,"nanoInput",7);this.nanoChange=t(this,"nanoChange",7);this.nanoBlur=t(this,"nanoBlur",7);this.nanoFocus=t(this,"nanoFocus",7);this.nanoDidLoad=t(this,"nanoDidLoad",7);this.nanoDidUnload=t(this,"nanoDidUnload",7);this.nanoValidate=t(this,"nanoValidate",7);this.validate=r(this.validate,50);this.handleBlur=this.handleBlur.bind(this)}hasFocus=false;hasLabelSlot=false;hasHelperSlot=false;hasHelperEndSlot=false;errorMessage="";datalist=null;setDataListOpts(){if(!this.datalist)return;const n=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig={...n,skidding:-1,tetherTo:this.nativeInputWrap}}get el(){return i(this)}get invalid(){return this._invalid}_invalid=false;get validityMessage(){if(!this.nativeInput)return"";return this.nativeInput.validationMessage}color;accept;autocapitalise="none";autocomplete="off";autocorrect="off";autofocus=false;clearInput=false;clearOnEdit;debounce=0;disabled=false;inputmode;validateOn="submitThenDirty";showInlineError=true;label;hideLabel=false;floatLabel=false;max;maxlength;min;minlength;multiple;name=this.inputId;pattern;placeholder;readonly=false;required=false;spellcheck=false;step;size;type="text";form;value="";resize="auto";rows=2;showCharCount=false;shouldValidate(){if(!this.hasRendered)return;requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.validate()}))}valueChanged(){this.nanoChange.emit({value:this.value});this.charCount=this.value?.length||0;if(this.type==="textarea"&&this.resize==="auto"){this.nativeInput.style.height="auto";if(this.value?.length)this.nativeInput.style.height=this.nativeInput.scrollHeight+"px"}requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.validate()}))}debounceChanged(){this.nanoChange=s(this.nanoChange,this.debounce)}nanoInput;nanoChange;nanoBlur;nanoFocus;nanoDidLoad;nanoDidUnload;nanoValidate;async reportValidity(n){return new Promise((t=>{if(n)this.validate();setTimeout((()=>{t({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage})}),50)}))}async setFocus(){if(this.nativeInput){this.nativeInput.focus();this.nativeInput.click()}}async select(){if(this.nativeInput){this.nativeInput.select()}}getInputElement(){return Promise.resolve(this.nativeInput)}async showError(n){if(this.nativeInput){this.nativeInput.setCustomValidity(n);this.validate()}}onReset(n){const t=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!t||n.target!==this.el.closest("form"))return;this.value=""}handleBlur(n){if(!this.hasFocus)return;const t=n;let i;requestAnimationFrame((()=>{if(n instanceof KeyboardEvent&&t.key){if(t.key!=="Tab")return;i=document.activeElement}else if(n instanceof FocusEvent){i=document.activeElement}else i=n.target;if(o(this.el.tagName.toLowerCase(),i)!==this.el){this.onBlur()}}))}shouldClearOnEdit(){const{type:n,clearOnEdit:t}=this;return t===undefined?n==="password":t}getValue(){return this.value||""}validate=n=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";if(!this.nativeInput.validity.valid){if(this.showInlineError){if(n)n.preventDefault();this.errorMessage=this.nativeInput.validationMessage}this._invalid=true}else this._invalid=false;this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage,originalEvent:n})};onInput=n=>{const t=n.target;this.value=t?.value||"";this.nanoInput.emit(n)};onBlur=()=>{this.hasFocus=false;this.focusChanged();if(this.validateOn==="dirty")this.validate();this.nanoBlur.emit()};onFocus=()=>{this.hasFocus=true;this.focusChanged();this.nanoFocus.emit()};onKeydown=()=>{if(this.shouldClearOnEdit()){if(this.didBlurAfterEdit&&this.hasValue()){this.clearTextInput()}this.didBlurAfterEdit=false}};clearTextInput=n=>{if(this.clearInput&&!this.readonly&&!this.disabled&&n){n.preventDefault();n.stopPropagation()}this.value="";this.nativeInput.value="";const t=new window.Event("change");this.nativeInput.dispatchEvent(t)};focusChanged(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}}hasValue(){return this.getValue().length>0}slotChangeObserver(){if(this.mo)this.mo.disconnect();const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]');this.datalist=this.el.querySelector(`${p("nano-datalist")}:not([slot])`);if(this.el.querySelector('[slot="inline-button"]')){console.warn("The `inline-button` slot was renamed to `end` in v2 - please update your code",this.el)}}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.hasRendered=true;if(this.autofocus)setTimeout((n=>this.setFocus()),300)}componentWillLoad(){this.processSlottedContent()}render(){const n=this.getValue();const t=this.inputId+"-lbl";const i=this.showInlineError||this.hasHelperSlot?this.inputId+"-more":"";const o=this.hasHelperEndSlot?this.inputId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";const r=(({el:n,floatLabel:t,label:i,errorMessage:a,type:o,showInlineError:e,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:c,maxlength:p,charCount:u,showCharCount:d,rtl:h,hasHelperEndSlot:f})=>({el:n,floatLabel:t,label:i,errorMessage:a,type:o,showInlineError:e,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:c,maxlength:p,charCount:u,showCharCount:d,rtl:h,hasHelperEndSlot:f}))(this);const s={...r,labelId:t,moreId:i,helperEndId:o,hasValue:this.hasValue(),controlId:this.inputId};const p=(({clearInput:n,readonly:t,disabled:i})=>({clearInput:n,readonly:t,disabled:i,clearControl:this.clearInput}))(this);return u(a,{key:"dfed5ae52b51a714f2aa0218b9cee8081251a2c9","aria-disabled":this.disabled?"true":null,dir:this.rtl?"rtl":null,class:{...e(this.color),"has-value":this.hasValue(),"has-focus":this.hasFocus,"is-invalid":this._invalid,"nano-input":true}},u("div",{key:"94d4634ca2fe48cce7f761fb4e6a3d640121baf9",style:{width:"100%"}},u(l,{key:"aa8bc2042e5f21fd351acabb4b515fba4cda0dba",...s},u(c,{key:"ab008f2dd670122ed5998fdb9dcf004a14e5e274",...p,onClearText:this.clearTextInput,control:this.el,ref:n=>this.nativeInputWrap=n},this.type!=="textarea"&&u("input",{key:"2d23e3f0fe71c5d0b5cf56f849b0166dac2d6419",id:this.inputId,class:"input__native-ctrl",ref:n=>this.nativeInput=n,"aria-labelledby":t+" "+i+" "+o,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalise,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,size:this.size,type:this.type,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onBlur:this.handleBlur,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.type==="textarea"&&u("textarea",{key:"09639dab83617d2153981e04fe61088294b336cc",rows:this.floatLabel?1:this.rows,id:this.inputId,class:{"input__native-ctrl":true,input__resizable:this.resize==="true"},ref:n=>this.nativeInput=n,"aria-labelledby":t+" "+i+" "+o,disabled:this.disabled,autoCapitalize:this.autocapitalise,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,minLength:this.minlength,maxLength:this.maxlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate,onBlur:this.handleBlur}))),u("slot",{key:"42e80b566fe4ee06b4a65777d37fd77975f619a0"})))}static get watchers(){return{datalist:["setDataListOpts"],minlength:["shouldValidate"],maxlength:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],readonly:["shouldValidate"],pattern:["shouldValidate"],inputmode:["shouldValidate"],value:["valueChanged"],debounce:["debounceChanged"]}}};b.style=h;export{b as nano_input};
 //# sourceMappingURL=nano-input.entry.js.map