@nanoporetech-digital/components 3.5.1 → 3.7.0

package/dist/components/menu.js.map

@@ -1 +1 @@
-{"file":"menu.js","mappings":"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","names":[],"sources":["./src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","./src/components/menu/menu.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n\n   * @prop --color-hover: text hover color of nav-items. Defaults to #{map.get($colors, blue)}\n   * @prop --color-selected: text selected color of nav-items. Defaults to #{map.get($colors, blue)}\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{map.get($colors, blue)}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n   * @prop --font-size: default font-size for all items. Defaults .9em;\n  */\n\n  --padding-start: #{$spacing-medium};\n  --padding-end: #{$spacing-medium};\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{map.get($colors, blue--faded)};\n  --bg-color-focus: #{map.get($colors, blue--faded)};\n  --bg-color-selected: #{map.get($colors, blue--faded)};\n  --color-hover: #{map.get($colors, blue)};\n  --color-selected: #{map.get($colors, blue)};\n  --color-focus: #{map.get($colors, blue)};\n  --focus-outline: none;\n  --font-size: 0.9em;\n\n  display: block;\n}\n\n.menu {\n  font-size: var(--font-size, 0.9em);\n  overscroll-behavior: none;\n  min-width: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n  display: block;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport { getDirectChildren } from '../../utils/dom';\nimport { getTextContent } from '../../utils/slot';\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    const opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item, nano-option',\n        'slot'\n      ) as ValidElement[];\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    return this.getItems.find((i) => i.selected);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    const activeItem =\n      !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      (activeItem as NNI).setFocus\n        ? (activeItem as NNI).setFocus()\n        : activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  render() {\n    return (\n      <Host>\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          role={this.type}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"menu.js","mappings":"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","names":[],"sources":["./src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","./src/components/menu/menu.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n\n   * @prop --color-hover: text hover color of nav-items. Defaults to #{map.get($colors, blue)}\n   * @prop --color-selected: text selected color of nav-items. Defaults to #{map.get($colors, blue)}\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{map.get($colors, blue)}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n   * @prop --font-size: default font-size for all items. Defaults .9em;\n  */\n\n  --padding-start: #{$spacing-medium};\n  --padding-end: #{$spacing-medium};\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{map.get($colors, blue--faded)};\n  --bg-color-focus: #{map.get($colors, blue--faded)};\n  --bg-color-selected: #{map.get($colors, blue--faded)};\n  --color-hover: #{map.get($colors, blue)};\n  --color-selected: #{map.get($colors, blue)};\n  --color-focus: #{map.get($colors, blue)};\n  --focus-outline: none;\n  --font-size: 0.9em;\n\n  display: block;\n}\n\n.menu {\n  font-size: var(--font-size, 0.9em);\n  overscroll-behavior: none;\n  min-width: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n  display: block;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport { getDirectChildren } from '../../utils/dom';\nimport { getTextContent } from '../../utils/slot';\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    const opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item, nano-option',\n        'slot'\n      ) as ValidElement[];\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    return this.getItems.find((i) => i.selected);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    const activeItem =\n      !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      (activeItem as NNI).setFocus\n        ? (activeItem as NNI).setFocus()\n        : activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      getDirectChildren(\n        this.el,\n        ':not(nano-nav-item):not(nano-option):not([role])',\n        true\n      ).forEach((el) => el.setAttribute('role', 'none'));\n    }\n  }\n\n  render() {\n    return (\n      <Host role={this.type === 'menu' ? 'menu' : 'group'}>\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n          role=\"group\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-demo.js

@@ -2,12 +2,13 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
-import { d as defineCustomElement$7 } from './icon.js';
-import { d as defineCustomElement$6 } from './progress-bar.js';
-import { d as defineCustomElement$5 } from './resize-observe.js';
-import { d as defineCustomElement$4 } from './skeleton.js';
-import { d as defineCustomElement$3 } from './spinner.js';
-import { d as defineCustomElement$2 } from './table.js';
+import { d as defineCustomElement$8 } from './icon.js';
+import { d as defineCustomElement$7 } from './progress-bar.js';
+import { d as defineCustomElement$6 } from './resize-observe.js';
+import { d as defineCustomElement$5 } from './skeleton.js';
+import { d as defineCustomElement$4 } from './spinner.js';
+import { d as defineCustomElement$3 } from './table.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
 
 function capitalise(value) {
   if (!value)
@@ -229,8 +230,8 @@ const Demo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, null, h("nano-table", { rowRender: {
         template: (_, c, TableCell) => [
           c.renderedRow,
-          c.row.includedItems?.length ? (c.row.includedItems?.map((item) => {
-            return (h("tr", { class: "child-row" }, h(TableCell, { header: true }, item.name), h(TableCell, null, capitalise(c.row.status || this.order.status)), h(TableCell, null, capitalise(item.sku)), h(TableCell, null, capitalise(item.salesTag)), h(TableCell, null, mediumDate(item.requestedShippingDate))));
+          c.rowModel.includedItems?.length ? (c.rowModel.includedItems?.map((item) => {
+            return (h("tr", { class: "child-row" }, h(TableCell, { header: true }, item.name), h(TableCell, null, capitalise(c.rowModel.status || this.order.status)), h(TableCell, null, capitalise(item.sku)), h(TableCell, null, capitalise(item.salesTag)), h(TableCell, null, mediumDate(item.requestedShippingDate))));
           })) : (h(Fragment, null)),
         ].flat(1),
       }, columns: [
@@ -239,6 +240,7 @@ const Demo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           prop: 'name',
           pinned: 'start',
           rowHeader: true,
+          autoTooltip: true,
         },
         {
           title: 'Status',
@@ -293,7 +295,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["nano-demo", "nano-icon", "nano-progress-bar", "nano-resize-observe", "nano-skeleton", "nano-spinner", "nano-table"];
+  const components = ["nano-demo", "nano-icon", "nano-progress-bar", "nano-resize-observe", "nano-skeleton", "nano-spinner", "nano-table", "nano-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "nano-demo":
       if (!customElements.get(tagName)) {
@@ -302,30 +304,35 @@ function defineCustomElement$1() {
       break;
     case "nano-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "nano-progress-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "nano-resize-observe":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "nano-skeleton":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "nano-spinner":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "nano-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "nano-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/nano-demo.js.map

@@ -1 +1 @@
-{"file":"nano-demo.js","mappings":"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","names":[],"sources":["./src/components/demo/demo.tsx"],"sourcesContent":["import {\n  Component,\n  ComponentInterface,\n  Fragment,\n  h,\n  Host,\n} from '@stencil/core';\n\nfunction capitalise(value: string) {\n  if (!value) return '';\n  return value.charAt(0).toUpperCase() + value.slice(1);\n}\n\nfunction mediumDate(date: Date) {\n  if (!date) return undefined;\n  return new Date(date).toLocaleDateString(undefined, {\n    year: 'numeric',\n    month: 'short',\n    day: 'numeric',\n  });\n}\n\nfunction currency(amount: number = 0, currencyCode: string = 'USD') {\n  currencyCode = currencyCode?.toLocaleUpperCase() || 'USD';\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: currencyCode,\n  }).format(amount);\n}\n\n@Component({\n  tag: 'nano-demo',\n  shadow: true,\n  styles: /* css */ `\n    :host {display: block}\n    .child-row {\n      opacity: .8;\n      font-style: italic;\n    }\n  `,\n})\nexport class Demo implements ComponentInterface {\n  private order = {\n    checks: [\n      {\n        name: 'Compliance',\n        external_id: 'CO',\n        status: 'complete',\n        account_info: {\n          name: 'Jeongmin Song',\n          email: 'js2957@cornell.edu',\n          address_line_1: '930 Campus Road',\n          address_line_2: 'Veterinary Medical Center C4 109',\n          address_postcode: '14853',\n          address_city: 'Ithaca',\n          address_region: 'New York',\n          address_country: 'US',\n        },\n        individual_name_compliance_information: {\n          table: {\n            names: [],\n            addresses: [],\n            match: false,\n            false_positive: null,\n          },\n        },\n        organization_compliance_information: {\n          table: {\n            names: [],\n            addresses: [],\n            match: false,\n            false_positive: null,\n          },\n        },\n        checks: [\n          {\n            label: 'Compliance check',\n            external_id: 'compliance_check',\n            item_type: 'pass/fail/escalate',\n            answer: 'pass',\n          },\n        ],\n        further_information: [],\n        attachments: [],\n        notes: [],\n      },\n    ],\n    orderId: '00886434',\n    createdAt: '2022-12-09T15:57:50',\n    updatedAt: '2022-12-09T16:02:29',\n    status: 'Processing',\n    subStatus: null,\n    currency: 'USD',\n    customerPaymentMethod: 'CC-USD',\n    paymentPlatform: 'Shop',\n    dataAreaId: 'OXUS',\n    defaultShippingWarehouse: null,\n    deliveryContact: 'Jeongmin Song',\n    deliveryMode: null,\n    deliveryName: 'Cornell University',\n    deliveryTerms: null,\n    invoiceAccountNumber: 'C038330',\n    orderAccountNumber: 'C038330',\n    orderAccountName: 'Cornell University',\n    originalLeadTime: null,\n    salesDate: '2022-12-09T15:57:50',\n    salesName: 'Cornell University',\n    salesOrigin: 'Shop',\n    salesOriginName: 'Main USD Store View',\n    customerReference: '',\n    purchaseOrder: null,\n    additionalDocuments: [],\n    total: 860,\n    shippingAmount: 50,\n    taxAmount: 0,\n    projectId: null,\n    deliveryPhoneNumber: '+16072533722',\n    invoicePhoneNumber: '+16072533722',\n    quoteNumber: null,\n    customerType: 'N/A',\n    invoiceAccountEmail: 'js2957@cornell.edu',\n    partnerReference: null,\n    sentToD365: false,\n    sentToD365Status: 'unsent',\n    orderAccountEmail: 'js2957@cornell.edu',\n    controllingAccountNumber: 'C038330',\n    controllingAccountEmail: 'js2957@cornell.edu',\n    deliveryAddress: {\n      street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n      city: 'Ithaca',\n      postcode: '14853',\n      region: 'New York',\n      regionCode: 'NY',\n      countryCode: 'US',\n    },\n    invoiceAddress: {\n      street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n      city: 'Ithaca',\n      postcode: '14853',\n      region: 'New York',\n      regionCode: 'NY',\n      countryCode: 'US',\n    },\n    shopOrderLines: [\n      {\n        name: 'Flongle Flow Cell (R9.4.1)',\n        sku: 'FLO-FLG001',\n        quantity: 1,\n        price: 810,\n        total: 810,\n        createdAt: '2022-12-09T15:57:50',\n        updatedAt: '2022-12-09T15:57:50',\n        maskSku: 'FLO-FLG001',\n        productType: 'bundle',\n        salesTag: 'FLGExpSP',\n        requestedShippingDate: null,\n        discount: 0,\n        discountPercentage: 0,\n        get finalSku() {\n          return this.maskSku || this.sku;\n        },\n        includedItems: [\n          {\n            name: 'Flongle Flow Cell (R9.4.1)',\n            sku: 'FLO-FLG001D',\n            quantity: 12,\n            price: 66,\n            total: 792,\n            createdAt: '2022-12-09T15:57:50',\n            updatedAt: '2022-12-09T15:57:50',\n            maskSku: 'FLO-FLG001',\n            productType: 'simple',\n            salesTag: 'FLGExpSP',\n            requestedShippingDate: '2022-12-27T00:00:00',\n            discount: 0,\n            discountPercentage: 0,\n          },\n          {\n            name: 'Flongle Flow Cell Priming Kit',\n            sku: 'EXP-FSE001',\n            quantity: 1,\n            price: 18,\n            total: 18,\n            createdAt: '2022-12-09T15:57:50',\n            updatedAt: '2022-12-09T15:57:50',\n            maskSku: '',\n            productType: 'simple',\n            salesTag: 'FLGExpSP',\n            requestedShippingDate: '2022-12-27T00:00:00',\n            discount: 0,\n            discountPercentage: 0,\n          },\n        ],\n      },\n      {\n        name: 'Carriage - Device shipment',\n        sku: 'FREIGHT',\n        quantity: 1,\n        price: 50,\n        total: 50,\n        createdAt: '2022-12-09T15:57:50',\n        updatedAt: '2022-12-09T15:57:50',\n        maskSku: '',\n        productType: 'virtual',\n        salesTag: null,\n        requestedShippingDate: '2022-12-27T00:00:00',\n        discount: 0,\n        discountPercentage: 0,\n        get finalSku() {\n          return this.maskSku || this.sku;\n        },\n      },\n    ],\n    orderLines: [],\n    pickedItems: [],\n    packedItems: [],\n    trackingNumbers: [],\n    trackingUpdates: [],\n    ecoOrder: false,\n    revenueOrder: false,\n  };\n\n  private lineItemTotal(order) {\n    if (!order || !order.shopOrderLines?.length) return;\n    let total = 0;\n    order.shopOrderLines.forEach((itm) => {\n      if (itm.status !== 'cancelled') total += itm.total;\n    });\n    return total;\n  }\n\n  render() {\n    return (\n      <Host>\n        <nano-table\n          rowRender={{\n            template: (_, c, TableCell) =>\n              [\n                c.renderedRow,\n                c.row.includedItems?.length ? (\n                  c.row.includedItems?.map((item) => {\n                    return (\n                      <tr class=\"child-row\">\n                        <TableCell header={true}>{item.name}</TableCell>\n                        <TableCell>\n                          {capitalise(c.row.status || this.order.status)}\n                        </TableCell>\n                        <TableCell>{capitalise(item.sku)}</TableCell>\n                        <TableCell>{capitalise(item.salesTag)}</TableCell>\n                        <TableCell>\n                          {mediumDate(item.requestedShippingDate)}\n                        </TableCell>\n                      </tr>\n                    );\n                  })\n                ) : (\n                  <Fragment />\n                ),\n              ].flat(1),\n          }}\n          columns={[\n            {\n              title: 'Name',\n              prop: 'name',\n              pinned: 'start',\n              rowHeader: true,\n            },\n            {\n              title: 'Status',\n              prop: 'status',\n              cellTemplate: (_, c) =>\n                capitalise(c.cellModel || this.order.status),\n            },\n            {\n              title: 'SKU',\n              prop: 'finalSku',\n            },\n            {\n              title: 'Sales tag',\n              prop: 'salesTag',\n              cellTemplate: (_, c) => c.cellModel || 'None',\n            },\n            {\n              title: 'Requested ship date',\n              prop: 'requestedShippingDate',\n              cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',\n            },\n            {\n              title: 'Quantity',\n              prop: 'quantity',\n            },\n            {\n              title: 'Unit price',\n              prop: 'price',\n              cellTemplate: (_, c) =>\n                currency(c.cellModel, this.order.currency),\n            },\n            {\n              title: 'Discount %',\n              prop: 'discountPercentage',\n              cellTemplate: (_, c) => c.cellModel || 0,\n            },\n            {\n              title: 'Line value',\n              prop: 'total',\n              cellTemplate: (_, c) =>\n                currency(c.cellModel, this.order.currency),\n            },\n          ]}\n          rows={this.order.shopOrderLines}\n          caption={`List of order line items found within order ${this.order.orderId}`}\n          showFooter={true}\n          footRender={{\n            pinned: 'bottom',\n            template: () => [\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">Sub total:</span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(\n                        this.lineItemTotal(this.order),\n                        this.order.currency\n                      )}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">\n                      Total order tax:\n                    </span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(this.order.taxAmount, this.order.currency)}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">\n                      Total on order placement:\n                    </span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(this.order.total, this.order.currency)}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n            ],\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-demo.js","mappings":";;;;;;;;;;;;AAQA,SAAS,UAAU,CAAC,KAAa;EAC/B,IAAI,CAAC,KAAK;IAAE,OAAO,EAAE,CAAC;EACtB,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACxD,CAAC;AAED,SAAS,UAAU,CAAC,IAAU;EAC5B,IAAI,CAAC,IAAI;IAAE,OAAO,SAAS,CAAC;EAC5B,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,kBAAkB,CAAC,SAAS,EAAE;IAClD,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,SAAS;GACf,CAAC,CAAC;AACL,CAAC;AAED,SAAS,QAAQ,CAAC,SAAiB,CAAC,EAAE,eAAuB,KAAK;EAChE,YAAY,GAAG,YAAY,EAAE,iBAAiB,EAAE,IAAI,KAAK,CAAC;EAC1D,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;IACpC,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,YAAY;GACvB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACpB,CAAC;MAaY,IAAI;EAXjB;;;;IAYU,UAAK,GAAG;MACd,MAAM,EAAE;QACN;UACE,IAAI,EAAE,YAAY;UAClB,WAAW,EAAE,IAAI;UACjB,MAAM,EAAE,UAAU;UAClB,YAAY,EAAE;YACZ,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,oBAAoB;YAC3B,cAAc,EAAE,iBAAiB;YACjC,cAAc,EAAE,kCAAkC;YAClD,gBAAgB,EAAE,OAAO;YACzB,YAAY,EAAE,QAAQ;YACtB,cAAc,EAAE,UAAU;YAC1B,eAAe,EAAE,IAAI;WACtB;UACD,sCAAsC,EAAE;YACtC,KAAK,EAAE;cACL,KAAK,EAAE,EAAE;cACT,SAAS,EAAE,EAAE;cACb,KAAK,EAAE,KAAK;cACZ,cAAc,EAAE,IAAI;aACrB;WACF;UACD,mCAAmC,EAAE;YACnC,KAAK,EAAE;cACL,KAAK,EAAE,EAAE;cACT,SAAS,EAAE,EAAE;cACb,KAAK,EAAE,KAAK;cACZ,cAAc,EAAE,IAAI;aACrB;WACF;UACD,MAAM,EAAE;YACN;cACE,KAAK,EAAE,kBAAkB;cACzB,WAAW,EAAE,kBAAkB;cAC/B,SAAS,EAAE,oBAAoB;cAC/B,MAAM,EAAE,MAAM;aACf;WACF;UACD,mBAAmB,EAAE,EAAE;UACvB,WAAW,EAAE,EAAE;UACf,KAAK,EAAE,EAAE;SACV;OACF;MACD,OAAO,EAAE,UAAU;MACnB,SAAS,EAAE,qBAAqB;MAChC,SAAS,EAAE,qBAAqB;MAChC,MAAM,EAAE,YAAY;MACpB,SAAS,EAAE,IAAI;MACf,QAAQ,EAAE,KAAK;MACf,qBAAqB,EAAE,QAAQ;MAC/B,eAAe,EAAE,MAAM;MACvB,UAAU,EAAE,MAAM;MAClB,wBAAwB,EAAE,IAAI;MAC9B,eAAe,EAAE,eAAe;MAChC,YAAY,EAAE,IAAI;MAClB,YAAY,EAAE,oBAAoB;MAClC,aAAa,EAAE,IAAI;MACnB,oBAAoB,EAAE,SAAS;MAC/B,kBAAkB,EAAE,SAAS;MAC7B,gBAAgB,EAAE,oBAAoB;MACtC,gBAAgB,EAAE,IAAI;MACtB,SAAS,EAAE,qBAAqB;MAChC,SAAS,EAAE,oBAAoB;MAC/B,WAAW,EAAE,MAAM;MACnB,eAAe,EAAE,qBAAqB;MACtC,iBAAiB,EAAE,EAAE;MACrB,aAAa,EAAE,IAAI;MACnB,mBAAmB,EAAE,EAAE;MACvB,KAAK,EAAE,GAAG;MACV,cAAc,EAAE,EAAE;MAClB,SAAS,EAAE,CAAC;MACZ,SAAS,EAAE,IAAI;MACf,mBAAmB,EAAE,cAAc;MACnC,kBAAkB,EAAE,cAAc;MAClC,WAAW,EAAE,IAAI;MACjB,YAAY,EAAE,KAAK;MACnB,mBAAmB,EAAE,oBAAoB;MACzC,gBAAgB,EAAE,IAAI;MACtB,UAAU,EAAE,KAAK;MACjB,gBAAgB,EAAE,QAAQ;MAC1B,iBAAiB,EAAE,oBAAoB;MACvC,wBAAwB,EAAE,SAAS;MACnC,uBAAuB,EAAE,oBAAoB;MAC7C,eAAe,EAAE;QACf,MAAM,EAAE,CAAC,mDAAmD,CAAC;QAC7D,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,UAAU;QAClB,UAAU,EAAE,IAAI;QAChB,WAAW,EAAE,IAAI;OAClB;MACD,cAAc,EAAE;QACd,MAAM,EAAE,CAAC,mDAAmD,CAAC;QAC7D,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,UAAU;QAClB,UAAU,EAAE,IAAI;QAChB,WAAW,EAAE,IAAI;OAClB;MACD,cAAc,EAAE;QACd;UACE,IAAI,EAAE,4BAA4B;UAClC,GAAG,EAAE,YAAY;UACjB,QAAQ,EAAE,CAAC;UACX,KAAK,EAAE,GAAG;UACV,KAAK,EAAE,GAAG;UACV,SAAS,EAAE,qBAAqB;UAChC,SAAS,EAAE,qBAAqB;UAChC,OAAO,EAAE,YAAY;UACrB,WAAW,EAAE,QAAQ;UACrB,QAAQ,EAAE,UAAU;UACpB,qBAAqB,EAAE,IAAI;UAC3B,QAAQ,EAAE,CAAC;UACX,kBAAkB,EAAE,CAAC;UACrB,IAAI,QAAQ;YACV,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC;WACjC;UACD,aAAa,EAAE;YACb;cACE,IAAI,EAAE,4BAA4B;cAClC,GAAG,EAAE,aAAa;cAClB,QAAQ,EAAE,EAAE;cACZ,KAAK,EAAE,EAAE;cACT,KAAK,EAAE,GAAG;cACV,SAAS,EAAE,qBAAqB;cAChC,SAAS,EAAE,qBAAqB;cAChC,OAAO,EAAE,YAAY;cACrB,WAAW,EAAE,QAAQ;cACrB,QAAQ,EAAE,UAAU;cACpB,qBAAqB,EAAE,qBAAqB;cAC5C,QAAQ,EAAE,CAAC;cACX,kBAAkB,EAAE,CAAC;aACtB;YACD;cACE,IAAI,EAAE,+BAA+B;cACrC,GAAG,EAAE,YAAY;cACjB,QAAQ,EAAE,CAAC;cACX,KAAK,EAAE,EAAE;cACT,KAAK,EAAE,EAAE;cACT,SAAS,EAAE,qBAAqB;cAChC,SAAS,EAAE,qBAAqB;cAChC,OAAO,EAAE,EAAE;cACX,WAAW,EAAE,QAAQ;cACrB,QAAQ,EAAE,UAAU;cACpB,qBAAqB,EAAE,qBAAqB;cAC5C,QAAQ,EAAE,CAAC;cACX,kBAAkB,EAAE,CAAC;aACtB;WACF;SACF;QACD;UACE,IAAI,EAAE,4BAA4B;UAClC,GAAG,EAAE,SAAS;UACd,QAAQ,EAAE,CAAC;UACX,KAAK,EAAE,EAAE;UACT,KAAK,EAAE,EAAE;UACT,SAAS,EAAE,qBAAqB;UAChC,SAAS,EAAE,qBAAqB;UAChC,OAAO,EAAE,EAAE;UACX,WAAW,EAAE,SAAS;UACtB,QAAQ,EAAE,IAAI;UACd,qBAAqB,EAAE,qBAAqB;UAC5C,QAAQ,EAAE,CAAC;UACX,kBAAkB,EAAE,CAAC;UACrB,IAAI,QAAQ;YACV,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC;WACjC;SACF;OACF;MACD,UAAU,EAAE,EAAE;MACd,WAAW,EAAE,EAAE;MACf,WAAW,EAAE,EAAE;MACf,eAAe,EAAE,EAAE;MACnB,eAAe,EAAE,EAAE;MACnB,QAAQ,EAAE,KAAK;MACf,YAAY,EAAE,KAAK;KACpB,CAAC;GA8IH;EA5IS,aAAa,CAAC,KAAK;IACzB,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,MAAM;MAAE,OAAO;IACpD,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,GAAG;MAC/B,IAAI,GAAG,CAAC,MAAM,KAAK,WAAW;QAAE,KAAK,IAAI,GAAG,CAAC,KAAK,CAAC;KACpD,CAAC,CAAC;IACH,OAAO,KAAK,CAAC;GACd;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,kBACE,SAAS,EAAE;QACT,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,KACxB;UACE,CAAC,CAAC,WAAW;UACb,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,MAAM,IAC9B,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,IAAI;YACjC,QACE,UAAI,KAAK,EAAC,WAAW,IACnB,EAAC,SAAS,IAAC,MAAM,EAAE,IAAI,IAAG,IAAI,CAAC,IAAI,CAAa,EAChD,EAAC,SAAS,QACP,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CACzC,EACZ,EAAC,SAAS,QAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAa,EAC7C,EAAC,SAAS,QAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAa,EAClD,EAAC,SAAS,QACP,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAC7B,CACT,EACL;WACH,CAAC,KAEF,EAAC,QAAQ,OAAG,CACb;SACF,CAAC,IAAI,CAAC,CAAC,CAAC;OACZ,EACD,OAAO,EAAE;QACP;UACE,KAAK,EAAE,MAAM;UACb,IAAI,EAAE,MAAM;UACZ,MAAM,EAAE,OAAO;UACf,SAAS,EAAE,IAAI;UACf,WAAW,EAAE,IAAI;SAClB;QACD;UACE,KAAK,EAAE,QAAQ;UACf,IAAI,EAAE,QAAQ;UACd,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KACjB,UAAU,CAAC,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;SAC/C;QACD;UACE,KAAK,EAAE,KAAK;UACZ,IAAI,EAAE,UAAU;SACjB;QACD;UACE,KAAK,EAAE,WAAW;UAClB,IAAI,EAAE,UAAU;UAChB,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,SAAS,IAAI,MAAM;SAC9C;QACD;UACE,KAAK,EAAE,qBAAqB;UAC5B,IAAI,EAAE,uBAAuB;UAC7B,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,KAAK;SACzD;QACD;UACE,KAAK,EAAE,UAAU;UACjB,IAAI,EAAE,UAAU;SACjB;QACD;UACE,KAAK,EAAE,YAAY;UACnB,IAAI,EAAE,OAAO;UACb,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KACjB,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;SAC7C;QACD;UACE,KAAK,EAAE,YAAY;UACnB,IAAI,EAAE,oBAAoB;UAC1B,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,SAAS,IAAI,CAAC;SACzC;QACD;UACE,KAAK,EAAE,YAAY;UACnB,IAAI,EAAE,OAAO;UACb,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KACjB,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;SAC7C;OACF,EACD,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAC/B,OAAO,EAAE,+CAA+C,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,EAC5E,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,MAAM;UACd,cACE,UAAI,OAAO,EAAE,CAAC,aAAa,EAC3B,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,CAAC,IAC5D,WAAK,KAAK,EAAC,2CAA2C,IACpD,YAAM,KAAK,EAAC,2BAA2B,iBAAkB,EACzD,YAAM,KAAK,EAAC,yBAAyB,IAClC,QAAQ,CACP,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAC9B,IAAI,CAAC,KAAK,CAAC,QAAQ,CACpB,CACI,CACH,CACH,CACF;UACL,cACE,UAAI,OAAO,EAAE,CAAC,aAAa,EAC3B,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,CAAC,IAC5D,WAAK,KAAK,EAAC,2CAA2C,IACpD,YAAM,KAAK,EAAC,2BAA2B,uBAEhC,EACP,YAAM,KAAK,EAAC,yBAAyB,IAClC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC/C,CACH,CACH,CACF;UACL,cACE,UAAI,OAAO,EAAE,CAAC,aAAa,EAC3B,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,CAAC,IAC5D,WAAK,KAAK,EAAC,2CAA2C,IACpD,YAAM,KAAK,EAAC,2BAA2B,gCAEhC,EACP,YAAM,KAAK,EAAC,yBAAyB,IAClC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC3C,CACH,CACH,CACF;SACN;OACF,GACD,CACG,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/demo/demo.tsx"],"sourcesContent":["import {\n  Component,\n  ComponentInterface,\n  Fragment,\n  h,\n  Host,\n} from '@stencil/core';\n\nfunction capitalise(value: string) {\n  if (!value) return '';\n  return value.charAt(0).toUpperCase() + value.slice(1);\n}\n\nfunction mediumDate(date: Date) {\n  if (!date) return undefined;\n  return new Date(date).toLocaleDateString(undefined, {\n    year: 'numeric',\n    month: 'short',\n    day: 'numeric',\n  });\n}\n\nfunction currency(amount: number = 0, currencyCode: string = 'USD') {\n  currencyCode = currencyCode?.toLocaleUpperCase() || 'USD';\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: currencyCode,\n  }).format(amount);\n}\n\n@Component({\n  tag: 'nano-demo',\n  shadow: true,\n  styles: /* css */ `\n    :host {display: block}\n    .child-row {\n      opacity: .8;\n      font-style: italic;\n    }\n  `,\n})\nexport class Demo implements ComponentInterface {\n  private order = {\n    checks: [\n      {\n        name: 'Compliance',\n        external_id: 'CO',\n        status: 'complete',\n        account_info: {\n          name: 'Jeongmin Song',\n          email: 'js2957@cornell.edu',\n          address_line_1: '930 Campus Road',\n          address_line_2: 'Veterinary Medical Center C4 109',\n          address_postcode: '14853',\n          address_city: 'Ithaca',\n          address_region: 'New York',\n          address_country: 'US',\n        },\n        individual_name_compliance_information: {\n          table: {\n            names: [],\n            addresses: [],\n            match: false,\n            false_positive: null,\n          },\n        },\n        organization_compliance_information: {\n          table: {\n            names: [],\n            addresses: [],\n            match: false,\n            false_positive: null,\n          },\n        },\n        checks: [\n          {\n            label: 'Compliance check',\n            external_id: 'compliance_check',\n            item_type: 'pass/fail/escalate',\n            answer: 'pass',\n          },\n        ],\n        further_information: [],\n        attachments: [],\n        notes: [],\n      },\n    ],\n    orderId: '00886434',\n    createdAt: '2022-12-09T15:57:50',\n    updatedAt: '2022-12-09T16:02:29',\n    status: 'Processing',\n    subStatus: null,\n    currency: 'USD',\n    customerPaymentMethod: 'CC-USD',\n    paymentPlatform: 'Shop',\n    dataAreaId: 'OXUS',\n    defaultShippingWarehouse: null,\n    deliveryContact: 'Jeongmin Song',\n    deliveryMode: null,\n    deliveryName: 'Cornell University',\n    deliveryTerms: null,\n    invoiceAccountNumber: 'C038330',\n    orderAccountNumber: 'C038330',\n    orderAccountName: 'Cornell University',\n    originalLeadTime: null,\n    salesDate: '2022-12-09T15:57:50',\n    salesName: 'Cornell University',\n    salesOrigin: 'Shop',\n    salesOriginName: 'Main USD Store View',\n    customerReference: '',\n    purchaseOrder: null,\n    additionalDocuments: [],\n    total: 860,\n    shippingAmount: 50,\n    taxAmount: 0,\n    projectId: null,\n    deliveryPhoneNumber: '+16072533722',\n    invoicePhoneNumber: '+16072533722',\n    quoteNumber: null,\n    customerType: 'N/A',\n    invoiceAccountEmail: 'js2957@cornell.edu',\n    partnerReference: null,\n    sentToD365: false,\n    sentToD365Status: 'unsent',\n    orderAccountEmail: 'js2957@cornell.edu',\n    controllingAccountNumber: 'C038330',\n    controllingAccountEmail: 'js2957@cornell.edu',\n    deliveryAddress: {\n      street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n      city: 'Ithaca',\n      postcode: '14853',\n      region: 'New York',\n      regionCode: 'NY',\n      countryCode: 'US',\n    },\n    invoiceAddress: {\n      street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n      city: 'Ithaca',\n      postcode: '14853',\n      region: 'New York',\n      regionCode: 'NY',\n      countryCode: 'US',\n    },\n    shopOrderLines: [\n      {\n        name: 'Flongle Flow Cell (R9.4.1)',\n        sku: 'FLO-FLG001',\n        quantity: 1,\n        price: 810,\n        total: 810,\n        createdAt: '2022-12-09T15:57:50',\n        updatedAt: '2022-12-09T15:57:50',\n        maskSku: 'FLO-FLG001',\n        productType: 'bundle',\n        salesTag: 'FLGExpSP',\n        requestedShippingDate: null,\n        discount: 0,\n        discountPercentage: 0,\n        get finalSku() {\n          return this.maskSku || this.sku;\n        },\n        includedItems: [\n          {\n            name: 'Flongle Flow Cell (R9.4.1)',\n            sku: 'FLO-FLG001D',\n            quantity: 12,\n            price: 66,\n            total: 792,\n            createdAt: '2022-12-09T15:57:50',\n            updatedAt: '2022-12-09T15:57:50',\n            maskSku: 'FLO-FLG001',\n            productType: 'simple',\n            salesTag: 'FLGExpSP',\n            requestedShippingDate: '2022-12-27T00:00:00',\n            discount: 0,\n            discountPercentage: 0,\n          },\n          {\n            name: 'Flongle Flow Cell Priming Kit',\n            sku: 'EXP-FSE001',\n            quantity: 1,\n            price: 18,\n            total: 18,\n            createdAt: '2022-12-09T15:57:50',\n            updatedAt: '2022-12-09T15:57:50',\n            maskSku: '',\n            productType: 'simple',\n            salesTag: 'FLGExpSP',\n            requestedShippingDate: '2022-12-27T00:00:00',\n            discount: 0,\n            discountPercentage: 0,\n          },\n        ],\n      },\n      {\n        name: 'Carriage - Device shipment',\n        sku: 'FREIGHT',\n        quantity: 1,\n        price: 50,\n        total: 50,\n        createdAt: '2022-12-09T15:57:50',\n        updatedAt: '2022-12-09T15:57:50',\n        maskSku: '',\n        productType: 'virtual',\n        salesTag: null,\n        requestedShippingDate: '2022-12-27T00:00:00',\n        discount: 0,\n        discountPercentage: 0,\n        get finalSku() {\n          return this.maskSku || this.sku;\n        },\n      },\n    ],\n    orderLines: [],\n    pickedItems: [],\n    packedItems: [],\n    trackingNumbers: [],\n    trackingUpdates: [],\n    ecoOrder: false,\n    revenueOrder: false,\n  };\n\n  private lineItemTotal(order) {\n    if (!order || !order.shopOrderLines?.length) return;\n    let total = 0;\n    order.shopOrderLines.forEach((itm) => {\n      if (itm.status !== 'cancelled') total += itm.total;\n    });\n    return total;\n  }\n\n  render() {\n    return (\n      <Host>\n        <nano-table\n          rowRender={{\n            template: (_, c, TableCell) =>\n              [\n                c.renderedRow,\n                c.rowModel.includedItems?.length ? (\n                  c.rowModel.includedItems?.map((item) => {\n                    return (\n                      <tr class=\"child-row\">\n                        <TableCell header={true}>{item.name}</TableCell>\n                        <TableCell>\n                          {capitalise(c.rowModel.status || this.order.status)}\n                        </TableCell>\n                        <TableCell>{capitalise(item.sku)}</TableCell>\n                        <TableCell>{capitalise(item.salesTag)}</TableCell>\n                        <TableCell>\n                          {mediumDate(item.requestedShippingDate)}\n                        </TableCell>\n                      </tr>\n                    );\n                  })\n                ) : (\n                  <Fragment />\n                ),\n              ].flat(1),\n          }}\n          columns={[\n            {\n              title: 'Name',\n              prop: 'name',\n              pinned: 'start',\n              rowHeader: true,\n              autoTooltip: true,\n            },\n            {\n              title: 'Status',\n              prop: 'status',\n              cellTemplate: (_, c) =>\n                capitalise(c.cellModel || this.order.status),\n            },\n            {\n              title: 'SKU',\n              prop: 'finalSku',\n            },\n            {\n              title: 'Sales tag',\n              prop: 'salesTag',\n              cellTemplate: (_, c) => c.cellModel || 'None',\n            },\n            {\n              title: 'Requested ship date',\n              prop: 'requestedShippingDate',\n              cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',\n            },\n            {\n              title: 'Quantity',\n              prop: 'quantity',\n            },\n            {\n              title: 'Unit price',\n              prop: 'price',\n              cellTemplate: (_, c) =>\n                currency(c.cellModel, this.order.currency),\n            },\n            {\n              title: 'Discount %',\n              prop: 'discountPercentage',\n              cellTemplate: (_, c) => c.cellModel || 0,\n            },\n            {\n              title: 'Line value',\n              prop: 'total',\n              cellTemplate: (_, c) =>\n                currency(c.cellModel, this.order.currency),\n            },\n          ]}\n          rows={this.order.shopOrderLines}\n          caption={`List of order line items found within order ${this.order.orderId}`}\n          showFooter={true}\n          footRender={{\n            pinned: 'bottom',\n            template: () => [\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">Sub total:</span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(\n                        this.lineItemTotal(this.order),\n                        this.order.currency\n                      )}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">\n                      Total order tax:\n                    </span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(this.order.taxAmount, this.order.currency)}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">\n                      Total on order placement:\n                    </span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(this.order.total, this.order.currency)}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n            ],\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-file-upload.js

@@ -99,6 +99,10 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (!this.canChangeFileList || !this.removeFiles.length)
         return;
       this.fileList = this.fileList.filter((fileItem) => !this.removeFiles.find((rmFile) => rmFile === fileItem));
+      try {
+        this.removeFiles.forEach((f) => f.location ? URL.revokeObjectURL(f.location) : '');
+      }
+      catch (e) { }
       this.removeFiles = [];
     };
     this.onInputChange = () => {

package/dist/components/nano-file-upload.js.map

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

package/dist/components/nano-tab-group.js

@@ -181,7 +181,7 @@ const TabGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.updateScrollControls();
       }, 500);
       /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */
-      const nodes = ev.target.assignedNodes({ flatten: true });
+      const nodes = ev.target.assignedElements({ flatten: true });
       nodes.forEach((node) => {
         if (!this.mutationObservers.get(node)) {
           const mo = new MutationObserver(() => {