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

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

@@ -1,537 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import { Host, } from "@stencil/core";
-import { h } from "../../utils/renderer";
-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 {
-    // 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() {
-        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';
-    }
-    host;
-    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 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, _index: number) => void",
-                    "resolved": "(item: HTMLElement, _index: number) => void",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "param",
-                            "text": "item - html element currently being assessed"
-                        }, {
-                            "name": "param",
-                            "text": "_index - the index of the html element currently being assessed"
-                        }, {
-                            "name": "returns",
-                            "text": "void"
-                        }],
-                    "text": "A function called when an item becomes 'active' (via click or keyboard)"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "(item: HTMLElement, _index: number) =>\n    item.classList.add('active')"
-            },
-            "inActiveHandler": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(item: HTMLElement, _index: number) => void",
-                    "resolved": "(item: HTMLElement, _index: number) => void",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "param",
-                            "text": "item - html element currently being assessed"
-                        }, {
-                            "name": "param",
-                            "text": "_index - the index of the html element currently being assessed"
-                        }, {
-                            "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, _index: number) =>\n    item.classList.remove('active')"
-            },
-            "isActiveHandler": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(item: HTMLElement, _index: number) => boolean",
-                    "resolved": "(item: HTMLElement, _index: number) => boolean",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "param",
-                            "text": "item - html element currently being assessed"
-                        }, {
-                            "name": "param",
-                            "text": "_index - the index of the html element currently being assessed"
-                        }, {
-                            "name": "returns",
-                            "text": "void"
-                        }],
-                    "text": "A function called to assess an initial, active item"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "(item: HTMLElement, _index: number) =>\n    item.classList.contains('active')"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "instantReCalc": {},
-            "hasScrollControls": {},
-            "hideControlEnd": {},
-            "hideControlStart": {}
-        };
-    }
-    static get methods() {
-        return {
-            "syncActiveItem": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sync up the view to the active item.\nUse this when the active item changes outside of this component.",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "isActiveHandler",
-                "methodName": "watchIsActiveHandler"
-            }, {
-                "propName": "hasScrollControls",
-                "methodName": "watchScrollControls"
-            }, {
-                "propName": "hideControlEnd",
-                "methodName": "hideEndBtn"
-            }, {
-                "propName": "hideControlStart",
-                "methodName": "hideStartBtn"
-            }];
-    }
-}
-//# sourceMappingURL=overflow-nav.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"overflow-nav.js","sourceRoot":"","sources":["../../../../src/components/overflow-nav/overflow-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;;;;;;;;;;;;GAgBG;AAOH,MAAM,OAAO,WAAW;IACtB,iBAAiB;IAEjB,2EAA2E;IACnE,cAAc,GAAG,IAAI,CAAC;IAE9B,wCAAwC;IACf,WAAW,GAClC,YAAY,CAAC;IAEf;;;;uBAImB;IACX,aAAa,GAAG,CAAC,IAAiB,EAAE,MAAc,EAAE,EAAE,CAC5D,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAE/B;;;;;uBAKmB;IACX,eAAe,GAAG,CAAC,IAAiB,EAAE,MAAc,EAAE,EAAE,CAC9D,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAElC;;;;uBAImB;IACX,eAAe,GAAG,CAAC,IAAiB,EAAE,MAAc,EAAE,EAAE,CAC9D,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAGpC,oBAAoB;QAClB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CACnD,IAAI,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC,CAC5B,CAAC;QACF,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;IACtD,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CACnD,IAAI,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC,CAC5B,CAAC;IACJ,CAAC;IAED,gBAAgB;IAEhB;QACE,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAClC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,EAAE,CACH,CAAC;KACH;IAEO,EAAE,CAAkB;IACpB,GAAG,CAAe;IAClB,aAAa,CAAe;IAC5B,KAAK,CAAW;IAChB,MAAM,CAA4B;IAClC,QAAQ,CAA4B;IACpC,eAAe,CAAc;IAC7B,iBAAiB,GAAoC,IAAI,OAAO,EAAE,CAAC;IAE3E,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC;IAC5E,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC;IAC5E,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC;IACxE,CAAC;IAEU,IAAI,CAA6B;IAEnC,aAAa,GAAG,KAAK,CAAC;IACtB,iBAAiB,GAAG,KAAK,CAAC;IAGnC,mBAAmB;QACjB,IAAI,IAAI,CAAC,iBAAiB;YAAE,IAAI,CAAC,YAAY,EAAE,CAAC;;YAC3C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC1D,CAAC;IAEQ,cAAc,GAAG,IAAI,CAAC;IAG/B,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACtD,CAAC;IAEQ,gBAAgB,GAAG,IAAI,CAAC;IAGjC,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC1D,CAAC;IAED,gBAAgB;IAER,WAAW,CAAC,GAA8B,EAAE,QAAQ,GAAG,IAAI;QACjE,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YAClB,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;YACpB,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACjC,OAAO;QACT,CAAC;QACD,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC;QACjB,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;QACrB,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CACzB,CAAC,EAAO,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,IAAI,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAC/D,CAAC;IACJ,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,iBAAiB,CAAc,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;IAC9D,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,UAAU,CAAC,IAAiB;QAC9B,IACE,CAAC,IAAI;YACL,IAAI,KAAK,IAAI,CAAC,UAAU;YACvB,IAAY,CAAC,QAAQ;YACtB,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EACnC,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;YACpC,IAAI,EAAE,KAAK,IAAI,CAAC,WAAW;gBAAE,IAAI,CAAC,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;;gBAClD,IAAI,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IACO,WAAW,CAAc;IAEjC,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,GAAG;YAAE,OAAO,CAAC,CAAC;QAExB,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjD,IAAI,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAE7C,IAAI,IAAI,CAAC,WAAW,KAAK,YAAY,EAAE,CAAC;YACtC,OAAO,CAAC,SAAS;gBACf,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC;oBACrC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,SAAS;gBACf,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC;oBACpC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAC1C,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC;gBAC7B,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;gBAChD,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,QAAQ;aACjB,CAAC,CAAC;QACL,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,uBAAuB;QAC7B,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAE7B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC;QAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAEnD,IAAI,CAAC,IAAI,CAAC,eAAe;YAAE,OAAO;QAElC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC;QAC7B,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC;QAE/B,IAAI,IAAI,CAAC,aAAa;YAAE,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;QAEvE,QAAQ,IAAI,CAAC,WAAW,EAAE,CAAC;YACzB,KAAK,YAAY;gBACf,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;gBAChD,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;gBACzC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,UAAU,KAAK,CAAC;gBACrE,MAAM;YAER,KAAK,UAAU;gBACb,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;gBACxC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC;gBAClD,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,SAAS,KAAK,CAAC;gBACpE,MAAM;QACV,CAAC;QACD,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;IACxE,CAAC;IAEO,oBAAoB,GAAG,GAAG,EAAE;QAClC,IAAI,CAAC,IAAI,CAAC,GAAG;YAAE,OAAO;QAEtB,IAAI,CAAC,iBAAiB;YACpB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;gBACxD,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACrE,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC,CAAC;IAEM,YAAY,GAAG,GAAG,EAAE;QAC1B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC5B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YACnD,OAAO;QACT,CAAC;QACD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;YAC1B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YACnC,CAAC,CAAC,IAAI,CAAC,GAAG,CACN,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;gBAC1B,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAC5D,GAAG,CAAC,CAAC;QAEV,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK;YAC5B,CAAC,CAAC,IAAI,CAAC,GAAG,CACN,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;gBACvB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;gBAC3B,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAC/B,GAAG,CAAC;YACP,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAEtC,IAAI,WAAW,EAAE,CAAC;YAChB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC7B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC9B,CAAC;aAAM,IAAI,SAAS,EAAE,CAAC;YACrB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAChC,CAAC;IACH,CAAC,CAAC;IAEM,cAAc,GAAG,CAAC,QAAiB,KAAK,EAAE,EAAE;QAClD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,SAAS,CAAC;QACd,IAAI,KAAK;YAAE,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,MAAM,GAAG,EAAE,CAAC;;YAC5D,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,MAAM,GAAG,EAAE,CAAC;QAE3D,IAAI,CAAC;YACH,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC;gBACd,IAAI,EAAE,IAAI,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;gBACvD,GAAG,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;gBACpD,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;QACL,CAAC;QAAC,OAAO,EAAE,EAAE,CAAC;YACZ,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC;QAC1C,CAAC;IACH,CAAC,CAAC;IAEM,iBAAiB,GAAG,GAAG,EAAE;QAC/B,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO;QAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAC9C,IAAI,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC,CAC5B,CAAC;QACF,IAAI,IAAI;YAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACjC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,qGAAqG;QACrG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACnC,IAAI,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC;gBAAE,OAAO;YAE7C,MAAM,EAAE,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,CAAC,CAAC;YACtE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;gBACf,aAAa,EAAE,IAAI;gBACnB,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;YAEH,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACvC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC1C,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO;QAC3C,MAAM,SAAS,GAAG,KAAK;aACpB,YAAY,EAAE;aACd,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAQ,CAAC,CAAgB,CAAC;QACtE,IAAI,SAAS;YAAE,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;IAC7C,CAAC,CAAC;IAEM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC/C,iBAAiB;QACjB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;YACvC,MAAM,SAAS,GAAG,KAAK;iBACpB,YAAY,EAAE;iBACd,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAQ,CAAC,CAAgB,CAAC;YACtE,IAAI,SAAS;gBAAE,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC7C,CAAC;IACH,CAAC,CAAC;IAEM,oBAAoB,GAAG,GAAG,EAAE;QAClC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEF,YAAY;IAEZ,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,KAAK;YACR,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAE1E,IAAI,MAAM,CAAC,kBAAkB,CAAC;YAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEzD,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;YAAE,OAAO;QAEtC,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;YACZ,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;QACtB,CAAC;QACD,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;QACrE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CACnD,IAAI,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC,CAC5B,CAAC;QACF,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;YACZ,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAC,mBAAmB;YAC7D,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI;oBACV,CAAC,SAAS,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;oBACnC,2BAA2B,EAAE,IAAI,CAAC,iBAAiB;oBACnD,iCAAiC,EAAE,CAAC,IAAI,CAAC,gBAAgB;oBACzD,+BAA+B,EAAE,CAAC,IAAI,CAAC,cAAc;oBACrD,sBAAsB,EAAE,IAAI,CAAC,aAAa;iBAC3C,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;gBAE7B,4DAAK,KAAK,EAAC,WAAW;oBACnB,IAAI,CAAC,cAAc,IAAI,CACtB,yEACE,IAAI,EAAC,kCAAkC,EACvC,KAAK,EAAE;4BACL,qBAAqB,EAAE,IAAI;4BAC3B,4BAA4B,EAAE,IAAI;yBACnC,EACD,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EACzC,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EACN,IAAI,CAAC,WAAW,KAAK,YAAY;4BAC/B,CAAC,CAAC,oBAAoB;4BACtB,CAAC,CAAC,kBAAkB,GAExB,CACH;oBAED,4DACE,IAAI,EAAC,UAAU,EACf,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAE,IAAI,CAAC,YAAY;wBAE3B,4DACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EACtC,KAAK,EAAC,aAAa;4BAEnB,4DACE,IAAI,EAAC,WAAW,EAChB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,EACxC,KAAK,EAAC,wBAAwB,GAC9B;4BACF,6DAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,GAAI,CAC1C,CACF;oBAEL,IAAI,CAAC,cAAc,IAAI,CACtB,yEACE,IAAI,EAAC,kCAAkC,EACvC,KAAK,EAAE;4BACL,qBAAqB,EAAE,IAAI;4BAC3B,0BAA0B,EAAE,IAAI;yBACjC,EACD,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EACxC,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EACN,IAAI,CAAC,WAAW,KAAK,YAAY;4BAC/B,CAAC,CAAC,qBAAqB;4BACvB,CAAC,CAAC,oBAAoB,GAE1B,CACH,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAEzC;;;;;;;;GAQG;AAOH,MAAM,OAAO,WAAW;IACX,IAAI,CAA6B;IAE5C,+CAA+C;IACvC,KAAK,GAAG,CAAC,CAAC;IAElB,sHAAsH;IAC9G,aAAa,GAAG,KAAK,CAAC;IAE9B,oHAAoH;IAC5G,WAAW,GAAG,KAAK,CAAC;IAE5B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB;YAC7B,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI;oBACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;iBAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;gBAErD,4DACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;wBACL,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS;qBAC1D;oBAED,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;wBAC5C,+DACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW;4BACtC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG;4BAClB,CAAC,CAAC,EAAE,CACD,CACF,CACH,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Element, Host } from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'nano-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true,\n})\nexport class ProgressBar {\n  @Element() host: HTMLNanoProgressBarElement;\n\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() value = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class=\"nano-progress-bar\">\n        <div\n          part=\"base\"\n          class={{\n            'progress-bar': true,\n            'progress-bar--indeterminate': this.indeterminate,\n          }}\n          role=\"progressbar\"\n          title={this.host.title || undefined}\n          aria-label=\"Progress\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          aria-valuenow={this.indeterminate ? null : this.value}\n        >\n          <div\n            part=\"indicator\"\n            class=\"progress-bar__indicator\"\n            style={{\n              width: !this.indeterminate ? `${this.value}%` : undefined,\n            }}\n          >\n            <span part=\"label\" class=\"progress-bar__label\">\n              <slot>\n                {!this.indeterminate && this.showPercent\n                  ? `${this.value}%`\n                  : ''}\n              </slot>\n            </span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}