@fluid-topics/ftds-tabs 2.1.16 → 2.1.18

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.
Files changed (6) hide show
  1. package/build/ftds-tabs.d.ts +6 -7
  2. package/build/ftds-tabs.js +30 -29
  3. package/build/ftds-tabs.light.js +79 -81
  4. package/build/ftds-tabs.min.js +100 -102
  5. package/build/ftds-tabs.styles.js +1 -3
  6. package/package.json +8 -8
package/build/ftds-tabs.d.ts CHANGED
@@ -1,8 +1,7 @@
1
1
  import { ClassInfo } from "lit/directives/class-map.js";
2
2
  import { ElementDefinitionsMap, FtLitElement, Optional } from "@fluid-topics/ft-wc-utils";
3
- import { PropertyValues, TemplateResult } from "lit";
3
+ import { PropertyValues } from "lit";
4
4
  import { FtdsTabsAlignment, FtdsTabsProperties, FtdsTabsStructure } from "./ftds-tabs.properties";
5
- import { FtdsTab } from "./ftds-tab";
6
5
  export declare class IndexChangeEvent extends CustomEvent<Optional<number>> {
7
6
  constructor(index: Optional<number>);
8
7
  }
@@ -10,7 +9,7 @@ export declare class FtdsTabs extends FtLitElement implements FtdsTabsProperties
10
9
  static elementDefinitions: ElementDefinitionsMap;
11
10
  alignTabs: FtdsTabsAlignment;
12
11
  private ftdsTabs;
13
- private tabsContainer?;
12
+ private tabButtons?;
14
13
  private activeTab?;
15
14
  private activeTabIndicator?;
16
15
  horizontal: boolean;
@@ -18,16 +17,16 @@ export declare class FtdsTabs extends FtLitElement implements FtdsTabsProperties
18
17
  structure: FtdsTabsStructure;
19
18
  static styles: import("lit").CSSResult[];
20
19
  get tabsClasses(): ClassInfo;
21
- protected render(): TemplateResult<1>;
20
+ protected render(): import("lit-html").TemplateResult<1>;
22
21
  private updateDebouncer;
23
22
  private onTabUpdated;
24
23
  private onContentChange;
25
24
  protected update(props: PropertyValues): void;
26
25
  private resizeObserver;
26
+ private observedTabButtons;
27
27
  protected contentAvailableCallback(props: PropertyValues): void;
28
+ private observeTabButtons;
28
29
  private placeIndicator;
29
- protected placeActiveTabIndicator(activeTabIndicator?: HTMLDivElement, activeTab?: HTMLButtonElement): void;
30
- protected toggleTab(index: number): void;
30
+ private toggleTab;
31
31
  private updateTabs;
32
- protected addTooltipIfNecessary(tab: FtdsTab, button: TemplateResult): TemplateResult;
33
32
  }
package/build/ftds-tabs.js CHANGED
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { classMap, } from "lit/directives/class-map.js";
8
8
  import { Debouncer, FtLitElement, numberProperty, PostResizeEvent, PreResizeEvent, safariEllipsisFix, } from "@fluid-topics/ft-wc-utils";
9
9
  import { designSystemStyles } from "./ftds-tabs.styles";
10
- import { property, query, state, } from "lit/decorators.js";
10
+ import { property, query, queryAll, state, } from "lit/decorators.js";
11
11
  import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
12
12
  import { html, } from "lit";
13
13
  import { when } from "lit/directives/when.js";
@@ -35,6 +35,7 @@ export class FtdsTabs extends FtLitElement {
35
35
  this.dispatchEvent(new PostResizeEvent());
36
36
  });
37
37
  this.resizeObserver = new ResizeObserver(() => this.placeIndicator());
38
+ this.observedTabButtons = [];
38
39
  }
39
40
  get tabsClasses() {
40
41
  return {
@@ -52,7 +53,7 @@ export class FtdsTabs extends FtLitElement {
52
53
  return html `
53
54
  <div class="${classMap(this.tabsClasses)}" part="container">
54
55
  <div role="tablist" part="tablist">
55
- ${repeat(this.ftdsTabs, (tab, index) => this.addTooltipIfNecessary(tab, html `
56
+ ${repeat(this.ftdsTabs, (tab, index) => html `
56
57
  <button class="${classMap({
57
58
  "ftds-tabs--tab-with-icon": !!tab.icon,
58
59
  "ftds-tabs--tab-with-label": !!tab.label,
@@ -87,7 +88,7 @@ export class FtdsTabs extends FtLitElement {
87
88
  ${tab.label}
88
89
  </ftds-typography>
89
90
  </button>
90
- `))}
91
+ `)}
91
92
  <div class="ftds-tabs--active-tab-indicator"
92
93
  part="active-tab-indicator"
93
94
  style="${activeTabColor ? `background-color: ${activeTabColor} !important;` : ""}">
@@ -122,37 +123,40 @@ export class FtdsTabs extends FtLitElement {
122
123
  }
123
124
  contentAvailableCallback(props) {
124
125
  super.contentAvailableCallback(props);
125
- if (this.tabsContainer) {
126
- this.resizeObserver.observe(this.tabsContainer);
127
- }
126
+ this.observeTabButtons();
128
127
  this.placeIndicator();
129
128
  }
130
- placeIndicator() {
131
- this.placeActiveTabIndicator(this.activeTabIndicator, this.activeTab);
129
+ observeTabButtons() {
130
+ if (!this.tabButtons) {
131
+ return;
132
+ }
133
+ this.observedTabButtons.forEach((button) => this.resizeObserver.unobserve(button));
134
+ this.tabButtons.forEach((button) => this.resizeObserver.observe(button));
135
+ this.observedTabButtons = Array.from(this.tabButtons);
132
136
  }
133
- placeActiveTabIndicator(activeTabIndicator, activeTab) {
134
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
135
- if (activeTabIndicator) {
136
- const target = (_a = activeTab === null || activeTab === void 0 ? void 0 : activeTab.closest(".ftds-tabs--tab-tooltip")) !== null && _a !== void 0 ? _a : activeTab;
137
+ placeIndicator() {
138
+ var _a, _b, _c, _d, _e, _f, _g, _h;
139
+ if (this.activeTabIndicator) {
140
+ const target = this.activeTab;
137
141
  if (target) {
138
- const targetHeight = (_c = (_b = target === null || target === void 0 ? void 0 : target.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 0;
139
- const targetWidth = (_e = (_d = target === null || target === void 0 ? void 0 : target.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.width) !== null && _e !== void 0 ? _e : 0;
142
+ const targetHeight = (_b = (_a = target === null || target === void 0 ? void 0 : target.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0;
143
+ const targetWidth = (_d = (_c = target === null || target === void 0 ? void 0 : target.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 0;
140
144
  if (this.horizontal) {
141
- activeTabIndicator.style.height = targetHeight + "px";
142
- activeTabIndicator.style.width = "3px";
143
- activeTabIndicator.style.left = ((_f = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _f !== void 0 ? _f : 0) + targetWidth - 3 + "px";
144
- activeTabIndicator.style.top = ((_g = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _g !== void 0 ? _g : 0) + "px";
145
+ this.activeTabIndicator.style.height = targetHeight + "px";
146
+ this.activeTabIndicator.style.width = "3px";
147
+ this.activeTabIndicator.style.left = ((_e = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _e !== void 0 ? _e : 0) + targetWidth - 3 + "px";
148
+ this.activeTabIndicator.style.top = ((_f = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _f !== void 0 ? _f : 0) + "px";
145
149
  }
146
150
  else {
147
- activeTabIndicator.style.height = "3px";
148
- activeTabIndicator.style.width = targetWidth + "px";
149
- activeTabIndicator.style.left = ((_h = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _h !== void 0 ? _h : 0) + "px";
150
- activeTabIndicator.style.top = (((_j = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _j !== void 0 ? _j : 0) + targetHeight - 3) + "px";
151
+ this.activeTabIndicator.style.height = "3px";
152
+ this.activeTabIndicator.style.width = targetWidth + "px";
153
+ this.activeTabIndicator.style.left = ((_g = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _g !== void 0 ? _g : 0) + "px";
154
+ this.activeTabIndicator.style.top = (((_h = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _h !== void 0 ? _h : 0) + targetHeight - 3) + "px";
151
155
  }
152
156
  }
153
157
  else {
154
- activeTabIndicator.style.height = "0px";
155
- activeTabIndicator.style.width = "0px";
158
+ this.activeTabIndicator.style.height = "0px";
159
+ this.activeTabIndicator.style.width = "0px";
156
160
  }
157
161
  }
158
162
  }
@@ -164,9 +168,6 @@ export class FtdsTabs extends FtLitElement {
164
168
  tab.active = index == this.activeIndex;
165
169
  });
166
170
  }
167
- addTooltipIfNecessary(tab, button) {
168
- return button;
169
- }
170
171
  }
171
172
  FtdsTabs.elementDefinitions = {
172
173
  "ft-ripple": FtRipple,
@@ -185,8 +186,8 @@ __decorate([
185
186
  state()
186
187
  ], FtdsTabs.prototype, "ftdsTabs", void 0);
187
188
  __decorate([
188
- query("[role='tablist']")
189
- ], FtdsTabs.prototype, "tabsContainer", void 0);
189
+ queryAll("[role='tablist'] > button")
190
+ ], FtdsTabs.prototype, "tabButtons", void 0);
190
191
  __decorate([
191
192
  query("[aria-selected='true']")
192
193
  ], FtdsTabs.prototype, "activeTab", void 0);