@nanoporetech-digital/components 2.8.0 → 2.10.1

package/dist/collection/components/form-control/form-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../../src/components/form-control/form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n  } = props;\n\n  return [\n    !floatLabel ? renderLabel({ ...props }) : '',\n    <div\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        rtl,\n        'form-ctrl__input': true,\n        'form-ctrl__textarea': type === 'textarea',\n      }}\n    >\n      {floatLabel && renderLabel({ ...props, rtl })}\n      {children}\n    </div>,\n    showInlineError || hasHelperSlot ? (\n      <div class=\"form-ctrl__more\" id={moreId}>\n        {!!showInlineError ? (\n          <div class=\"form-ctrl__error\">{errorMessage}</div>\n        ) : (\n          ''\n        )}\n        <div class=\"form-ctrl__helper\">\n          <slot name=\"helper\" />\n        </div>\n      </div>\n    ) : (\n      ''\n    ),\n  ];\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../../src/components/form-control/form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  helperEndId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n  hasHelperEndSlot?: boolean;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`}\n          </span>\n        )}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    helperEndId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n    hasHelperEndSlot,\n  } = props;\n\n  const MainTag = hasHelperEndSlot ? 'nano-resize-observe' : 'div';\n\n  return (\n    <MainTag\n      states=\"350w has-enough-width\"\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        'has-helper-end': hasHelperEndSlot,\n        rtl,\n        'form-ctrl': true,\n      }}\n    >\n      <div class=\"form-ctrl__wrapper\">\n        {!floatLabel ? renderLabel({ ...props }) : ''}\n        <div\n          class={{\n            'form-ctrl__input': true,\n            'form-ctrl__textarea': type === 'textarea',\n          }}\n        >\n          {floatLabel && renderLabel({ ...props, rtl })}\n          {children}\n        </div>\n        {showInlineError || hasHelperSlot ? (\n          <div class=\"form-ctrl__more\" id={moreId}>\n            {!!showInlineError ? (\n              <div class=\"form-ctrl__error\" aria-live=\"polite\">\n                {errorMessage}\n              </div>\n            ) : (\n              ''\n            )}\n            <div class=\"form-ctrl__helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        ) : (\n          ''\n        )}\n      </div>\n      {hasHelperEndSlot ? (\n        <div class=\"form-ctrl__helper-end\" id={helperEndId}>\n          <slot name=\"helper-end\" />\n        </div>\n      ) : (\n        ''\n      )}\n    </MainTag>\n  );\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"]}

package/dist/collection/components/global-nav/global-nav.js

@@ -1404,7 +1404,7 @@ export class GlobalNav {
           },
           "SearchIndex": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -1653,7 +1653,7 @@ export class GlobalNav {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1673,7 +1673,7 @@ export class GlobalNav {
         "references": {
           "AlgoliaNetworkError": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1693,7 +1693,7 @@ export class GlobalNav {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/grid/grid-item.js

@@ -124,7 +124,7 @@ export class GridItem {
           },
           "GridSizes": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<void>"

package/dist/collection/components/icon/icon.js

@@ -116,7 +116,7 @@ export class Icon {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -140,7 +140,7 @@ export class Icon {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Specifies the label to use for accessibility. Defaults to the icon name."

package/dist/collection/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Build,\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\n\nconst CANSHADOW = !!document.head.attachShadow;\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  assetsDirs: ['../../../node_modules/@fortawesome/fontawesome-pro/svgs'],\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLNanoIconElement;\n\n  @State() private svgContent?: string;\n  @State() private isVisible = false;\n  @State() private 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 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, `false`.\n   */\n  @Prop() lazy = true;\n\n  private setAriaLabel() {\n    if (!this.ariaLabel) {\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  }\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.setAriaLabel();\n  }\n\n  private waitUntilVisible(\n    el: HTMLElement,\n    rootMargin: string,\n    cb: () => void\n  ) {\n    if (\n      Build.isBrowser &&\n      CANSHADOW &&\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      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\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          this.isLoading = false;\n        } else {\n          // async if it hasn't been loaded\n          getSvgContent(url).then(() => {\n            this.svgContent = iconContent.get(url);\n            this.isLoading = false;\n          });\n        }\n      }\n    }\n    this.setAriaLabel();\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.el.ownerDocument as Document).dir === 'rtl' &&\n        this.flipRtl !== false);\n\n    return (\n      <Host\n        role=\"img\"\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"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Build,\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\n\nconst CANSHADOW = !!document.head.attachShadow;\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  assetsDirs: ['../../../node_modules/@fortawesome/fontawesome-pro/svgs'],\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLNanoIconElement;\n\n  @State() private svgContent?: string;\n  @State() private isVisible = false;\n  @State() private 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 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, `false`.\n   */\n  @Prop() lazy = true;\n\n  private setAriaLabel() {\n    if (!this.ariaLabel) {\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  }\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.setAriaLabel();\n  }\n\n  private waitUntilVisible(\n    el: HTMLElement,\n    rootMargin: string,\n    cb: () => void\n  ) {\n    if (\n      Build.isBrowser &&\n      CANSHADOW &&\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      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\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          this.isLoading = false;\n        } else {\n          // async if it hasn't been loaded\n          getSvgContent(url).then(() => {\n            this.svgContent = iconContent.get(url);\n            this.isLoading = false;\n          });\n        }\n      }\n    }\n    this.setAriaLabel();\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.el.ownerDocument as Document).dir === 'rtl' &&\n        this.flipRtl !== false);\n\n    return (\n      <Host\n        role=\"img\"\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"]}

package/dist/collection/components/input/input.css

@@ -14,6 +14,39 @@
   opacity: 0.5;
 }
 
+.form-ctrl {
+  min-width: 100%;
+  display: block;
+}
+.form-ctrl.has-helper-end {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  opacity: 0;
+}
+.form-ctrl.has-helper-end.is-ready {
+  opacity: 1;
+}
+.form-ctrl.has-helper-end .form-ctrl__wrapper {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 100%;
+          flex: 1 1 100%;
+}
+.form-ctrl.has-helper-end .form-ctrl__helper-end {
+  display: none;
+}
+.form-ctrl.has-helper-end.has-enough-width .form-ctrl__helper-end {
+  display: block;
+}
+.form-ctrl.has-helper-end.has-enough-width .form-ctrl__helper {
+  display: none;
+}
+
+.form-ctrl__wrapper {
+  display: block;
+}
+
 label,
 .form-ctrl__more,
 .form-ctrl__error,
@@ -64,6 +97,14 @@ label.visually-hide,
   font-size: 0.8em;
   opacity: 0.7;
 }
+.form-ctrl__float-label .form-ctrl__label-charcount {
+  opacity: 0;
+  -webkit-transition: opacity 0.125s ease-in;
+  transition: opacity 0.125s ease-in;
+}
+:host(.has-focus) .form-ctrl__float-label .form-ctrl__label-charcount, :host(.has-value) .form-ctrl__float-label .form-ctrl__label-charcount {
+  opacity: 1;
+}
 .form-ctrl__textarea .form-ctrl__float-label {
   top: 50%;
 }
@@ -181,6 +222,16 @@ label.visually-hide,
   opacity: 0;
 }
 
+.form-ctrl__helper-end {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 30%;
+          flex: 1 1 30%;
+  min-width: 150px;
+  font-size: var(--invalid-msg-font-size);
+  color: var(--help-msg-color);
+  font-style: italic;
+}
+
 .form-ctrl__error {
   opacity: 0;
   color: var(--invalid-msg-color);
@@ -258,6 +309,7 @@ label.visually-hide,
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
+  max-width: 100%;
 }
 
 .form-ctrl__clear-btn,
@@ -372,7 +424,7 @@ label.visually-hide,
 
   * @prop --padding-top: defaults to var(--nano-input-padding-top, var(--nano-input-padding, 8px));;
   * @prop --padding-end: defaults to var(--nano-input-padding-end, var(--nano-input-padding, 8px));
-  * @prop --padding-bottom: defaults to var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));
+  * @prop --padding-bottom: defaults to var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));
   * @prop --padding-start: defaults to var(--nano-input-padding-start, var(--nano-input-padding, 8px));
 
   * @prop --color-invalid: defaults to var(--nano-color-danger-rgb, 239, 65, 53);
@@ -415,7 +467,7 @@ label.visually-hide,
   --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);
   --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));
   --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));
-  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));
+  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));
   --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));
   --color-invalid: var(--nano-color-danger-rgb, 239, 65, 53);
   --color--focus-rgb:
@@ -453,7 +505,7 @@ label.visually-hide,
   width: 100%;
   padding: 0 !important;
   color: currentColor;
-  display: inline-block;
+  display: block;
 }
 
 :host(.nano-color) {
@@ -598,8 +650,8 @@ label.visually-hide,
 .form-ctrl__textarea .input__native-ctrl::placeholder {
   line-height: 1.5em;
 }
-.has-float-label.form-ctrl__textarea .input__native-ctrl {
-  padding-top: 1.7em;
+.has-float-label .form-ctrl__textarea .input__native-ctrl {
+  padding-top: 1.75em;
 }
 :host([readonly]:not([readonly=false])) .input__native-ctrl {
   -webkit-user-select: none;

package/dist/collection/components/input/input.js

@@ -2,19 +2,21 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, Listen, } from '@stencil/core';
-import { debounceEvent, closestElement, createColorClasses, raf, } from '../../utils';
+import { debounceEvent, closestElement, createColorClasses, raf, debounce, } from '../../utils';
 import { FormControl, FormControlWrap } from '../form-control/form-control';
 let inputIds = 0;
 /**
  * The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.
 
 It is meant for text type inputs only, such as "text", "password", "email", "number", "search", "tel", and "url". It supports all standard text input events including keyup, keydown, keypress, and more.
+The default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)
  * @slot start - suitable for inline action buttons or icons that may add extra contextual information
  * @slot end - suitable for inline action buttons or icons that may add extra contextual information
  * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
  * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
  * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
  * @slot helper - helper text to accompany the form field underneath.
+ * @slot helper-end - helper text to accompany the form field on the side.
  * @slot - can be used with a `nano-datalist`. See the `nano-datalist` docs for more information
  */
 export class Input {
@@ -27,6 +29,7 @@ export class Input {
     this.hasFocus = false;
     this.hasLabelSlot = false;
     this.hasHelperSlot = false;
+    this.hasHelperEndSlot = false;
     this.errorMessage = '';
     this.datalist = null;
     this._invalid = false;
@@ -61,7 +64,7 @@ export class Input {
     /**
      * When should the field perform validation
      */
-    this.validateOn = 'submit';
+    this.validateOn = 'submitThenDirty';
     /**
      * Whether to show validation errors underneath input
      */
@@ -131,8 +134,7 @@ export class Input {
     };
     this.onInput = (ev) => {
       const input = ev.target;
-      if (input)
-        this.value = input.value || '';
+      this.value = (input === null || input === void 0 ? void 0 : input.value) || '';
       this.nanoInput.emit(ev);
     };
     this.onBlur = () => {
@@ -168,6 +170,7 @@ export class Input {
       const event = new window.Event('change');
       this.nativeInput.dispatchEvent(event);
     };
+    this.validate = debounce(this.validate, 50);
   }
   get nativeInputWrap() {
     return this._nativeInputWrap;
@@ -191,13 +194,21 @@ export class Input {
   get invalid() {
     return this._invalid;
   }
+  /**
+   * Current validation message - if any. @readonly
+   */
+  get validityMessage() {
+    if (!this.nativeInput)
+      return '';
+    return this.nativeInput.validationMessage;
+  }
   shouldValidate() {
     if (!this.hasRendered)
       return;
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       if (this.validateOn === 'dirty')
         this.validate();
-    }, 20);
+    });
   }
   /**
    * Update the native input element when the value changes
@@ -210,10 +221,10 @@ export class Input {
       if (this.value.length)
         this.nativeInput.style.height = this.nativeInput.scrollHeight + 'px';
     }
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       if (this.validateOn === 'dirty')
         this.validate();
-    }, 20);
+    });
   }
   debounceChanged() {
     this.nanoChange = debounceEvent(this.nanoChange, this.debounce);
@@ -224,12 +235,16 @@ export class Input {
    * @returns `{ isValid: boolean, errorMessage: string }`
    */
   async reportValidity(validateFirst) {
-    if (validateFirst)
-      this.validate();
-    return {
-      isValid: !this._invalid,
-      errorMessage: this.nativeInput.validationMessage,
-    };
+    return new Promise((resolve) => {
+      if (validateFirst)
+        this.validate();
+      setTimeout(() => {
+        resolve({
+          isValid: !this._invalid,
+          errorMessage: this.nativeInput.validationMessage,
+        });
+      }, 50);
+    });
   }
   /**
    * Sets focus on the specified `nano-input`. Use this method instead of the global
@@ -310,6 +325,7 @@ export class Input {
     // see if we have label / button content
     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])');
     // breaking change introduced in v2. Rm in v3
     if (!!this.el.querySelector('[slot="inline-button"]')) {
@@ -350,8 +366,9 @@ export class Input {
     const value = this.getValue();
     const labelId = this.inputId + '-lbl';
     const moreId = this.showInlineError || this.hasHelperSlot ? this.inputId + '-more' : '';
+    const helperEndId = this.hasHelperEndSlot ? this.inputId + '-helper' : '';
     this.rtl = this.el.ownerDocument.dir === 'rtl';
-    const compWrapOptions = (({ el, floatLabel, label, errorMessage, type, showInlineError, hasHelperSlot, hasLabelSlot, hideLabel, placeholder, maxlength, charCount, showCharCount, rtl, }) => ({
+    const compWrapOptions = (({ el, floatLabel, label, errorMessage, type, showInlineError, hasHelperSlot, hasLabelSlot, hideLabel, placeholder, maxlength, charCount, showCharCount, rtl, hasHelperEndSlot, }) => ({
       el,
       floatLabel,
       label,
@@ -366,9 +383,11 @@ export class Input {
       charCount,
       showCharCount,
       rtl,
+      hasHelperEndSlot,
     }))(this);
     const wrapOptions = Object.assign(Object.assign({}, compWrapOptions), { labelId,
-      moreId, hasValue: this.hasValue(), controlId: this.inputId });
+      moreId,
+      helperEndId, hasValue: this.hasValue(), controlId: this.inputId });
     const controlOptions = (({ clearInput, readonly, disabled }) => ({
       clearInput,
       readonly,
@@ -378,11 +397,11 @@ export class Input {
     return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'is-invalid': this._invalid }) },
       h(FormControlWrap, Object.assign({}, wrapOptions),
         h(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }),
-          this.type !== 'textarea' && (h("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId, 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: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate })),
+          this.type !== 'textarea' && (h("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, 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: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate })),
           this.type === 'textarea' && (h("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
               'input__native-ctrl': true,
               input__resizable: this.resize === 'true',
-            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId, 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: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate }))),
+            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, 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: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate }))),
         h("slot", null))));
   }
   static get is() { return "nano-input"; }
@@ -414,6 +433,25 @@ export class Input {
       "reflect": true,
       "defaultValue": "false"
     },
+    "validityMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Current validation message - if any. @readonly"
+      },
+      "getter": true,
+      "setter": false,
+      "attribute": "validity-message",
+      "reflect": false
+    },
     "color": {
       "type": "string",
       "mutable": false,
@@ -423,7 +461,7 @@ export class Input {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -653,7 +691,7 @@ export class Input {
       "setter": false,
       "attribute": "validate-on",
       "reflect": false,
-      "defaultValue": "'submit'"
+      "defaultValue": "'submitThenDirty'"
     },
     "showInlineError": {
       "type": "boolean",
@@ -994,7 +1032,7 @@ export class Input {
         "references": {
           "TextFieldTypes": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -1007,7 +1045,7 @@ export class Input {
       "getter": false,
       "setter": false,
       "attribute": "type",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "'text'"
     },
     "form": {
@@ -1022,7 +1060,7 @@ export class Input {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The form element to associate the select with (its form owner). Must be the id of a form."
+        "text": "The form element to associate the input with (its form owner). Must be the id of a form."
       },
       "getter": false,
       "setter": false,
@@ -1114,6 +1152,7 @@ export class Input {
     "hasFocus": {},
     "hasLabelSlot": {},
     "hasHelperSlot": {},
+    "hasHelperEndSlot": {},
     "errorMessage": {},
     "datalist": {},
     "_invalid": {}
@@ -1153,7 +1192,7 @@ export class Input {
         "references": {
           "InputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1242,7 +1281,7 @@ export class Input {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1264,7 +1303,7 @@ export class Input {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"
@@ -1360,9 +1399,6 @@ export class Input {
     }, {
       "propName": "disabled",
       "methodName": "shouldValidate"
-    }, {
-      "propName": "validateOn",
-      "methodName": "shouldValidate"
     }, {
       "propName": "readonly",
       "methodName": "shouldValidate"