@nanoporetech-digital/components 9.1.4 → 9.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/nano-tab-group.cjs.entry.js +5 -1
- package/dist/collection/components/tabs/tab-group.js +5 -1
- package/dist/components/nano-tab-group.js +5 -1
- package/dist/esm/nano-tab-group.entry.js +5 -1
- package/dist/nano-components/nano-tab-group.entry.js +1 -1
- package/dist/types/components/tabs/tab-group.d.ts +1 -0
- package/docs-json.json +1 -1
- package/hydrate/index.js +5 -1
- package/hydrate/index.mjs +5 -1
- package/package.json +2 -2
|
@@ -27,12 +27,14 @@ const NanoTabGroup = class {
|
|
|
27
27
|
initialTouchX = null;
|
|
28
28
|
initialTouchY = null;
|
|
29
29
|
init = true;
|
|
30
|
+
defaultTab = null;
|
|
30
31
|
_tab;
|
|
31
32
|
get tab() {
|
|
32
33
|
return this._tab;
|
|
33
34
|
}
|
|
34
35
|
set tab(tabName) {
|
|
35
|
-
|
|
36
|
+
tabName = tabName || this.defaultTab;
|
|
37
|
+
if (this._tab === tabName)
|
|
36
38
|
return;
|
|
37
39
|
const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
|
|
38
40
|
if (!selectedTabEle)
|
|
@@ -301,6 +303,8 @@ const NanoTabGroup = class {
|
|
|
301
303
|
}
|
|
302
304
|
}
|
|
303
305
|
this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
|
|
306
|
+
this.defaultTab =
|
|
307
|
+
this.activeTab?.panel || this.getAllActiveTabs[0]?.panel;
|
|
304
308
|
observer.unobserve(entries[0].target);
|
|
305
309
|
this.init = false;
|
|
306
310
|
}
|
|
@@ -30,12 +30,14 @@ export class NanoTabGroup {
|
|
|
30
30
|
initialTouchX = null;
|
|
31
31
|
initialTouchY = null;
|
|
32
32
|
init = true;
|
|
33
|
+
defaultTab = null;
|
|
33
34
|
_tab;
|
|
34
35
|
get tab() {
|
|
35
36
|
return this._tab;
|
|
36
37
|
}
|
|
37
38
|
set tab(tabName) {
|
|
38
|
-
|
|
39
|
+
tabName = tabName || this.defaultTab;
|
|
40
|
+
if (this._tab === tabName)
|
|
39
41
|
return;
|
|
40
42
|
const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
|
|
41
43
|
if (!selectedTabEle)
|
|
@@ -304,6 +306,8 @@ export class NanoTabGroup {
|
|
|
304
306
|
}
|
|
305
307
|
}
|
|
306
308
|
this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
|
|
309
|
+
this.defaultTab =
|
|
310
|
+
this.activeTab?.panel || this.getAllActiveTabs[0]?.panel;
|
|
307
311
|
observer.unobserve(entries[0].target);
|
|
308
312
|
this.init = false;
|
|
309
313
|
}
|
|
@@ -30,12 +30,14 @@ const NanoTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class NanoTabGroup exten
|
|
|
30
30
|
initialTouchX = null;
|
|
31
31
|
initialTouchY = null;
|
|
32
32
|
init = true;
|
|
33
|
+
defaultTab = null;
|
|
33
34
|
_tab;
|
|
34
35
|
get tab() {
|
|
35
36
|
return this._tab;
|
|
36
37
|
}
|
|
37
38
|
set tab(tabName) {
|
|
38
|
-
|
|
39
|
+
tabName = tabName || this.defaultTab;
|
|
40
|
+
if (this._tab === tabName)
|
|
39
41
|
return;
|
|
40
42
|
const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
|
|
41
43
|
if (!selectedTabEle)
|
|
@@ -304,6 +306,8 @@ const NanoTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class NanoTabGroup exten
|
|
|
304
306
|
}
|
|
305
307
|
}
|
|
306
308
|
this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
|
|
309
|
+
this.defaultTab =
|
|
310
|
+
this.activeTab?.panel || this.getAllActiveTabs[0]?.panel;
|
|
307
311
|
observer.unobserve(entries[0].target);
|
|
308
312
|
this.init = false;
|
|
309
313
|
}
|
|
@@ -25,12 +25,14 @@ const NanoTabGroup = class {
|
|
|
25
25
|
initialTouchX = null;
|
|
26
26
|
initialTouchY = null;
|
|
27
27
|
init = true;
|
|
28
|
+
defaultTab = null;
|
|
28
29
|
_tab;
|
|
29
30
|
get tab() {
|
|
30
31
|
return this._tab;
|
|
31
32
|
}
|
|
32
33
|
set tab(tabName) {
|
|
33
|
-
|
|
34
|
+
tabName = tabName || this.defaultTab;
|
|
35
|
+
if (this._tab === tabName)
|
|
34
36
|
return;
|
|
35
37
|
const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
|
|
36
38
|
if (!selectedTabEle)
|
|
@@ -299,6 +301,8 @@ const NanoTabGroup = class {
|
|
|
299
301
|
}
|
|
300
302
|
}
|
|
301
303
|
this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
|
|
304
|
+
this.defaultTab =
|
|
305
|
+
this.activeTab?.panel || this.getAllActiveTabs[0]?.panel;
|
|
302
306
|
observer.unobserve(entries[0].target);
|
|
303
307
|
this.init = false;
|
|
304
308
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{r as t,c as
|
|
4
|
+
import{r as t,c as i,a as o,k as s,d as r}from"./index-RXFO3HxS.js";import{g as a}from"./dom-DiLhOqyz.js";import{C as n}from"./component-store-DCcnMDT0.js";import{t as e,h}from"./renderer-B_wACs4w.js";import"./throttle-C93FMm2Z.js";let l=0;const d=class{constructor(o){t(this,o),this.nanoTabShow=i(this,"nanoTabShow",7),this.nanoTabHide=i(this,"nanoTabHide",7),this.nanoTabWillClose=i(this,"nanoTabWillClose",7),this.nanoTabClose=i(this,"nanoTabClose",7)}baseId="nano-tab-group-"+ ++l;activeTab;activePanel;isRtl;initialTouchX=null;initialTouchY=null;init=!0;defaultTab=null;_tab;get tab(){return this._tab}set tab(t){if(this._tab===(t=t||this.defaultTab))return;const i=this.getAllActiveTabs.find((i=>i.panel===t));i&&(!this.init&&this.storeId&&n.update(this.storeId),this._tab=t,this.setActiveTab(i))}get host(){return o(this)}placement="top";noScrollControls=!1;equalTabSize=!1;size;storeId;storeMethod="url-hash";disableSwipe;nanoTabShow;nanoTabHide;nanoTabWillClose;nanoTabClose;async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const i=this.getAllActiveTabs.find((i=>i.panel===t));i&&this.setActiveTab(i)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return a(this.host,e("nano-tab"))}get getAllPanels(){return a(this.host,e("nano-tab-content"))}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,i=!0){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t,this.tab=t.panel,this.getAllActiveTabs.map((t=>t.active=t===this.activeTab)),this.getAllPanels.map((t=>{t.name===this.activeTab.panel?(t.active=!0,this.activePanel=t):t.active=!1,t.removeAttribute("animation-dir")})),i&&(o&&this.nanoTabHide.emit({name:o.panel}),this.nanoTabShow.emit({name:this.activeTab.panel}))}}setAriaLabels(){const t=this.getAllPanels;this.getAllActiveTabs.map(((i,o)=>{const s=t.find((t=>t.name===i.panel));s&&(s.id||(s.id=`${this.baseId}-panel-${o}`),i.id||(i.id=`${this.baseId}-tab-${o}`),i.setAttribute("aria-controls",s.id),s.setAttribute("aria-labelledby",i.id))}))}handleTabClose(t){let i=this.getAllActiveTabs.indexOf(t.target);const o=t.target;if(i<0)return;const r=this.getAllPanels.find((t=>t.name===o.panel));if(r&&(t.stopImmediatePropagation(),!this.nanoTabWillClose.emit({name:o.panel}).defaultPrevented)){if(o.active){i=0===i?1:i-1;const t=this.getAllActiveTabs[i]?.panel;t&&this.host.show(t)}o.remove(),r.remove(),this.nanoTabClose.emit({name:o.panel}),s(this.host)}}handleClick=t=>{const i=t.target.closest(e("nano-tab"));i&&this.setActiveTab(i)};handleKeyDown=t=>{const i=document.activeElement;if(!i||i.tagName.toLowerCase()!==e("nano-tab"))return;if(["Enter"," "].includes(t.key)){const i=t.target.closest(e("nano-tab"));i&&(this.setActiveTab(i),t.preventDefault(),t.stopPropagation())}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const o=this.getAllActiveTabs;let s=o.indexOf(i);"Home"===t.key&&(s=0),"End"===t.key&&(s=o.length-1),"top"===this.placement&&((this.isRtl&&"ArrowRight"===t.key||!this.isRtl&&"ArrowLeft"===t.key)&&(s=Math.max(0,s-1)),(this.isRtl&&"ArrowLeft"===t.key||!this.isRtl&&"ArrowRight"===t.key)&&(s=Math.min(o.length-1,s+1))),"start"===this.placement&&("ArrowUp"===t.key&&(s=Math.max(0,s-1)),"ArrowDown"===t.key&&(s=Math.min(o.length-1,s+1))),o[s].setFocus(),t.stopPropagation(),t.preventDefault()};handleTouchStart=t=>{if(this.disableSwipe)return;const i=t.changedTouches[0];this.initialTouchX=i.pageX,this.initialTouchY=i.pageY};handleTouchEnd=t=>{if(this.disableSwipe)return;const i=t.changedTouches[0],o=i.pageX-this.initialTouchX,s=this.initialTouchX-i.clientX,r=this.initialTouchY-i.clientY,a=Math.abs(o)>=70&&Math.abs(r)<=50,n=this.getAllActiveTabs,e=n.findIndex((t=>t.active));if(a){const t=o<0&&"top"===this.placement||o>0&&"top"!==this.placement?1:-1;n[e+t]&&(this.setActiveTab(n[e+t]),Math.abs(s)>Math.abs(r)&&this.activePanel.setAttribute("animation-dir",s>0?"left":"right"))}this.initialTouchX=null,this.initialTouchY=null};handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels(),this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],!1)}))};handleTabSlotChange=()=>{setTimeout((()=>{this.setAriaLabels(),this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],!1)}),500)};componentWillLoad(){this.init=!0}componentDidLoad(){new IntersectionObserver(((t,i)=>{if(t[0].intersectionRatio>0){if(this.setAriaLabels(),this.storeId){n.init(this,["tab"],this.storeMethod,this.storeId);const t=n.get(this.storeId),i=t.retrieve()?.tab;i&&i!==t.initialState?.tab&&this.getAllActiveTabs.forEach((t=>{t.active=t.panel===i}))}this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],!1),this.defaultTab=this.activeTab?.panel||this.getAllActiveTabs[0]?.panel,i.unobserve(t[0].target),this.init=!1}})).observe(this.host)}connectedCallback(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir}render(){if(this.isRtl="rtl"===this.host.ownerDocument.dir,0!==this.getAllTabs.length)return h(r,{dir:this.isRtl?"rtl":null,class:"nano-tab-group"},h("div",{part:"base",class:{group:!0,"group--top":"top"===this.placement,"group--start":"start"===this.placement},onClick:this.handleClick,onKeyDown:this.handleKeyDown},h("nano-masked-overflow",{role:"navigation",class:"group__tabs",part:"tabs__wrapper",exportparts:"items:tabs, scroll-button:tabs__scroll-button, indicator:active-tab-indicator",orientation:"top"===this.placement?"horizontal":"vertical",isActiveHandler:t=>this.activeTab===t,scrollControls:!this.noScrollControls,hideScrollbars:!0},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}))))}};d.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border:2px solid var(--nano-color-border-default);--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-border-accent);--indicator-track-color:var(--nano-color-border-default);--indicator-size:0;--tab-spacing:var(--nano-spacing-md);--content-spacing:var(--nano-spacing-l1-default);display:block;position:relative;z-index:var(--nano-z-index-raised)}.group{display:flex;border-radius:0;inline-size:100%;flex:inherit}:host([equal-tab-size]) .group__tabs-border,.group__tabs[has-scroll-controls] .group__tabs-border{display:none}.group__tabs::part(items){gap:var(--tab-spacing)}.group--top{flex-direction:column}.group--top .group__tabs{--fade-size:100px}.group--top .group__tabs::part(items){align-items:flex-end}.group--top .group__tabs-border{flex:1;border-block-end:var(--border)}.group--top .group__body{order:2;position:relative;flex:1 1 auto;border-block-end:var(--border);padding-block:var(--content-spacing)}.group--start{flex-direction:row}:host([equal-tab-size]) .group--start .group__tabs::part(items){display:grid;grid-auto-rows:1fr}.group--start .group__tabs-border{flex:1;border-inline-end:var(--border)}.group--start .group__body{flex:1 1 auto;order:2;overflow:hidden;padding-inline-start:var(--content-spacing)}";export{d as nano_tab_group}
|
package/docs-json.json
CHANGED
package/hydrate/index.js
CHANGED
|
@@ -24314,12 +24314,14 @@ class NanoTabGroup {
|
|
|
24314
24314
|
initialTouchX = null;
|
|
24315
24315
|
initialTouchY = null;
|
|
24316
24316
|
init = true;
|
|
24317
|
+
defaultTab = null;
|
|
24317
24318
|
_tab;
|
|
24318
24319
|
get tab() {
|
|
24319
24320
|
return this._tab;
|
|
24320
24321
|
}
|
|
24321
24322
|
set tab(tabName) {
|
|
24322
|
-
|
|
24323
|
+
tabName = tabName || this.defaultTab;
|
|
24324
|
+
if (this._tab === tabName)
|
|
24323
24325
|
return;
|
|
24324
24326
|
const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
|
|
24325
24327
|
if (!selectedTabEle)
|
|
@@ -24587,6 +24589,8 @@ class NanoTabGroup {
|
|
|
24587
24589
|
}
|
|
24588
24590
|
}
|
|
24589
24591
|
this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
|
|
24592
|
+
this.defaultTab =
|
|
24593
|
+
this.activeTab?.panel || this.getAllActiveTabs[0]?.panel;
|
|
24590
24594
|
observer.unobserve(entries[0].target);
|
|
24591
24595
|
this.init = false;
|
|
24592
24596
|
}
|
package/hydrate/index.mjs
CHANGED
|
@@ -24312,12 +24312,14 @@ class NanoTabGroup {
|
|
|
24312
24312
|
initialTouchX = null;
|
|
24313
24313
|
initialTouchY = null;
|
|
24314
24314
|
init = true;
|
|
24315
|
+
defaultTab = null;
|
|
24315
24316
|
_tab;
|
|
24316
24317
|
get tab() {
|
|
24317
24318
|
return this._tab;
|
|
24318
24319
|
}
|
|
24319
24320
|
set tab(tabName) {
|
|
24320
|
-
|
|
24321
|
+
tabName = tabName || this.defaultTab;
|
|
24322
|
+
if (this._tab === tabName)
|
|
24321
24323
|
return;
|
|
24322
24324
|
const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
|
|
24323
24325
|
if (!selectedTabEle)
|
|
@@ -24585,6 +24587,8 @@ class NanoTabGroup {
|
|
|
24585
24587
|
}
|
|
24586
24588
|
}
|
|
24587
24589
|
this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
|
|
24590
|
+
this.defaultTab =
|
|
24591
|
+
this.activeTab?.panel || this.getAllActiveTabs[0]?.panel;
|
|
24588
24592
|
observer.unobserve(entries[0].target);
|
|
24589
24593
|
this.init = false;
|
|
24590
24594
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nanoporetech-digital/components",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.5",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "A collection of Oxford Nanopore corporate / digital webcomponents",
|
|
6
6
|
"type": "module",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"smart-array-filter": "^4.0.2",
|
|
57
57
|
"stencil-wormhole": "3.2.1",
|
|
58
58
|
"tyqs": "^0.1.3",
|
|
59
|
-
"@nanoporetech-digital/style": "9.1.
|
|
59
|
+
"@nanoporetech-digital/style": "9.1.5"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@algolia/client-search": "^4.22.1",
|