@fluid-topics/ft-tabs 1.1.42 → 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.
Files changed (9) hide show
  1. package/build/ft-tabs.d.ts +7 -4
  2. package/build/ft-tabs.js +77 -40
  3. package/build/ft-tabs.light.js +108 -73
  4. package/build/ft-tabs.min.js +219 -184
  5. package/build/ft-tabs.properties.d.ts +5 -1
  6. package/build/ft-tabs.properties.js +2 -0
  7. package/build/ft-tabs.styles.d.ts +3 -0
  8. package/build/ft-tabs.styles.js +45 -7
  9. package/package.json +7 -7
package/build/ft-tabs.d.ts CHANGED
@@ -1,20 +1,22 @@
1
1
  import { PropertyValues, TemplateResult } from "lit";
2
- import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
2
+ import { ElementDefinitionsMap, FtLitElement, Optional } from "@fluid-topics/ft-wc-utils";
3
3
  import { FtTabsAlignment, FtTabsProperties } from "./ft-tabs.properties";
4
- export declare class IndexChangeEvent extends CustomEvent<number> {
5
- constructor(index: number);
4
+ export declare class IndexChangeEvent extends CustomEvent<Optional<number>> {
5
+ constructor(index: Optional<number>);
6
6
  }
7
7
  export declare class FtTabs extends FtLitElement implements FtTabsProperties {
8
8
  static elementDefinitions: ElementDefinitionsMap;
9
9
  static styles: import("lit").CSSResult;
10
10
  dense: boolean;
11
+ collapsible: boolean;
12
+ horizontal: boolean;
11
13
  contentBefore: boolean;
12
14
  alignTabs: FtTabsAlignment;
13
15
  private ftTabs;
14
16
  private tabsContainer?;
15
17
  private activeTab?;
16
18
  private activeTabIndicator?;
17
- activeIndex: number;
19
+ activeIndex?: number;
18
20
  protected render(): TemplateResult<1>;
19
21
  private updateDebouncer;
20
22
  private onTabUpdated;
@@ -23,6 +25,7 @@ export declare class FtTabs extends FtLitElement implements FtTabsProperties {
23
25
  private resizeObserver;
24
26
  protected contentAvailableCallback(props: PropertyValues): void;
25
27
  private placeIndicator;
28
+ private toggleTab;
26
29
  private updateTabs;
27
30
  private addTooltipIfNecessary;
28
31
  }
package/build/ft-tabs.js CHANGED
@@ -8,7 +8,7 @@ import { html } from "lit";
8
8
  import { property, query, state } from "lit/decorators.js";
9
9
  import { repeat } from "lit/directives/repeat.js";
10
10
  import { classMap } from "lit/directives/class-map.js";
11
- import { Debouncer, FtLitElement, PostResizeEvent, PreResizeEvent } from "@fluid-topics/ft-wc-utils";
11
+ import { Debouncer, FtLitElement, optionalNumberProperty, PostResizeEvent, PreResizeEvent } from "@fluid-topics/ft-wc-utils";
12
12
  import { FtTab } from "./ft-tab";
13
13
  import { FtRipple } from "@fluid-topics/ft-ripple";
14
14
  import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
@@ -25,6 +25,8 @@ class FtTabs extends FtLitElement {
25
25
  constructor() {
26
26
  super(...arguments);
27
27
  this.dense = false;
28
+ this.collapsible = false;
29
+ this.horizontal = false;
28
30
  this.contentBefore = false;
29
31
  this.alignTabs = FtTabsAlignment.justify;
30
32
  this.ftTabs = [];
@@ -37,49 +39,52 @@ class FtTabs extends FtLitElement {
37
39
  this.resizeObserver = new ResizeObserver(() => this.placeIndicator());
38
40
  }
39
41
  render() {
40
- var _a;
42
+ var _a, _b;
41
43
  const classes = {
42
44
  "ft-tabs": true,
45
+ "ft-tabs--collapsed": this.collapsible && this.activeIndex == null,
46
+ "ft-tabs--horizontal": this.horizontal,
43
47
  "ft-tabs--reverse": this.contentBefore,
44
48
  "ft-tabs--dense": this.dense,
49
+ ["ft-tabs--align-" + this.alignTabs]: true
45
50
  };
46
- const activeTabColor = (_a = this.ftTabs[this.activeIndex]) === null || _a === void 0 ? void 0 : _a.color;
51
+ const activeTabColor = (_b = this.ftTabs[(_a = this.activeIndex) !== null && _a !== void 0 ? _a : 0]) === null || _b === void 0 ? void 0 : _b.color;
47
52
  return html `
48
53
  <div class="${classMap(classes)}" part="container">
49
- <div class="ft-tabs--align-${this.alignTabs}" role="tablist" part="tablist">
54
+ <div role="tablist" part="tablist">
50
55
  ${repeat(this.ftTabs, (tab, index) => this.addTooltipIfNecessary(tab, html `
51
- <button class="${classMap({
56
+ <button class="${classMap({
52
57
  "ft-tabs--tab-with-icon": !!tab.icon,
53
58
  "ft-tabs--tab-with-label": !!tab.label,
54
59
  })}"
55
- ?disabled=${tab.disabled}
56
- @click=${() => this.activeIndex = index}
57
- role="tab"
58
- part="tab tab-${tab.id}${tab.active ? " active-tab" : ""}"
59
- id="${tab.ariaLabelledBy}"
60
- aria-label="${tab.label}"
61
- aria-selected="${tab.active ? "true" : "false"}"
62
- tabindex="${tab.disabled ? "-1" : "0"}"
63
- aria-controls="${tab.id}"
64
- style="${tab.color ? `color: ${tab.color} !important;` : ""}">
65
- <ft-ripple primary
66
- ?disabled=${tab.disabled}
67
- part="tab-ripple${tab.active ? " active-tab-ripple" : ""}"
68
- style="${(tab.color || tab.rippleColor)
60
+ ?disabled=${tab.disabled}
61
+ @click=${() => this.toggleTab(index)}
62
+ role="tab"
63
+ part="tab tab-${tab.id}${tab.active ? " active-tab" : ""}"
64
+ id="${tab.ariaLabelledBy}"
65
+ aria-label="${tab.label}"
66
+ aria-selected="${tab.active ? "true" : "false"}"
67
+ tabindex="${tab.disabled ? "-1" : "0"}"
68
+ aria-controls="${tab.id}"
69
+ style="${tab.color ? `color: ${tab.color} !important;` : ""}">
70
+ <ft-ripple primary
71
+ ?disabled=${tab.disabled}
72
+ part="tab-ripple${tab.active ? " active-tab-ripple" : ""}"
73
+ style="${(tab.color || tab.rippleColor)
69
74
  ? `--ft-ripple-color: ${tab.color || tab.rippleColor};`
70
75
  : ""}"></ft-ripple>
71
- <ft-icon class="ft-tabs--tab-icon"
72
- part="tab-icon${tab.active ? " active-tab-icon" : ""}"
73
- .variant=${tab.iconVariant}>
74
- ${tab.icon}
75
- </ft-icon>
76
- <ft-typography class="ft-tabs--tab-label"
77
- part="tab-label${tab.active ? " active-tab-label" : ""}"
78
- variant="${FtTypographyVariants.body2}">
79
- ${tab.label}
80
- </ft-typography>
81
- </button>
82
- `))}
76
+ <ft-icon class="ft-tabs--tab-icon"
77
+ part="tab-icon${tab.active ? " active-tab-icon" : ""}"
78
+ .variant=${tab.iconVariant}>
79
+ ${tab.icon}
80
+ </ft-icon>
81
+ <ft-typography class="ft-tabs--tab-label"
82
+ part="tab-label${tab.active ? " active-tab-label" : ""}"
83
+ variant="${FtTypographyVariants.body2}">
84
+ ${tab.label}
85
+ </ft-typography>
86
+ </button>
87
+ `))}
83
88
  <div class="ft-tabs--active-tab-indicator"
84
89
  part="active-tab-indicator"
85
90
  style="${activeTabColor ? `background-color: ${activeTabColor} !important;` : ""}">
@@ -120,31 +125,57 @@ class FtTabs extends FtLitElement {
120
125
  this.placeIndicator();
121
126
  }
122
127
  placeIndicator() {
123
- var _a, _b, _c, _d, _e, _f, _g;
128
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
124
129
  if (this.activeTabIndicator) {
125
130
  const target = (_b = (_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.closest(".ft-tabs--tab-tooltip")) !== null && _b !== void 0 ? _b : this.activeTab;
126
- this.activeTabIndicator.style.width = ((_c = target === null || target === void 0 ? void 0 : target.clientWidth) !== null && _c !== void 0 ? _c : 0) + "px";
127
- this.activeTabIndicator.style.left = ((_d = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _d !== void 0 ? _d : 0) + "px";
128
- if (this.contentBefore) {
129
- this.activeTabIndicator.style.top = ((_e = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _e !== void 0 ? _e : 0) + "px";
131
+ if (target) {
132
+ if (this.horizontal) {
133
+ this.activeTabIndicator.style.height = ((_c = target === null || target === void 0 ? void 0 : target.clientHeight) !== null && _c !== void 0 ? _c : 0) + "px";
134
+ this.activeTabIndicator.style.width = "3px";
135
+ this.activeTabIndicator.style.top = ((_d = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _d !== void 0 ? _d : 0) + "px";
136
+ if (this.contentBefore) {
137
+ this.activeTabIndicator.style.left = ((_e = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _e !== void 0 ? _e : 0) + "px";
138
+ }
139
+ else {
140
+ this.activeTabIndicator.style.left = (((_f = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _f !== void 0 ? _f : 0) + ((_g = target === null || target === void 0 ? void 0 : target.clientWidth) !== null && _g !== void 0 ? _g : 0) - 3) + "px";
141
+ }
142
+ }
143
+ else {
144
+ this.activeTabIndicator.style.height = "3px";
145
+ this.activeTabIndicator.style.width = ((_h = target === null || target === void 0 ? void 0 : target.clientWidth) !== null && _h !== void 0 ? _h : 0) + "px";
146
+ this.activeTabIndicator.style.left = ((_j = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _j !== void 0 ? _j : 0) + "px";
147
+ if (this.contentBefore) {
148
+ this.activeTabIndicator.style.top = ((_k = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _k !== void 0 ? _k : 0) + "px";
149
+ }
150
+ else {
151
+ this.activeTabIndicator.style.top = (((_l = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _l !== void 0 ? _l : 0) + ((_m = target === null || target === void 0 ? void 0 : target.clientHeight) !== null && _m !== void 0 ? _m : 0) - 3) + "px";
152
+ }
153
+ }
130
154
  }
131
155
  else {
132
- this.activeTabIndicator.style.top = (((_f = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _f !== void 0 ? _f : 0) + ((_g = target === null || target === void 0 ? void 0 : target.clientHeight) !== null && _g !== void 0 ? _g : 0) - this.activeTabIndicator.clientHeight) + "px";
156
+ this.activeTabIndicator.style.height = "0px";
157
+ this.activeTabIndicator.style.width = "0px";
133
158
  }
134
159
  }
135
160
  }
161
+ toggleTab(index) {
162
+ this.activeIndex = this.collapsible && index === this.activeIndex ? undefined : index;
163
+ }
136
164
  updateTabs() {
137
165
  this.ftTabs.forEach((tab, index) => {
138
166
  tab.active = index == this.activeIndex;
139
167
  });
140
168
  }
141
169
  addTooltipIfNecessary(tab, button) {
142
- if (this.dense && tab.label && tab.icon) {
170
+ if (tab.label && tab.icon && (this.dense || this.horizontal)) {
171
+ let tooltipPosition = this.horizontal
172
+ ? this.contentBefore ? "left" : "right"
173
+ : this.contentBefore ? "top" : "bottom";
143
174
  return html `
144
175
  <ft-tooltip class="ft-tabs--tab-tooltip"
145
176
  part="tab-tooltip"
146
177
  text="${tab.label}"
147
- position="${this.contentBefore ? "top" : "bottom"}">
178
+ position="${tooltipPosition}">
148
179
  ${button}
149
180
  </ft-tooltip>
150
181
  `;
@@ -164,6 +195,12 @@ FtTabs.styles = styles;
164
195
  __decorate([
165
196
  property({ type: Boolean })
166
197
  ], FtTabs.prototype, "dense", void 0);
198
+ __decorate([
199
+ property({ type: Boolean })
200
+ ], FtTabs.prototype, "collapsible", void 0);
201
+ __decorate([
202
+ property({ type: Boolean })
203
+ ], FtTabs.prototype, "horizontal", void 0);
167
204
  __decorate([
168
205
  property({ type: Boolean })
169
206
  ], FtTabs.prototype, "contentBefore", void 0);
@@ -183,6 +220,6 @@ __decorate([
183
220
  query(".ft-tabs--active-tab-indicator")
184
221
  ], FtTabs.prototype, "activeTabIndicator", void 0);
185
222
  __decorate([
186
- property({ type: Number, reflect: true })
223
+ optionalNumberProperty({ reflect: true })
187
224
  ], FtTabs.prototype, "activeIndex", void 0);
188
225
  export { FtTabs };