@loomui-ng/ui 0.0.0-stage → 0.1.1

package/fesm2022/loomui-ng-ui-tabs.mjs

@@ -0,0 +1,544 @@
+import { Directionality } from "@angular/cdk/bidi";
+import { FocusKeyManager } from "@angular/cdk/a11y";
+import * as i0 from "@angular/core";
+import { Directive, ElementRef, booleanAttribute, computed, contentChildren, forwardRef, inject, input, model } from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+let nextTabsId = 0;
+var UiTabs = class UiTabs {
+	value = model(void 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	dir = input(void 0, ...ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []);
+	activationMode = input("automatic", ...ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	baseId = `ui-tabs-${nextTabsId++}`;
+	directionality = inject(Directionality);
+	resolvedDir() {
+		return this.dir() ?? this.directionality.value;
+	}
+	classes = computed(() => cn("group/tabs flex gap-2 data-horizontal:flex-col", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	triggerId(v) {
+		return `${this.baseId}-trigger-${v}`;
+	}
+	contentId(v) {
+		return `${this.baseId}-content-${v}`;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiTabs,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiTabs,
+		isStandalone: true,
+		selector: "[uiTabs], ui-tabs",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dir: {
+				classPropertyName: "dir",
+				publicName: "dir",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activationMode: {
+				classPropertyName: "activationMode",
+				publicName: "activationMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			attributes: { "data-slot": "tabs" },
+			properties: {
+				"attr.data-orientation": "orientation()",
+				"attr.dir": "dir()",
+				"attr.class": "classes()"
+			}
+		},
+		exportAs: ["uiTabs"],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiTabs,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiTabs], ui-tabs",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiTabs",
+			host: {
+				"data-slot": "tabs",
+				"[attr.data-orientation]": "orientation()",
+				"[attr.dir]": "dir()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		dir: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dir",
+				required: false
+			}]
+		}],
+		activationMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activationMode",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiTabsList = class UiTabsList {
+	tabs = inject(UiTabs);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	triggers = contentChildren(forwardRef(() => UiTabsTrigger), {
+		...ngDevMode ? { debugName: "triggers" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	classes = computed(() => cn("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", this.variant() === "line" ? "gap-1 bg-transparent" : "bg-muted", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	onKeydown(event) {
+		const items = this.triggers();
+		const index = items.findIndex((t) => t.el.nativeElement === document.activeElement);
+		if (index < 0) return;
+		const manager = new FocusKeyManager(items).withWrap().withHomeAndEnd().skipPredicate((t) => t.disabled);
+		if (this.tabs.orientation() === "horizontal") manager.withHorizontalOrientation(this.tabs.resolvedDir()).withVerticalOrientation(false);
+		else manager.withVerticalOrientation(true).withHorizontalOrientation(null);
+		manager.setActiveItem(index);
+		manager.onKeydown(event);
+		const active = manager.activeItem;
+		if (active && active !== items[index] && this.tabs.activationMode() === "automatic") active.select();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiTabsList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiTabsList,
+		isStandalone: true,
+		selector: "[uiTabsList], ui-tabs-list",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "tablist",
+				"data-slot": "tabs-list"
+			},
+			listeners: { "keydown": "onKeydown($event)" },
+			properties: {
+				"attr.aria-orientation": "tabs.orientation()",
+				"attr.data-orientation": "tabs.orientation()",
+				"attr.data-variant": "variant()",
+				"attr.class": "classes()"
+			}
+		},
+		queries: [{
+			propertyName: "triggers",
+			predicate: i0.forwardRef(() => UiTabsTrigger),
+			descendants: true,
+			isSignal: true
+		}],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiTabsList,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiTabsList], ui-tabs-list",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "tablist",
+				"data-slot": "tabs-list",
+				"[attr.aria-orientation]": "tabs.orientation()",
+				"[attr.data-orientation]": "tabs.orientation()",
+				"[attr.data-variant]": "variant()",
+				"[attr.class]": "classes()",
+				"(keydown)": "onKeydown($event)"
+			}
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		triggers: [{
+			type: i0.ContentChildren,
+			args: [forwardRef(() => UiTabsTrigger), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var UiTabsTrigger = class UiTabsTrigger {
+	tabs = inject(UiTabs);
+	el = inject(ElementRef);
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabledInput = input(false, {
+		...ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {},
+		alias: "disabled",
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	selected = computed(() => this.tabs.value() === this.value(), ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	get disabled() {
+		return this.disabledInput();
+	}
+	isDisabled = computed(() => this.disabledInput(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pe-1 has-data-[icon=inline-start]:ps-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	focus() {
+		this.el.nativeElement.focus();
+	}
+	select() {
+		if (!this.isDisabled()) this.tabs.value.set(this.value());
+	}
+	onMouseDown(e) {
+		if (e.button === 0 && !e.ctrlKey && !this.isDisabled()) this.select();
+	}
+	onFocus() {
+		if (this.tabs.activationMode() === "automatic" && !this.selected()) this.select();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiTabsTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiTabsTrigger,
+		isStandalone: true,
+		selector: "button[uiTabsTrigger], ui-tabs-trigger",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledInput: {
+				classPropertyName: "disabledInput",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"type": "button",
+				"role": "tab",
+				"data-slot": "tabs-trigger"
+			},
+			listeners: {
+				"mousedown": "onMouseDown($event)",
+				"focus": "onFocus()",
+				"keydown.enter": "select()",
+				"keydown.space": "select()"
+			},
+			properties: {
+				"id": "tabs.triggerId(value())",
+				"attr.aria-selected": "selected()",
+				"attr.aria-controls": "tabs.contentId(value())",
+				"attr.data-state": "selected() ? \"active\" : \"inactive\"",
+				"attr.data-orientation": "tabs.orientation()",
+				"attr.data-disabled": "isDisabled() ? \"\" : null",
+				"attr.disabled": "(isDisabled()) ? \"\" : null",
+				"attr.tabindex": "selected() ? 0 : -1",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiTabsTrigger,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[uiTabsTrigger], ui-tabs-trigger",
+			hostDirectives: [UiElementHost],
+			host: {
+				type: "button",
+				role: "tab",
+				"data-slot": "tabs-trigger",
+				"[id]": "tabs.triggerId(value())",
+				"[attr.aria-selected]": "selected()",
+				"[attr.aria-controls]": "tabs.contentId(value())",
+				"[attr.data-state]": "selected() ? \"active\" : \"inactive\"",
+				"[attr.data-orientation]": "tabs.orientation()",
+				"[attr.data-disabled]": "isDisabled() ? \"\" : null",
+				"[attr.disabled]": "(isDisabled()) ? \"\" : null",
+				"[attr.tabindex]": "selected() ? 0 : -1",
+				"[attr.class]": "classes()",
+				"(mousedown)": "onMouseDown($event)",
+				"(focus)": "onFocus()",
+				"(keydown.enter)": "select()",
+				"(keydown.space)": "select()"
+			}
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		disabledInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiTabsContent = class UiTabsContent {
+	tabs = inject(UiTabs);
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	selected = computed(() => this.tabs.value() === this.value(), ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("flex-1 text-sm outline-none", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiTabsContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiTabsContent,
+		isStandalone: true,
+		selector: "[uiTabsContent], ui-tabs-content",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "tabpanel",
+				"data-slot": "tabs-content",
+				"tabindex": "0"
+			},
+			properties: {
+				"id": "tabs.contentId(value())",
+				"attr.aria-labelledby": "tabs.triggerId(value())",
+				"attr.data-state": "selected() ? \"active\" : \"inactive\"",
+				"attr.data-orientation": "tabs.orientation()",
+				"attr.hidden": "selected() ? null : \"\"",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiTabsContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiTabsContent], ui-tabs-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "tabpanel",
+				"data-slot": "tabs-content",
+				"[id]": "tabs.contentId(value())",
+				"[attr.aria-labelledby]": "tabs.triggerId(value())",
+				"[attr.data-state]": "selected() ? \"active\" : \"inactive\"",
+				"[attr.data-orientation]": "tabs.orientation()",
+				"[attr.hidden]": "selected() ? null : \"\"",
+				tabindex: "0",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_TABS = [
+	UiTabs,
+	UiTabsList,
+	UiTabsTrigger,
+	UiTabsContent
+];
+export { UI_TABS, UiTabs, UiTabsContent, UiTabsList, UiTabsTrigger };
+
+//# sourceMappingURL=loomui-ng-ui-tabs.mjs.map

package/fesm2022/loomui-ng-ui-tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-tabs.mjs","names":[],"sources":["../../../libs/ui/tabs/tabs.ts"],"sourcesContent":["import { Directionality } from '@angular/cdk/bidi';\nimport { FocusableOption, FocusKeyManager } from '@angular/cdk/a11y';\nimport {\n  booleanAttribute,\n  computed,\n  contentChildren,\n  Directive,\n  ElementRef,\n  forwardRef,\n  inject,\n  input,\n  model,\n} from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\nlet nextTabsId = 0;\n\n/**\n * <div uiTabs [(value)]=\"tab\">\n *   <div uiTabsList>\n *     <button uiTabsTrigger value=\"a\">A</button> <button uiTabsTrigger value=\"b\">B</button>\n *   </div>\n *   <div uiTabsContent value=\"a\">…</div> <div uiTabsContent value=\"b\">…</div>\n * </div>\n */\n@Directive({\n  selector: '[uiTabs], ui-tabs', hostDirectives: [UiElementHost],\n  exportAs: 'uiTabs',\n  host: {\n    'data-slot': 'tabs',\n    '[attr.data-orientation]': 'orientation()',\n    '[attr.dir]': 'dir()',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiTabs {\n  readonly value = model<string | undefined>(undefined);\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n  /** Optional explicit direction; otherwise inherited. (Live site always forces dir=\"ltr\" — deviation.) */\n  readonly dir = input<'ltr' | 'rtl' | undefined>(undefined);\n  readonly activationMode = input<'automatic' | 'manual'>('automatic');\n  readonly userClass = input<string>('', { alias: 'class' });\n\n  readonly baseId = `ui-tabs-${nextTabsId++}`;\n  private readonly directionality = inject(Directionality);\n  resolvedDir(): 'ltr' | 'rtl' {\n    return this.dir() ?? this.directionality.value;\n  }\n\n  protected readonly classes = computed(() =>\n    cn('group/tabs flex gap-2 data-horizontal:flex-col', this.userClass()),\n  );\n\n  triggerId(v: string) {\n    return `${this.baseId}-trigger-${v}`;\n  }\n  contentId(v: string) {\n    return `${this.baseId}-content-${v}`;\n  }\n}\n\n@Directive({\n  selector: '[uiTabsList], ui-tabs-list', hostDirectives: [UiElementHost],\n  host: {\n    role: 'tablist',\n    'data-slot': 'tabs-list',\n    '[attr.aria-orientation]': 'tabs.orientation()',\n    '[attr.data-orientation]': 'tabs.orientation()',\n    '[attr.data-variant]': 'variant()',\n    '[attr.class]': 'classes()',\n    '(keydown)': 'onKeydown($event)',\n  },\n})\nexport class UiTabsList {\n  protected readonly tabs = inject(UiTabs);\n  readonly variant = input<'default' | 'line'>('default');\n  readonly userClass = input<string>('', { alias: 'class' });\n  private readonly triggers = contentChildren(forwardRef(() => UiTabsTrigger), { descendants: true });\n\n  protected readonly classes = computed(() =>\n    cn(\n      'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none',\n      this.variant() === 'line' ? 'gap-1 bg-transparent' : 'bg-muted',\n      this.userClass(),\n    ),\n  );\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const items = this.triggers();\n    const index = items.findIndex((t) => t.el.nativeElement === document.activeElement);\n    if (index < 0) return;\n    const manager = new FocusKeyManager<UiTabsTrigger>(items)\n      .withWrap()\n      .withHomeAndEnd()\n      .skipPredicate((t) => t.disabled);\n    if (this.tabs.orientation() === 'horizontal') {\n      manager.withHorizontalOrientation(this.tabs.resolvedDir()).withVerticalOrientation(false);\n    } else {\n      manager.withVerticalOrientation(true).withHorizontalOrientation(null);\n    }\n    manager.setActiveItem(index);\n    manager.onKeydown(event);\n    const active = manager.activeItem;\n    if (active && active !== items[index] && this.tabs.activationMode() === 'automatic') {\n      active.select();\n    }\n  }\n}\n\n@Directive({\n  selector: 'button[uiTabsTrigger], ui-tabs-trigger', hostDirectives: [UiElementHost],\n  host: {\n    type: 'button',\n    role: 'tab',\n    'data-slot': 'tabs-trigger',\n    '[id]': 'tabs.triggerId(value())',\n    '[attr.aria-selected]': 'selected()',\n    '[attr.aria-controls]': 'tabs.contentId(value())',\n    '[attr.data-state]': 'selected() ? \"active\" : \"inactive\"',\n    '[attr.data-orientation]': 'tabs.orientation()',\n    '[attr.data-disabled]': 'isDisabled() ? \"\" : null',\n    '[attr.disabled]': '(isDisabled()) ? \"\" : null',\n    // Roving tabindex (observed: selected tab = 0, others = -1).\n    '[attr.tabindex]': 'selected() ? 0 : -1',\n    '[attr.class]': 'classes()',\n    '(mousedown)': 'onMouseDown($event)',\n    '(focus)': 'onFocus()',\n    '(keydown.enter)': 'select()',\n    '(keydown.space)': 'select()',\n  },\n})\nexport class UiTabsTrigger implements FocusableOption {\n  protected readonly tabs = inject(UiTabs);\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n  readonly value = input<string>('');\n  readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n  readonly userClass = input<string>('', { alias: 'class' });\n\n  protected readonly selected = computed(() => this.tabs.value() === this.value());\n  /** FocusableOption contract (CDK key manager reads this). */\n  get disabled(): boolean {\n    return this.disabledInput();\n  }\n  protected readonly isDisabled = computed(() => this.disabledInput());\n  protected readonly classes = computed(() =>\n    cn(\n      \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pe-1 has-data-[icon=inline-start]:ps-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n      this.userClass(),\n    ),\n  );\n\n  focus(): void {\n    this.el.nativeElement.focus();\n  }\n\n  select(): void {\n    if (!this.isDisabled()) this.tabs.value.set(this.value());\n  }\n\n  protected onMouseDown(e: MouseEvent): void {\n    if (e.button === 0 && !e.ctrlKey && !this.isDisabled()) this.select();\n  }\n\n  protected onFocus(): void {\n    // Automatic activation on keyboard focus; mouse already selected on mousedown.\n    if (this.tabs.activationMode() === 'automatic' && !this.selected()) this.select();\n  }\n}\n\n@Directive({\n  selector: '[uiTabsContent], ui-tabs-content', hostDirectives: [UiElementHost],\n  host: {\n    role: 'tabpanel',\n    'data-slot': 'tabs-content',\n    '[id]': 'tabs.contentId(value())',\n    '[attr.aria-labelledby]': 'tabs.triggerId(value())',\n    '[attr.data-state]': 'selected() ? \"active\" : \"inactive\"',\n    '[attr.data-orientation]': 'tabs.orientation()',\n    '[attr.hidden]': 'selected() ? null : \"\"',\n    tabindex: '0',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiTabsContent {\n  protected readonly tabs = inject(UiTabs);\n  readonly value = input<string>('');\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly selected = computed(() => this.tabs.value() === this.value());\n  protected readonly classes = computed(() => cn('flex-1 text-sm outline-none', this.userClass()));\n}\n\nexport const UI_TABS = [UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent] as const;\n"],"mappings":"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"}