@nanoporetech-digital/components 3.5.1 → 3.7.0

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

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

package/dist/nano-components/{p-244223f0.entry.js → p-dc50b93c.entry.js}

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

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

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

package/dist/{cjs/table.worker-e9fb087e.js → nano-components/p-e2f9ccfa.js}

@@ -1,4 +1,4 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-(()=>{"use strict";const t=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const n=e=>{if(e!=null){if(t(e,"ArrayBuffer")||t(e,"MessagePort")||t(e,"ImageBitmap")||t(e,"OffscreenCanvas")){return[e]}if(typeof e==="object"){if(e.constructor===Object){e=Object.values(e)}if(Array.isArray(e)){return e.flatMap(n)}return n(e.buffer)}}return[]};const e={};const r="stencil.table.worker";const o=r+".cb";addEventListener("message",(async({data:t})=>{if(t&&t[0]===r){let f=t[1];let i=t[2];let s=t[3];let u=0;let c=s.length;let a;let l;try{for(;u<c;u++){if(Array.isArray(s[u])&&s[u][0]===o){const t=s[u][1];s[u]=(...n)=>{postMessage([o,t,n])}}}a=await e[i](...s)}catch(t){a=null;if(t instanceof Error){l={isError:true,value:{message:t.message,name:t.name,stack:t.stack}}}else{l={isError:false,value:t}}a=undefined}const p=n(a);postMessage([r,f,a,l],p)}}));var f=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var i=1/0;var s="[object Symbol]";var u=/[\\^$.*+?()[\]{}|]/g,c=RegExp(u.source);var a=typeof f=="object"&&f&&f.Object===Object&&f;var l=typeof self=="object"&&self&&self.Object===Object&&self;var p=a||l||Function("return this")();var d=Object.prototype;var w=d.toString;var h=p.Symbol;var y=h?h.prototype:undefined,b=y?y.toString:undefined;function g(t){if(typeof t=="string"){return t}if($(t)){return b?b.call(t):""}var n=t+"";return n=="0"&&1/t==-i?"-0":n}function v(t){return!!t&&typeof t=="object"}function $(t){return typeof t=="symbol"||v(t)&&w.call(t)==s}function E(t){return t==null?"":g(t)}function m(t){t=E(t);return t&&c.test(t)?t.replace(u,"\\$&"):t}var x=m;function j(t,n){if(typeof t==="string"){return n.checkString(t)}else if(typeof t==="number"){return n.checkNumber(t)}else{return false}}function k(t,n,e,r){if(typeof t==="object"){if(Array.isArray(t)){for(const o of t){if(k(o,n,e,r)){return true}}}else{for(const o in t){e.push(o);const f=k(t[o],n,e,r);e.pop();if(f)return true}}}else if(n.is){if(n.is.test(e.join("."))){return!!t}else{return false}}else{const o=e.join(".");for(const t of r.ignorePaths){if(t.test(o))return false}if(r.includePaths){let t=false;for(const n of r.includePaths){if(n.test(o)){t=true;break}}if(!t)return false}if(n.key){if(!n.key.test(o))return false}return j(t,n)}return false}function A(t,n,e,r){if(n.length){let o=false;for(const f of n){if(k(t,f,[],r)?!f.negate:f.negate){if(e==="OR"){return true}o=true}else if(e==="AND"){return false}}return o}return true}function O(t,n){const e=[];let r=false;let o=0;let f="";for(let i=0;i<t.length;i++){const s=t[i];if(r){if(s===f){r=false;f=""}}else if(s==='"'||s==="'"){r=true;f=s}else if(s.match(n)&&!r){e.push(t.slice(o,i).trim());o=i+1}if(i===t.length-1){e.push(t.slice(o).trim())}}return e.map((t=>{if(t.startsWith('"')&&t.endsWith('"')){return t.slice(1,-1)}if(t.startsWith("'")&&t.endsWith("'")){return t.slice(1,-1)}return t})).filter((t=>t))}const P={"<":function t(n){const e=Number(n[0]);return t=>t<e},"<=":function t(n){const e=Number(n[0]);return t=>t<=e},"=":function t(n){const e=n[0].split(",").filter((t=>t)).map(Number);return t=>{for(let n=0;n<e.length;n++){if(t===e[n]){return true}}return false}},">=":function t(n){const e=Number(n[0]);return t=>t>=e},">":function t(n){const e=Number(n[0]);return t=>t>e},"..":function t(n){const e=Number(n[0]);const r=Number(n[1]);return t=>t>=e&&t<=r}};function R(t){const{values:n,operator:e}=D(t);const r=P[e];if(!r){throw new Error(`unknown operator ${e}`)}return r(n)}function D(t){const n=/^\s*\(?\s*(?<startOperator><=|>=|<|=|>|\.\.)?(?<firstValue>-?\d*\.?\d+)(?:(?<afterDots>\.\.)(?<secondValue>-?\d*\.?\d*))?\s*\)?\s*$/.exec(t);if(!n){return{operator:"=",values:[t]}}if(!n.groups){throw new Error("unreachable")}const{startOperator:e,firstValue:r,afterDots:o,secondValue:f}=n.groups;let i=e;let s=r?[r]:[];if(e===".."){i="<="}else if(!e&&o&&!f){i=">="}else if(o){i=".."}if(f){s.push(f)}return{values:s,operator:i||"="}}const N={"<":function t(n){return t=>t<n[0]},"<=":function t(n){return t=>t<=n[0]},"=":function t(n,e){const r=O(n[0],",").filter((t=>t)).map((t=>new RegExp(`^${x(t)}$`,e)));return t=>{for(const n of r){if(n.test(t)){return true}}return false}},"~":function t(n,e){const r=O(n[0],",").filter((t=>t)).map((t=>new RegExp(x(t),e)));return t=>{for(const n of r){if(n.test(t)){return true}}return false}},">=":function t(n){return t=>t>=n[0]},">":function t(n){return t=>t>n[0]},"..":function t(n){return t=>t>=n[0]&&t<=n[1]}};function _(t,n){const{values:e,operator:r}=I(t);const o=N[r];if(!o){throw new Error(`unreachable unknown operator ${r}`)}return o(e,n)}function I(t){const n=t.split("..");const e=/^\s*\(?(?<operator><=|<|=|>=|>)?\s*(?<value>\S*)\s*\)?$/.exec(n[0]);if(!e){return{operator:"~",values:[t]}}if(!e.groups){throw new Error("unreachable")}let{operator:r,value:o}=e.groups;let f=n[1];let i=[o];if(n.length>1){r="..";if(!f){r=">="}else if(!o){i=[f];r="<="}else{i.push(f)}}return{operator:r||"~",values:i}}function M(t,n){const{insensitive:e,pathAlias:r}=n;return t.map((t=>{const n={};if(t.startsWith("-")){n.negate=true;t=t.substring(1)}const o=t.indexOf(":");if(o>-1){const f=t.substring(o+1);if(o>0){const i=t.substring(0,o);if(i==="is"){n.is=new RegExp(`(^|\\.)${x(f)}(\\.|$)`,e)}if(r[i]){n.key=r[i]}else{n.key=new RegExp(`(^|\\.)${x(i)}(\\.|$)`,e)}}V(n,f,e)}else{V(n,t,e)}return n}))}function V(t,n,e){t.checkString=_(n,e);t.checkNumber=R(n)}function T(t,n){const{insensitive:e}=n;const r={};for(const[n,o]of Object.entries(t)){if(o instanceof RegExp){r[n]=o}else{r[n]=new RegExp(`(^|\\.)${x(o)}(\\.|$)`,e)}}return r}function B(t,n={}){let{index:e=false,predicate:r="AND",ignorePaths:o=[],includePaths:f,pathAlias:i={}}=n;const s=n.limit?n.limit:Infinity;const u=n.caseSensitive?"":"i";let c=n.keywords||[];const a=T(i,{insensitive:u});const l=o.map((t=>typeof t==="string"?new RegExp(`(^|\\.)${x(t)}(\\.|$)`,u):t));const p=f?f.map((t=>typeof t==="string"?new RegExp(`(^|\\.)${x(t)}(\\.|$)`,u):t)):undefined;if(typeof c==="string"){c=O(c,/[ \t\r\n]/)}const d=M(c,{insensitive:u,pathAlias:a});let w=0;if(e){const n=[];for(let e=0;e<t.length&&w<s;e++){if(A(t[e],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){w=n.push(e)}}return n}else{const n=[];for(let e=0;e<t.length&&w<s;e++){if(A(t[e],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){w=n.push(t[e])}}return n}}function F(t){return t.map((t=>{if(!!t.sortCompareFn){t.sortCompareFn=new Function("return "+t.sortCompareFn)()}return t}))}const S=new Map;function C(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}async function L(t,n){const e=C();S.set(e,{rows:t,columns:F(n)});return e}async function q(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;e.rows=n;if(!e.rows&&!e.columns)X(t);return true}async function z(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;e.columns=F(n);if(!e.rows&&!e.columns)X(t);return true}function G(t){const n=t.columns.find((t=>!!t.order));if(n){const{prop:t,order:e}=n;return{prop:t,order:e}}return null}function H(t,n,e,r){if(!e&&!r){const n=G(t);if(n){({prop:e,order:r}=n)}}if(!e||!r||!n.length)return n;const o=t.columns.find((t=>t.prop===e));if(!!o.sortCompareFn&&typeof o.sortCompareFn==="function"){const t=n.slice().sort(o.sortCompareFn(e,r));return t}if(o.type==="text"&&typeof n[0][e]==="string"){const t=n.slice().sort(((t,n)=>r==="asc"?t[e].localeCompare(n[e]):n[e].localeCompare(t[e])));return t}const f=n.slice().sort(((t,n)=>{if(t[e]<n[e])return r==="asc"?-1:1;if(t[e]>n[e])return r==="asc"?1:-1;return 0}));return f}async function J(t,n,e){const r=S.get(t);if(!r)throw"cannot find worker with ID "+t;const o=r.filterRows||r.rows;return H(r,o,n,e)}function K(t,n=[]){if(!n)return t;n.forEach((n=>{t=B(t,{keywords:n.filter,includePaths:[n.prop],ignorePaths:["__uuid","__index"]})}));return t}function Q(t,n){n=K(n);return H(t,n)}async function U(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;const r=!n||!n.length?await W(t,e.searchTerm):e.filterRows||e.rows;e.filterRows=K(r,n);return H(e,e.filterRows)}async function W(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;e.searchTerm=n;if(!n||!n.length){e.filterRows=e.rows;return Q(e,e.rows)}const r=e.columns.filter((t=>t.searchable!==false));e.filterRows=B(e.rows,{keywords:n,predicate:"OR",includePaths:[...r.map((t=>t.prop))],ignorePaths:["__uuid","__index"]});return Q(e,e.filterRows)}async function X(t){S.delete(t)}e.createWorkerStore=L;e.destroyWorkerStore=X;e.syncConfigToWorker=z;e.syncDataToWorker=q;e.workerFilter=U;e.workerSearch=W;e.workerSort=J})();
+(()=>{"use strict";const t=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const n=e=>{if(e!=null){if(t(e,"ArrayBuffer")||t(e,"MessagePort")||t(e,"ImageBitmap")||t(e,"OffscreenCanvas")){return[e]}if(typeof e==="object"){if(e.constructor===Object){e=Object.values(e)}if(Array.isArray(e)){return e.flatMap(n)}return n(e.buffer)}}return[]};const e={};const r="stencil.table.worker";const o=r+".cb";addEventListener("message",(async({data:t})=>{if(t&&t[0]===r){let f=t[1];let i=t[2];let s=t[3];let u=0;let c=s.length;let a;let l;try{for(;u<c;u++){if(Array.isArray(s[u])&&s[u][0]===o){const t=s[u][1];s[u]=(...n)=>{postMessage([o,t,n])}}}a=await e[i](...s)}catch(t){a=null;if(t instanceof Error){l={isError:true,value:{message:t.message,name:t.name,stack:t.stack}}}else{l={isError:false,value:t}}a=undefined}const p=n(a);postMessage([r,f,a,l],p)}}));var f=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var i=1/0;var s="[object Symbol]";var u=/[\\^$.*+?()[\]{}|]/g,c=RegExp(u.source);var a=typeof f=="object"&&f&&f.Object===Object&&f;var l=typeof self=="object"&&self&&self.Object===Object&&self;var p=a||l||Function("return this")();var d=Object.prototype;var w=d.toString;var h=p.Symbol;var y=h?h.prototype:undefined,b=y?y.toString:undefined;function g(t){if(typeof t=="string"){return t}if($(t)){return b?b.call(t):""}var n=t+"";return n=="0"&&1/t==-i?"-0":n}function v(t){return!!t&&typeof t=="object"}function $(t){return typeof t=="symbol"||v(t)&&w.call(t)==s}function E(t){return t==null?"":g(t)}function m(t){t=E(t);return t&&c.test(t)?t.replace(u,"\\$&"):t}var x=m;function j(t,n){if(typeof t==="string"){return n.checkString(t)}else if(typeof t==="number"){return n.checkNumber(t)}else{return false}}function k(t,n,e,r){if(typeof t==="object"){if(Array.isArray(t)){for(const o of t){if(k(o,n,e,r)){return true}}}else{for(const o in t){e.push(o);const f=k(t[o],n,e,r);e.pop();if(f)return true}}}else if(n.is){if(n.is.test(e.join("."))){return!!t}else{return false}}else{const o=e.join(".");for(const t of r.ignorePaths){if(t.test(o))return false}if(r.includePaths){let t=false;for(const n of r.includePaths){if(n.test(o)){t=true;break}}if(!t)return false}if(n.key){if(!n.key.test(o))return false}return j(t,n)}return false}function A(t,n,e,r){if(n.length){let o=false;for(const f of n){if(k(t,f,[],r)?!f.negate:f.negate){if(e==="OR"){return true}o=true}else if(e==="AND"){return false}}return o}return true}function O(t,n){const e=[];let r=false;let o=0;let f="";for(let i=0;i<t.length;i++){const s=t[i];if(r){if(s===f){r=false;f=""}}else if(s==='"'||s==="'"){r=true;f=s}else if(s.match(n)&&!r){e.push(t.slice(o,i).trim());o=i+1}if(i===t.length-1){e.push(t.slice(o).trim())}}return e.map((t=>{if(t.startsWith('"')&&t.endsWith('"')){return t.slice(1,-1)}if(t.startsWith("'")&&t.endsWith("'")){return t.slice(1,-1)}return t})).filter((t=>t))}const P={"<":function t(n){const e=Number(n[0]);return t=>t<e},"<=":function t(n){const e=Number(n[0]);return t=>t<=e},"=":function t(n){const e=n[0].split(",").filter((t=>t)).map(Number);return t=>{for(let n=0;n<e.length;n++){if(t===e[n]){return true}}return false}},">=":function t(n){const e=Number(n[0]);return t=>t>=e},">":function t(n){const e=Number(n[0]);return t=>t>e},"..":function t(n){const e=Number(n[0]);const r=Number(n[1]);return t=>t>=e&&t<=r}};function R(t){const{values:n,operator:e}=D(t);const r=P[e];if(!r){throw new Error(`unknown operator ${e}`)}return r(n)}function D(t){const n=/^\s*\(?\s*(?<startOperator><=|>=|<|=|>|\.\.)?(?<firstValue>-?\d*\.?\d+)(?:(?<afterDots>\.\.)(?<secondValue>-?\d*\.?\d*))?\s*\)?\s*$/.exec(t);if(!n){return{operator:"=",values:[t]}}if(!n.groups){throw new Error("unreachable")}const{startOperator:e,firstValue:r,afterDots:o,secondValue:f}=n.groups;let i=e;let s=r?[r]:[];if(e===".."){i="<="}else if(!e&&o&&!f){i=">="}else if(o){i=".."}if(f){s.push(f)}return{values:s,operator:i||"="}}const N={"<":function t(n){return t=>t<n[0]},"<=":function t(n){return t=>t<=n[0]},"=":function t(n,e){const r=O(n[0],",").filter((t=>t)).map((t=>new RegExp(`^${x(t)}$`,e)));return t=>{for(const n of r){if(n.test(t)){return true}}return false}},"~":function t(n,e){const r=O(n[0],",").filter((t=>t)).map((t=>new RegExp(x(t),e)));return t=>{for(const n of r){if(n.test(t)){return true}}return false}},">=":function t(n){return t=>t>=n[0]},">":function t(n){return t=>t>n[0]},"..":function t(n){return t=>t>=n[0]&&t<=n[1]}};function _(t,n){const{values:e,operator:r}=I(t);const o=N[r];if(!o){throw new Error(`unreachable unknown operator ${r}`)}return o(e,n)}function I(t){const n=t.split("..");const e=/^\s*\(?(?<operator><=|<|=|>=|>)?\s*(?<value>\S*)\s*\)?$/.exec(n[0]);if(!e){return{operator:"~",values:[t]}}if(!e.groups){throw new Error("unreachable")}let{operator:r,value:o}=e.groups;let f=n[1];let i=[o];if(n.length>1){r="..";if(!f){r=">="}else if(!o){i=[f];r="<="}else{i.push(f)}}return{operator:r||"~",values:i}}function M(t,n){const{insensitive:e,pathAlias:r}=n;return t.map((t=>{const n={};if(t.startsWith("-")){n.negate=true;t=t.substring(1)}const o=t.indexOf(":");if(o>-1){const f=t.substring(o+1);if(o>0){const i=t.substring(0,o);if(i==="is"){n.is=new RegExp(`(^|\\.)${x(f)}(\\.|$)`,e)}if(r[i]){n.key=r[i]}else{n.key=new RegExp(`(^|\\.)${x(i)}(\\.|$)`,e)}}V(n,f,e)}else{V(n,t,e)}return n}))}function V(t,n,e){t.checkString=_(n,e);t.checkNumber=R(n)}function T(t,n){const{insensitive:e}=n;const r={};for(const[n,o]of Object.entries(t)){if(o instanceof RegExp){r[n]=o}else{r[n]=new RegExp(`(^|\\.)${x(o)}(\\.|$)`,e)}}return r}function B(t,n={}){let{index:e=false,predicate:r="AND",ignorePaths:o=[],includePaths:f,pathAlias:i={}}=n;const s=n.limit?n.limit:Infinity;const u=n.caseSensitive?"":"i";let c=n.keywords||[];const a=T(i,{insensitive:u});const l=o.map((t=>typeof t==="string"?new RegExp(`(^|\\.)${x(t)}(\\.|$)`,u):t));const p=f?f.map((t=>typeof t==="string"?new RegExp(`(^|\\.)${x(t)}(\\.|$)`,u):t)):undefined;if(typeof c==="string"){c=O(c,/[ \t\r\n]/)}const d=M(c,{insensitive:u,pathAlias:a});let w=0;if(e){const n=[];for(let e=0;e<t.length&&w<s;e++){if(A(t[e],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){w=n.push(e)}}return n}else{const n=[];for(let e=0;e<t.length&&w<s;e++){if(A(t[e],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){w=n.push(t[e])}}return n}}function F(t){return t.map((t=>{if(!!t.sortCompareFn){t.sortCompareFn=new Function("return "+t.sortCompareFn)()}return t}))}const S=new Map;function C(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}async function L(t,n){const e=C();S.set(e,{rows:t,columns:F(n)});return e}async function q(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;e.rows=n;if(!e.rows&&!e.columns)X(t);return true}async function z(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;e.columns=F(n);if(!e.rows&&!e.columns)X(t);return true}function G(t){const n=t.columns.find((t=>!!t.order));if(n){const{prop:t,order:e}=n;return{prop:t,order:e}}return null}function H(t,n,e,r){if(!e&&!r){const n=G(t);if(n){({prop:e,order:r}=n)}}if(!e||!r||!n.length)return n;const o=t.columns.find((t=>t.prop===e));if(!!o.sortCompareFn&&typeof o.sortCompareFn==="function"){const t=n.slice().sort(o.sortCompareFn(e,r));return t}if(o.type==="text"&&typeof n[0][e]==="string"){const t=n.slice().sort(((t,n)=>{if(!t[e])return 1;if(!n[e])return-1;return r==="asc"?t[e].localeCompare(n[e]):n[e].localeCompare(t[e])}));return t}const f=n.slice().sort(((t,n)=>{if(!t[e])return 1;if(!n[e])return-1;if(t[e]<n[e])return r==="asc"?-1:1;if(t[e]>n[e])return r==="asc"?1:-1;return 0}));return f}async function J(t,n,e){const r=S.get(t);if(!r)throw"cannot find worker with ID "+t;const o=r.filterRows||r.rows;return H(r,o,n,e)}function K(t,n=[]){if(!n)return t;n.forEach((n=>{t=B(t,{keywords:n.filter,includePaths:[n.prop],ignorePaths:["__uuid","__index"]})}));return t}function Q(t,n){n=K(n);return H(t,n)}async function U(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;const r=!n||!n.length?await W(t,e.searchTerm):e.filterRows||e.rows;e.filterRows=K(r,n);return H(e,e.filterRows)}async function W(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;e.searchTerm=n;if(!n||!n.length){e.filterRows=e.rows;return Q(e,e.rows)}const r=e.columns.filter((t=>t.searchable!==false));e.filterRows=B(e.rows,{keywords:n,predicate:"OR",includePaths:[...r.map((t=>t.prop))],ignorePaths:["__uuid","__index"]});return Q(e,e.filterRows)}async function X(t){S.delete(t)}e.createWorkerStore=L;e.destroyWorkerStore=X;e.syncConfigToWorker=z;e.syncDataToWorker=q;e.workerFilter=U;e.workerSearch=W;e.workerSort=J})();

package/dist/types/components/icon/icon.d.ts

@@ -42,7 +42,7 @@ export declare class Icon {
   size?: 'small' | 'large';
   /**
    * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.
-   * Default, `false`.
+   * Default, `true`.
    */
   lazy: boolean;
   private setAriaLabel;

package/dist/types/components/menu/menu.d.ts

@@ -42,6 +42,7 @@ export declare class Menu {
   private handleClick;
   private handleKeyDown;
   private handleMouseOver;
+  componentDidLoad(): void;
   render(): any;
 }
 export {};

package/dist/types/components/resize-observe/resize-observe.d.ts

@@ -2,8 +2,14 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { ResizeStateChangeEventDetail } from '../../interface';
 /**
  * A Resize-Observer utility component.
- * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.
+ * Takes a string list of sizes and optional class-names.
+ * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.
+ * Additionally, can fire events when content no-longer fits within the element.
  * @slot - Main slot for any content.
+ * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off
+ * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off
+ * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off
+ * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off
  */
 export declare class ResizeObserve implements ComponentInterface {
   private ro;
@@ -13,7 +19,13 @@ export declare class ResizeObserve implements ComponentInterface {
   currentWidth: number;
   currentHeight: number;
   classNames: string[];
+  contentFitX: any;
+  contentFitY: any;
   classNameChange(): void;
+  /** Fire `nanoResizeContentFitChange` events notifying
+   * whether content currently fits or does not on the x, y or both axis'.
+   * Also makes the `content-fit-...` slots available */
+  notifyContentFit: 'x' | 'y' | 'xy';
   /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.
    * Format: `states="800w, 300h class1 class2"` */
   states: string;
@@ -21,13 +33,20 @@ export declare class ResizeObserve implements ComponentInterface {
   nanoResizeStateChange: EventEmitter<ResizeStateChangeEventDetail>;
   /** Fires after the initial loading and assessment */
   nanoResizeObserverReady: EventEmitter<void>;
+  /** Fires when the content either begins or stops to fit. Will only work when `notifyContentFit` is set. */
+  nanoResizeContentFitChange: EventEmitter<{
+    x: boolean;
+    y: boolean;
+  }>;
   dimensionChanged(): void;
   statesChanged(): void;
+  private assesContentFit;
   private assessChanges;
   private applyChanges;
   private toSimpleObj;
   private attachRO;
   componentWillLoad(): void;
+  connectedCallback(): void;
   disconnectedCallback(): void;
   render(): any;
 }

package/dist/types/components/table/table-interface.d.ts

@@ -28,22 +28,22 @@ export declare namespace TableTypes {
   /** Potential html properties which can be passed to a row */
   type RowProps = JSXBase.HTMLAttributes<HTMLTableRowElement>;
   /** data model passed to cell rendering functions */
-  interface ColumnDataSchemaModel {
+  interface RenderModel<T = RowGeneric> {
     /** The column property being iterated over */
-    prop: ColumnProp;
+    prop: keyof T;
     /** The data for this cell */
     cellModel: any;
     /** The column config object */
-    column: ColumnConfig;
+    column: ColumnConfig<T>;
     /** The row index currently being iterated over */
     rowIndex: number;
     /** The row model currently being iterated over  */
-    rowModel: any;
+    rowModel: RowData<T>;
   }
   /** data model passed to row rendering functions */
-  interface RowDataSchemaModel {
+  interface RowDataSchemaModel<T = RowGeneric> {
     /** the current data row model being iterated over */
-    row?: RowData;
+    rowModel?: RowData<T>;
     /** the current data row index  */
     rowIndex?: number;
     /** The row being rendered. You *must* nest this in your render function otherwise it will not be shown */
@@ -77,12 +77,12 @@ export declare namespace TableTypes {
    * A row render function, called during a any row's render to the dom.
    * It can be used to add extra markup around any given table row
    **/
-  type RowTemplateFunc<T> = (
+  type RowTemplateFunc<T, P> = (
   /** use this to create markup outside of JSX environments
    * e.g. https://reactjs.org/docs/react-without-jsx.html */
   createElement: HFunc<T>, 
   /** data passed to each template */
-  props: RowDataSchemaModel, 
+  props: RowDataSchemaModel<P>, 
   /** a helper template to minimise boilerplate.
    * A shortcut for `<td><div class="nano-tbl__cell-content"></div></td>` */
   TableCell: FunctionalComponent<{
@@ -92,30 +92,32 @@ export declare namespace TableTypes {
    * A cell render function, called during any cell's render to the dom.
    * It can be used to add any markup within a table cell.
    */
-  type CellTemplateFunc<T> = (createElement: HFunc<T>, props: ColumnDataSchemaModel) => T | string | undefined;
+  type CellTemplateFunc<T, P> = (createElement: HFunc<T>, props: RenderModel<P>) => T | string | undefined;
   /**
    * A table header render function, called during any column's render to the dom.
    * It can be used to add any markup within a table header `th`.
    */
-  type ColumnTemplateFunc<T> = (createElement: HFunc<T>, col: ColumnConfig) => T | string | undefined;
+  type ColumnTemplateFunc<T, P> = (createElement: HFunc<T>, col: ColumnConfig<P>) => T | string | undefined;
   /** A function used to assess the order of any given column.
    * e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
    */
   type ColSortComparator = (prop: keyof RowData, order: Order) => (a: RowData, b: RowData) => number;
   /** A function which can be used to apply any html attribute/s onto a table cell `td` */
-  type PropertiesFunc = (props: ColumnDataSchemaModel) => CellProps | void | undefined;
+  type PropertiesFunc = (props: RenderModel) => CellProps | void | undefined;
   /** A function which can be used to apply any html attribute/s onto a table head `th` */
-  type ColPropertiesFunc = (props: ColumnConfig) => CellProps | void | undefined;
+  type ColPropertiesFunc<T> = (props: ColumnConfig<T>) => CellProps | void | undefined;
   /** A function which can be used to apply any html attribute/s onto a table row `tr` */
-  type RowPropertiesFunc = (props: RowDataSchemaModel) => RowProps | void | undefined;
-  /** An individual table cell's data */
-  type RowData = {
+  type RowPropertiesFunc<T> = (props: RowDataSchemaModel<T>) => RowProps | void | undefined;
+  type RowGeneric = {
     [key: string | number]: any;
+  };
+  /** An individual table cell's data */
+  type RowData<T = RowGeneric> = T & {
     __uuid?: string | number;
     __index?: number;
   };
   /** A data property */
-  type Prop = keyof TableTypes.RowData;
+  type Prop = keyof RowData;
   /** Valid column data types */
   type ColumnType = 'text' | 'string' | 'number' | 'date' | 'unknown';
   /**
@@ -132,6 +134,14 @@ export declare namespace TableTypes {
     type?: ColumnType;
     /** Whether this column is horizontally pinned to viewport */
     pinned?: Position;
+    /** By default cell content too wide for the cell will not wrap,
+     * but rather be trimmed with '...'.
+     * *Note* 'wrap' is mutually-exclusive from `autoTooltip` */
+    wrap?: boolean;
+    /** Setting this to true, will automatically watch content that
+     * doesn't fit and duplicate it to show in a tooltip.
+     * *Note* 'autoTooltip' is mutually-exclusive from `wrap` */
+    autoTooltip?: boolean;
     /** Whether this column is a row header; the cell will render a `th` not a `td` */
     rowHeader?: boolean;
     /** Whether this column can be sorted. Defaults to true */
@@ -148,16 +158,16 @@ export declare namespace TableTypes {
      * A cell render function, called during any cell's render to the dom.
      * It can be used to add any markup within a table cell.
      */
-    cellTemplate?: CellTemplateFunc<VNode | VNode[]>;
+    cellTemplate?: CellTemplateFunc<VNode | VNode[], T>;
     /** A function which can be used to apply any html attribute/s onto a table cell `td` */
     cellProperties?: PropertiesFunc;
     /**
      * A table header render function, called during any column's render to the dom.
      * It can be used to add any markup within a table header `th`.
      */
-    colTemplate?: ColumnTemplateFunc<VNode | VNode[]>;
+    columnTemplate?: ColumnTemplateFunc<VNode | VNode[], T>;
     /** A function which can be used to apply any html attribute/s onto a table head `th` */
-    columnProperties?: ColPropertiesFunc;
+    columnProperties?: ColPropertiesFunc<T>;
     /** A custom sorting comparator function - assess the order of any given column.
      *  e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort */
     sortCompareFn?: ColSortComparator | string;
@@ -166,16 +176,16 @@ export declare namespace TableTypes {
    * Row renderer property. Called during the rendering of any table row
    * controlling it's visual state.
    */
-  interface RowRenderer {
+  interface RowRenderer<T = RowData> {
     /** Function to decide whether the row is vertically pinned. */
     pinned?: PinFunc;
     /**
      * A row render function, called during a any row's render to the dom.
      * It can be used to add extra markup around any given table row
      **/
-    template?: RowTemplateFunc<VNode | VNode[]>;
+    template?: RowTemplateFunc<VNode | VNode[], T>;
     /** A function which can be used to apply any html attribute/s onto a table row `tr` */
-    rowProperties?: RowPropertiesFunc;
+    rowProperties?: RowPropertiesFunc<T>;
   }
   /**
    * Row renderer property. Called during the rendering of a tables head and foot
@@ -190,7 +200,7 @@ export declare namespace TableTypes {
      * If used, and you want to see the rendered row, you *must* nest it within your
      * jsx function e.g. `(h, props) => { return [props.renderedRow, <tr><td>Custom thing</td></tr>]}`
      **/
-    template?: RowTemplateFunc<VNode | VNode[]>;
+    template?: RowTemplateFunc<VNode | VNode[], null>;
     /** A function which can be used to apply any html attribute/s onto a table row `tr` */
     rowProperties?: () => RowProps | void | undefined;
   }
@@ -198,8 +208,9 @@ export declare namespace TableTypes {
     rows: TableTypes.NanoTable['rows'];
     __uuid: string | number;
   };
-  class NanoTable<T = RowData> {
+  class NanoTable<T = RowGeneric> {
     rows: T[];
     columns: ColumnConfig<T>[];
   }
+  type Falsy = false | 0 | '' | null | undefined;
 }

package/dist/types/components/table/table.cell.d.ts

@@ -12,7 +12,7 @@ export declare const baseCellClasses: (colIndex: number, toString?: boolean) =>
 declare type TableCellProps = {
   rowIndex: number;
   colIndex: number;
-  nestedContent?: VNode;
+  nestedContent?: () => VNode;
 };
 export declare const TableCell: FunctionalComponent<TableCellProps>;
 export {};