feat: implement tabs parity (#3352)

Signed-off-by: Akshat Patel <38994122+Akshat55@users.noreply.github.com>

Author: Akshat55

src/tabs/base-tab-header.component.ts

@@ -19,8 +19,8 @@ import { EventService } from "carbon-components-angular/utils";
 })
 export class BaseTabHeader {
 	/**
-	 * Set to 'true' to have `Tab` items cached and not reloaded on tab switching.
-	 * Duplicate from `n-tabs` to support standalone headers
+	 * Set to `true` to have `Tab` items cached and not reloaded on tab switching.
+	 * Duplicated from `cds-tabs` to support standalone headers.
 	 */
 	@Input() cacheActive = false;
 	/**
@@ -36,19 +36,68 @@ export class BaseTabHeader {
 	 */
 	@Input() ariaLabelledby: string;
 
+	/**
+	 * Template projected before tab items inside the tab list.
+	 */
 	@Input() contentBefore: TemplateRef<any>;
+	/**
+	 * Template projected after tab items inside the tab list.
+	 */
 	@Input() contentAfter: TemplateRef<any>;
 
+	/**
+	 * Visual style of the tab list: `line` or `contained`.
+	 */
 	@Input() type: "line" | "contained" = "line";
+	/**
+	 * Theme for contained tabs: `dark` or `light`.
+	 */
 	@Input() theme: "dark" | "light" = "dark";
 
+	/**
+	 * When using icon-only tabs, icon size: `default` (16px) or `lg` (20px).
+	 */
+	@Input() iconSize: "default" | "lg";
+
+	/**
+	 * **Contained only**: Evenly sized tabs across the row (**must** have fewer than 9 tabs).
+	 */
+	@Input() fullWidth = false;
+
+	/**
+	 * Show a close control on each tab.
+	 */
+	@Input() dismissable = false;
+
+	/**
+	 * Scroll the active tab into view on focus/select.
+	 */
+	@Input() scrollIntoView = false;
+
+	/**
+	 * Debounce (ms) for tab list scroll events; affects overflow chevron updates.
+	 */
+	@Input() scrollDebounceWait = 200;
+
 	@HostBinding("class.cds--tabs") tabsClass = true;
 	@HostBinding("class.cds--tabs--contained") get containedClass() {
 		return this.type === "contained";
 	}
 	@HostBinding("class.cds--tabs--light") get themeClass() {
 		return this.theme === "light";
 	}
+	@HostBinding("class.cds--tabs--dismissable") get dismissableClass() {
+		return this.dismissable;
+	}
+	@HostBinding("class.cds--tabs__icon--default") get iconSizeDefaultClass() {
+		return this.iconSize === "default";
+	}
+	@HostBinding("class.cds--tabs__icon--lg") get iconSizeLgClass() {
+		return this.iconSize === "lg";
+	}
+	@HostBinding("class.cds--layout--size-lg") get layoutSizeLgClass() {
+		return this.iconSize === "lg";
+	}
 
 	/**
 	 * Gets the Unordered List element that holds the `Tab` headings from the view DOM.
@@ -66,6 +115,7 @@ export class BaseTabHeader {
 
 	protected longPressInterval = null;
 	protected tickInterval = null;
+	protected scrollDebounceTimer: any = null;
 
 	get hasHorizontalOverflow() {
 		const tabList = this.headerContainer.nativeElement;
@@ -91,7 +141,16 @@ export class BaseTabHeader {
 	) { }
 
 	handleScroll() {
-		this.changeDetectorRef.markForCheck();
+		// Debounce the change detection trigger so the scroll arrow visibility
+		// updates do not fire on every scroll tick.
+		if (this.scrollDebounceWait <= 0) {
+			this.changeDetectorRef.markForCheck();
+			return;
+		}
+		clearTimeout(this.scrollDebounceTimer);
+		this.scrollDebounceTimer = setTimeout(() => {
+			this.changeDetectorRef.markForCheck();
+		}, this.scrollDebounceWait);
 	}
 
 	handleOverflowNavClick(direction: number, numOftabs = 0) {

src/tabs/icon-tab.component.ts

@@ -0,0 +1,52 @@
+import {
+	Component,
+	forwardRef,
+	Input
+} from "@angular/core";
+import { Tab } from "./tab.component";
+
+/**
+ * Icon-only approach for `cds-tab` variant: `[icon]` template plus `label` for tooltip.
+ *
+ * ```html
+ * <ng-template #i><svg cdsIcon="activity" size="16"></svg></ng-template>
+ * <cds-tabs>
+ *   <cds-icon-tab label="Activity" [icon]="i">Panel</cds-icon-tab>
+ * </cds-tabs>
+ * ```
+ */
+@Component({
+	selector: "cds-icon-tab, ibm-icon-tab",
+	template: `
+		<ng-container *ngIf="shouldRender()">
+			<ng-template
+				*ngIf="isTemplate(tabContent)"
+				[ngTemplateOutlet]="tabContent"
+				[ngTemplateOutletContext]="{ $implicit: templateContext }">
+			</ng-template>
+			<ng-content></ng-content>
+		</ng-container>
+	`,
+	providers: [
+		// tslint:disable-next-line:no-forward-ref
+		{ provide: Tab, useExisting: forwardRef(() => IconTab) }
+	]
+})
+export class IconTab extends Tab {
+	/**
+	 * Accessible label and tooltip text for the icon tab.
+	 */
+	@Input()
+	set label(value: string) {
+		this.iconLabel = value;
+	}
+
+	get label(): string {
+		return this.iconLabel;
+	}
+
+	/**
+	 * Icon tabs are only for icons, so iconOnly by default
+	 */
+	override iconOnly = true;
+}

src/tabs/index.ts

@@ -1,8 +1,18 @@
 export { BaseTabHeader } from "./base-tab-header.component";
 export { TabHeaderGroup } from "./tab-header-group.component";
+export { TabHeaderGroupVertical } from "./tab-header-group-vertical.component";
+export { TabHeaderBase } from "./tab-header.directive";
+/**
+ * @deprecated Use `TabHeaderComponent` and the `cds-tab-header` host element.
+ */
 export { TabHeader } from "./tab-header.directive";
+export { TabHeaderComponent } from "./tab-header.component";
 export { TabHeaders } from "./tab-headers.component";
+export { TabHeadersVertical } from "./tab-headers-vertical.component";
 export { Tab } from "./tab.component";
+export { IconTab } from "./icon-tab.component";
 export { Tabs } from "./tabs.component";
+export { TabsVertical } from "./tabs-vertical.component";
+export { TabsVerticalGrouped } from "./tabs-vertical-grouped.component";
 export { TabSkeleton } from "./tab-skeleton.component";
 export * from "./tabs.module";