11661487640

Committed 04 Nov 2024 09:30AM UTC coverage: 98.269% (-0.04%) from 98.311%

Build # 11661487640

Build Type

Pull #1352

github

Committed by

web-flow

Commit Message

Merge 36842d60e into 4efe07ad2

Pull Request Pull Request #1352: Refactor Tab component

Run Details

3839 of 4044 branches covered (94.93%)

Branch coverage included in aggregate %.

413 of 426 new or added lines in 4 files covered. (96.95%)

1 existing line in 1 file now uncovered.

24437 of 24730 relevant lines covered (98.82%)

452.07 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

99.13

/src/components/tabs/tabs.ts

import { LitElement, html, nothing } from 'lit';
import {
  eventOptions,
  property,
  query,
  queryAssignedElements,
  state,
} from 'lit/decorators.js';
import { type Ref, createRef, ref } from 'lit/directives/ref.js';

import { styleMap } from 'lit/directives/style-map.js';
import { themes } from '../../theming/theming-decorator.js';
import IgcIconButtonComponent from '../button/icon-button.js';
import {
  addKeybindings,
  arrowLeft,
  arrowRight,
  endKey,
  homeKey,
} from '../common/controllers/key-bindings.js';
import {
  type MutationControllerParams,
  createMutationController,
} from '../common/controllers/mutation-observer.js';
import { createResizeController } from '../common/controllers/resize-observer.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import type { Constructor } from '../common/mixins/constructor.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import {
  findElementFromEventPath,
  first,
  isEmpty,
  isLTR,
  isString,
  last,
  partNameMap,
  scrollIntoView,
  wrap,
} from '../common/util.js';
import IgcTabComponent from './tab.js';
import { styles as shared } from './themes/shared/tabs/tabs.common.css.js';
import { all } from './themes/tabs-themes.js';
import { styles } from './themes/tabs.base.css.js';

export interface IgcTabsComponentEventMap {
  igcChange: CustomEvent<IgcTabComponent>;
}

/* blazorAdditionalDependency: IgcTabComponent */
/**
 * `IgcTabsComponent` provides a wizard-like workflow by dividing content into logical tabs.
 *
 * The tabs component allows the user to navigate between multiple tabs.
 * It supports keyboard navigation and provides API methods to control the selected tab.
 *
 * @element igc-tabs
 *
 * @fires igcChange - Emitted when the selected tab changes.
 *
 * @slot - Renders the `IgcTabComponents` inside default slot.
 *
 * @csspart start-scroll-button - The start scroll button displayed when the tabs overflow.
 * @csspart end-scroll-button - The end scroll button displayed when the tabs overflow.
 * @csspart selected-indicator - The indicator that shows which tab is selected.
 */
@themes(all)
export default class IgcTabsComponent extends EventEmitterMixin<
  IgcTabsComponentEventMap,
  Constructor<LitElement>
>(LitElement) {
  public static readonly tagName = 'igc-tabs';
  public static styles = [styles, shared];

  /* blazorSuppress */
  public static register() {
    registerComponent(
      IgcTabsComponent,
      IgcTabComponent,
      IgcIconButtonComponent
    );
  }

  private _resizeController!: ReturnType<typeof createResizeController>;
  private _headerRef: Ref<HTMLDivElement> = createRef();

  /** Used in the `update` hook to check if a dynamic ltr-rtl change has happened,
   * and calls `alignIndicator` if there is one.
   */
  private _isLTR = true;

  @query('[part~="tabs"]', true)
  protected _scrollContainer!: HTMLElement;

  @query('[part="selected-indicator"] span', true)
  protected _selectedIndicator!: HTMLElement;

  @state()
  private _activeTab?: IgcTabComponent;

  @state()
  private _cssVars = {
    '--_tabs-count': '',
    '--_ig-tabs-width': '',
  };

  @state()
  private _scrollButtonsDisabled = {
    start: true,
    end: false,
  };

  @state()
  protected showScrollButtons = false;

  private get _closestActiveTabIndex() {
    const root = this.getRootNode() as Document | ShadowRoot;
    const tab = root.activeElement
      ? root.activeElement.closest(IgcTabComponent.tagName)
      : null;

    return this._enabledTabs.indexOf(tab!);
  }

  protected get _enabledTabs() {
    return this.tabs.filter((tab) => !tab.disabled);
  }

  /* blazorSuppress */
  @queryAssignedElements({ selector: IgcTabComponent.tagName })
  public tabs!: Array<IgcTabComponent>;

  /** Returns the currently selected tab label. */
  public get selected(): string {
    return this._activeTab?.label ?? '';
  }

  /**
   * Sets the alignment for the tab headers
   * @attr
   */
  @property({ reflect: true })
  public alignment: 'start' | 'end' | 'center' | 'justify' = 'start';

  /**
   * Determines the tab activation. When set to auto,
   * the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys
   * and the corresponding panel is displayed.
   * When set to manual, the tab is only focused. The selection happens after pressing Space or Enter.
   * @attr
   */
  @property()
  public activation: 'auto' | 'manual' = 'auto';

  @watch('alignment', { waitUntilFirstUpdate: true })
  protected alignmentChanged() {
    this._alignIndicator();
  }

  constructor() {
    super();

    addKeybindings(this, {
      ref: this._headerRef,
      skip: this._skipKeyboard,
      bindingDefaults: { preventDefault: true },
    })
      .set(arrowLeft, () => this.handleArrowKeys(isLTR(this) ? -1 : 1))
      .set(arrowRight, () => this.handleArrowKeys(isLTR(this) ? 1 : -1))
      .set(homeKey, this.handleHomeKey)
      .set(endKey, this.handleEndKey)
      .setActivateHandler(this.handleActivationKeys, { preventDefault: false });

    createMutationController(this, {
      callback: this._mutationCallback,
      config: {
        attributeFilter: ['selected'],
        childList: true,
        subtree: true,
      },
      filter: [IgcTabComponent.tagName],
    });

    this._resizeController = createResizeController(this, {
      callback: this._resizeCallback,
      options: { box: 'border-box' },
      target: null,
    });
  }

  protected override async firstUpdated() {
    await this.updateComplete;

    const selectedTab =
      this.tabs.findLast((tab) => tab.selected) ?? first(this._enabledTabs);

    this._setCSSProps();
    this._updateButtonsOnResize();
    this._selectTab(selectedTab, false);

    this._resizeController.observe(this._scrollContainer);
  }

  public override connectedCallback() {
    super.connectedCallback();
    this.role = 'tablist';
  }

  protected override updated() {
    if (this._isLTR !== isLTR(this)) {
      this._isLTR = isLTR(this);
      this._alignIndicator();
    }
  }

  private async _resizeCallback() {
    this._updateButtonsOnResize();
    await this.updateComplete;
    this._alignIndicator();
    this._setCSSProps();
  }

  private _mutationCallback({
    changes,
  }: MutationControllerParams<IgcTabComponent>) {
    const selected = changes.attributes.find(
      (tab) => this.tabs.includes(tab) && tab.selected
    );
    const added = changes.added.filter(
      (change) => change.target.closest(this.tagName) === this
    );
    const removed = changes.removed.filter(
      (change) => change.target.closest(this.tagName) === this
    );

    this._selectTab(selected, false);

    if (!isEmpty(removed) || !isEmpty(added)) {
      let nextSelectedTab: IgcTabComponent | null = null;

      for (const { node: tab } of removed) {
        if (tab.selected && tab === this._activeTab) {
          nextSelectedTab = first(this._enabledTabs);
        }
      }

      for (const { node: tab } of added) {
        if (tab.selected) {
          nextSelectedTab = tab;
        }
      }

      if (nextSelectedTab) {
        this._selectTab(nextSelectedTab, false);
      }

      this._setCSSProps();
    }
  }

  private async _alignIndicator() {
    const styles: Partial<CSSStyleDeclaration> = {
      visibility: this._activeTab ? 'visible' : 'hidden',
    };

    await this.updateComplete;

    if (this._activeTab) {
      const activeTabHeader = this._getTabHeader(this._activeTab);

      const headerRect = activeTabHeader.getBoundingClientRect();
      const containerRect = this._scrollContainer.getBoundingClientRect();

      const headerOffset = activeTabHeader.offsetLeft;
      const containerOffset = this._scrollContainer.offsetLeft;

      const translateX = isLTR(this)
        ? headerOffset - containerOffset
        : headerRect.width + headerOffset - containerRect.width;

      Object.assign(styles, {
        width: `${headerRect.width}px`,
        transform: `translateX(${translateX}px)`,
      });
    }

    Object.assign(this._selectedIndicator.style, styles);
  }

  private _updateButtonsOnResize() {
    const { scrollWidth, clientWidth } = this._scrollContainer;

    this.showScrollButtons = scrollWidth > clientWidth;
    this._updateScrollButtons();
  }

  private _updateScrollButtons() {
    const { scrollLeft, scrollWidth } = this._scrollContainer;
    const { width } = this._scrollContainer.getBoundingClientRect();

    this._scrollButtonsDisabled = {
      start: scrollLeft === 0,
      end: Math.abs(Math.abs(scrollLeft) + width - scrollWidth) <= 1,
    };
  }

  private _selectTab(tab?: IgcTabComponent, shouldEmit = true) {
    if (!tab || tab === this._activeTab) {
      return;
    }

    this._setSelectedTab(tab);
    if (shouldEmit) {
      this.emitEvent('igcChange', { detail: this._activeTab });
    }
  }

  private async _setSelectedTab(tab: IgcTabComponent) {
    if (this._activeTab) {
      this._activeTab.selected = false;
    }

    tab.selected = true;
    this._activeTab = tab;

    scrollIntoView(this._getTabHeader(tab));
    this._alignIndicator();
  }

  private _scrollByOffset(direction: 'start' | 'end') {
    const factor = isLTR(this) ? 1 : -1;
    const step = direction === 'start' ? -180 : 180;

    this._setScrollSnap(direction);
    this._scrollContainer.scrollBy({ left: step * factor, behavior: 'smooth' });
  }

  private _keyboardActivateTab(tab: IgcTabComponent) {
    const header = this._getTabHeader(tab);

    this._setScrollSnap('unset');
    scrollIntoView(header);
    header.focus({ preventScroll: true });

    if (this.activation === 'auto') {
      this._selectTab(tab);
    }
  }

  private _skipKeyboard(node: Element, event: KeyboardEvent) {
    return !(
      this._isEventFromTabHeader(event) &&
      this.tabs.includes(node.closest(IgcTabComponent.tagName)!)
    );
  }

  private _isEventFromTabHeader(event: Event) {
    return findElementFromEventPath('[part~="header"]', event);
  }

  private _getTabHeader(tab: IgcTabComponent) {
    return tab.renderRoot.querySelector<HTMLElement>('[part~="header"]')!;
  }

  private _setCSSProps() {
    this._cssVars = {
      '--_tabs-count': this.tabs.length.toString(),
      '--_ig-tabs-width': `${this._scrollContainer.getBoundingClientRect().width}px`,
    };
  }

  private _setScrollSnap(value: 'start' | 'end' | 'unset') {
    this._scrollContainer.style.setProperty('--_ig-tab-snap', value);
  }

  protected handleClick(event: PointerEvent) {
    if (!this._isEventFromTabHeader(event)) {
      return;
    }

    const tab = findElementFromEventPath<IgcTabComponent>(
      IgcTabComponent.tagName,
      event
    );

    if (!this.tabs.includes(tab!) || tab?.disabled) {
      return;
    }

    this._setScrollSnap('unset');
    this._getTabHeader(tab!).focus();
    this._selectTab(tab);
  }

  protected handleArrowKeys(delta: -1 | 1) {
    const tabs = this._enabledTabs;
    this._keyboardActivateTab(
      tabs[wrap(0, tabs.length - 1, this._closestActiveTabIndex + delta)]
    );
  }

  protected handleHomeKey() {
    this._keyboardActivateTab(first(this._enabledTabs));
  }

  protected handleEndKey() {
    this._keyboardActivateTab(last(this._enabledTabs));
  }

  protected handleActivationKeys() {
    const tabs = this._enabledTabs;
    const index = this._closestActiveTabIndex;

    if (index > -1) {
      this._selectTab(tabs[index], false);
      this._keyboardActivateTab(tabs[index]);
    }
  }

  @eventOptions({ passive: true })
  protected handleScroll() {
    this._updateScrollButtons();
  }

  /** Selects the specified tab and displays the corresponding panel.  */
  public select(tab: IgcTabComponent | string) {
    const element = isString(tab) ? this.tabs.find((t) => t.id === tab) : tab;

    if (element) {
      this._selectTab(element, false);
    }
  }

  protected renderScrollButton(direction: 'start' | 'end') {
    const start = direction === 'start';

    return this.showScrollButtons
      ? html`
          <igc-icon-button
            tabindex="-1"
            variant="flat"
            collection="default"
            part="${direction}-scroll-button"
            exportparts="icon"
            name="${start ? 'prev' : 'next'}"
            ?disabled=${start
              ? this._scrollButtonsDisabled.start
              : this._scrollButtonsDisabled.end}
            @click=${() => this._scrollByOffset(direction)}
          >
          </igc-icon-button>
        `
      : nothing;
  }

  protected override render() {
    const part = partNameMap({
      inner: true,
      scrollable: this.showScrollButtons,
    });

    return html`
      <div
        ${ref(this._headerRef)}
        part="tabs"
        style=${styleMap(this._cssVars)}
        @scroll=${this.handleScroll}
      >
        <div part=${part}>
          ${this.renderScrollButton('start')}

          <slot @click=${this.handleClick}></slot>

          ${this.renderScrollButton('end')}

          <div part="selected-indicator">
            <span></span>
          </div>
        </div>
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'igc-tabs': IgcTabsComponent;
  }
}

1	import { LitElement, html, nothing } from 'lit';	10✔
2	import {	10✔
3	eventOptions,	10✔
4	property,	10✔
5	query,	10✔
6	queryAssignedElements,	10✔
7	state,	10✔
8	} from 'lit/decorators.js';	10✔
9	import { type Ref, createRef, ref } from 'lit/directives/ref.js';	10✔
10		10✔
11	import { styleMap } from 'lit/directives/style-map.js';	10✔
12	import { themes } from '../../theming/theming-decorator.js';	10✔
13	import IgcIconButtonComponent from '../button/icon-button.js';	10✔
14	import {	10✔
15	addKeybindings,	10✔
16	arrowLeft,	10✔
17	arrowRight,	10✔
18	endKey,	10✔
19	homeKey,	10✔
20	} from '../common/controllers/key-bindings.js';	10✔
21	import {	10✔
22	type MutationControllerParams,	10✔
23	createMutationController,	10✔
24	} from '../common/controllers/mutation-observer.js';	10✔
25	import { createResizeController } from '../common/controllers/resize-observer.js';	10✔
26	import { watch } from '../common/decorators/watch.js';	10✔
27	import { registerComponent } from '../common/definitions/register.js';	10✔
28	import type { Constructor } from '../common/mixins/constructor.js';	10✔
29	import { EventEmitterMixin } from '../common/mixins/event-emitter.js';	10✔
30	import {	10✔
31	findElementFromEventPath,	10✔
32	first,	10✔
33	isEmpty,	10✔
34	isLTR,	10✔
35	isString,	10✔
36	last,	10✔
37	partNameMap,	10✔
38	scrollIntoView,	10✔
39	wrap,	10✔
40	} from '../common/util.js';	10✔
41	import IgcTabComponent from './tab.js';	10✔
42	import { styles as shared } from './themes/shared/tabs/tabs.common.css.js';	10✔
43	import { all } from './themes/tabs-themes.js';	10✔
44	import { styles } from './themes/tabs.base.css.js';	10✔
45		10✔
46	export interface IgcTabsComponentEventMap {	10✔
47	igcChange: CustomEvent<IgcTabComponent>;	10✔
48	}	10✔
49		10✔
50	/* blazorAdditionalDependency: IgcTabComponent */	10✔
51	/**	10✔
52	* `IgcTabsComponent` provides a wizard-like workflow by dividing content into logical tabs.	10✔
53	*	10✔
54	* The tabs component allows the user to navigate between multiple tabs.	10✔
55	* It supports keyboard navigation and provides API methods to control the selected tab.	10✔
56	*	10✔
57	* @element igc-tabs	10✔
58	*	10✔
59	* @fires igcChange - Emitted when the selected tab changes.	10✔
60	*	10✔
61	* @slot - Renders the `IgcTabComponents` inside default slot.	10✔
62	*	10✔
63	* @csspart start-scroll-button - The start scroll button displayed when the tabs overflow.	10✔
64	* @csspart end-scroll-button - The end scroll button displayed when the tabs overflow.	10✔
65	* @csspart selected-indicator - The indicator that shows which tab is selected.	10✔
66	*/	10✔
67	@themes(all)	10✔
68	export default class IgcTabsComponent extends EventEmitterMixin<	10✔
69	IgcTabsComponentEventMap,	10✔
70	Constructor<LitElement>	10✔
71	>(LitElement) {	10✔
72	public static readonly tagName = 'igc-tabs';	10✔
73	public static styles = [styles, shared];	10✔
74		10✔
75	/* blazorSuppress */	10✔
76	public static register() {	10✔
77	registerComponent(	1✔
78	IgcTabsComponent,	1✔
79	IgcTabComponent,	1✔
80	IgcIconButtonComponent	1✔
81	);	1✔
82	}	1✔
83		10✔
84	private _resizeController!: ReturnType<typeof createResizeController>;	10✔
85	private _headerRef: Ref<HTMLDivElement> = createRef();	10✔
86		10✔
87	/** Used in the `update` hook to check if a dynamic ltr-rtl change has happened,	10✔
88	* and calls `alignIndicator` if there is one.	10✔
89	*/	10✔
90	private _isLTR = true;	10✔
91		10✔
92	@query('[part~="tabs"]', true)	10✔
93	protected _scrollContainer!: HTMLElement;	10✔
94		10✔
95	@query('[part="selected-indicator"] span', true)	10✔
96	protected _selectedIndicator!: HTMLElement;	10✔
97		10✔
98	@state()	10✔
99	private _activeTab?: IgcTabComponent;	10✔
100		10✔
101	@state()	10✔
102	private _cssVars = {	10✔
103	'--_tabs-count': '',	10✔
104	'--_ig-tabs-width': '',	10✔
105	};	10✔
106		10✔
107	@state()	10✔
108	private _scrollButtonsDisabled = {	10✔
109	start: true,	10✔
110	end: false,	10✔
111	};	10✔
112		10✔
113	@state()	10✔
114	protected showScrollButtons = false;	10✔
115		10✔
116	private get _closestActiveTabIndex() {	10✔
117	const root = this.getRootNode() as Document \| ShadowRoot;	9✔
118	const tab = root.activeElement	9✔
119	? root.activeElement.closest(IgcTabComponent.tagName)	9✔
120	: null;	9!
121		9✔
122	return this._enabledTabs.indexOf(tab!);	9✔
123	}	9✔
124		10✔
125	protected get _enabledTabs() {	10✔
126	return this.tabs.filter((tab) => !tab.disabled);	58✔
127	}	58✔
128		10✔
129	/* blazorSuppress */	10✔
130	@queryAssignedElements({ selector: IgcTabComponent.tagName })	10✔
131	public tabs!: Array<IgcTabComponent>;	10✔
132		10✔
133	/** Returns the currently selected tab label. */	10✔
134	public get selected(): string {	10✔
135	return this._activeTab?.label ?? '';	2!
136	}	2✔
137		10✔
138	/**	10✔
139	* Sets the alignment for the tab headers	10✔
140	* @attr	10✔
141	*/	10✔
142	@property({ reflect: true })	10✔
143	public alignment: 'start' \| 'end' \| 'center' \| 'justify' = 'start';	10✔
144		10✔
145	/**	10✔
146	* Determines the tab activation. When set to auto,	10✔
147	* the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys	10✔
148	* and the corresponding panel is displayed.	10✔
149	* When set to manual, the tab is only focused. The selection happens after pressing Space or Enter.	10✔
150	* @attr	10✔
151	*/	10✔
152	@property()	10✔
153	public activation: 'auto' \| 'manual' = 'auto';	10✔
154		10✔
155	@watch('alignment', { waitUntilFirstUpdate: true })	10✔
156	protected alignmentChanged() {	10✔
157	this._alignIndicator();	5✔
158	}	5✔
159		10✔
160	constructor() {	10✔
161	super();	36✔
162		36✔
163	addKeybindings(this, {	36✔
164	ref: this._headerRef,	36✔
165	skip: this._skipKeyboard,	36✔
166	bindingDefaults: { preventDefault: true },	36✔
167	})	36✔
168	.set(arrowLeft, () => this.handleArrowKeys(isLTR(this) ? -1 : 1))	36✔
169	.set(arrowRight, () => this.handleArrowKeys(isLTR(this) ? 1 : -1))	36✔
170	.set(homeKey, this.handleHomeKey)	36✔
171	.set(endKey, this.handleEndKey)	36✔
172	.setActivateHandler(this.handleActivationKeys, { preventDefault: false });	36✔
173		36✔
174	createMutationController(this, {	36✔
175	callback: this._mutationCallback,	36✔
176	config: {	36✔
177	attributeFilter: ['selected'],	36✔
178	childList: true,	36✔
179	subtree: true,	36✔
180	},	36✔
181	filter: [IgcTabComponent.tagName],	36✔
182	});	36✔
183		36✔
184	this._resizeController = createResizeController(this, {	36✔
185	callback: this._resizeCallback,	36✔
186	options: { box: 'border-box' },	36✔
187	target: null,	36✔
188	});	36✔
189	}	36✔
190		10✔
191	protected override async firstUpdated() {	10✔
192	await this.updateComplete;	36✔
193		36✔
194	const selectedTab =	36✔
195	this.tabs.findLast((tab) => tab.selected) ?? first(this._enabledTabs);	36✔
196		36✔
197	this._setCSSProps();	36✔
198	this._updateButtonsOnResize();	36✔
199	this._selectTab(selectedTab, false);	36✔
200		36✔
201	this._resizeController.observe(this._scrollContainer);	36✔
202	}	36✔
203		10✔
204	public override connectedCallback() {	10✔
205	super.connectedCallback();	36✔
206	this.role = 'tablist';	36✔
207	}	36✔
208		10✔
209	protected override updated() {	10✔
210	if (this._isLTR !== isLTR(this)) {	251✔
211	this._isLTR = isLTR(this);	5✔
212	this._alignIndicator();	5✔
213	}	5✔
214	}	251✔
215		10✔
216	private async _resizeCallback() {	10✔
217	this._updateButtonsOnResize();	31✔
218	await this.updateComplete;	31✔
219	this._alignIndicator();	31✔
220	this._setCSSProps();	31✔
221	}	31✔
222		10✔
223	private _mutationCallback({	10✔
224	changes,	76✔
225	}: MutationControllerParams<IgcTabComponent>) {	76✔
226	const selected = changes.attributes.find(	76✔
227	(tab) => this.tabs.includes(tab) && tab.selected	76✔
228	);	76✔
229	const added = changes.added.filter(	76✔
230	(change) => change.target.closest(this.tagName) === this	76✔
231	);	76✔
232	const removed = changes.removed.filter(	76✔
233	(change) => change.target.closest(this.tagName) === this	76✔
234	);	76✔
235		76✔
236	this._selectTab(selected, false);	76✔
237		76✔
238	if (!isEmpty(removed) \|\| !isEmpty(added)) {	76✔
239	let nextSelectedTab: IgcTabComponent \| null = null;	7✔
240		7✔
241	for (const { node: tab } of removed) {	7✔
242	if (tab.selected && tab === this._activeTab) {	3✔
243	nextSelectedTab = first(this._enabledTabs);	1✔
244	}	1✔
245	}	3✔
246		7✔
247	for (const { node: tab } of added) {	7✔
248	if (tab.selected) {	5✔
249	nextSelectedTab = tab;	2✔
250	}	2✔
251	}	5✔
252		7✔
253	if (nextSelectedTab) {	7✔
254	this._selectTab(nextSelectedTab, false);	3✔
255	}	3✔
256		7✔
257	this._setCSSProps();	7✔
258	}	7✔
259	}	76✔
260		10✔
261	private async _alignIndicator() {	10✔
262	const styles: Partial<CSSStyleDeclaration> = {	107✔
263	visibility: this._activeTab ? 'visible' : 'hidden',	107✔
264	};	107✔
265		107✔
266	await this.updateComplete;	107✔
267		107✔
268	if (this._activeTab) {	107✔
269	const activeTabHeader = this._getTabHeader(this._activeTab);	106✔
270		106✔
271	const headerRect = activeTabHeader.getBoundingClientRect();	106✔
272	const containerRect = this._scrollContainer.getBoundingClientRect();	106✔
273		106✔
274	const headerOffset = activeTabHeader.offsetLeft;	106✔
275	const containerOffset = this._scrollContainer.offsetLeft;	106✔
276		106✔
277	const translateX = isLTR(this)	106✔
278	? headerOffset - containerOffset	106✔
279	: headerRect.width + headerOffset - containerRect.width;	106✔
280		106✔
281	Object.assign(styles, {	106✔
282	width: `${headerRect.width}px`,	106✔
283	transform: `translateX(${translateX}px)`,	106✔
284	});	106✔
285	}	106✔
286		107✔
287	Object.assign(this._selectedIndicator.style, styles);	107✔
288	}	107✔
289		10✔
290	private _updateButtonsOnResize() {	10✔
291	const { scrollWidth, clientWidth } = this._scrollContainer;	67✔
292		67✔
293	this.showScrollButtons = scrollWidth > clientWidth;	67✔
294	this._updateScrollButtons();	67✔
295	}	67✔
296		10✔
297	private _updateScrollButtons() {	10✔
298	const { scrollLeft, scrollWidth } = this._scrollContainer;	142✔
299	const { width } = this._scrollContainer.getBoundingClientRect();	142✔
300		142✔
301	this._scrollButtonsDisabled = {	142✔
302	start: scrollLeft === 0,	142✔
303	end: Math.abs(Math.abs(scrollLeft) + width - scrollWidth) <= 1,	142✔
304	};	142✔
305	}	142✔
306		10✔
307	private _selectTab(tab?: IgcTabComponent, shouldEmit = true) {	10✔
308	if (!tab \|\| tab === this._activeTab) {	145✔
309	return;	79✔
310	}	79✔
311		66✔
312	this._setSelectedTab(tab);	66✔
313	if (shouldEmit) {	145✔
314	this.emitEvent('igcChange', { detail: this._activeTab });	13✔
315	}	13✔
316	}	145✔
317		10✔
318	private async _setSelectedTab(tab: IgcTabComponent) {	10✔
319	if (this._activeTab) {	66✔
320	this._activeTab.selected = false;	31✔
321	}	31✔
322		66✔
323	tab.selected = true;	66✔
324	this._activeTab = tab;	66✔
325		66✔
326	scrollIntoView(this._getTabHeader(tab));	66✔
327	this._alignIndicator();	66✔
328	}	66✔
329		10✔
330	private _scrollByOffset(direction: 'start' \| 'end') {	10✔
331	const factor = isLTR(this) ? 1 : -1;	5✔
332	const step = direction === 'start' ? -180 : 180;	5✔
333		5✔
334	this._setScrollSnap(direction);	5✔
335	this._scrollContainer.scrollBy({ left: step * factor, behavior: 'smooth' });	5✔
336	}	5✔
337		10✔
338	private _keyboardActivateTab(tab: IgcTabComponent) {	10✔
339	const header = this._getTabHeader(tab);	14✔
340		14✔
341	this._setScrollSnap('unset');	14✔
342	scrollIntoView(header);	14✔
343	header.focus({ preventScroll: true });	14✔
344		14✔
345	if (this.activation === 'auto') {	14✔
346	this._selectTab(tab);	9✔
347	}	9✔
348	}	14✔
349		10✔
350	private _skipKeyboard(node: Element, event: KeyboardEvent) {	10✔
351	return !(	28✔
352	this._isEventFromTabHeader(event) &&	28✔
353	this.tabs.includes(node.closest(IgcTabComponent.tagName)!)	28✔
354	);	28✔
355	}	28✔
356		10✔
357	private _isEventFromTabHeader(event: Event) {	10✔
358	return findElementFromEventPath('[part~="header"]', event);	35✔
359	}	35✔
360		10✔
361	private _getTabHeader(tab: IgcTabComponent) {	10✔
362	return tab.renderRoot.querySelector<HTMLElement>('[part~="header"]')!;	191✔
363	}	191✔
364		10✔
365	private _setCSSProps() {	10✔
366	this._cssVars = {	74✔
367	'--_tabs-count': this.tabs.length.toString(),	74✔
368	'--_ig-tabs-width': `${this._scrollContainer.getBoundingClientRect().width}px`,	74✔
369	};	74✔
370	}	74✔
371		10✔
372	private _setScrollSnap(value: 'start' \| 'end' \| 'unset') {	10✔
373	this._scrollContainer.style.setProperty('--_ig-tab-snap', value);	24✔
374	}	24✔
375		10✔
376	protected handleClick(event: PointerEvent) {	10✔
377	if (!this._isEventFromTabHeader(event)) {	7!
NEW UNCOV 378	return;	×
NEW 379	}	×
380		7✔
381	const tab = findElementFromEventPath<IgcTabComponent>(	7✔
382	IgcTabComponent.tagName,	7✔
383	event	7✔
384	);	7✔
385		7✔
386	if (!this.tabs.includes(tab!) \|\| tab?.disabled) {	7✔
387	return;	2✔
388	}	2✔
389		5✔
390	this._setScrollSnap('unset');	5✔
391	this._getTabHeader(tab!).focus();	5✔
392	this._selectTab(tab);	5✔
393	}	5✔
394		10✔
395	protected handleArrowKeys(delta: -1 \| 1) {	10✔
396	const tabs = this._enabledTabs;	7✔
397	this._keyboardActivateTab(	7✔
398	tabs[wrap(0, tabs.length - 1, this._closestActiveTabIndex + delta)]	7✔
399	);	7✔
400	}	7✔
401		10✔
402	protected handleHomeKey() {	10✔
403	this._keyboardActivateTab(first(this._enabledTabs));	2✔
404	}	2✔
405		10✔
406	protected handleEndKey() {	10✔
407	this._keyboardActivateTab(last(this._enabledTabs));	3✔
408	}	3✔
409		10✔
410	protected handleActivationKeys() {	10✔
411	const tabs = this._enabledTabs;	2✔
412	const index = this._closestActiveTabIndex;	2✔
413		2✔
414	if (index > -1) {	2✔
415	this._selectTab(tabs[index], false);	2✔
416	this._keyboardActivateTab(tabs[index]);	2✔
417	}	2✔
418	}	2✔
419		10✔
420	@eventOptions({ passive: true })	10✔
421	protected handleScroll() {	10✔
422	this._updateScrollButtons();	75✔
423	}	75✔
424		10✔
425	/** Selects the specified tab and displays the corresponding panel. */	10✔
426	public select(tab: IgcTabComponent \| string) {	10✔
427	const element = isString(tab) ? this.tabs.find((t) => t.id === tab) : tab;	15✔
428		15✔
429	if (element) {	15✔
430	this._selectTab(element, false);	14✔
431	}	14✔
432	}	15✔
433		10✔
434	protected renderScrollButton(direction: 'start' \| 'end') {	10✔
435	const start = direction === 'start';	502✔
436		502✔
437	return this.showScrollButtons	502✔
438	? html`	502✔
439	<igc-icon-button	212✔
440	tabindex="-1"	212✔
441	variant="flat"	212✔
442	collection="default"	212✔
443	part="${direction}-scroll-button"	212✔
444	exportparts="icon"	212✔
445	name="${start ? 'prev' : 'next'}"	212✔
446	?disabled=${start	212✔
447	? this._scrollButtonsDisabled.start	212✔
448	: this._scrollButtonsDisabled.end}	212✔
449	@click=${() => this._scrollByOffset(direction)}	212✔
450	>	212✔
451	</igc-icon-button>	212✔
452	`	212✔
453	: nothing;	502✔
454	}	502✔
455		10✔
456	protected override render() {	10✔
457	const part = partNameMap({	251✔
458	inner: true,	251✔
459	scrollable: this.showScrollButtons,	251✔
460	});	251✔
461		251✔
462	return html`	251✔
463	<div	251✔
464	${ref(this._headerRef)}	251✔
465	part="tabs"	251✔
466	style=${styleMap(this._cssVars)}	251✔
467	@scroll=${this.handleScroll}	251✔
468	>	251✔
469	<div part=${part}>	251✔
470	${this.renderScrollButton('start')}	251✔
471		251✔
472	<slot @click=${this.handleClick}></slot>	251✔
473		251✔
474	${this.renderScrollButton('end')}	251✔
475		251✔
476	<div part="selected-indicator">	251✔
477	<span></span>	251✔
478	</div>	251✔
479	</div>	251✔
480	</div>	251✔
481	`;	251✔
482	}	251✔
483	}	10✔
484		10✔
485	declare global {	10✔
486	interface HTMLElementTagNameMap {	10✔
487	'igc-tabs': IgcTabsComponent;	10✔
488	}	10✔
489	}	10✔

IgniteUI / igniteui-webcomponents / 11661487640

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous