@fluid-topics/ft-tabs 1.1.43 → 1.1.44
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/build/ft-tabs.js +1 -1
- package/build/ft-tabs.light.js +12 -13
- package/build/ft-tabs.min.js +12 -13
- package/build/ft-tabs.styles.d.ts +2 -2
- package/build/ft-tabs.styles.js +8 -9
- package/package.json +7 -7
package/build/ft-tabs.js
CHANGED
|
@@ -167,7 +167,7 @@ class FtTabs extends FtLitElement {
|
|
|
167
167
|
});
|
|
168
168
|
}
|
|
169
169
|
addTooltipIfNecessary(tab, button) {
|
|
170
|
-
if (tab.label && tab.icon && (this.dense || this.horizontal
|
|
170
|
+
if (tab.label && tab.icon && (this.dense || this.horizontal)) {
|
|
171
171
|
let tooltipPosition = this.horizontal
|
|
172
172
|
? this.contentBefore ? "left" : "right"
|
|
173
173
|
: this.contentBefore ? "top" : "bottom";
|
package/build/ft-tabs.light.js
CHANGED
|
@@ -304,7 +304,7 @@ const ct=Symbol.for(""),pt=t=>{if(t?.r===ct)return t?._$litStatic$},ft=t=>({_$li
|
|
|
304
304
|
${n.unsafeHTML(this.resolvedIcon)}
|
|
305
305
|
<slot ?hidden=${o}></slot>
|
|
306
306
|
</i>
|
|
307
|
-
`}get textContent(){var t,o;return null!==(o=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==o?o:""}update(t){super.update(t),["value","variant"].some((o=>t.has(o)))&&this.resolveIcon()}resolveIcon(){var t,o;let r=this.value||this.textContent;switch(this.variant){case qo.file_format:this.resolvedIcon=null!==(t=Go[r.replace("-","_").toUpperCase()])&&void 0!==t?t:r;break;case qo.material:this.resolvedIcon=this.value||e.nothing;break;default:this.resolvedIcon=null!==(o=Ho[r.replace("-","_").toUpperCase()])&&void 0!==o?o:r}}firstUpdated(t){super.firstUpdated(t),setTimeout((()=>this.resolveIcon()))}}te.elementDefinitions={},te.styles=Xo,Qo([r.property()],te.prototype,"variant",void 0),Qo([r.property()],te.prototype,"value",void 0),Qo([r.state()],te.prototype,"resolvedIcon",void 0),Qo([r.query("slot")],te.prototype,"slottedContent",void 0),o.customElement("ft-icon")(te),t.FtTabsAlignment=void 0,(Jo=t.FtTabsAlignment||(t.FtTabsAlignment={})).left="left",Jo.right="right",Jo.start="start",Jo.end="end",Jo.justify="justify";const oe={
|
|
307
|
+
`}get textContent(){var t,o;return null!==(o=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==o?o:""}update(t){super.update(t),["value","variant"].some((o=>t.has(o)))&&this.resolveIcon()}resolveIcon(){var t,o;let r=this.value||this.textContent;switch(this.variant){case qo.file_format:this.resolvedIcon=null!==(t=Go[r.replace("-","_").toUpperCase()])&&void 0!==t?t:r;break;case qo.material:this.resolvedIcon=this.value||e.nothing;break;default:this.resolvedIcon=null!==(o=Ho[r.replace("-","_").toUpperCase()])&&void 0!==o?o:r}}firstUpdated(t){super.firstUpdated(t),setTimeout((()=>this.resolveIcon()))}}te.elementDefinitions={},te.styles=Xo,Qo([r.property()],te.prototype,"variant",void 0),Qo([r.property()],te.prototype,"value",void 0),Qo([r.state()],te.prototype,"resolvedIcon",void 0),Qo([r.query("slot")],te.prototype,"slottedContent",void 0),o.customElement("ft-icon")(te),t.FtTabsAlignment=void 0,(Jo=t.FtTabsAlignment||(t.FtTabsAlignment={})).left="left",Jo.right="right",Jo.start="start",Jo.end="end",Jo.justify="justify";const oe={horizontalButtonsWidth:o.FtCssVariableFactory.create("--ft-tabs-horizontal-buttons-width","Width of the tab buttons (N/A for vertical justified tabs)","SIZE","100px"),horizontalDenseButtonsWidth:o.FtCssVariableFactory.create("--ft-tabs-horizontal-dense-buttons-width","Width of the tab buttons when dense (N/A for vertical justified tabs)","SIZE","56px"),widthWhenHorizontalAndOpen:o.FtCssVariableFactory.create("--ft-tabs-width-when-horizontal-and-open","Width of the component when set to horizontal and open","SIZE","100%"),colorSurface:o.FtCssVariableFactory.external(o.designSystemVariables.colorSurface,"Design system"),colorPrimary:o.FtCssVariableFactory.external(o.designSystemVariables.colorPrimary,"Design system"),colorOnSurfaceMedium:o.FtCssVariableFactory.external(o.designSystemVariables.colorOnSurfaceMedium,"Design system"),colorOnSurfaceDisabled:o.FtCssVariableFactory.external(o.designSystemVariables.colorOnSurfaceDisabled,"Design system")},ee=e.css`
|
|
308
308
|
.ft-tabs {
|
|
309
309
|
display: flex;
|
|
310
310
|
flex-direction: column;
|
|
@@ -321,11 +321,11 @@ const ct=Symbol.for(""),pt=t=>{if(t?.r===ct)return t?._$litStatic$},ft=t=>({_$li
|
|
|
321
321
|
}
|
|
322
322
|
|
|
323
323
|
.ft-tabs--horizontal.ft-tabs--collapsed {
|
|
324
|
-
width: ${oe.
|
|
324
|
+
width: ${oe.horizontalButtonsWidth};
|
|
325
325
|
}
|
|
326
326
|
|
|
327
327
|
.ft-tabs--horizontal.ft-tabs--dense.ft-tabs--collapsed {
|
|
328
|
-
width: ${oe.
|
|
328
|
+
width: ${oe.horizontalDenseButtonsWidth};
|
|
329
329
|
}
|
|
330
330
|
|
|
331
331
|
.ft-tabs--horizontal {
|
|
@@ -378,15 +378,14 @@ const ct=Symbol.for(""),pt=t=>{if(t?.r===ct)return t?._$litStatic$},ft=t=>({_$li
|
|
|
378
378
|
font-size: 16px;
|
|
379
379
|
line-height: 1;
|
|
380
380
|
color: ${oe.colorOnSurfaceMedium};
|
|
381
|
-
width: ${oe.buttonsWidth};
|
|
382
381
|
}
|
|
383
382
|
|
|
384
|
-
.ft-tabs--
|
|
385
|
-
width: ${oe.
|
|
383
|
+
.ft-tabs--horizontal [role='tab'] {
|
|
384
|
+
width: ${oe.horizontalButtonsWidth};
|
|
386
385
|
}
|
|
387
386
|
|
|
388
|
-
.ft-tabs--
|
|
389
|
-
width:
|
|
387
|
+
.ft-tabs--horizontal.ft-tabs--dense [role='tab'] {
|
|
388
|
+
width: ${oe.horizontalDenseButtonsWidth};
|
|
390
389
|
}
|
|
391
390
|
|
|
392
391
|
[role='tab'][aria-selected='true'] {
|
|
@@ -520,11 +519,11 @@ const ct=Symbol.for(""),pt=t=>{if(t?.r===ct)return t?._$litStatic$},ft=t=>({_$li
|
|
|
520
519
|
<slot @slotchange=${this.onContentChange}></slot>
|
|
521
520
|
</div>
|
|
522
521
|
</div>
|
|
523
|
-
`}onContentChange(t){const o=t.composedPath()[0];this.ftTabs=o.assignedElements().map((t=>t)),this.ftTabs.forEach((t=>{t.removeEventListener("updated",this.onTabUpdated),t.addEventListener("updated",this.onTabUpdated)})),this.updateTabs()}update(t){super.update(t),t.has("activeIndex")&&this.dispatchEvent(new o.PreResizeEvent),(t.has("ftTabs")||t.has("activeIndex"))&&this.updateTabs(),t.has("activeIndex")&&this.dispatchEvent(new gr(this.activeIndex))}contentAvailableCallback(t){super.contentAvailableCallback(t),this.tabsContainer&&this.resizeObserver.observe(this.tabsContainer),this.placeIndicator()}placeIndicator(){var t,o,e,r,a,i,n,l,c,p,f,s;if(this.activeTabIndicator){const d=null!==(o=null===(t=this.activeTab)||void 0===t?void 0:t.closest(".ft-tabs--tab-tooltip"))&&void 0!==o?o:this.activeTab;d?this.horizontal?(this.activeTabIndicator.style.height=(null!==(e=null==d?void 0:d.clientHeight)&&void 0!==e?e:0)+"px",this.activeTabIndicator.style.width="3px",this.activeTabIndicator.style.top=(null!==(r=null==d?void 0:d.offsetTop)&&void 0!==r?r:0)+"px",this.contentBefore?this.activeTabIndicator.style.left=(null!==(a=null==d?void 0:d.offsetLeft)&&void 0!==a?a:0)+"px":this.activeTabIndicator.style.left=(null!==(i=null==d?void 0:d.offsetLeft)&&void 0!==i?i:0)+(null!==(n=null==d?void 0:d.clientWidth)&&void 0!==n?n:0)-3+"px"):(this.activeTabIndicator.style.height="3px",this.activeTabIndicator.style.width=(null!==(l=null==d?void 0:d.clientWidth)&&void 0!==l?l:0)+"px",this.activeTabIndicator.style.left=(null!==(c=null==d?void 0:d.offsetLeft)&&void 0!==c?c:0)+"px",this.contentBefore?this.activeTabIndicator.style.top=(null!==(p=null==d?void 0:d.offsetTop)&&void 0!==p?p:0)+"px":this.activeTabIndicator.style.top=(null!==(f=null==d?void 0:d.offsetTop)&&void 0!==f?f:0)+(null!==(s=null==d?void 0:d.clientHeight)&&void 0!==s?s:0)-3+"px"):(this.activeTabIndicator.style.height="0px",this.activeTabIndicator.style.width="0px")}}toggleTab(t){this.activeIndex=this.collapsible&&t===this.activeIndex?void 0:t}updateTabs(){this.ftTabs.forEach(((t,o)=>{t.active=o==this.activeIndex}))}addTooltipIfNecessary(o
|
|
522
|
+
`}onContentChange(t){const o=t.composedPath()[0];this.ftTabs=o.assignedElements().map((t=>t)),this.ftTabs.forEach((t=>{t.removeEventListener("updated",this.onTabUpdated),t.addEventListener("updated",this.onTabUpdated)})),this.updateTabs()}update(t){super.update(t),t.has("activeIndex")&&this.dispatchEvent(new o.PreResizeEvent),(t.has("ftTabs")||t.has("activeIndex"))&&this.updateTabs(),t.has("activeIndex")&&this.dispatchEvent(new gr(this.activeIndex))}contentAvailableCallback(t){super.contentAvailableCallback(t),this.tabsContainer&&this.resizeObserver.observe(this.tabsContainer),this.placeIndicator()}placeIndicator(){var t,o,e,r,a,i,n,l,c,p,f,s;if(this.activeTabIndicator){const d=null!==(o=null===(t=this.activeTab)||void 0===t?void 0:t.closest(".ft-tabs--tab-tooltip"))&&void 0!==o?o:this.activeTab;d?this.horizontal?(this.activeTabIndicator.style.height=(null!==(e=null==d?void 0:d.clientHeight)&&void 0!==e?e:0)+"px",this.activeTabIndicator.style.width="3px",this.activeTabIndicator.style.top=(null!==(r=null==d?void 0:d.offsetTop)&&void 0!==r?r:0)+"px",this.contentBefore?this.activeTabIndicator.style.left=(null!==(a=null==d?void 0:d.offsetLeft)&&void 0!==a?a:0)+"px":this.activeTabIndicator.style.left=(null!==(i=null==d?void 0:d.offsetLeft)&&void 0!==i?i:0)+(null!==(n=null==d?void 0:d.clientWidth)&&void 0!==n?n:0)-3+"px"):(this.activeTabIndicator.style.height="3px",this.activeTabIndicator.style.width=(null!==(l=null==d?void 0:d.clientWidth)&&void 0!==l?l:0)+"px",this.activeTabIndicator.style.left=(null!==(c=null==d?void 0:d.offsetLeft)&&void 0!==c?c:0)+"px",this.contentBefore?this.activeTabIndicator.style.top=(null!==(p=null==d?void 0:d.offsetTop)&&void 0!==p?p:0)+"px":this.activeTabIndicator.style.top=(null!==(f=null==d?void 0:d.offsetTop)&&void 0!==f?f:0)+(null!==(s=null==d?void 0:d.clientHeight)&&void 0!==s?s:0)-3+"px"):(this.activeTabIndicator.style.height="0px",this.activeTabIndicator.style.width="0px")}}toggleTab(t){this.activeIndex=this.collapsible&&t===this.activeIndex?void 0:t}updateTabs(){this.ftTabs.forEach(((t,o)=>{t.active=o==this.activeIndex}))}addTooltipIfNecessary(t,o){if(t.label&&t.icon&&(this.dense||this.horizontal)){let r=this.horizontal?this.contentBefore?"left":"right":this.contentBefore?"top":"bottom";return e.html`
|
|
524
523
|
<ft-tooltip class="ft-tabs--tab-tooltip"
|
|
525
524
|
part="tab-tooltip"
|
|
526
|
-
text="${
|
|
527
|
-
position="${
|
|
528
|
-
${
|
|
525
|
+
text="${t.label}"
|
|
526
|
+
position="${r}">
|
|
527
|
+
${o}
|
|
529
528
|
</ft-tooltip>
|
|
530
|
-
`}return
|
|
529
|
+
`}return o}}yr.elementDefinitions={"ft-tab":c,"ft-ripple":C,"ft-tooltip":dr,"ft-typography":Mo,"ft-icon":te},yr.styles=ee,hr([r.property({type:Boolean})],yr.prototype,"dense",void 0),hr([r.property({type:Boolean})],yr.prototype,"collapsible",void 0),hr([r.property({type:Boolean})],yr.prototype,"horizontal",void 0),hr([r.property({type:Boolean})],yr.prototype,"contentBefore",void 0),hr([r.property()],yr.prototype,"alignTabs",void 0),hr([r.state()],yr.prototype,"ftTabs",void 0),hr([r.query("[role='tablist']")],yr.prototype,"tabsContainer",void 0),hr([r.query("[aria-selected='true']")],yr.prototype,"activeTab",void 0),hr([r.query(".ft-tabs--active-tab-indicator")],yr.prototype,"activeTabIndicator",void 0),hr([o.optionalNumberProperty({reflect:!0})],yr.prototype,"activeIndex",void 0);o.customElement("ft-tab")(c),o.customElement("ft-tabs")(yr),t.FtTab=c,t.FtTabCssVariables={},t.FtTabs=yr,t.FtTabsCssVariables=oe,t.IndexChangeEvent=gr,t.styles=ee}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.litClassMap,ftGlobals.litUnsafeHTML);
|
package/build/ft-tabs.min.js
CHANGED
|
@@ -473,7 +473,7 @@ const Cl=Symbol.for(""),El=t=>{if(t?.r===Cl)return t?._$litStatic$},Rl=t=>({_$li
|
|
|
473
473
|
${Ye(this.resolvedIcon)}
|
|
474
474
|
<slot ?hidden=${e}></slot>
|
|
475
475
|
</i>
|
|
476
|
-
`}get textContent(){var t,e;return null!==(e=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==e?e:""}update(t){super.update(t),["value","variant"].some((e=>t.has(e)))&&this.resolveIcon()}resolveIcon(){var t,e;let o=this.value||this.textContent;switch(this.variant){case sc.file_format:this.resolvedIcon=null!==(t=Qs[o.replace("-","_").toUpperCase()])&&void 0!==t?t:o;break;case sc.material:this.resolvedIcon=this.value||te;break;default:this.resolvedIcon=null!==(e=Xs[o.replace("-","_").toUpperCase()])&&void 0!==e?e:o}}firstUpdated(t){super.firstUpdated(t),setTimeout((()=>this.resolveIcon()))}}pc.elementDefinitions={},pc.styles=lc,fc([we()],pc.prototype,"variant",void 0),fc([we()],pc.prototype,"value",void 0),fc([Se()],pc.prototype,"resolvedIcon",void 0),fc([Ee("slot")],pc.prototype,"slottedContent",void 0),ho("ft-icon")(pc),t.FtTabsAlignment=void 0,(cc=t.FtTabsAlignment||(t.FtTabsAlignment={})).left="left",cc.right="right",cc.start="start",cc.end="end",cc.justify="justify";const hc={
|
|
476
|
+
`}get textContent(){var t,e;return null!==(e=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==e?e:""}update(t){super.update(t),["value","variant"].some((e=>t.has(e)))&&this.resolveIcon()}resolveIcon(){var t,e;let o=this.value||this.textContent;switch(this.variant){case sc.file_format:this.resolvedIcon=null!==(t=Qs[o.replace("-","_").toUpperCase()])&&void 0!==t?t:o;break;case sc.material:this.resolvedIcon=this.value||te;break;default:this.resolvedIcon=null!==(e=Xs[o.replace("-","_").toUpperCase()])&&void 0!==e?e:o}}firstUpdated(t){super.firstUpdated(t),setTimeout((()=>this.resolveIcon()))}}pc.elementDefinitions={},pc.styles=lc,fc([we()],pc.prototype,"variant",void 0),fc([we()],pc.prototype,"value",void 0),fc([Se()],pc.prototype,"resolvedIcon",void 0),fc([Ee("slot")],pc.prototype,"slottedContent",void 0),ho("ft-icon")(pc),t.FtTabsAlignment=void 0,(cc=t.FtTabsAlignment||(t.FtTabsAlignment={})).left="left",cc.right="right",cc.start="start",cc.end="end",cc.justify="justify";const hc={horizontalButtonsWidth:vo.create("--ft-tabs-horizontal-buttons-width","Width of the tab buttons (N/A for vertical justified tabs)","SIZE","100px"),horizontalDenseButtonsWidth:vo.create("--ft-tabs-horizontal-dense-buttons-width","Width of the tab buttons when dense (N/A for vertical justified tabs)","SIZE","56px"),widthWhenHorizontalAndOpen:vo.create("--ft-tabs-width-when-horizontal-and-open","Width of the component when set to horizontal and open","SIZE","100%"),colorSurface:vo.external(vr.colorSurface,"Design system"),colorPrimary:vo.external(vr.colorPrimary,"Design system"),colorOnSurfaceMedium:vo.external(vr.colorOnSurfaceMedium,"Design system"),colorOnSurfaceDisabled:vo.external(vr.colorOnSurfaceDisabled,"Design system")},dc=ht`
|
|
477
477
|
.ft-tabs {
|
|
478
478
|
display: flex;
|
|
479
479
|
flex-direction: column;
|
|
@@ -490,11 +490,11 @@ const Cl=Symbol.for(""),El=t=>{if(t?.r===Cl)return t?._$litStatic$},Rl=t=>({_$li
|
|
|
490
490
|
}
|
|
491
491
|
|
|
492
492
|
.ft-tabs--horizontal.ft-tabs--collapsed {
|
|
493
|
-
width: ${hc.
|
|
493
|
+
width: ${hc.horizontalButtonsWidth};
|
|
494
494
|
}
|
|
495
495
|
|
|
496
496
|
.ft-tabs--horizontal.ft-tabs--dense.ft-tabs--collapsed {
|
|
497
|
-
width: ${hc.
|
|
497
|
+
width: ${hc.horizontalDenseButtonsWidth};
|
|
498
498
|
}
|
|
499
499
|
|
|
500
500
|
.ft-tabs--horizontal {
|
|
@@ -547,15 +547,14 @@ const Cl=Symbol.for(""),El=t=>{if(t?.r===Cl)return t?._$litStatic$},Rl=t=>({_$li
|
|
|
547
547
|
font-size: 16px;
|
|
548
548
|
line-height: 1;
|
|
549
549
|
color: ${hc.colorOnSurfaceMedium};
|
|
550
|
-
width: ${hc.buttonsWidth};
|
|
551
550
|
}
|
|
552
551
|
|
|
553
|
-
.ft-tabs--
|
|
554
|
-
width: ${hc.
|
|
552
|
+
.ft-tabs--horizontal [role='tab'] {
|
|
553
|
+
width: ${hc.horizontalButtonsWidth};
|
|
555
554
|
}
|
|
556
555
|
|
|
557
|
-
.ft-tabs--
|
|
558
|
-
width:
|
|
556
|
+
.ft-tabs--horizontal.ft-tabs--dense [role='tab'] {
|
|
557
|
+
width: ${hc.horizontalDenseButtonsWidth};
|
|
559
558
|
}
|
|
560
559
|
|
|
561
560
|
[role='tab'][aria-selected='true'] {
|
|
@@ -689,11 +688,11 @@ const Cl=Symbol.for(""),El=t=>{if(t?.r===Cl)return t?._$litStatic$},Rl=t=>({_$li
|
|
|
689
688
|
<slot @slotchange=${this.onContentChange}></slot>
|
|
690
689
|
</div>
|
|
691
690
|
</div>
|
|
692
|
-
`}onContentChange(t){const e=t.composedPath()[0];this.ftTabs=e.assignedElements().map((t=>t)),this.ftTabs.forEach((t=>{t.removeEventListener("updated",this.onTabUpdated),t.addEventListener("updated",this.onTabUpdated)})),this.updateTabs()}update(t){super.update(t),t.has("activeIndex")&&this.dispatchEvent(new wr),(t.has("ftTabs")||t.has("activeIndex"))&&this.updateTabs(),t.has("activeIndex")&&this.dispatchEvent(new Nc(this.activeIndex))}contentAvailableCallback(t){super.contentAvailableCallback(t),this.tabsContainer&&this.resizeObserver.observe(this.tabsContainer),this.placeIndicator()}placeIndicator(){var t,e,o,r,i,n,a,l,s,c,f,p;if(this.activeTabIndicator){const h=null!==(e=null===(t=this.activeTab)||void 0===t?void 0:t.closest(".ft-tabs--tab-tooltip"))&&void 0!==e?e:this.activeTab;h?this.horizontal?(this.activeTabIndicator.style.height=(null!==(o=null==h?void 0:h.clientHeight)&&void 0!==o?o:0)+"px",this.activeTabIndicator.style.width="3px",this.activeTabIndicator.style.top=(null!==(r=null==h?void 0:h.offsetTop)&&void 0!==r?r:0)+"px",this.contentBefore?this.activeTabIndicator.style.left=(null!==(i=null==h?void 0:h.offsetLeft)&&void 0!==i?i:0)+"px":this.activeTabIndicator.style.left=(null!==(n=null==h?void 0:h.offsetLeft)&&void 0!==n?n:0)+(null!==(a=null==h?void 0:h.clientWidth)&&void 0!==a?a:0)-3+"px"):(this.activeTabIndicator.style.height="3px",this.activeTabIndicator.style.width=(null!==(l=null==h?void 0:h.clientWidth)&&void 0!==l?l:0)+"px",this.activeTabIndicator.style.left=(null!==(s=null==h?void 0:h.offsetLeft)&&void 0!==s?s:0)+"px",this.contentBefore?this.activeTabIndicator.style.top=(null!==(c=null==h?void 0:h.offsetTop)&&void 0!==c?c:0)+"px":this.activeTabIndicator.style.top=(null!==(f=null==h?void 0:h.offsetTop)&&void 0!==f?f:0)+(null!==(p=null==h?void 0:h.clientHeight)&&void 0!==p?p:0)-3+"px"):(this.activeTabIndicator.style.height="0px",this.activeTabIndicator.style.width="0px")}}toggleTab(t){this.activeIndex=this.collapsible&&t===this.activeIndex?void 0:t}updateTabs(){this.ftTabs.forEach(((t,e)=>{t.active=e==this.activeIndex}))}addTooltipIfNecessary(e
|
|
691
|
+
`}onContentChange(t){const e=t.composedPath()[0];this.ftTabs=e.assignedElements().map((t=>t)),this.ftTabs.forEach((t=>{t.removeEventListener("updated",this.onTabUpdated),t.addEventListener("updated",this.onTabUpdated)})),this.updateTabs()}update(t){super.update(t),t.has("activeIndex")&&this.dispatchEvent(new wr),(t.has("ftTabs")||t.has("activeIndex"))&&this.updateTabs(),t.has("activeIndex")&&this.dispatchEvent(new Nc(this.activeIndex))}contentAvailableCallback(t){super.contentAvailableCallback(t),this.tabsContainer&&this.resizeObserver.observe(this.tabsContainer),this.placeIndicator()}placeIndicator(){var t,e,o,r,i,n,a,l,s,c,f,p;if(this.activeTabIndicator){const h=null!==(e=null===(t=this.activeTab)||void 0===t?void 0:t.closest(".ft-tabs--tab-tooltip"))&&void 0!==e?e:this.activeTab;h?this.horizontal?(this.activeTabIndicator.style.height=(null!==(o=null==h?void 0:h.clientHeight)&&void 0!==o?o:0)+"px",this.activeTabIndicator.style.width="3px",this.activeTabIndicator.style.top=(null!==(r=null==h?void 0:h.offsetTop)&&void 0!==r?r:0)+"px",this.contentBefore?this.activeTabIndicator.style.left=(null!==(i=null==h?void 0:h.offsetLeft)&&void 0!==i?i:0)+"px":this.activeTabIndicator.style.left=(null!==(n=null==h?void 0:h.offsetLeft)&&void 0!==n?n:0)+(null!==(a=null==h?void 0:h.clientWidth)&&void 0!==a?a:0)-3+"px"):(this.activeTabIndicator.style.height="3px",this.activeTabIndicator.style.width=(null!==(l=null==h?void 0:h.clientWidth)&&void 0!==l?l:0)+"px",this.activeTabIndicator.style.left=(null!==(s=null==h?void 0:h.offsetLeft)&&void 0!==s?s:0)+"px",this.contentBefore?this.activeTabIndicator.style.top=(null!==(c=null==h?void 0:h.offsetTop)&&void 0!==c?c:0)+"px":this.activeTabIndicator.style.top=(null!==(f=null==h?void 0:h.offsetTop)&&void 0!==f?f:0)+(null!==(p=null==h?void 0:h.clientHeight)&&void 0!==p?p:0)-3+"px"):(this.activeTabIndicator.style.height="0px",this.activeTabIndicator.style.width="0px")}}toggleTab(t){this.activeIndex=this.collapsible&&t===this.activeIndex?void 0:t}updateTabs(){this.ftTabs.forEach(((t,e)=>{t.active=e==this.activeIndex}))}addTooltipIfNecessary(t,e){if(t.label&&t.icon&&(this.dense||this.horizontal)){let o=this.horizontal?this.contentBefore?"left":"right":this.contentBefore?"top":"bottom";return Jt`
|
|
693
692
|
<ft-tooltip class="ft-tabs--tab-tooltip"
|
|
694
693
|
part="tab-tooltip"
|
|
695
|
-
text="${
|
|
696
|
-
position="${
|
|
697
|
-
${
|
|
694
|
+
text="${t.label}"
|
|
695
|
+
position="${o}">
|
|
696
|
+
${e}
|
|
698
697
|
</ft-tooltip>
|
|
699
|
-
`}return
|
|
698
|
+
`}return e}}Cc.elementDefinitions={"ft-tab":ll,"ft-ripple":Nl,"ft-tooltip":wc,"ft-typography":ec,"ft-icon":pc},Cc.styles=dc,Sc([we({type:Boolean})],Cc.prototype,"dense",void 0),Sc([we({type:Boolean})],Cc.prototype,"collapsible",void 0),Sc([we({type:Boolean})],Cc.prototype,"horizontal",void 0),Sc([we({type:Boolean})],Cc.prototype,"contentBefore",void 0),Sc([we()],Cc.prototype,"alignTabs",void 0),Sc([Se()],Cc.prototype,"ftTabs",void 0),Sc([Ee("[role='tablist']")],Cc.prototype,"tabsContainer",void 0),Sc([Ee("[aria-selected='true']")],Cc.prototype,"activeTab",void 0),Sc([Ee(".ft-tabs--active-tab-indicator")],Cc.prototype,"activeTabIndicator",void 0),Sc([yo({reflect:!0})],Cc.prototype,"activeIndex",void 0);ho("ft-tab")(ll),ho("ft-tabs")(Cc),t.FtTab=ll,t.FtTabCssVariables={},t.FtTabs=Cc,t.FtTabsCssVariables=hc,t.IndexChangeEvent=Nc,t.styles=dc}({});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const FtTabsCssVariables: {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
horizontalButtonsWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
3
|
+
horizontalDenseButtonsWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
4
4
|
widthWhenHorizontalAndOpen: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
5
5
|
colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
6
6
|
colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
package/build/ft-tabs.styles.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
2
|
import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
|
|
3
3
|
export const FtTabsCssVariables = {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
horizontalButtonsWidth: FtCssVariableFactory.create("--ft-tabs-horizontal-buttons-width", "Width of the tab buttons (N/A for vertical justified tabs)", "SIZE", "100px"),
|
|
5
|
+
horizontalDenseButtonsWidth: FtCssVariableFactory.create("--ft-tabs-horizontal-dense-buttons-width", "Width of the tab buttons when dense (N/A for vertical justified tabs)", "SIZE", "56px"),
|
|
6
6
|
widthWhenHorizontalAndOpen: FtCssVariableFactory.create("--ft-tabs-width-when-horizontal-and-open", "Width of the component when set to horizontal and open", "SIZE", "100%"),
|
|
7
7
|
colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
|
|
8
8
|
colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
|
|
@@ -27,11 +27,11 @@ export const styles = css `
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
.ft-tabs--horizontal.ft-tabs--collapsed {
|
|
30
|
-
width: ${FtTabsCssVariables.
|
|
30
|
+
width: ${FtTabsCssVariables.horizontalButtonsWidth};
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
.ft-tabs--horizontal.ft-tabs--dense.ft-tabs--collapsed {
|
|
34
|
-
width: ${FtTabsCssVariables.
|
|
34
|
+
width: ${FtTabsCssVariables.horizontalDenseButtonsWidth};
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.ft-tabs--horizontal {
|
|
@@ -84,15 +84,14 @@ export const styles = css `
|
|
|
84
84
|
font-size: 16px;
|
|
85
85
|
line-height: 1;
|
|
86
86
|
color: ${FtTabsCssVariables.colorOnSurfaceMedium};
|
|
87
|
-
width: ${FtTabsCssVariables.buttonsWidth};
|
|
88
87
|
}
|
|
89
88
|
|
|
90
|
-
.ft-tabs--
|
|
91
|
-
width: ${FtTabsCssVariables.
|
|
89
|
+
.ft-tabs--horizontal [role='tab'] {
|
|
90
|
+
width: ${FtTabsCssVariables.horizontalButtonsWidth};
|
|
92
91
|
}
|
|
93
92
|
|
|
94
|
-
.ft-tabs--
|
|
95
|
-
width:
|
|
93
|
+
.ft-tabs--horizontal.ft-tabs--dense [role='tab'] {
|
|
94
|
+
width: ${FtTabsCssVariables.horizontalDenseButtonsWidth};
|
|
96
95
|
}
|
|
97
96
|
|
|
98
97
|
[role='tab'][aria-selected='true'] {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-tabs",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.44",
|
|
4
4
|
"description": "Generic tabs component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-icon": "1.1.
|
|
23
|
-
"@fluid-topics/ft-ripple": "1.1.
|
|
24
|
-
"@fluid-topics/ft-tooltip": "1.1.
|
|
25
|
-
"@fluid-topics/ft-typography": "1.1.
|
|
26
|
-
"@fluid-topics/ft-wc-utils": "1.1.
|
|
22
|
+
"@fluid-topics/ft-icon": "1.1.44",
|
|
23
|
+
"@fluid-topics/ft-ripple": "1.1.44",
|
|
24
|
+
"@fluid-topics/ft-tooltip": "1.1.44",
|
|
25
|
+
"@fluid-topics/ft-typography": "1.1.44",
|
|
26
|
+
"@fluid-topics/ft-wc-utils": "1.1.44",
|
|
27
27
|
"lit": "3.1.0"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "338d6b90cd29912af999509fb4d399e13a93e54d"
|
|
30
30
|
}
|