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

package/dist/collection/components/tabs/tab-group.js

@@ -1,50 +1,52 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { Host, Build, } from "@stencil/core";
-import { getDirectChildren, getOffset } from "../../utils/dom";
-import { scrollIntoView } from "../../utils/scroll";
+import { Host, Build, forceUpdate, } from "@stencil/core";
+import { getDirectChildren } from "../../utils/dom";
 import { ComponentStore, } from "../../utils/store/component-store";
-import { createColorClasses } from "../../utils/theme";
-import { displayTransition } from "../../utils/transitions";
 import { transformTag, h } from "../../utils/renderer";
 let id = 0;
 /**
- * A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.
+ * Tab groups organize content into a container that shows one section at a time.
  *
- * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.
- * Horizontal tabs that don't fit will overflow and scroll appropriately.
- * Tab-content can also be swiped to change tabs.
+ * @version 1.0
+ * @status stable
  *
  * @slot tabs - Add `nano-tab` elements to add clickable tabs.
- * @slot tab-content-header - a header bar displayed above tab content.
  * @slot - Add `nano-tab-content` elements to add tabbable content.
  *
  * @part base - the main tab-group wrapper
  * @part nav - the bar surrounding all the tabs and nav buttons
  * @part tabs - the wrapper around the `nano-tab` components
+ * @part scroll-buttons - the button which appear when the tabs overflow
  * @part active-tab-indicator - the active indicator line
  * @part body - the wrapper around the `nano-tab-content` components
  */
-export class TabGroup {
+export class NanoTabGroup {
     baseId = `nano-tab-group-${++id}`;
     activeTab;
     activePanel;
-    activeTabIndicator;
-    nav;
-    tabs;
-    rightBtn;
-    leftBtn;
     isRtl;
     initialTouchX = null;
     initialTouchY = null;
-    resizeObserver;
-    mutationObservers = new WeakMap();
+    init = true;
+    _tab;
+    get tab() {
+        return this._tab;
+    }
+    set tab(tabName) {
+        if (this.activeTab && this.activeTab.panel === this._tab)
+            return;
+        const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
+        if (!selectedTabEle)
+            return;
+        if (!this.init && this.storeId) {
+            ComponentStore.update(this.storeId);
+        }
+        this._tab = tabName;
+        this.setActiveTab(selectedTabEle);
+    }
     host;
-    hasScrollControls = false;
-    hideControlRight = true;
-    hideControlLeft = true;
-    tab;
     /**
      * The placement of the tabs.
      */
@@ -53,60 +55,24 @@ export class TabGroup {
      * Disables the scroll arrows that appear when tabs overflow.
      */
     noScrollControls = false;
+    /** Make all tabs equal size. This is only recommended when there are a small number of tabs */
+    equalTabSize = false;
+    /** Size of tabs. Default is `regular`. `large` is only available when `placement="top"` */
+    size;
     /**
-     * The color to use from the application's color palette.
-     */
-    color;
-    /**
-     * Store the currently open tab (against this ID) in the component store.
-     * Use in conjunction with storeMethod
+     * Store the open tab against this ID in the component store.
+     * Use in combination with `storeMethod`
      */
     storeId;
     /**
      * The method of storage.
-     * Either session storage, url hash (after the '#') or url query (after the '?').
+     * Either session storage, url hash (after an '#') or url query (after an '?').
      */
-    storeMethod = 'session';
+    storeMethod = 'url-hash';
     /**
      * Disable 'swipe to change tab' on devices with touch
      */
     disableSwipe;
-    handleTabNameChange() {
-        if (this.activeTab && this.activeTab.panel === this.tab)
-            return;
-        const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);
-        this.setActiveTab(tab);
-    }
-    handlePlacementChange() {
-        this.syncActiveTabIndicator();
-    }
-    handleNoScrollControlsChange() {
-        this.updateScrollControls();
-    }
-    hideRightBtn() {
-        if (!this.rightBtn)
-            return;
-        displayTransition(this.rightBtn, {
-            className: 'is-shown',
-            show: !this.hideControlRight,
-        });
-    }
-    hideLeftBtn() {
-        if (!this.leftBtn)
-            return;
-        displayTransition(this.leftBtn, {
-            className: 'is-shown',
-            show: !this.hideControlLeft,
-        });
-    }
-    watchScrollControls() {
-        if (this.hasScrollControls)
-            setTimeout((_) => this.handleTabScroll(), 20);
-        else
-            setTimeout((_) => {
-                this.hideControlLeft = this.hideControlRight = true;
-            }, 20);
-    }
     /** Emitted when a tab is shown. */
     nanoTabShow;
     /** Emitted when a tab is hidden. */
@@ -136,17 +102,6 @@ export class TabGroup {
     get getActiveTab() {
         return this.getAllActiveTabs.find((el) => el.active);
     }
-    updateScrollControls = () => {
-        if (this.noScrollControls) {
-            this.hasScrollControls = false;
-        }
-        else {
-            this.hasScrollControls =
-                ['top'].includes(this.placement) &&
-                    this.nav.scrollWidth > this.nav.clientWidth &&
-                    this.nav.scrollWidth > this.tabs.clientWidth;
-        }
-    };
     setActiveTab(tab, emitEvents = true) {
         if (tab &&
             tab !== this.activeTab &&
@@ -166,11 +121,6 @@ export class TabGroup {
                     el.active = false;
                 el.removeAttribute('animation-dir');
             });
-            this.syncActiveTabIndicator();
-            // active tab can be changed on init - this won't be ready. No big thing
-            if (this.nav && ['top'].includes(this.placement)) {
-                scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');
-            }
             // Emit events
             if (emitEvents) {
                 if (previousTab) {
@@ -196,40 +146,6 @@ export class TabGroup {
             }
         });
     }
-    syncActiveTabIndicator() {
-        this.getAllTabs.forEach((tab) => tab.setAttribute('direction', this.placement === 'top' ? 'horizontal' : 'vertical'));
-        const tab = this.getActiveTab;
-        if (!tab)
-            return;
-        const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;
-        const height = tab.clientHeight;
-        const offset = getOffset(tab, this.tabs);
-        if (!this.activeTabIndicator)
-            return;
-        const offsetTop = offset.top + this.nav.scrollTop;
-        const offsetLeft = offset.left;
-        switch (this.placement) {
-            case 'top':
-                this.activeTabIndicator.style.width = `${width}px`;
-                this.activeTabIndicator.style.height = null;
-                this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;
-                break;
-            case 'start':
-                this.activeTabIndicator.style.width = null;
-                this.activeTabIndicator.style.height = `${height}px`;
-                this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;
-                break;
-        }
-    }
-    getNavWidth() {
-        if (!this.nav)
-            return 0;
-        const computedStyle = getComputedStyle(this.nav);
-        let clientWidth = this.nav.clientWidth;
-        return (clientWidth -=
-            parseFloat(computedStyle.paddingLeft) +
-                parseFloat(computedStyle.paddingRight));
-    }
     // Event handlers
     handleTabClose(ev) {
         let tabIndex = this.getAllActiveTabs.indexOf(ev.target);
@@ -253,6 +169,7 @@ export class TabGroup {
         tab.remove();
         panel.remove();
         this.nanoTabClose.emit({ name: tab.panel });
+        forceUpdate(this.host);
     }
     handleClick = (event) => {
         const target = event.target;
@@ -308,55 +225,11 @@ export class TabGroup {
                 index = Math.min(tabs.length - 1, index + 1);
         }
         tabs[index].setFocus();
-        if (this.placement === 'top') {
-            scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');
-        }
         // need to stop bubbling otherwise it will focus on parent tabs if nested
         event.stopPropagation();
         // stop the browser moving about
         event.preventDefault();
     };
-    handleTabScroll = () => {
-        if (!this.hasScrollControls) {
-            this.hideControlLeft = this.hideControlRight = true;
-            return;
-        }
-        const endRight = this.isRtl
-            ? this.nav.scrollLeft === 0
-            : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;
-        const endLeft = this.isRtl
-            ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth
-            : this.nav.scrollLeft === 0;
-        if (endLeft) {
-            this.hideControlLeft = true;
-            this.hideControlRight = false;
-        }
-        else if (endRight) {
-            this.hideControlLeft = false;
-            this.hideControlRight = true;
-        }
-        else {
-            this.hideControlRight = false;
-            this.hideControlLeft = false;
-        }
-    };
-    handleBtnClick = (goRight = false) => {
-        const navWidth = this.getNavWidth();
-        let leftAmt;
-        if (goRight)
-            leftAmt = this.nav.scrollLeft + navWidth - 20;
-        else
-            leftAmt = this.nav.scrollLeft - navWidth + 20;
-        try {
-            this.nav.scroll({
-                left: leftAmt,
-                behavior: 'smooth',
-            });
-        }
-        catch (_e) {
-            this.nav.scrollLeft = leftAmt;
-        }
-    };
     handleTouchStart = (event) => {
         if (this.disableSwipe)
             return;
@@ -399,57 +272,43 @@ export class TabGroup {
             this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
         });
     };
-    handleTabSlotChange = (ev) => {
+    handleTabSlotChange = () => {
         setTimeout(() => {
             this.setAriaLabels();
-            this.handleTabScroll();
             this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
-            this.updateScrollControls();
         }, 500);
-        /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */
-        const nodes = ev.target.assignedElements({ flatten: true });
-        nodes.forEach((node) => {
-            if (!this.mutationObservers.get(node)) {
-                const mo = new MutationObserver(() => {
-                    setTimeout(() => {
-                        this.syncActiveTabIndicator();
-                        this.handleTabScroll();
-                        this.updateScrollControls();
-                    }, 500);
-                });
-                this.mutationObservers.set(node, mo);
-                mo.observe(node, {
-                    characterData: true,
-                    childList: true,
-                    subtree: true,
-                });
-            }
-        });
     };
     // Stencil hooks
+    componentWillLoad() {
+        this.init = true;
+    }
     componentDidLoad() {
         // Initial IO - watching for all content to be loaded
         const observer = new IntersectionObserver((entries, observer) => {
             if (entries[0].intersectionRatio > 0) {
                 this.setAriaLabels();
-                this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
-                if (this.storeId)
+                if (this.storeId) {
                     ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);
+                    const store = ComponentStore.get(this.storeId);
+                    const storedTab = store.retrieve()?.tab;
+                    // if a tab is in storage, set it as active now
+                    if (storedTab && storedTab !== store.initialState?.tab) {
+                        this.getAllActiveTabs.forEach(element => {
+                            if (element.panel === storedTab) {
+                                element.active = true;
+                            }
+                            else {
+                                element.active = false;
+                            }
+                        });
+                    }
+                }
+                this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
                 observer.unobserve(entries[0].target);
+                this.init = false;
             }
         });
         observer.observe(this.host);
-        requestAnimationFrame(() => this.updateScrollControls());
-        if (!window['ResizeObserver'])
-            return;
-        this.resizeObserver = new ResizeObserver(() => {
-            setTimeout(() => {
-                this.updateScrollControls();
-                this.syncActiveTabIndicator();
-                scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');
-            }, 500);
-        });
-        this.resizeObserver.observe(this.nav);
     }
     connectedCallback() {
         this.isRtl =
@@ -459,26 +318,15 @@ export class TabGroup {
             this.setAriaLabels();
         }
     }
-    disconnectedCallback() {
-        if (this.resizeObserver)
-            this.resizeObserver.unobserve(this.nav);
-    }
     render() {
         this.isRtl = this.host.ownerDocument.dir === 'rtl';
-        return (h(Host, { key: 'babc67784c37d7ba1c148f2b6672d1e9b2deda19', class: { ...createColorClasses(this.color), 'nano-tab-group': true }, dir: this.isRtl ? 'rtl' : null }, h("div", { key: '7e290c2c4db866dab8444904b90c1abcf1fb8c95', part: "base", class: {
-                'nano-tab-group': true,
-                'nano-tab-group--top': this.placement === 'top',
-                'nano-tab-group--start': this.placement === 'start',
-                'nano-tab-group--has-scroll-controls': this.hasScrollControls,
-                'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,
-                'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'af7e627ddbeb08b811ec8b41e240ef1cd28ab7aa', class: "nano-tab-group__nav-container", part: "nav" }, this.placement === 'top' && (h("button", { key: '9b44ad15be0ec455ba92172edd98164a096f61f8', disabled: !this.hasScrollControls, class: {
-                'nano-tab-group__scroll-button': true,
-                'nano-tab-group__scroll-button--left': true,
-            }, ref: (btn) => (this.leftBtn = btn), onClick: () => this.handleBtnClick(false) }, h("nano-icon", { key: 'c649dadd477ebc80b84772e949103e52c9ef7412', name: "light/chevron-left", ariaLabel: "Scroll tabs towards the start" }))), h("div", { key: '5d013ca00f3adabc6c3571b08a985ca52e8fbc7b', ref: (el) => (this.nav = el), class: "nano-tab-group__nav", onScroll: this.handleTabScroll }, h("div", { key: '49b533c77d65eb3165dbded564c7eab9802688d8', ref: (el) => (this.tabs = el), part: "tabs", class: "nano-tab-group__tabs", role: "tablist", "aria-orientation": this.placement === 'start' ? 'vertical' : 'horizontal' }, h("div", { key: '281f29351daf0deae5895e5424956ece03e86b46', ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "nano-tab-group__active-tab-indicator" }), h("slot", { key: '2d3c27fe7b67b5c58368421b716cf0a29f435d78', name: "tabs", onSlotchange: this.handleTabSlotChange }))), this.placement === 'top' && (h("button", { key: '883cba058e294b9516a9cd8af6c85f1c50ddaec7', disabled: !this.hasScrollControls, class: {
-                'nano-tab-group__scroll-button': true,
-                'nano-tab-group__scroll-button--right': true,
-            }, ref: (btn) => (this.rightBtn = btn), onClick: () => this.handleBtnClick(true) }, h("nano-icon", { key: 'c3d70037fe6e12370f2e0547cdd98df1e95f3004', name: "light/chevron-right", ariaLabel: "Scroll tabs towards the end" })))), h("slot", { key: '2f1239ebc94dff329eb520388cd0da59d60190ba', name: "tab-content-header" }), h("div", { key: 'a13f28ad6ecc75c5702b92db8cea3be4cbe360d7', part: "body", class: "nano-tab-group__body", onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("slot", { key: '42e2b6133c478357b1a105af2961235bb4d0fe92', onSlotchange: this.handleContentSlotChange })))));
+        if (this.getAllTabs.length === 0)
+            return;
+        return (h(Host, { dir: this.isRtl ? 'rtl' : null, class: "nano-tab-group" }, h("div", { part: "base", class: {
+                group: true,
+                'group--top': this.placement === 'top',
+                'group--start': this.placement === 'start',
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("nano-masked-overflow", { role: "nav", class: "group__tabs", part: "tabs__wrapper", exportparts: "items:tabs, scroll-button:tabs__scroll-button, indicator:active-tab-indicator", orientation: this.placement === 'top' ? 'horizontal' : 'vertical', isActiveHandler: (itm) => this.activeTab === itm, scrollControls: !this.noScrollControls, hideScrollbars: true }, h("slot", { name: "tabs", onSlotchange: this.handleTabSlotChange }), h("div", { class: "group__tabs-border" })), h("div", { part: "body", class: "group__body", onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("slot", { onSlotchange: this.handleContentSlotChange })))));
     }
     static get is() { return "nano-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -496,6 +344,7 @@ export class TabGroup {
         return {
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'start'",
@@ -510,12 +359,12 @@ export class TabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": true,
                 "defaultValue": "'top'"
             },
             "noScrollControls": {
                 "type": "boolean",
+                "attribute": "no-scroll-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -530,37 +379,51 @@ export class TabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-scroll-controls",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "color": {
+            "equalTabSize": {
+                "type": "boolean",
+                "attribute": "equal-tab-size",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make all tabs equal size. This is only recommended when there are a small number of tabs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
-                    "original": "Color",
-                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
-                    "references": {
-                        "Color": {
-                            "location": "import",
-                            "path": "../../types/shared",
-                            "id": "src/types/shared.ts::Color"
-                        }
-                    }
+                    "original": "'regular' | 'large'",
+                    "resolved": "\"large\" | \"regular\"",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The color to use from the application's color palette."
+                    "text": "Size of tabs. Default is `regular`. `large` is only available when `placement=\"top\"`"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
-                "reflect": false
+                "reflect": true
             },
             "storeId": {
                 "type": "string",
+                "attribute": "store-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -571,15 +434,15 @@ export class TabGroup {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Store the currently open tab (against this ID) in the component store.\nUse in conjunction with storeMethod"
+                    "text": "Store the open tab against this ID in the component store.\nUse in combination with `storeMethod`"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "store-id",
                 "reflect": false
             },
             "storeMethod": {
                 "type": "string",
+                "attribute": "store-method",
                 "mutable": false,
                 "complexType": {
                     "original": "StorageMethods",
@@ -596,16 +459,16 @@ export class TabGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The method of storage.\nEither session storage, url hash (after the '#') or url query (after the '?')."
+                    "text": "The method of storage.\nEither session storage, url hash (after an '#') or url query (after an '?')."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "store-method",
                 "reflect": false,
-                "defaultValue": "'session'"
+                "defaultValue": "'url-hash'"
             },
             "disableSwipe": {
                 "type": "boolean",
+                "attribute": "disable-swipe",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -620,19 +483,10 @@ export class TabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disable-swipe",
                 "reflect": false
             }
         };
     }
-    static get states() {
-        return {
-            "hasScrollControls": {},
-            "hideControlRight": {},
-            "hideControlLeft": {},
-            "tab": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "nanoTabShow",
@@ -722,27 +576,6 @@ export class TabGroup {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "tab",
-                "methodName": "handleTabNameChange"
-            }, {
-                "propName": "placement",
-                "methodName": "handlePlacementChange"
-            }, {
-                "propName": "noScrollControls",
-                "methodName": "handleNoScrollControlsChange"
-            }, {
-                "propName": "hideControlRight",
-                "methodName": "hideRightBtn"
-            }, {
-                "propName": "hideControlLeft",
-                "methodName": "hideLeftBtn"
-            }, {
-                "propName": "hasScrollControls",
-                "methodName": "watchScrollControls"
-            }];
-    }
     static get listeners() {
         return [{
                 "name": "nanoTabClose",
@@ -753,4 +586,3 @@ export class TabGroup {
             }];
     }
 }
-//# sourceMappingURL=tab-group.js.map