@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

package/dist/components/nano-menu-drawer.js.map

@@ -1 +0,0 @@
-{"file":"nano-menu-drawer.js","mappings":"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","names":[],"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  --padding-top: 13px;\n  --padding-end: 12px;\n  --padding-bottom: 13px;\n  --padding-start: 12px;\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 79px;\n  --bg-color: #001a21;\n  --bg-color-hover: rgb(28 62 72 / 80%);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgb(28 62 72 / 80%);\n  --focus-outline: none;\n  --content-color: #{map.get(tokens.$colors, white)};\n  --secondary-bg-color: rgb(28 62 72);\n\n  @include mx.text-inherit();\n\n  display: block;\n  z-index: 1;\n  background: var(--bg-color);\n\n  ::slotted(.nano-nav-item) {\n    --secondary-padding-top: var(--global-nav-height);\n    --nano-icon-size: var(--icon-size);\n\n    color: var(--content-color);\n    font-size: var(--font-size);\n    // font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.hide) {\n  display: none;\n}\n\n:host(.has-global-nav) {\n  .content-wrap {\n    padding-block-start: var(--global-nav-height);\n    margin-block-start: calc(var(--global-nav-height) * -1);\n  }\n}\n\n.container {\n  inset-inline-end: auto;\n  flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  background: var(--bg-color);\n  color: var(--content-color);\n  z-index: 1;\n  inline-size: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  block-size: 100%;\n}\n\n:host(.open) {\n  .container {\n    inline-size: auto;\n  }\n}\n\n:host(:not(.loading)) {\n  .container {\n    transition: inline-size 0.3s ease;\n  }\n}\n\n.content-wrap {\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  inline-size: inherit;\n  max-inline-size: inherit;\n  background: var(--bg-color);\n  color: map.get(tokens.$colors, white);\n  position: sticky;\n  font-size: var(--icon-size);\n  line-height: 1;\n  display: flex;\n  min-block-size: calc(100vh - 79px);\n  min-block-size: calc((var(--vh, 1vh) * 100) - 79px);\n  z-index: 1;\n}\n\n.content {\n  inline-size: auto;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bg-color);\n  flex: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline: 0;\n    background: var(--bg-color);\n    z-index: -1;\n    block-size: 100vh;\n  }\n}\n\n.collapse-btn {\n  background: var(--bg-color-selected);\n  border: none;\n  color: inherit;\n  font-size: var(--icon-size);\n  margin-block: var(--padding-top) var(--padding-bottom);\n  margin-inline: calc(var(--padding-start) / 2) 0;\n  border-radius: 4px;\n  padding-block: 6px;\n  padding-inline: 5px;\n  display: flex;\n  align-content: center;\n  inline-size: 30px;\n  flex: 0 0 auto;\n\n  .nano-icon {\n    font-size: var(--icon-size);\n    transition: 0.2s transform ease-in-out;\n    transform: translateZ(0) rotate(0deg);\n\n    :host(.open) & {\n      transform: translateZ(0) rotate(180deg);\n    }\n  }\n}\n\n.foot {\n  margin-block-start: auto;\n}\n\n.measure-ele {\n  block-size: 1px;\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  writeTask,\n  State,\n  Element,\n  Watch,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils/dom';\nimport { NavItemEventDetail } from '../nav-item/nav-item-interface';\nimport { transformTag, h } from '../../utils/renderer';\n\n/**\n * Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n */\n@Component({\n  tag: 'nano-menu-drawer',\n  styleUrl: 'menu-drawer.scss',\n  shadow: true,\n})\nexport class MenuDrawer {\n  private containerDiv: HTMLDivElement;\n  private contentDiv: HTMLElement;\n  private measureEle: HTMLElement;\n  private globalNav: HTMLNanoGlobalNavElement;\n  private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n    [];\n  private io: IntersectionObserver;\n  private currHeight: number = window.innerHeight;\n\n  @Element() private el: HTMLNanoMenuDrawerElement;\n\n  @State() reset: boolean = false;\n  @State() widthOk: boolean = true;\n  @State() heightOk: boolean = true;\n  @State() isLoading: boolean = true;\n  @State() hide: boolean = false;\n\n  /**\n   * Set the initial menu drawer open or closed\n   */\n  @Prop({ mutable: true }) open: boolean = true;\n\n  /**\n   * Save open state to localStorage\n   */\n  @Prop() saveState: boolean = true;\n\n  /**\n   * Screen width to hide the menu drawer and move the items into the nano-global-nav\n   */\n  @Prop() hideWidth: number = 576;\n\n  /**\n   * Should element hide and move items into the nano-global-nav when items are cut off\n   * (this will only work when nano-menu-drawer is displayed at full screen)\n   */\n  @Prop() hideHeight: boolean = true;\n\n  @Listen('nanoOpen')\n  @Listen('nanoClose')\n  cancelNavItemEvents(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n  }\n\n  @Watch('open')\n  openChange() {\n    if (this.saveState)\n      localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n    if (this.containerDiv) {\n      if (this.open)\n        writeTask(\n          () =>\n            (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n        );\n      else writeTask(() => (this.containerDiv.style.width = null));\n    }\n  }\n\n  @Watch('widthOk')\n  widthChange() {\n    if (this.widthOk) this.moveItemsToDrawer();\n    else this.moveItemsToGlobalNav();\n  }\n\n  @Watch('hideHeight')\n  hideHeightChange() {\n    if (this.hideHeight && !this.io) this.attachIO();\n    else if (!this.hideHeight && this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private moveItemsToGlobalNav() {\n    const currNavItems = this.el.querySelectorAll<HTMLNanoNavItemElement>(\n      transformTag('nano-nav-item')\n    );\n    // dimensions not cool - move items out of element and into global nav\n    currNavItems.forEach((element) => {\n      this.children.push({\n        slot: element.getAttribute('slot'),\n        element: element,\n      });\n      element.setAttribute('slot', 'overflow');\n      element.classList.add('nano-global-nav-menu');\n      this.globalNav.appendChild(element);\n    });\n    this.hide = true;\n  }\n\n  private moveItemsToDrawer() {\n    if (!this.children || !this.children.length) return;\n\n    this.children.forEach((child) => {\n      child.element.removeAttribute('slot');\n      child.element.classList.remove('nano-global-nav-menu');\n      if (child.slot && child.slot.length)\n        child.element.setAttribute('slot', child.slot);\n      this.el.appendChild(child.element);\n    });\n    this.children = [];\n    this.hide = false;\n    if (!this.io) this.attachIO();\n  }\n\n  private onWindowResize = () => {\n    if (window.innerWidth > this.hideWidth) this.widthOk = true;\n    else this.widthOk = false;\n\n    const vh = window.innerHeight * 0.01;\n    this.el.style.setProperty('--vh', `${vh}px`);\n\n    if (\n      window.innerHeight > this.currHeight &&\n      this.widthOk &&\n      !this.heightOk\n    ) {\n      this.moveItemsToDrawer();\n    }\n    this.currHeight = window.innerHeight;\n  };\n\n  private toggle = (e: MouseEvent) => {\n    e.preventDefault();\n    this.open = !this.open;\n  };\n\n  private onToggleKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private attachIO() {\n    if (!this.hideHeight) return;\n    const io: IntersectionObserver = (this.io = new (\n      window as any\n    ).IntersectionObserver(\n      (data: IntersectionObserverEntry[]) => {\n        this.heightOk = data[0].intersectionRatio !== 0;\n        if (!this.heightOk) {\n          this.moveItemsToGlobalNav();\n          this.io.disconnect();\n          this.io = undefined;\n        }\n      },\n      { threshold: 1 }\n    ));\n    io.observe(this.measureEle);\n  }\n\n  @Listen('nanoIsReady', { target: 'body' })\n  handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n    if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))\n      return;\n\n    setTimeout(() => {\n      this.attachIO();\n      this.openChange();\n      this.onWindowResize();\n      this.isLoading = false;\n    }, 500);\n  }\n\n  componentWillLoad() {\n    this.globalNav = closestElement(\n      transformTag('nano-global-nav'),\n      this.el\n    ) as HTMLNanoGlobalNavElement;\n\n    this.widthOk = window.innerWidth > this.hideWidth;\n    this.currHeight = window.innerHeight;\n\n    if (this.saveState) {\n      const localState = localStorage.getItem('nanoMenuDrawerOpen');\n      this.open = localState ? localState === 'true' : this.open;\n    }\n  }\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.onWindowResize);\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          open: this.open,\n          hide: this.hide,\n          loading: this.isLoading,\n          'has-global-nav': !!this.globalNav,\n          'nano-menu-drawer': true,\n        }}\n        dir={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null}\n      >\n        <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n          <div class=\"content-wrap\">\n            <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n              <button\n                onMouseDown={this.toggle}\n                onKeyDown={this.onToggleKeyDown}\n                class=\"collapse-btn\"\n              >\n                <nano-icon\n                  name=\"light/right-to-line\"\n                  aria-label=\"collapse / expand\"\n                ></nano-icon>\n              </button>\n              <slot />\n              <div class=\"foot\">\n                <div\n                  class=\"measure-ele\"\n                  ref={(div) => (this.measureEle = div)}\n                ></div>\n                <slot name=\"foot\" />\n              </div>\n            </nav>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"nano-menu.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-more-less.js.map

@@ -1 +0,0 @@
-{"file":"nano-more-less.js","mappings":";;;;;;MA6Ba,MAAM;;;;;;;;IAIuB,IAAI,GAAG,KAAK,CAAC;;IAG7C,gBAAgB,CAAS;;;IAIzB,SAAS,GAAG,CAAC,CAAC;;IAGd,SAAS,GAAG,KAAK,CAAC;IAE1B,IAAI,QAAQ;QACV,IAAI,QAAyD,CAAC;QAE9D,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAC9D;aAAM;YACL,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC/B;QACD,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAChC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,CAClB,CAAC;KACpB;IAKD,sBAAsB;QACpB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;oBAChC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;iBACxB;aACF;iBAAM;gBACL,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;oBACvB,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;iBAC5B;qBAAM;oBACL,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;iBACxB;aACF;SACF,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAc;QAChC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB;IAED,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1B,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAAI,EAC1D,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC,SAAS,IAAI;YACzC,4DACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,UAAU,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAEnC,6DAAM,IAAI,EAAC,MAAM,IACf,+DAAQ,IAAI,EAAC,qBAAqB,oBACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,MAC3C,CACJ,CACH;YACN,CAAC,IAAI,CAAC,SAAS,IACb,WACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,MAAM,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAEnC,YAAM,IAAI,EAAC,MAAM,IACf,cAAQ,IAAI,EAAC,qBAAqB,oBACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,MAC3C,CACJ,CACH,KAEN,EAAE,CACH;SACF,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/more-less/more-less.tsx"],"sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  ComponentInterface,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n/**\n * A simple component to show more or less elements.\n *\n * @slot less - a button displayed when all fewer are shown. When clicked will show elements\n * @slot more - a button displayed when all items are shown. When clicked will hide elements\n * @slot - default slot displaying children elements to show or hide\n *\n * @part button-wrapper - wraps the 'more' / 'less' buttons\n * @part button-wrapper--more - wraps the 'more' button\n * @part button-wrapper--less - wraps the 'less' button\n * @part button - default 'more' / 'less' buttons\n * @part button--more - the default 'more' button\n * @part button--less - the default 'less' button\n */\n@Component({\n  tag: 'nano-more-less',\n  shadow: true,\n  styles: /* css */ `:host { display: contents; }`,\n})\nexport class Rating implements ComponentInterface {\n  @Element() host: HTMLNanoMoreLessElement;\n\n  /** The default state. `false` - excess items are hidden. `true` - excess items are shown. */\n  @Prop({ reflect: true, mutable: true }) show = false;\n\n  /** Optional JS selector to target which elements to hide or show */\n  @Prop() childrenSelector: string;\n\n  /** The maximum number of items to show when `show` is true.\n   * Excess items will be hidden. */\n  @Prop() maxToShow = 3;\n\n  /** Only show the 'show more' button */\n  @Prop() noHideBtn = false;\n\n  get children() {\n    let children: NodeListOf<Element> | HTMLCollectionOf<Element>;\n\n    if (this.childrenSelector) {\n      children = this.host.querySelectorAll(this.childrenSelector);\n    } else {\n      children = this.host.children;\n    }\n    return Array.from(children).filter(\n      (ele) => !ele.hasAttribute('slot')\n    ) as HTMLElement[];\n  }\n\n  @Watch('maxToShow')\n  @Watch('show')\n  @Watch('childrenSelector')\n  handleShowHideElements() {\n    this.children.forEach((ele, i) => {\n      if (this.show) {\n        if (ele.style.display === 'none') {\n          ele.style.display = '';\n        }\n      } else {\n        if (i >= this.maxToShow) {\n          ele.style.display = 'none';\n        } else {\n          ele.style.display = '';\n        }\n      }\n    });\n  }\n\n  private handleClick(_e: MouseEvent) {\n    this.show = !this.show;\n  }\n\n  connectedCallback() {\n    this.handleShowHideElements();\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-more-less\">\n        <slot onSlotchange={() => this.handleShowHideElements()} />\n        {this.children?.length > this.maxToShow && [\n          <div\n            style={{ display: this.show ? 'none' : 'contents' }}\n            class=\"button-wrapper\"\n            part=\"button-wrapper button-wrapper--less\"\n            onClick={(e) => this.handleClick(e)}\n          >\n            <slot name=\"less\">\n              <button part=\"button button--less\">\n                Show more (+{this.children.length - this.maxToShow})\n              </button>\n            </slot>\n          </div>,\n          !this.noHideBtn ? (\n            <div\n              style={{ display: this.show ? 'contents' : 'none' }}\n              class=\"button-wrapper\"\n              part=\"button-wrapper button-wrapper--more\"\n              onClick={(e) => this.handleClick(e)}\n            >\n              <slot name=\"more\">\n                <button part=\"button button--more\">\n                  Show less (-{this.children.length - this.maxToShow})\n                </button>\n              </slot>\n            </div>\n          ) : (\n            ''\n          ),\n        ]}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-nav-item.js.map

@@ -1 +0,0 @@
-{"file":"nano-nav-item.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -1 +0,0 @@
-{"file":"nano-option.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-overflow-nav.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface NanoOverflowNav extends Components.NanoOverflowNav, HTMLElement {}
-export const NanoOverflowNav: {
-    prototype: NanoOverflowNav;
-    new (): NanoOverflowNav;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/nano-overflow-nav.js

@@ -1,390 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
-import { h } from './renderer.js';
-import { g as getDirectChildren, a as getOffset } from './dom.js';
-import { d as debounce } from './throttle.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './tooltip.js';
-
-const overflowNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:\"currentColor\";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:\" \";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav .nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav .nano-icon-button.onav__scroll-button:focus{outline:none}.onav .nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav .nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow:auto hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;padding-block:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:\"\";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{inline-size:100%}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;overflow:hidden auto;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0;padding-block:calc(var(--fade-size) + 12px) var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{content:\"\";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
-const NanoOverflowNavStyle0 = overflowNavCss;
-
-const OverflowNav = /*@__PURE__*/ proxyCustomElement(class OverflowNav extends HTMLElement {
-    // public surface
-    /** Disables the scroll arrow buttons that appear when content overflows */
-    scrollControls = true;
-    /** The flex direction of the element */
-    orientation = 'horizontal';
-    /**
-     * A function called when an item becomes 'active' (via click or keyboard)
-     * @param item - html element currently being assessed
-     * @param _index - the index of the html element currently being assessed
-     * @returns void */
-    activeHandler = (item, _index) => item.classList.add('active');
-    /**
-     * A function called when an item becomes 'inactive'
-     * (because another item was made active)
-     * @param item - html element currently being assessed
-     * @param _index - the index of the html element currently being assessed
-     * @returns void */
-    inActiveHandler = (item, _index) => item.classList.remove('active');
-    /**
-     * A function called to assess an initial, active item
-     * @param item - html element currently being assessed
-     * @param _index - the index of the html element currently being assessed
-     * @returns void */
-    isActiveHandler = (item, _index) => item.classList.contains('active');
-    watchIsActiveHandler() {
-        this.instantReCalc = true;
-        this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
-        setTimeout(() => (this.instantReCalc = false), 300);
-    }
-    /**
-     * Sync up the view to the active item.
-     * Use this when the active item changes outside of this component.
-     */
-    async syncActiveItem() {
-        this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
-    }
-    // private state
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.recalculatePositions = debounce(this.recalculatePositions.bind(this), 80);
-    }
-    ro;
-    nav;
-    itemContainer;
-    isRtl;
-    endBtn;
-    startBtn;
-    activeIndicator;
-    mutationObservers = new WeakMap();
-    get scrollProp() {
-        return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';
-    }
-    get clientDimProp() {
-        return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';
-    }
-    get scrollOffset() {
-        return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';
-    }
-    get host() { return this; }
-    instantReCalc = false;
-    hasScrollControls = false;
-    watchScrollControls() {
-        if (this.hasScrollControls)
-            this.handleScroll();
-        else
-            this.hideControlStart = this.hideControlEnd = true;
-    }
-    hideControlEnd = true;
-    hideEndBtn() {
-        if (!this.endBtn)
-            return;
-        this.activateBtn(this.endBtn, !this.hideControlEnd);
-    }
-    hideControlStart = true;
-    hideStartBtn() {
-        if (!this.startBtn)
-            return;
-        this.activateBtn(this.startBtn, !this.hideControlStart);
-    }
-    // private logic
-    activateBtn(btn, activate = true) {
-        if (!activate) {
-            btn.tabIndex = -1;
-            btn.disabled = true;
-            btn.classList.remove('is-shown');
-            return;
-        }
-        btn.tabIndex = 0;
-        btn.disabled = false;
-        btn.classList.add('is-shown');
-    }
-    get allActiveItems() {
-        return this.allItems.filter((el) => !el.disabled || el.classList.contains('disabled'));
-    }
-    get allItems() {
-        return getDirectChildren(this.host, '*', true);
-    }
-    get activeItem() {
-        return this._activeItem;
-    }
-    set activeItem(item) {
-        if (!item ||
-            item === this.activeItem ||
-            item.disabled ||
-            !this.allActiveItems.includes(item)) {
-            return;
-        }
-        this._activeItem = item;
-        this.allActiveItems.forEach((el, i) => {
-            if (el === this._activeItem)
-                this.activeHandler(el, i);
-            else
-                this.inActiveHandler(el, i);
-        });
-        this.recalculatePositions();
-    }
-    _activeItem;
-    get navDim() {
-        if (!this.nav)
-            return 0;
-        const computedStyle = getComputedStyle(this.nav);
-        let clientDim = this.nav[this.clientDimProp];
-        if (this.orientation === 'horizontal') {
-            return (clientDim -=
-                parseFloat(computedStyle.paddingLeft) +
-                    parseFloat(computedStyle.paddingRight));
-        }
-        else {
-            return (clientDim -=
-                parseFloat(computedStyle.paddingTop) +
-                    parseFloat(computedStyle.paddingBottom));
-        }
-    }
-    scrollToActiveItem() {
-        if (!this.nav || !this.activeItem)
-            return;
-        setTimeout(() => {
-            this.activeItem.scrollIntoView({
-                behavior: this.instantReCalc ? 'auto' : 'smooth',
-                block: 'center',
-                inline: 'center',
-            });
-        }, 100);
-    }
-    syncActiveItemIndicator() {
-        if (!this.activeItem)
-            return;
-        const item = this.activeItem;
-        const width = item.clientWidth || 0;
-        const height = item.clientHeight + 2 || 0;
-        const offset = getOffset(item, this.itemContainer);
-        if (!this.activeIndicator)
-            return;
-        const offsetTop = offset.top;
-        const offsetLeft = offset.left;
-        if (this.instantReCalc)
-            this.activeIndicator.style.transition = 'none';
-        switch (this.orientation) {
-            case 'horizontal':
-                this.activeIndicator.style.width = `${width}px`;
-                this.activeIndicator.style.height = null;
-                this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;
-                break;
-            case 'vertical':
-                this.activeIndicator.style.width = null;
-                this.activeIndicator.style.height = `${height}px`;
-                this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;
-                break;
-        }
-        setTimeout(() => (this.activeIndicator.style.transition = null), 400);
-    }
-    updateScrollControls = () => {
-        if (!this.nav)
-            return;
-        this.hasScrollControls =
-            this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&
-                this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];
-        this.handleScroll();
-    };
-    handleScroll = () => {
-        if (!this.hasScrollControls) {
-            this.hideControlStart = this.hideControlEnd = true;
-            return;
-        }
-        const finishEnd = this.isRtl
-            ? this.nav[this.scrollOffset] === 0
-            : Math.abs(this.nav[this.clientDimProp] -
-                (this.nav[this.scrollProp] - this.nav[this.scrollOffset])) < 2;
-        const finishStart = this.isRtl
-            ? Math.abs(this.nav[this.scrollProp] +
-                this.nav[this.scrollOffset] -
-                this.nav[this.clientDimProp]) < 2
-            : this.nav[this.scrollOffset] === 0;
-        if (finishStart) {
-            this.hideControlStart = true;
-            this.hideControlEnd = false;
-        }
-        else if (finishEnd) {
-            this.hideControlStart = false;
-            this.hideControlEnd = true;
-        }
-        else {
-            this.hideControlEnd = false;
-            this.hideControlStart = false;
-        }
-    };
-    handleBtnClick = (goEnd = false) => {
-        const navDim = this.navDim;
-        let scrollAmt;
-        if (goEnd)
-            scrollAmt = this.nav[this.scrollOffset] + navDim - 20;
-        else
-            scrollAmt = this.nav[this.scrollOffset] - navDim + 20;
-        try {
-            this.nav.scroll({
-                left: this.orientation === 'horizontal' ? scrollAmt : 0,
-                top: this.orientation === 'vertical' ? scrollAmt : 0,
-                behavior: 'smooth',
-            });
-        }
-        catch (_e) {
-            this.nav[this.scrollOffset] = scrollAmt;
-        }
-    };
-    slotChangeHandler = () => {
-        if (this.allActiveItems.length < 2)
-            return;
-        const item = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
-        if (item)
-            this.activeItem = item;
-        this.recalculatePositions();
-        /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */
-        this.allActiveItems.forEach((item) => {
-            if (this.mutationObservers.get(item))
-                return;
-            const mo = new MutationObserver(() => this.syncActiveItemIndicator());
-            mo.observe(item, {
-                characterData: true,
-                childList: true,
-                subtree: true,
-            });
-            this.mutationObservers.set(item, mo);
-        });
-    };
-    handleClick = (event) => {
-        if (this.allActiveItems.length < 2)
-            return;
-        const foundItem = event
-            .composedPath()
-            .find((e) => this.allActiveItems.includes(e));
-        if (foundItem)
-            this.activeItem = foundItem;
-    };
-    handleKeyDown = (event) => {
-        // Activate a tab
-        if (['Enter', ' '].includes(event.key)) {
-            const foundItem = event
-                .composedPath()
-                .find((e) => this.allActiveItems.includes(e));
-            if (foundItem)
-                this.activeItem = foundItem;
-        }
-    };
-    recalculatePositions = () => {
-        this.updateScrollControls();
-        this.syncActiveItemIndicator();
-        this.scrollToActiveItem();
-    };
-    // lifecycle
-    connectedCallback() {
-        this.instantReCalc = true;
-        this.isRtl =
-            this.orientation === 'horizontal' && !!this.host.closest('[dir="rtl"]');
-        if (window['MutationObserver'])
-            this.slotChangeHandler();
-        if (!window['ResizeObserver'])
-            return;
-        if (this.ro) {
-            this.ro.disconnect();
-            this.ro = undefined;
-        }
-        const mo = (this.ro = new ResizeObserver(this.recalculatePositions));
-        mo.observe(this.host);
-    }
-    componentDidLoad() {
-        this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
-        this.instantReCalc = false;
-    }
-    disconnectedCallback() {
-        if (this.ro) {
-            this.ro.disconnect();
-            this.ro = undefined;
-        }
-    }
-    render() {
-        return (h(Host, { key: 'b27e8a6ed628edcec4ca84db6898344848b7d203', dir: this.isRtl ? 'rtl' : null, class: "nano-overflow-nav" }, h("div", { key: '79200b5a21b1fdcc179fc3017b051af1bf82d17f', part: "base", class: {
-                onav: true,
-                [`onav--${this.orientation}`]: true,
-                'onav--has-scroll-controls': this.hasScrollControls,
-                'onav--has-scroll-controls-start': !this.hideControlStart,
-                'onav--has-scroll-controls-end': !this.hideControlEnd,
-                'onav--no-transitions': this.instantReCalc,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '088d3d5bc04b251977ec0c389a4eef7657d11446', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: 'c55c810110f8b357b330634b024c3f5dc44ebb3b', part: "scroll-button scroll-button-prev", class: {
-                'onav__scroll-button': true,
-                'onav__scroll-button--start': true,
-            }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
-                ? 'light/chevron-left'
-                : 'light/chevron-up' })), h("div", { key: '9b65b0ccdb84eaf1afb28835e818039a961ef8c2', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll }, h("div", { key: '320928d965a0dd203a7b1614b4ae4ec344719810', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, h("div", { key: '0227ff56d2949ef3ebfc5ec740a38dcdb7adb1d4', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" }), h("slot", { key: '28573efda6c8eb5995114f6063f57ad22e0646ed', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'bba306fe285adc3d6af71bf07e1744c9790f9c51', part: "scroll-button scroll-button-next", class: {
-                'onav__scroll-button': true,
-                'onav__scroll-button--end': true,
-            }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
-                ? 'light/chevron-right'
-                : 'light/chevron-down' }))))));
-    }
-    static get watchers() { return {
-        "isActiveHandler": ["watchIsActiveHandler"],
-        "hasScrollControls": ["watchScrollControls"],
-        "hideControlEnd": ["hideEndBtn"],
-        "hideControlStart": ["hideStartBtn"]
-    }; }
-    static get style() { return NanoOverflowNavStyle0; }
-}, [1, "nano-overflow-nav", {
-        "scrollControls": [4, "scroll-controls"],
-        "orientation": [513],
-        "activeHandler": [16],
-        "inActiveHandler": [16],
-        "isActiveHandler": [16],
-        "instantReCalc": [32],
-        "hasScrollControls": [32],
-        "hideControlEnd": [32],
-        "hideControlStart": [32],
-        "syncActiveItem": [64]
-    }, undefined, {
-        "isActiveHandler": ["watchIsActiveHandler"],
-        "hasScrollControls": ["watchScrollControls"],
-        "hideControlEnd": ["hideEndBtn"],
-        "hideControlStart": ["hideStartBtn"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nano-overflow-nav", "nano-icon", "nano-icon-button", "nano-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nano-overflow-nav":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, OverflowNav);
-            }
-            break;
-        case "nano-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "nano-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "nano-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const NanoOverflowNav = OverflowNav;
-const defineCustomElement = defineCustomElement$1;
-
-export { NanoOverflowNav, defineCustomElement };
-
-//# sourceMappingURL=nano-overflow-nav.js.map

package/dist/components/nano-overflow-nav.js.map

@@ -1 +0,0 @@
-{"file":"nano-overflow-nav.js","mappings":"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","names":[],"sources":["src/components/overflow-nav/overflow-nav.scss?tag=nano-overflow-nav&encapsulation=shadow","src/components/overflow-nav/overflow-nav.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n  * @prop --indicator-transition: Defaults to #{tokens.$transition-fast}\n  * @prop --indicator-color: Defaults to #{map.get(tokens.$colors, lightblue)};\n  * @prop --indicator-size: Defaults to 0;\n  * @prop --indicator-track-color: Defaults to #{map.get(tokens.$colors, lightgrey)};\n  * @prop --indicator-track-size: Defaults to var(--indicator-size);\n\n  * @prop --scroll-btn-color: Defaults to 'currentColor';\n  * @prop --fade-size: The size of the fade areas (when items do not fit). Defaults to 1.75rem;\n  * @prop --fade-transparency: Defaults to 0;\n  *\n  * @prop --padding: Padding that matches the fade size will stop items shifting if fade areas are added (i.e when items do not fit). Defaults to var(--fade-size);\n  */\n\n  --indicator-transition: #{tokens.$transition-fast};\n  --indicator-color: #{map.get(tokens.$colors, lightblue)};\n  --indicator-size: 0;\n  --indicator-track-color: #{map.get(tokens.$colors, lightgrey)};\n  --indicator-track-size: var(--indicator-size);\n  --scroll-btn-color: 'currentColor';\n  --fade-size: 1.75rem;\n  --fade-transparency: 0;\n  --padding: var(--fade-size);\n\n  position: relative;\n  z-index: #{tokens.$layer-index-raised};\n}\n\n:host([orientation=\"horizontal\"]) {\n  display: block;\n}\n\n:host([orientation=\"vertical\"]) {\n  display: flex;\n}\n\n.onav {\n  $root: &;\n\n  &--no-transitions * {\n    transition-duration: 0s !important;\n  }\n\n  &__scroller {\n    @include mx.hide-scrollbar();\n\n    display: flex;\n    transition: #{tokens.$transition-medium} ease;\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n    mask-size: calc(100% + calc(var(--fade-size) * 4));\n    mask-position: calc(var(--fade-size) * -2);\n\n    &::after {\n      content: ' ';\n      line-height: 1;\n      flex: 0 0 auto;\n      display: block;\n    }\n\n    #{$root}--has-scroll-controls-start & {\n      mask-position: 0;\n      mask-size: calc(100% + (var(--fade-size) * 2));\n    }\n\n    #{$root}--has-scroll-controls-end & {\n      mask-position: calc(var(--fade-size) * -1);\n      mask-size: calc(100% + var(--fade-size));\n    }\n\n    #{$root}--has-scroll-controls-start#{$root}--has-scroll-controls-end & {\n      mask-size: 100%;\n      mask-position: 0;\n    }\n  }\n\n  &__items {\n    flex: 1 1 auto;\n    position: relative;\n    inline-size: auto;\n    flex-wrap: nowrap;\n    display: flex;\n\n    &::before {\n      content: '';\n      background: var(--indicator-track-color);\n      display: block;\n      position: absolute;\n      z-index: 1;\n    }\n  }\n\n  &__active-indicator {\n    position: absolute;\n    z-index: 10;\n    transition:\n      var(--indicator-transition) transform ease,\n      var(--indicator-transition) width ease,\n      var(--indicator-transition) height ease;\n  }\n\n  .nano-icon-button.onav__scroll-button {\n    --nano-color-base: var(--scroll-btn-color);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    border: unset;\n    z-index: 2;\n    transition: #{tokens.$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n    pointer-events: none;\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:focus-visible {\n      box-shadow: #{tokens.$control-focus-style} inset;\n    }\n  }\n\n  ///////////// HORIZONTAL ///////////////\n\n  &--horizontal {\n\n    #{$root}__scroller {\n      overflow: auto hidden;\n      mask-repeat: no-repeat;\n      padding-inline: var(--padding);\n      mask-image:\n        linear-gradient(\n          to left,\n          rgb(0 0 0 / var(--fade-transparency)) 0,\n          rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n          rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--fade-size)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n\n      &::after {\n        padding-inline: 0 var(--fade-size);\n        padding-block: 0;\n      }\n    }\n\n    &#{$root}--has-scroll-controls #{$root}__scroller {\n      padding-inline: var(--fade-size) 0;\n      padding-block: 0;\n    }\n\n    #{$root}__items {\n      flex-direction: row;\n\n      &::before {\n        content: '';\n        inline-size: 100%;\n        block-size: var(--indicator-track-size);\n        inset-block-end: 0;\n      }\n    }\n\n    #{$root}__active-indicator {\n      inset-block-end: 0;\n      border-block-end: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    #{$root}__scroll-button {\n      inset-block: 0;\n\n      &--start {\n        inset-inline-start: 0;\n      }\n\n      &--end {\n        inset-inline-end: 0;\n      }\n    }\n  }\n\n  ///////////// VERTICAL ///////////////\n\n  &--vertical {\n    inline-size: 100%;\n\n    #{$root}__nav {\n      max-block-size: 100%;\n      display: flex;\n    }\n\n    #{$root}__scroller {\n      inline-size: 100%;\n      overflow: hidden auto;\n      flex-direction: column;\n      mask-repeat: no-repeat;\n      mask-image:\n        linear-gradient(\n          to top,\n          rgb(0 0 0 / var(--fade-transparency)) 0,\n          rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n          rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--fade-size)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n      padding-inline: 0;\n      padding-block: calc(var(--fade-size) + 12px) var(--fade-size);\n\n      &::after {\n        padding-inline: 0;\n        padding-block: 0 var(--fade-size);\n      }\n    }\n\n    #{$root}__items {\n      flex-direction: column;\n      inline-size: fit-content;\n\n      &::before {\n        content: '';\n        block-size: 100%;\n        inline-size: var(--indicator-track-size);\n        inset-inline-start: 0;\n      }\n    }\n\n    #{$root}__active-indicator {\n      inset-inline-start: 0;\n      border-inline-start: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    #{$root}__scroll-button {\n      inset-inline: 0;\n\n      &--start {\n        inset-block-start: 0;\n      }\n\n      &--end {\n        inset-block-end: 0;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  State,\n  Method,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/**\n * Primarily used to display navigational items that may not fit on smaller screens.\n *\n * - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n *\n * @slot - Default slot to place items.\n *\n * @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n */\n\n@Component({\n  tag: 'nano-overflow-nav',\n  styleUrl: 'overflow-nav.scss',\n  shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n  // public surface\n\n  /** Disables the scroll arrow buttons that appear when content overflows */\n  @Prop() scrollControls = true;\n\n  /** The flex direction of the element */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' =\n    'horizontal';\n\n  /**\n   * A function called when an item becomes 'active' (via click or keyboard)\n   * @param item - html element currently being assessed\n   * @param _index - the index of the html element currently being assessed\n   * @returns void */\n  @Prop() activeHandler = (item: HTMLElement, _index: number) =>\n    item.classList.add('active');\n\n  /**\n   * A function called when an item becomes 'inactive'\n   * (because another item was made active)\n   * @param item - html element currently being assessed\n   * @param _index - the index of the html element currently being assessed\n   * @returns void */\n  @Prop() inActiveHandler = (item: HTMLElement, _index: number) =>\n    item.classList.remove('active');\n\n  /**\n   * A function called to assess an initial, active item\n   * @param item - html element currently being assessed\n   * @param _index - the index of the html element currently being assessed\n   * @returns void */\n  @Prop() isActiveHandler = (item: HTMLElement, _index: number) =>\n    item.classList.contains('active');\n\n  @Watch('isActiveHandler')\n  watchIsActiveHandler() {\n    this.instantReCalc = true;\n    this.activeItem = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n    setTimeout(() => (this.instantReCalc = false), 300);\n  }\n\n  /**\n   * Sync up the view to the active item.\n   * Use this when the active item changes outside of this component.\n   */\n  @Method()\n  async syncActiveItem() {\n    this.activeItem = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n  }\n\n  // private state\n\n  constructor() {\n    this.recalculatePositions = debounce(\n      this.recalculatePositions.bind(this),\n      80\n    );\n  }\n\n  private ro?: ResizeObserver;\n  private nav?: HTMLElement;\n  private itemContainer?: HTMLElement;\n  private isRtl?: boolean;\n  private endBtn: HTMLNanoIconButtonElement;\n  private startBtn: HTMLNanoIconButtonElement;\n  private activeIndicator: HTMLElement;\n  private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n  get scrollProp() {\n    return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n  }\n\n  get clientDimProp() {\n    return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n  }\n\n  get scrollOffset() {\n    return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n  }\n\n  @Element() host: HTMLNanoOverflowNavElement;\n\n  @State() instantReCalc = false;\n  @State() hasScrollControls = false;\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) this.handleScroll();\n    else this.hideControlStart = this.hideControlEnd = true;\n  }\n\n  @State() hideControlEnd = true;\n\n  @Watch('hideControlEnd')\n  hideEndBtn() {\n    if (!this.endBtn) return;\n    this.activateBtn(this.endBtn, !this.hideControlEnd);\n  }\n\n  @State() hideControlStart = true;\n\n  @Watch('hideControlStart')\n  hideStartBtn() {\n    if (!this.startBtn) return;\n    this.activateBtn(this.startBtn, !this.hideControlStart);\n  }\n\n  // private logic\n\n  private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n    if (!activate) {\n      btn.tabIndex = -1;\n      btn.disabled = true;\n      btn.classList.remove('is-shown');\n      return;\n    }\n    btn.tabIndex = 0;\n    btn.disabled = false;\n    btn.classList.add('is-shown');\n  }\n\n  get allActiveItems() {\n    return this.allItems.filter(\n      (el: any) => !el.disabled || el.classList.contains('disabled')\n    );\n  }\n\n  get allItems() {\n    return getDirectChildren<HTMLElement>(this.host, '*', true);\n  }\n\n  get activeItem() {\n    return this._activeItem;\n  }\n\n  set activeItem(item: HTMLElement) {\n    if (\n      !item ||\n      item === this.activeItem ||\n      (item as any).disabled ||\n      !this.allActiveItems.includes(item)\n    ) {\n      return;\n    }\n\n    this._activeItem = item;\n    this.allActiveItems.forEach((el, i) => {\n      if (el === this._activeItem) this.activeHandler(el, i);\n      else this.inActiveHandler(el, i);\n    });\n\n    this.recalculatePositions();\n  }\n  private _activeItem: HTMLElement;\n\n  get navDim() {\n    if (!this.nav) return 0;\n\n    const computedStyle = getComputedStyle(this.nav);\n    let clientDim = this.nav[this.clientDimProp];\n\n    if (this.orientation === 'horizontal') {\n      return (clientDim -=\n        parseFloat(computedStyle.paddingLeft) +\n        parseFloat(computedStyle.paddingRight));\n    } else {\n      return (clientDim -=\n        parseFloat(computedStyle.paddingTop) +\n        parseFloat(computedStyle.paddingBottom));\n    }\n  }\n\n  private scrollToActiveItem() {\n    if (!this.nav || !this.activeItem) return;\n    setTimeout(() => {\n      this.activeItem.scrollIntoView({\n        behavior: this.instantReCalc ? 'auto' : 'smooth',\n        block: 'center',\n        inline: 'center',\n      });\n    }, 100);\n  }\n\n  private syncActiveItemIndicator() {\n    if (!this.activeItem) return;\n\n    const item = this.activeItem;\n    const width = item.clientWidth || 0;\n    const height = item.clientHeight + 2 || 0;\n    const offset = getOffset(item, this.itemContainer);\n\n    if (!this.activeIndicator) return;\n\n    const offsetTop = offset.top;\n    const offsetLeft = offset.left;\n\n    if (this.instantReCalc) this.activeIndicator.style.transition = 'none';\n\n    switch (this.orientation) {\n      case 'horizontal':\n        this.activeIndicator.style.width = `${width}px`;\n        this.activeIndicator.style.height = null;\n        this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'vertical':\n        this.activeIndicator.style.width = null;\n        this.activeIndicator.style.height = `${height}px`;\n        this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n    setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n  }\n\n  private updateScrollControls = () => {\n    if (!this.nav) return;\n\n    this.hasScrollControls =\n      this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n      this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n    this.handleScroll();\n  };\n\n  private handleScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlStart = this.hideControlEnd = true;\n      return;\n    }\n    const finishEnd = this.isRtl\n      ? this.nav[this.scrollOffset] === 0\n      : Math.abs(\n          this.nav[this.clientDimProp] -\n            (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n        ) < 2;\n\n    const finishStart = this.isRtl\n      ? Math.abs(\n          this.nav[this.scrollProp] +\n            this.nav[this.scrollOffset] -\n            this.nav[this.clientDimProp]\n        ) < 2\n      : this.nav[this.scrollOffset] === 0;\n\n    if (finishStart) {\n      this.hideControlStart = true;\n      this.hideControlEnd = false;\n    } else if (finishEnd) {\n      this.hideControlStart = false;\n      this.hideControlEnd = true;\n    } else {\n      this.hideControlEnd = false;\n      this.hideControlStart = false;\n    }\n  };\n\n  private handleBtnClick = (goEnd: boolean = false) => {\n    const navDim = this.navDim;\n    let scrollAmt;\n    if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n    else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n    try {\n      this.nav.scroll({\n        left: this.orientation === 'horizontal' ? scrollAmt : 0,\n        top: this.orientation === 'vertical' ? scrollAmt : 0,\n        behavior: 'smooth',\n      });\n    } catch (_e) {\n      this.nav[this.scrollOffset] = scrollAmt;\n    }\n  };\n\n  private slotChangeHandler = () => {\n    if (this.allActiveItems.length < 2) return;\n    const item = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n    if (item) this.activeItem = item;\n    this.recalculatePositions();\n\n    /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */\n    this.allActiveItems.forEach((item) => {\n      if (this.mutationObservers.get(item)) return;\n\n      const mo = new MutationObserver(() => this.syncActiveItemIndicator());\n      mo.observe(item, {\n        characterData: true,\n        childList: true,\n        subtree: true,\n      });\n\n      this.mutationObservers.set(item, mo);\n    });\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.allActiveItems.length < 2) return;\n    const foundItem = event\n      .composedPath()\n      .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n    if (foundItem) this.activeItem = foundItem;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const foundItem = event\n        .composedPath()\n        .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n      if (foundItem) this.activeItem = foundItem;\n    }\n  };\n\n  private recalculatePositions = () => {\n    this.updateScrollControls();\n    this.syncActiveItemIndicator();\n    this.scrollToActiveItem();\n  };\n\n  // lifecycle\n\n  connectedCallback(): void {\n    this.instantReCalc = true;\n    this.isRtl =\n      this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n    if (window['MutationObserver']) this.slotChangeHandler();\n\n    if (!window['ResizeObserver']) return;\n\n    if (this.ro) {\n      this.ro.disconnect();\n      this.ro = undefined;\n    }\n    const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n    mo.observe(this.host);\n  }\n\n  componentDidLoad(): void {\n    this.activeItem = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n    this.instantReCalc = false;\n  }\n\n  disconnectedCallback(): void {\n    if (this.ro) {\n      this.ro.disconnect();\n      this.ro = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host dir={this.isRtl ? 'rtl' : null} class=\"nano-overflow-nav\">\n        <div\n          part=\"base\"\n          class={{\n            onav: true,\n            [`onav--${this.orientation}`]: true,\n            'onav--has-scroll-controls': this.hasScrollControls,\n            'onav--has-scroll-controls-start': !this.hideControlStart,\n            'onav--has-scroll-controls-end': !this.hideControlEnd,\n            'onav--no-transitions': this.instantReCalc,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"onav__nav\">\n            {this.scrollControls && (\n              <nano-icon-button\n                part=\"scroll-button scroll-button-prev\"\n                class={{\n                  'onav__scroll-button': true,\n                  'onav__scroll-button--start': true,\n                }}\n                ref={(btn) => (this.startBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n                label=\"Click to scroll\"\n                iconName={\n                  this.orientation === 'horizontal'\n                    ? 'light/chevron-left'\n                    : 'light/chevron-up'\n                }\n              />\n            )}\n\n            <div\n              part=\"scroller\"\n              ref={(el) => (this.nav = el)}\n              class=\"onav__scroller\"\n              onScroll={this.handleScroll}\n            >\n              <div\n                part=\"items\"\n                ref={(el) => (this.itemContainer = el)}\n                class=\"onav__items\"\n              >\n                <div\n                  part=\"indicator\"\n                  ref={(el) => (this.activeIndicator = el)}\n                  class=\"onav__active-indicator\"\n                />\n                <slot onSlotchange={this.slotChangeHandler} />\n              </div>\n            </div>\n\n            {this.scrollControls && (\n              <nano-icon-button\n                part=\"scroll-button scroll-button-next\"\n                class={{\n                  'onav__scroll-button': true,\n                  'onav__scroll-button--end': true,\n                }}\n                ref={(btn) => (this.endBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n                label=\"Click to scroll\"\n                iconName={\n                  this.orientation === 'horizontal'\n                    ? 'light/chevron-right'\n                    : 'light/chevron-down'\n                }\n              />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-progress-bar.js.map

@@ -1 +0,0 @@
-{"file":"nano-progress-bar.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}