@ojiepermana/angular 22.1.14 → 22.2.0

package/fesm2022/ojiepermana-angular-component-tabs.mjs

@@ -1,319 +1,592 @@
-import * as i0 from '@angular/core';
-import { Directive, inject, model, input, signal, computed, forwardRef, Component, ElementRef } from '@angular/core';
-import { injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
-import * as i1 from '@ojiepermana/angular/component/utils/scale';
-import { ComponentScaleDirective } from '@ojiepermana/angular/component/utils/scale';
-
-/**
- * Shared state for a tabs group. Children read the active value and register
- * themselves so the group can drive roving-tabindex keyboard navigation.
- */
-class TabsContextBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: TabsContextBase, isStandalone: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsContextBase, decorators: [{
-            type: Directive
-        }] });
-class TabsListContextBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsListContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: TabsListContextBase, isStandalone: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsListContextBase, decorators: [{
-            type: Directive
-        }] });
-class TabsComponent extends TabsContextBase {
-    componentScale = inject(ComponentScaleDirective);
-    radius = this.componentScale.radius;
-    density = this.componentScale.density;
-    value = model(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    orientation = input('horizontal', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    idPrefix = injectUniqueId('Tabs');
-    // Registered triggers, kept in DOM order by {@link register}. A signal rather
-    // than a plain list because every trigger's roving `tabindex` is derived from
-    // the whole set, so adding or removing one has to re-render the others.
-    triggers = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
-    /**
-     * The value the group actually renders.
-     *
-     * A group whose `value` is empty -- nothing bound at all, or a consumer signal
-     * that starts at null -- still has to show a tab, so the first enabled trigger
-     * stands in. Derived rather than written back: `value` is the consumer's
-     * two-way binding to own, and filling it in on their behalf reported a
-     * selection they never made, from inside a child's ngOnInit.
-     */
-    effectiveValue = computed(() => this.value() ?? this.enabledTriggers()[0]?.value() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveValue" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn(this.orientation() === 'vertical' ? 'flex items-start gap-4' : 'block', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    register(element, value, disabled) {
-        this.triggers.update((triggers) => [...triggers.filter((trigger) => trigger.element !== element), { element, value, disabled }]
-            // Sorted by document position, not by arrival. A trigger inside an @if
-            // registers whenever its block renders, so a tab removed and put back
-            // would otherwise land at the end of the list -- and everything derived
-            // from the order (arrow direction, Home/End, the fallback tab stop)
-            // would follow registration order instead of what the user sees.
-            .sort((a, b) => a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
-    }
-    unregister(element) {
-        this.triggers.update((triggers) => triggers.filter((trigger) => trigger.element !== element));
-    }
-    /**
-     * The roving `tabindex` for one trigger.
-     *
-     * Normally the selected trigger is the single tab stop. When the bound value
-     * matches no ENABLED trigger the first enabled one takes the tab stop instead.
-     * Without that fallback a value nothing answers to -- a typo, a tab removed
-     * from the DOM while it was selected, a selected tab that is disabled -- left
-     * every trigger at `tabindex=-1`, which drops the whole tablist out of the tab
-     * order and leaves a keyboard user with no way into it at all.
-     *
-     * The fallback is presentation only: it never rewrites `value`, because that
-     * is the consumer's two-way binding to own.
-     */
-    tabIndexFor(element) {
-        const enabledTriggers = this.enabledTriggers();
-        const trigger = enabledTriggers.find((candidate) => candidate.element === element);
-        if (!trigger) {
-            return -1;
-        }
-        const selectedTrigger = enabledTriggers.find((candidate) => candidate.value() === this.effectiveValue());
-        return (selectedTrigger ?? enabledTriggers[0]) === trigger ? 0 : -1;
-    }
-    activate(value, focus = false) {
-        const trigger = this.triggerForValue(value);
-        if (!trigger || trigger.disabled())
-            return;
-        this.value.set(value);
-        if (focus) {
-            trigger.element.focus();
-        }
-    }
-    focusNext(from, offset) {
-        const enabledTriggers = this.enabledTriggers();
-        const currentIndex = enabledTriggers.findIndex((trigger) => trigger.element === from);
-        if (currentIndex < 0 || enabledTriggers.length === 0)
-            return;
-        const nextTrigger = enabledTriggers[(currentIndex + offset + enabledTriggers.length) % enabledTriggers.length];
-        this.activate(nextTrigger.value(), true);
-    }
-    focusFirst() {
-        const firstTrigger = this.enabledTriggers()[0];
-        if (firstTrigger)
-            this.activate(firstTrigger.value(), true);
-    }
-    focusLast() {
-        const enabledTriggers = this.enabledTriggers();
-        const lastTrigger = enabledTriggers[enabledTriggers.length - 1];
-        if (lastTrigger)
-            this.activate(lastTrigger.value(), true);
-    }
-    triggerId(value) {
-        return `${this.idPrefix}-trigger-${this.normalizeValue(value)}`;
-    }
-    contentId(value) {
-        return `${this.idPrefix}-content-${this.normalizeValue(value)}`;
-    }
-    enabledTriggers() {
-        return this.triggers().filter((trigger) => !trigger.disabled());
-    }
-    triggerForValue(value) {
-        return this.triggers().find((trigger) => trigger.value() === value);
-    }
-    normalizeValue(value) {
-        const normalized = value
-            .toLowerCase()
-            .replace(/[^a-z0-9_-]+/g, '-')
-            .replace(/^-+|-+$/g, '');
-        return normalized || 'tab';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: TabsComponent, isStandalone: true, selector: "Tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-orientation": "orientation()" } }, providers: [{ provide: TabsContextBase, useExisting: forwardRef(() => TabsComponent) }], usesInheritance: true, hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'Tabs',
-                    hostDirectives: [
-                        {
-                            directive: ComponentScaleDirective,
-                            inputs: ['radius', 'density'],
-                        },
-                    ],
-                    providers: [{ provide: TabsContextBase, useExisting: forwardRef(() => TabsComponent) }],
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-orientation]': 'orientation()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], 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 }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class TabsListComponent extends TabsListContextBase {
-    ctx = inject(TabsComponent);
-    variant = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn(this.variantClasses(), this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    listVariant() {
-        return this.variant();
-    }
-    variantClasses() {
-        if (this.variant() === 'line') {
-            return this.ctx.orientation() === 'vertical'
-                ? 'inline-flex flex-col items-stretch justify-start gap-1 border-e border-border bg-transparent p-0 pe-3 text-muted-foreground'
-                : 'inline-flex h-control-md items-center justify-start gap-4 border-b border-border bg-transparent p-0 text-muted-foreground';
-        }
-        return this.ctx.orientation() === 'vertical'
-            ? 'inline-flex flex-col items-stretch justify-start rounded-md bg-muted p-1 text-muted-foreground'
-            : 'inline-flex h-control-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: TabsListComponent, isStandalone: true, selector: "TabsList", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"tablist\"", "attr.aria-orientation": "ctx.orientation()", "attr.data-variant": "variant()" } }, providers: [{ provide: TabsListContextBase, useExisting: forwardRef(() => TabsListComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'TabsList',
-                    providers: [{ provide: TabsListContextBase, useExisting: forwardRef(() => TabsListComponent) }],
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.role]': '"tablist"',
-                        '[attr.aria-orientation]': 'ctx.orientation()',
-                        '[attr.data-variant]': 'variant()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class TabsTriggerComponent {
-    ctx = inject(TabsComponent);
-    list = inject(TabsListContextBase, { optional: true });
-    el = inject(ElementRef);
-    value = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    selected = computed(() => this.ctx.effectiveValue() === this.value(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-    tabIndex = computed(() => this.ctx.tabIndexFor(this.el.nativeElement), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    triggerId = computed(() => this.ctx.triggerId(this.value()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
-    contentId = computed(() => this.ctx.contentId(this.value()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium', 'ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', this.variantClasses(), this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    ngOnInit() {
-        this.ctx.register(this.el.nativeElement, this.value, this.disabled);
-    }
-    ngOnDestroy() {
-        this.ctx.unregister(this.el.nativeElement);
-    }
-    onClick() {
-        if (this.disabled())
-            return;
-        this.ctx.activate(this.value());
-    }
-    onArrow(e, delta, axis) {
-        if (this.ctx.orientation() !== axis)
-            return;
-        e.preventDefault();
-        this.ctx.focusNext(this.el.nativeElement, delta);
-    }
-    onHome(e) {
-        e.preventDefault();
-        this.ctx.focusFirst();
-    }
-    onEnd(e) {
-        e.preventDefault();
-        this.ctx.focusLast();
-    }
-    variantClasses() {
-        const variant = this.list?.listVariant() ?? 'default';
-        if (variant === 'line') {
-            return this.ctx.orientation() === 'vertical'
-                ? 'w-full justify-start rounded-none border-e-2 border-transparent px-3 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none'
-                : 'rounded-none border-b-2 border-transparent px-2 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none';
-        }
-        return cn('rounded-sm px-3 py-1.5 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm', this.ctx.orientation() === 'vertical' && 'w-full justify-start');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: TabsTriggerComponent, isStandalone: true, selector: "button[TabsTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()", "keydown.arrowRight": "onArrow($any($event), 1, \"horizontal\")", "keydown.arrowLeft": "onArrow($any($event), -1, \"horizontal\")", "keydown.arrowDown": "onArrow($any($event), 1, \"vertical\")", "keydown.arrowUp": "onArrow($any($event), -1, \"vertical\")", "keydown.home": "onHome($any($event))", "keydown.end": "onEnd($any($event))" }, properties: { "class": "classes()", "id": "triggerId()", "attr.role": "\"tab\"", "attr.aria-selected": "selected()", "attr.aria-controls": "contentId()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "tabIndex()", "attr.data-state": "selected() ? \"active\" : \"inactive\"", "disabled": "disabled() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsTriggerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[TabsTrigger]',
-                    host: {
-                        '[class]': 'classes()',
-                        '[id]': 'triggerId()',
-                        type: 'button',
-                        '[attr.role]': '"tab"',
-                        '[attr.aria-selected]': 'selected()',
-                        '[attr.aria-controls]': 'contentId()',
-                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
-                        '[attr.tabindex]': 'tabIndex()',
-                        '[attr.data-state]': 'selected() ? "active" : "inactive"',
-                        '[disabled]': 'disabled() || null',
-                        '(click)': 'onClick()',
-                        '(keydown.arrowRight)': 'onArrow($any($event), 1, "horizontal")',
-                        '(keydown.arrowLeft)': 'onArrow($any($event), -1, "horizontal")',
-                        '(keydown.arrowDown)': 'onArrow($any($event), 1, "vertical")',
-                        '(keydown.arrowUp)': 'onArrow($any($event), -1, "vertical")',
-                        '(keydown.home)': 'onHome($any($event))',
-                        '(keydown.end)': 'onEnd($any($event))',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class TabsContentComponent {
-    ctx = inject(TabsComponent);
-    value = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    active = computed(() => this.ctx.effectiveValue() === this.value(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    triggerId = computed(() => this.ctx.triggerId(this.value()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
-    contentId = computed(() => this.ctx.contentId(this.value()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('mt-2 block ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabsContentComponent, isStandalone: true, selector: "TabsContent", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, properties: { "class": "classes()", "id": "contentId()", "attr.role": "\"tabpanel\"", "attr.aria-labelledby": "triggerId()", "attr.data-state": "active() ? \"active\" : \"inactive\"", "hidden": "!active()" } }, ngImport: i0, template: `@if (active()) {
-    <ng-content />
-  }`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'TabsContent',
-                    host: {
-                        '[class]': 'classes()',
-                        '[id]': 'contentId()',
-                        '[attr.role]': '"tabpanel"',
-                        '[attr.aria-labelledby]': 'triggerId()',
-                        '[attr.data-state]': 'active() ? "active" : "inactive"',
-                        '[hidden]': '!active()',
-                        tabindex: '0',
-                    },
-                    template: `@if (active()) {
+import * as i0 from "@angular/core";
+import { Component, Directive, ElementRef, computed, forwardRef, inject, input, model, signal } from "@angular/core";
+import { cn, injectUniqueId } from "@ojiepermana/angular/component/utils/core";
+import * as i1 from "@ojiepermana/angular/component/utils/scale";
+import { ComponentScaleDirective } from "@ojiepermana/angular/component/utils/scale";
+var TabsContextBase = class TabsContextBase {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: TabsContextBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: TabsContextBase,
+		isStandalone: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: TabsContextBase,
+	decorators: [{ type: Directive }]
+});
+var TabsListContextBase = class TabsListContextBase {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: TabsListContextBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: TabsListContextBase,
+		isStandalone: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: TabsListContextBase,
+	decorators: [{ type: Directive }]
+});
+var TabsComponent = class TabsComponent extends TabsContextBase {
+	componentScale = inject(ComponentScaleDirective);
+	radius = this.componentScale.radius;
+	density = this.componentScale.density;
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	idPrefix = injectUniqueId("Tabs");
+	triggers = signal([], ...ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []);
+	effectiveValue = computed(() => this.value() ?? this.enabledTriggers()[0]?.value() ?? null, ...ngDevMode ? [{ debugName: "effectiveValue" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(this.orientation() === "vertical" ? "flex items-start gap-4" : "block", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	register(element, value, disabled) {
+		this.triggers.update((triggers) => [...triggers.filter((trigger) => trigger.element !== element), {
+			element,
+			value,
+			disabled
+		}].sort((a, b) => a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
+	}
+	unregister(element) {
+		this.triggers.update((triggers) => triggers.filter((trigger) => trigger.element !== element));
+	}
+	tabIndexFor(element) {
+		const enabledTriggers = this.enabledTriggers();
+		const trigger = enabledTriggers.find((candidate) => candidate.element === element);
+		if (!trigger) return -1;
+		return (enabledTriggers.find((candidate) => candidate.value() === this.effectiveValue()) ?? enabledTriggers[0]) === trigger ? 0 : -1;
+	}
+	activate(value, focus = false) {
+		const trigger = this.triggerForValue(value);
+		if (!trigger || trigger.disabled()) return;
+		this.value.set(value);
+		if (focus) trigger.element.focus();
+	}
+	focusNext(from, offset) {
+		const enabledTriggers = this.enabledTriggers();
+		const currentIndex = enabledTriggers.findIndex((trigger) => trigger.element === from);
+		if (currentIndex < 0 || enabledTriggers.length === 0) return;
+		const nextTrigger = enabledTriggers[(currentIndex + offset + enabledTriggers.length) % enabledTriggers.length];
+		this.activate(nextTrigger.value(), true);
+	}
+	focusFirst() {
+		const firstTrigger = this.enabledTriggers()[0];
+		if (firstTrigger) this.activate(firstTrigger.value(), true);
+	}
+	focusLast() {
+		const enabledTriggers = this.enabledTriggers();
+		const lastTrigger = enabledTriggers[enabledTriggers.length - 1];
+		if (lastTrigger) this.activate(lastTrigger.value(), true);
+	}
+	triggerId(value) {
+		return `${this.idPrefix}-trigger-${this.normalizeValue(value)}`;
+	}
+	contentId(value) {
+		return `${this.idPrefix}-content-${this.normalizeValue(value)}`;
+	}
+	enabledTriggers() {
+		return this.triggers().filter((trigger) => !trigger.disabled());
+	}
+	triggerForValue(value) {
+		return this.triggers().find((trigger) => trigger.value() === value);
+	}
+	normalizeValue(value) {
+		return value.toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "") || "tab";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: TabsComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: TabsComponent,
+		isStandalone: true,
+		selector: "Tabs",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: { properties: {
+			"class": "classes()",
+			"attr.data-orientation": "orientation()"
+		} },
+		providers: [{
+			provide: TabsContextBase,
+			useExisting: forwardRef(() => TabsComponent)
+		}],
+		usesInheritance: true,
+		hostDirectives: [{
+			directive: i1.ComponentScaleDirective,
+			inputs: [
+				"radius",
+				"radius",
+				"density",
+				"density"
+			]
+		}],
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: TabsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "Tabs",
+			hostDirectives: [{
+				directive: ComponentScaleDirective,
+				inputs: ["radius", "density"]
+			}],
+			providers: [{
+				provide: TabsContextBase,
+				useExisting: forwardRef(() => TabsComponent)
+			}],
+			host: {
+				"[class]": "classes()",
+				"[attr.data-orientation]": "orientation()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	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
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var TabsListComponent = class TabsListComponent extends TabsListContextBase {
+	ctx = inject(TabsComponent);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(this.variantClasses(), this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	listVariant() {
+		return this.variant();
+	}
+	variantClasses() {
+		if (this.variant() === "line") return this.ctx.orientation() === "vertical" ? "inline-flex flex-col items-stretch justify-start gap-1 border-e border-border bg-transparent p-0 pe-3 text-muted-foreground" : "inline-flex h-control-md items-center justify-start gap-4 border-b border-border bg-transparent p-0 text-muted-foreground";
+		return this.ctx.orientation() === "vertical" ? "inline-flex flex-col items-stretch justify-start rounded-md bg-muted p-1 text-muted-foreground" : "inline-flex h-control-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: TabsListComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: TabsListComponent,
+		isStandalone: true,
+		selector: "TabsList",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.role": "\"tablist\"",
+			"attr.aria-orientation": "ctx.orientation()",
+			"attr.data-variant": "variant()"
+		} },
+		providers: [{
+			provide: TabsListContextBase,
+			useExisting: forwardRef(() => TabsListComponent)
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: TabsListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "TabsList",
+			providers: [{
+				provide: TabsListContextBase,
+				useExisting: forwardRef(() => TabsListComponent)
+			}],
+			host: {
+				"[class]": "classes()",
+				"[attr.role]": "\"tablist\"",
+				"[attr.aria-orientation]": "ctx.orientation()",
+				"[attr.data-variant]": "variant()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var TabsTriggerComponent = class TabsTriggerComponent {
+	ctx = inject(TabsComponent);
+	list = inject(TabsListContextBase, { optional: true });
+	el = inject(ElementRef);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	selected = computed(() => this.ctx.effectiveValue() === this.value(), ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	tabIndex = computed(() => this.ctx.tabIndexFor(this.el.nativeElement), ...ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []);
+	triggerId = computed(() => this.ctx.triggerId(this.value()), ...ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []);
+	contentId = computed(() => this.ctx.contentId(this.value()), ...ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium", "ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", this.variantClasses(), this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	ngOnInit() {
+		this.ctx.register(this.el.nativeElement, this.value, this.disabled);
+	}
+	ngOnDestroy() {
+		this.ctx.unregister(this.el.nativeElement);
+	}
+	onClick() {
+		if (this.disabled()) return;
+		this.ctx.activate(this.value());
+	}
+	onArrow(e, delta, axis) {
+		if (this.ctx.orientation() !== axis) return;
+		e.preventDefault();
+		this.ctx.focusNext(this.el.nativeElement, delta);
+	}
+	onHome(e) {
+		e.preventDefault();
+		this.ctx.focusFirst();
+	}
+	onEnd(e) {
+		e.preventDefault();
+		this.ctx.focusLast();
+	}
+	variantClasses() {
+		if ((this.list?.listVariant() ?? "default") === "line") return this.ctx.orientation() === "vertical" ? "w-full justify-start rounded-none border-e-2 border-transparent px-3 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none" : "rounded-none border-b-2 border-transparent px-2 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none";
+		return cn("rounded-sm px-3 py-1.5 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", this.ctx.orientation() === "vertical" && "w-full justify-start");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: TabsTriggerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: TabsTriggerComponent,
+		isStandalone: true,
+		selector: "button[TabsTrigger]",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "type": "button" },
+			listeners: {
+				"click": "onClick()",
+				"keydown.arrowRight": "onArrow($any($event), 1, \"horizontal\")",
+				"keydown.arrowLeft": "onArrow($any($event), -1, \"horizontal\")",
+				"keydown.arrowDown": "onArrow($any($event), 1, \"vertical\")",
+				"keydown.arrowUp": "onArrow($any($event), -1, \"vertical\")",
+				"keydown.home": "onHome($any($event))",
+				"keydown.end": "onEnd($any($event))"
+			},
+			properties: {
+				"class": "classes()",
+				"id": "triggerId()",
+				"attr.role": "\"tab\"",
+				"attr.aria-selected": "selected()",
+				"attr.aria-controls": "contentId()",
+				"attr.aria-disabled": "disabled() ? \"true\" : null",
+				"attr.tabindex": "tabIndex()",
+				"attr.data-state": "selected() ? \"active\" : \"inactive\"",
+				"disabled": "disabled() || null"
+			}
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: TabsTriggerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[TabsTrigger]",
+			host: {
+				"[class]": "classes()",
+				"[id]": "triggerId()",
+				type: "button",
+				"[attr.role]": "\"tab\"",
+				"[attr.aria-selected]": "selected()",
+				"[attr.aria-controls]": "contentId()",
+				"[attr.aria-disabled]": "disabled() ? \"true\" : null",
+				"[attr.tabindex]": "tabIndex()",
+				"[attr.data-state]": "selected() ? \"active\" : \"inactive\"",
+				"[disabled]": "disabled() || null",
+				"(click)": "onClick()",
+				"(keydown.arrowRight)": "onArrow($any($event), 1, \"horizontal\")",
+				"(keydown.arrowLeft)": "onArrow($any($event), -1, \"horizontal\")",
+				"(keydown.arrowDown)": "onArrow($any($event), 1, \"vertical\")",
+				"(keydown.arrowUp)": "onArrow($any($event), -1, \"vertical\")",
+				"(keydown.home)": "onHome($any($event))",
+				"(keydown.end)": "onEnd($any($event))"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var TabsContentComponent = class TabsContentComponent {
+	ctx = inject(TabsComponent);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	active = computed(() => this.ctx.effectiveValue() === this.value(), ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	triggerId = computed(() => this.ctx.triggerId(this.value()), ...ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []);
+	contentId = computed(() => this.ctx.contentId(this.value()), ...ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("mt-2 block ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: TabsContentComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: TabsContentComponent,
+		isStandalone: true,
+		selector: "TabsContent",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "tabindex": "0" },
+			properties: {
+				"class": "classes()",
+				"id": "contentId()",
+				"attr.role": "\"tabpanel\"",
+				"attr.aria-labelledby": "triggerId()",
+				"attr.data-state": "active() ? \"active\" : \"inactive\"",
+				"hidden": "!active()"
+			}
+		},
+		ngImport: i0,
+		template: `@if (active()) {
     <ng-content />
   }`,
-                }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { TabsComponent, TabsContentComponent, TabsContextBase, TabsListComponent, TabsListContextBase, TabsTriggerComponent };
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: TabsContentComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "TabsContent",
+			host: {
+				"[class]": "classes()",
+				"[id]": "contentId()",
+				"[attr.role]": "\"tabpanel\"",
+				"[attr.aria-labelledby]": "triggerId()",
+				"[attr.data-state]": "active() ? \"active\" : \"inactive\"",
+				"[hidden]": "!active()",
+				tabindex: "0"
+			},
+			template: `@if (active()) {
+    <ng-content />
+  }`
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+export { TabsComponent, TabsContentComponent, TabsContextBase, TabsListComponent, TabsListContextBase, TabsTriggerComponent };