@ojiepermana/angular 22.1.13 → 22.2.0

package/fesm2022/ojiepermana-angular-component-toggle-group.mjs

@@ -1,294 +1,579 @@
-import * as i0 from '@angular/core';
-import { Directive, input, model, numberAttribute, inject, ElementRef, signal, computed, forwardRef, Component } from '@angular/core';
-import { toggleVariants } from '@ojiepermana/angular/component/toggle';
-import { cn } from '@ojiepermana/angular/component/utils/core';
-
+import * as i0 from "@angular/core";
+import { Component, Directive, ElementRef, computed, forwardRef, inject, input, model, numberAttribute, signal } from "@angular/core";
+import { toggleVariants } from "@ojiepermana/angular/component/toggle";
+import { cn } from "@ojiepermana/angular/component/utils/core";
 const spacingClasses = {
-    0: '',
-    1: 'gap-1',
-    2: 'gap-2',
-    3: 'gap-3',
-    4: 'gap-4',
+	0: "",
+	1: "gap-1",
+	2: "gap-2",
+	3: "gap-3",
+	4: "gap-4"
 };
 const connectedItemClasses = {
-    horizontal: [
-        '[&>[data-slot=toggle-group-item]:not(:first-child)]:rounded-s-none',
-        '[&>[data-slot=toggle-group-item]:not(:first-child)]:[border-inline-start-width:0]',
-        '[&>[data-slot=toggle-group-item]:not(:last-child)]:rounded-e-none',
-    ].join(' '),
-    vertical: [
-        '[&>[data-slot=toggle-group-item]:not(:first-child)]:rounded-t-none',
-        '[&>[data-slot=toggle-group-item]:not(:first-child)]:border-t-0',
-        '[&>[data-slot=toggle-group-item]:not(:last-child)]:rounded-b-none',
-    ].join(' '),
+	horizontal: [
+		"[&>[data-slot=toggle-group-item]:not(:first-child)]:rounded-s-none",
+		"[&>[data-slot=toggle-group-item]:not(:first-child)]:[border-inline-start-width:0]",
+		"[&>[data-slot=toggle-group-item]:not(:last-child)]:rounded-e-none"
+	].join(" "),
+	vertical: [
+		"[&>[data-slot=toggle-group-item]:not(:first-child)]:rounded-t-none",
+		"[&>[data-slot=toggle-group-item]:not(:first-child)]:border-t-0",
+		"[&>[data-slot=toggle-group-item]:not(:last-child)]:rounded-b-none"
+	].join(" ")
 };
-class ToggleGroupContextBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ToggleGroupContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: ToggleGroupContextBase, isStandalone: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ToggleGroupContextBase, decorators: [{
-            type: Directive
-        }] });
-class ToggleGroupComponent extends ToggleGroupContextBase {
-    type = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    value = model(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    values = model([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
-    orientation = input('horizontal', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    variant = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    size = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    spacing = input(2, { ...(ngDevMode ? { debugName: "spacing" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    loop = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    dir = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    host = inject(ElementRef);
-    focusedValue = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "focusedValue" }] : /* istanbul ignore next */ []));
-    registrationVersion = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "registrationVersion" }] : /* istanbul ignore next */ []));
-    items = new Map();
-    resolvedSpacing = computed(() => normalizeSpacing(this.spacing()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedSpacing" }] : /* istanbul ignore next */ []));
-    tabStopValue = computed(() => {
-        this.registrationVersion();
-        const enabledItems = this.enabledItems();
-        if (enabledItems.length === 0)
-            return null;
-        const current = this.focusedValue();
-        if (current && enabledItems.some((item) => item.value() === current)) {
-            return current;
-        }
-        const selected = enabledItems.find((item) => this.isSelected(item.value()));
-        return selected?.value() ?? enabledItems[0].value();
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tabStopValue" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('inline-flex w-fit', this.orientation() === 'vertical' ? 'flex-col items-stretch' : 'items-center', spacingClasses[this.resolvedSpacing()], this.resolvedSpacing() === 0 && connectedItemClasses[this.orientation()], this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    groupType() {
-        return this.type();
-    }
-    groupOrientation() {
-        return this.orientation();
-    }
-    groupVariant() {
-        return this.variant();
-    }
-    groupSize() {
-        return this.size();
-    }
-    groupDisabled() {
-        return this.disabled();
-    }
-    isRtl() {
-        const explicitDir = this.dir();
-        if (explicitDir)
-            return explicitDir === 'rtl';
-        const host = this.host.nativeElement;
-        const nearestDir = host.closest('[dir]')?.getAttribute('dir');
-        if (nearestDir === 'rtl' || nearestDir === 'ltr') {
-            return nearestDir === 'rtl';
-        }
-        return getComputedStyle(host).direction === 'rtl';
-    }
-    register(element, value, disabled) {
-        this.items.set(element, { element, value, disabled });
-        this.bumpRegistrationVersion();
-    }
-    unregister(element) {
-        this.items.delete(element);
-        this.bumpRegistrationVersion();
-    }
-    isSelected(value) {
-        return this.type() === 'multiple' ? this.values().includes(value) : this.value() === value;
-    }
-    toggle(value) {
-        const item = this.itemForValue(value);
-        if (!item || this.disabled() || item.disabled())
-            return;
-        this.focusedValue.set(value);
-        if (this.type() === 'multiple') {
-            this.values.update((current) => current.includes(value)
-                ? current.filter((itemValue) => itemValue !== value)
-                : [...current, value]);
-            return;
-        }
-        this.value.set(this.value() === value ? null : value);
-    }
-    tabindexFor(value, disabled) {
-        if (this.disabled() || disabled)
-            return -1;
-        return this.tabStopValue() === value ? 0 : -1;
-    }
-    markFocused(value) {
-        const item = this.itemForValue(value);
-        if (!item || this.disabled() || item.disabled())
-            return;
-        this.focusedValue.set(value);
-    }
-    focusNext(from, offset) {
-        const enabledItems = this.enabledItems();
-        const currentIndex = enabledItems.findIndex((item) => item.element === from);
-        if (currentIndex < 0 || enabledItems.length === 0)
-            return;
-        let nextIndex = currentIndex + offset;
-        if (this.loop()) {
-            nextIndex = (nextIndex + enabledItems.length) % enabledItems.length;
-        }
-        else if (nextIndex < 0 || nextIndex >= enabledItems.length) {
-            return;
-        }
-        const next = enabledItems[nextIndex];
-        this.focusedValue.set(next.value());
-        next.element.focus();
-    }
-    focusFirst() {
-        const first = this.enabledItems()[0];
-        if (!first)
-            return;
-        this.focusedValue.set(first.value());
-        first.element.focus();
-    }
-    focusLast() {
-        const enabledItems = this.enabledItems();
-        const last = enabledItems[enabledItems.length - 1];
-        if (!last)
-            return;
-        this.focusedValue.set(last.value());
-        last.element.focus();
-    }
-    enabledItems() {
-        return [...this.items.values()].filter((item) => !item.disabled());
-    }
-    itemForValue(value) {
-        return [...this.items.values()].find((item) => item.value() === value);
-    }
-    bumpRegistrationVersion() {
-        this.registrationVersion.update((version) => version + 1);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ToggleGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: ToggleGroupComponent, isStandalone: true, selector: "ToggleGroup", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange" }, host: { properties: { "class": "classes()", "attr.role": "\"group\"", "attr.dir": "dir() ?? null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-orientation": "orientation()", "attr.data-slot": "\"toggle-group\"", "attr.data-type": "type()" } }, providers: [
-            { provide: ToggleGroupContextBase, useExisting: forwardRef(() => ToggleGroupComponent) },
-        ], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ToggleGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ToggleGroup',
-                    providers: [
-                        { provide: ToggleGroupContextBase, useExisting: forwardRef(() => ToggleGroupComponent) },
-                    ],
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.role]': '"group"',
-                        '[attr.dir]': 'dir() ?? null',
-                        // aria-orientation is not allowed on role="group" (axe aria-allowed-attr);
-                        // data-orientation below drives the visual layout instead.
-                        '[attr.data-disabled]': 'disabled() ? "" : null',
-                        '[attr.data-orientation]': 'orientation()',
-                        '[attr.data-slot]': '"toggle-group"',
-                        '[attr.data-type]': 'type()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class ToggleGroupItemDirective {
-    ctx = inject(ToggleGroupContextBase);
-    element = 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.isSelected(this.value()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn(toggleVariants({ variant: this.ctx.groupVariant(), size: this.ctx.groupSize() }), this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    ngOnInit() {
-        this.ctx.register(this.element.nativeElement, this.value, this.disabled);
-    }
-    ngOnDestroy() {
-        this.ctx.unregister(this.element.nativeElement);
-    }
-    isDisabled() {
-        return this.ctx.groupDisabled() || this.disabled();
-    }
-    onClick() {
-        if (this.isDisabled())
-            return;
-        this.ctx.toggle(this.value());
-    }
-    onFocus() {
-        if (this.isDisabled())
-            return;
-        this.ctx.markFocused(this.value());
-    }
-    onArrow(event, offset) {
-        event.preventDefault();
-        this.ctx.focusNext(this.element.nativeElement, offset);
-    }
-    onHorizontalArrow(event, offset) {
-        event.preventDefault();
-        this.ctx.focusNext(this.element.nativeElement, this.ctx.isRtl() ? offset * -1 : offset);
-    }
-    onHome(event) {
-        event.preventDefault();
-        this.ctx.focusFirst();
-    }
-    onEnd(event) {
-        event.preventDefault();
-        this.ctx.focusLast();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ToggleGroupItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: ToggleGroupItemDirective, isStandalone: true, selector: "button[ToggleGroupItem]", 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()", "focus": "onFocus()", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowLeft": "onHorizontalArrow($any($event), -1)", "keydown.arrowRight": "onHorizontalArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.end": "onEnd($any($event))", "keydown.home": "onHome($any($event))" }, properties: { "class": "classes()", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.aria-pressed": "selected()", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-orientation": "ctx.groupOrientation()", "attr.data-size": "ctx.groupSize()", "attr.data-slot": "\"toggle-group-item\"", "attr.data-state": "selected() ? \"on\" : \"off\"", "attr.data-variant": "ctx.groupVariant()", "attr.tabindex": "ctx.tabindexFor(value(), isDisabled())", "disabled": "isDisabled() || null" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ToggleGroupItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[ToggleGroupItem]',
-                    host: {
-                        '[class]': 'classes()',
-                        type: 'button',
-                        '[attr.aria-disabled]': 'isDisabled() ? "true" : null',
-                        '[attr.aria-pressed]': 'selected()',
-                        '[attr.data-disabled]': 'isDisabled() ? "" : null',
-                        '[attr.data-orientation]': 'ctx.groupOrientation()',
-                        '[attr.data-size]': 'ctx.groupSize()',
-                        '[attr.data-slot]': '"toggle-group-item"',
-                        '[attr.data-state]': 'selected() ? "on" : "off"',
-                        '[attr.data-variant]': 'ctx.groupVariant()',
-                        '[attr.tabindex]': 'ctx.tabindexFor(value(), isDisabled())',
-                        '[disabled]': 'isDisabled() || null',
-                        '(click)': 'onClick()',
-                        '(focus)': 'onFocus()',
-                        '(keydown.arrowDown)': 'onArrow($any($event), 1)',
-                        '(keydown.arrowLeft)': 'onHorizontalArrow($any($event), -1)',
-                        '(keydown.arrowRight)': 'onHorizontalArrow($any($event), 1)',
-                        '(keydown.arrowUp)': 'onArrow($any($event), -1)',
-                        '(keydown.end)': 'onEnd($any($event))',
-                        '(keydown.home)': 'onHome($any($event))',
-                    },
-                }]
-        }], 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 ToggleGroupContextBase = class ToggleGroupContextBase {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ToggleGroupContextBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: ToggleGroupContextBase,
+		isStandalone: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ToggleGroupContextBase,
+	decorators: [{ type: Directive }]
+});
+var ToggleGroupComponent = class ToggleGroupComponent extends ToggleGroupContextBase {
+	type = input.required(...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	values = model([], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("default", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	spacing = input(2, {
+		...ngDevMode ? { debugName: "spacing" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	loop = input(true, ...ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	dir = input(null, ...ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef);
+	focusedValue = signal(null, ...ngDevMode ? [{ debugName: "focusedValue" }] : /* istanbul ignore next */ []);
+	registrationVersion = signal(0, ...ngDevMode ? [{ debugName: "registrationVersion" }] : /* istanbul ignore next */ []);
+	items = /* @__PURE__ */ new Map();
+	resolvedSpacing = computed(() => normalizeSpacing(this.spacing()), ...ngDevMode ? [{ debugName: "resolvedSpacing" }] : /* istanbul ignore next */ []);
+	tabStopValue = computed(() => {
+		this.registrationVersion();
+		const enabledItems = this.enabledItems();
+		if (enabledItems.length === 0) return null;
+		const current = this.focusedValue();
+		if (current && enabledItems.some((item) => item.value() === current)) return current;
+		return enabledItems.find((item) => this.isSelected(item.value()))?.value() ?? enabledItems[0].value();
+	}, ...ngDevMode ? [{ debugName: "tabStopValue" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("inline-flex w-fit", this.orientation() === "vertical" ? "flex-col items-stretch" : "items-center", spacingClasses[this.resolvedSpacing()], this.resolvedSpacing() === 0 && connectedItemClasses[this.orientation()], this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	groupType() {
+		return this.type();
+	}
+	groupOrientation() {
+		return this.orientation();
+	}
+	groupVariant() {
+		return this.variant();
+	}
+	groupSize() {
+		return this.size();
+	}
+	groupDisabled() {
+		return this.disabled();
+	}
+	isRtl() {
+		const explicitDir = this.dir();
+		if (explicitDir) return explicitDir === "rtl";
+		const host = this.host.nativeElement;
+		const nearestDir = host.closest("[dir]")?.getAttribute("dir");
+		if (nearestDir === "rtl" || nearestDir === "ltr") return nearestDir === "rtl";
+		return getComputedStyle(host).direction === "rtl";
+	}
+	register(element, value, disabled) {
+		this.items.set(element, {
+			element,
+			value,
+			disabled
+		});
+		this.bumpRegistrationVersion();
+	}
+	unregister(element) {
+		this.items.delete(element);
+		this.bumpRegistrationVersion();
+	}
+	isSelected(value) {
+		return this.type() === "multiple" ? this.values().includes(value) : this.value() === value;
+	}
+	toggle(value) {
+		const item = this.itemForValue(value);
+		if (!item || this.disabled() || item.disabled()) return;
+		this.focusedValue.set(value);
+		if (this.type() === "multiple") {
+			this.values.update((current) => current.includes(value) ? current.filter((itemValue) => itemValue !== value) : [...current, value]);
+			return;
+		}
+		this.value.set(this.value() === value ? null : value);
+	}
+	tabindexFor(value, disabled) {
+		if (this.disabled() || disabled) return -1;
+		return this.tabStopValue() === value ? 0 : -1;
+	}
+	markFocused(value) {
+		const item = this.itemForValue(value);
+		if (!item || this.disabled() || item.disabled()) return;
+		this.focusedValue.set(value);
+	}
+	focusNext(from, offset) {
+		const enabledItems = this.enabledItems();
+		const currentIndex = enabledItems.findIndex((item) => item.element === from);
+		if (currentIndex < 0 || enabledItems.length === 0) return;
+		let nextIndex = currentIndex + offset;
+		if (this.loop()) nextIndex = (nextIndex + enabledItems.length) % enabledItems.length;
+		else if (nextIndex < 0 || nextIndex >= enabledItems.length) return;
+		const next = enabledItems[nextIndex];
+		this.focusedValue.set(next.value());
+		next.element.focus();
+	}
+	focusFirst() {
+		const first = this.enabledItems()[0];
+		if (!first) return;
+		this.focusedValue.set(first.value());
+		first.element.focus();
+	}
+	focusLast() {
+		const enabledItems = this.enabledItems();
+		const last = enabledItems[enabledItems.length - 1];
+		if (!last) return;
+		this.focusedValue.set(last.value());
+		last.element.focus();
+	}
+	enabledItems() {
+		return [...this.items.values()].filter((item) => !item.disabled());
+	}
+	itemForValue(value) {
+		return [...this.items.values()].find((item) => item.value() === value);
+	}
+	bumpRegistrationVersion() {
+		this.registrationVersion.update((version) => version + 1);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ToggleGroupComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: ToggleGroupComponent,
+		isStandalone: true,
+		selector: "ToggleGroup",
+		inputs: {
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			values: {
+				classPropertyName: "values",
+				publicName: "values",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			spacing: {
+				classPropertyName: "spacing",
+				publicName: "spacing",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loop: {
+				classPropertyName: "loop",
+				publicName: "loop",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dir: {
+				classPropertyName: "dir",
+				publicName: "dir",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			values: "valuesChange"
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.role": "\"group\"",
+			"attr.dir": "dir() ?? null",
+			"attr.data-disabled": "disabled() ? \"\" : null",
+			"attr.data-orientation": "orientation()",
+			"attr.data-slot": "\"toggle-group\"",
+			"attr.data-type": "type()"
+		} },
+		providers: [{
+			provide: ToggleGroupContextBase,
+			useExisting: forwardRef(() => ToggleGroupComponent)
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ToggleGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ToggleGroup",
+			providers: [{
+				provide: ToggleGroupContextBase,
+				useExisting: forwardRef(() => ToggleGroupComponent)
+			}],
+			host: {
+				"[class]": "classes()",
+				"[attr.role]": "\"group\"",
+				"[attr.dir]": "dir() ?? null",
+				"[attr.data-disabled]": "disabled() ? \"\" : null",
+				"[attr.data-orientation]": "orientation()",
+				"[attr.data-slot]": "\"toggle-group\"",
+				"[attr.data-type]": "type()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: true
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		values: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "values",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valuesChange"]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		spacing: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "spacing",
+				required: false
+			}]
+		}],
+		loop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loop",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		dir: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dir",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var ToggleGroupItemDirective = class ToggleGroupItemDirective {
+	ctx = inject(ToggleGroupContextBase);
+	element = 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.isSelected(this.value()), ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(toggleVariants({
+		variant: this.ctx.groupVariant(),
+		size: this.ctx.groupSize()
+	}), this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	ngOnInit() {
+		this.ctx.register(this.element.nativeElement, this.value, this.disabled);
+	}
+	ngOnDestroy() {
+		this.ctx.unregister(this.element.nativeElement);
+	}
+	isDisabled() {
+		return this.ctx.groupDisabled() || this.disabled();
+	}
+	onClick() {
+		if (this.isDisabled()) return;
+		this.ctx.toggle(this.value());
+	}
+	onFocus() {
+		if (this.isDisabled()) return;
+		this.ctx.markFocused(this.value());
+	}
+	onArrow(event, offset) {
+		event.preventDefault();
+		this.ctx.focusNext(this.element.nativeElement, offset);
+	}
+	onHorizontalArrow(event, offset) {
+		event.preventDefault();
+		this.ctx.focusNext(this.element.nativeElement, this.ctx.isRtl() ? offset * -1 : offset);
+	}
+	onHome(event) {
+		event.preventDefault();
+		this.ctx.focusFirst();
+	}
+	onEnd(event) {
+		event.preventDefault();
+		this.ctx.focusLast();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ToggleGroupItemDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: ToggleGroupItemDirective,
+		isStandalone: true,
+		selector: "button[ToggleGroupItem]",
+		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()",
+				"focus": "onFocus()",
+				"keydown.arrowDown": "onArrow($any($event), 1)",
+				"keydown.arrowLeft": "onHorizontalArrow($any($event), -1)",
+				"keydown.arrowRight": "onHorizontalArrow($any($event), 1)",
+				"keydown.arrowUp": "onArrow($any($event), -1)",
+				"keydown.end": "onEnd($any($event))",
+				"keydown.home": "onHome($any($event))"
+			},
+			properties: {
+				"class": "classes()",
+				"attr.aria-disabled": "isDisabled() ? \"true\" : null",
+				"attr.aria-pressed": "selected()",
+				"attr.data-disabled": "isDisabled() ? \"\" : null",
+				"attr.data-orientation": "ctx.groupOrientation()",
+				"attr.data-size": "ctx.groupSize()",
+				"attr.data-slot": "\"toggle-group-item\"",
+				"attr.data-state": "selected() ? \"on\" : \"off\"",
+				"attr.data-variant": "ctx.groupVariant()",
+				"attr.tabindex": "ctx.tabindexFor(value(), isDisabled())",
+				"disabled": "isDisabled() || null"
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ToggleGroupItemDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[ToggleGroupItem]",
+			host: {
+				"[class]": "classes()",
+				type: "button",
+				"[attr.aria-disabled]": "isDisabled() ? \"true\" : null",
+				"[attr.aria-pressed]": "selected()",
+				"[attr.data-disabled]": "isDisabled() ? \"\" : null",
+				"[attr.data-orientation]": "ctx.groupOrientation()",
+				"[attr.data-size]": "ctx.groupSize()",
+				"[attr.data-slot]": "\"toggle-group-item\"",
+				"[attr.data-state]": "selected() ? \"on\" : \"off\"",
+				"[attr.data-variant]": "ctx.groupVariant()",
+				"[attr.tabindex]": "ctx.tabindexFor(value(), isDisabled())",
+				"[disabled]": "isDisabled() || null",
+				"(click)": "onClick()",
+				"(focus)": "onFocus()",
+				"(keydown.arrowDown)": "onArrow($any($event), 1)",
+				"(keydown.arrowLeft)": "onHorizontalArrow($any($event), -1)",
+				"(keydown.arrowRight)": "onHorizontalArrow($any($event), 1)",
+				"(keydown.arrowUp)": "onArrow($any($event), -1)",
+				"(keydown.end)": "onEnd($any($event))",
+				"(keydown.home)": "onHome($any($event))"
+			}
+		}]
+	}],
+	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
+			}]
+		}]
+	}
+});
 function normalizeSpacing(value) {
-    if (value in spacingClasses) {
-        return value;
-    }
-    return 2;
+	if (value in spacingClasses) return value;
+	return 2;
 }
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ToggleGroupComponent, ToggleGroupContextBase, ToggleGroupItemDirective };
+export { ToggleGroupComponent, ToggleGroupContextBase, ToggleGroupItemDirective };