@nanoporetech-digital/components 3.14.0 → 4.1.0

package/dist/collection/components/global-nav/style/global-nav.css

@@ -232,9 +232,9 @@
 }
 .main-bar .nav-links--main {
   justify-content: flex-start;
-  letter-spacing: 0.5px;
-  font-weight: 500;
-  font-stretch: expanded;
+  letter-spacing: 1.5px;
+  font-weight: 600;
+  font-stretch: condensed;
   text-transform: uppercase;
   font-size: 1.065em;
   -webkit-margin-end: auto;
@@ -272,8 +272,9 @@
 .sticker-trigger {
   background: var(--bar-background);
   width: 100%;
-  z-index: calc(var(--nano-layer-index-menubar, 10) + 1);
   height: 1px;
+  z-index: 20;
+  position: relative;
 }
 .sticker-trigger + .sticker-trigger {
   display: none;
@@ -661,7 +662,9 @@ nano-select.search-input {
   --nano-input-border-color: rgb(103 138 154);
   --padding-end: var(--bar-item-spacing);
   --nano-input-border-color--focus: black;
-  font-stretch: expanded;
+  font-stretch: condensed;
+  font-weight: 600;
+  letter-spacing: 1.5px;
   font-size: 1.2em;
   flex: 0 1 auto;
   width: auto;

package/dist/collection/components/img/img.css

@@ -77,7 +77,7 @@
 .img__image.loaded,
 .img__bg.loaded {
   opacity: 1;
-  filter: blur(0.1px);
+  filter: blur(0);
 }
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) {

package/dist/collection/components/overflow-nav/overflow-nav.css

@@ -0,0 +1,223 @@
+:host {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+:host {
+  /**
+  * @prop --indicator-transition. Defaults to var(--nano-transition-fast, 0.3s)
+  * @prop --indicator-color. Defaults to #90c6e7;
+  * @prop --indicator-size. Defaults to 0;
+  * @prop --indicator-track-color. Defaults to #e4e6e8;
+  * @prop --indicator-track-size. Defaults to var(--indicator-size);
+
+  * @prop --scroll-btn-color. Defaults to 'currentColor';
+  * @prop --fade-size. The size of the fade areas (when items do not fit). Defaults to 1.75rem;
+  * @prop --fade-transparency. Defaults to 0;
+  *
+  * @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);
+  */
+  --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__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;
+  width: 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-x: auto;
+  overflow-y: 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), black calc(var(--fade-size) * 2), black 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), black calc(var(--fade-size) * 2), black 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 0;
+}
+.onav--horizontal.onav--has-scroll-controls .onav__scroller {
+  padding-inline: var(--fade-size) 0;
+  -webkit-padding-before: 0;
+          padding-block-start: 0;
+  -webkit-padding-after: 0;
+          padding-block-end: 0;
+}
+.onav--horizontal .onav__items {
+  flex-direction: row;
+}
+.onav--horizontal .onav__items::before {
+  content: "";
+  width: 100%;
+  height: var(--indicator-track-size);
+  inset-block-end: 0;
+}
+.onav--horizontal .onav__active-indicator {
+  inset-block-end: 0;
+  -webkit-border-after: solid var(--indicator-size) var(--indicator-color);
+          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 {
+  width: 100%;
+}
+.onav--vertical .onav__nav {
+  max-height: 100%;
+  display: flex;
+}
+.onav--vertical .onav__scroller {
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-direction: column;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  padding-block: var(--padding);
+  -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), black calc(var(--fade-size) * 2), black 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), black calc(var(--fade-size) * 2), black 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 0;
+  -webkit-padding-before: calc(var(--fade-size) + 12px);
+          padding-block-start: calc(var(--fade-size) + 12px);
+  -webkit-padding-after: var(--fade-size);
+          padding-block-end: var(--fade-size);
+}
+.onav--vertical .onav__scroller::after {
+  padding-inline: 0 0;
+  padding-block: 0 var(--fade-size);
+}
+.onav--vertical .onav__items {
+  flex-direction: column;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.onav--vertical .onav__items::before {
+  content: "";
+  height: 100%;
+  width: var(--indicator-track-size);
+  inset-inline-start: 0;
+}
+.onav--vertical .onav__active-indicator {
+  inset-inline-start: 0;
+  -webkit-border-start: solid var(--indicator-size) var(--indicator-color);
+          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;
+}

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

@@ -0,0 +1,441 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { Host, h, } from '@stencil/core';
+import { getDirectChildren, getOffset } from '../../utils/dom';
+import { debounce } from '../../utils/throttle';
+/**
+ * Primarily used to display navigational items that may not fit on smaller screens.
+ *
+ * - Accepts any collection of elements
+ * - Gives visual cues of 'more' with auto display fade effect and scroll buttons
+ * - Auto scrolls to the active item onload
+ *
+ * @slot - Default slot to place items.
+ *
+ * @part base - root, wrapper element
+ * @part scroller - the scrolling element
+ * @part items - the item wrapper element
+ * @part indicator - the animated, indicator element
+ * @part scroll-button - The buttons shown at either side of the scrolling area
+ * @part scroll-button-prev - The button shown at the start of the scrolling area
+ * @part scroll-button-next - The button shown at the end of the scrolling area
+ */
+export class OverflowNav {
+  // private state
+  constructor() {
+    this.updateScrollControls = () => {
+      this.hasScrollControls =
+        this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&
+          this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];
+      this.handleScroll();
+    };
+    this.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;
+      }
+    };
+    this.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;
+      }
+    };
+    this.slotChangeHandler = () => {
+      if (this.allActiveItems.length < 2)
+        return;
+      const item = this.allActiveItems.find((el) => this.isActiveHandler(el));
+      if (item)
+        this.activeItem = item;
+      this.recalculatePositions();
+    };
+    this.handleClick = (event) => {
+      if (this.allActiveItems.length < 2)
+        return;
+      const foundItem = event
+        .composedPath()
+        .find((e) => this.allActiveItems.includes(e));
+      if (foundItem)
+        this.activeItem = foundItem;
+    };
+    this.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;
+      }
+    };
+    this.recalculatePositions = (init) => {
+      this.updateScrollControls();
+      this.syncActiveItemIndicator(init);
+      setTimeout(() => this.scrollToActiveItem(init), 300);
+    };
+    this.scrollControls = true;
+    this.orientation = 'horizontal';
+    this.activeHandler = (item) => item.classList.add('active');
+    this.inActiveHandler = (item) => item.classList.remove('active');
+    this.isActiveHandler = (item) => item.classList.contains('active');
+    this.hasScrollControls = false;
+    this.hideControlEnd = true;
+    this.hideControlStart = true;
+    this.recalculatePositions = debounce(this.recalculatePositions, 50);
+  }
+  get scrollProp() {
+    return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';
+  }
+  get clientDimProp() {
+    return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';
+  }
+  get scrollOffset() {
+    return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';
+  }
+  watchScrollControls() {
+    if (this.hasScrollControls)
+      this.handleScroll();
+    else
+      this.hideControlStart = this.hideControlEnd = true;
+  }
+  hideEndBtn() {
+    if (!this.endBtn)
+      return;
+    this.activateBtn(this.endBtn, !this.hideControlEnd);
+  }
+  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() {
+    if (this._activeItem)
+      return this._activeItem;
+    return this.allActiveItems.find((el) => this.isActiveHandler(el));
+  }
+  set activeItem(item) {
+    if (!item ||
+      item === this.activeItem ||
+      item.disabled ||
+      !this.allActiveItems.includes(item)) {
+      return;
+    }
+    this._activeItem = item;
+    this.allActiveItems.forEach((el) => {
+      if (el === this._activeItem)
+        this.activeHandler(el);
+      else
+        this.inActiveHandler(el);
+    });
+    this.syncActiveItemIndicator();
+    this.scrollToActiveItem();
+  }
+  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(instant) {
+    if (!this.nav || !this.activeItem)
+      return;
+    requestAnimationFrame(() => {
+      this.activeItem.scrollIntoView({
+        behavior: instant ? 'auto' : 'smooth',
+        block: 'center',
+        inline: 'center',
+      });
+    });
+  }
+  syncActiveItemIndicator(instant) {
+    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 (instant)
+      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);
+  }
+  // lifecycle
+  connectedCallback() {
+    this.isRtl =
+      this.orientation === 'horizontal' && !!this.host.closest('[dir="rtl"]');
+    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.recalculatePositions(true);
+  }
+  disconnectedCallback() {
+    if (this.ro) {
+      this.ro.disconnect();
+      this.ro = undefined;
+    }
+  }
+  render() {
+    return (h(Host, { dir: this.isRtl ? 'rtl' : null }, h("div", { 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,
+      }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { 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", { part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll }, h("div", { part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, h("div", { part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" }), h("slot", { onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { 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 is() { return "nano-overflow-nav"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["overflow-nav.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["overflow-nav.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "scrollControls": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the scroll arrow buttons that appear when content overflows"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "scroll-controls",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'horizontal' | 'vertical'",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The flex direction of the element"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "orientation",
+        "reflect": true,
+        "defaultValue": "'horizontal'"
+      },
+      "activeHandler": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(item: HTMLElement) => void",
+          "resolved": "(item: HTMLElement) => void",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "param",
+              "text": "item"
+            }, {
+              "name": "returns",
+              "text": "void"
+            }],
+          "text": "A function called when an item becomes 'active' (via click or keyboard)"
+        },
+        "getter": false,
+        "setter": false,
+        "defaultValue": "(item: HTMLElement) => item.classList.add('active')"
+      },
+      "inActiveHandler": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(item: HTMLElement) => void",
+          "resolved": "(item: HTMLElement) => void",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "param",
+              "text": "item"
+            }, {
+              "name": "returns",
+              "text": "void"
+            }],
+          "text": "A function called when an item becomes 'inactive'\n(because another item was made active)"
+        },
+        "getter": false,
+        "setter": false,
+        "defaultValue": "(item: HTMLElement) =>\n    item.classList.remove('active')"
+      },
+      "isActiveHandler": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(item: HTMLElement) => boolean",
+          "resolved": "(item: HTMLElement) => boolean",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "param",
+              "text": "item"
+            }, {
+              "name": "returns",
+              "text": "void"
+            }],
+          "text": "A function called to assess an initial, active item"
+        },
+        "getter": false,
+        "setter": false,
+        "defaultValue": "(item: HTMLElement) =>\n    item.classList.contains('active')"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasScrollControls": {},
+      "hideControlEnd": {},
+      "hideControlStart": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "hasScrollControls",
+        "methodName": "watchScrollControls"
+      }, {
+        "propName": "hideControlEnd",
+        "methodName": "hideEndBtn"
+      }, {
+        "propName": "hideControlStart",
+        "methodName": "hideStartBtn"
+      }];
+  }
+}
+//# sourceMappingURL=overflow-nav.js.map