@edsis/ui 0.0.2

package/fesm2022/edsis-ui-toggle-group.mjs

@@ -0,0 +1,269 @@
+import * as i0 from '@angular/core';
+import { Directive, input, model, numberAttribute, inject, ElementRef, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toggleVariants } from '@edsis/ui/toggle';
+import { cn } from '@edsis/ui/utils';
+
+const spacingClasses = {
+    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(' '),
+};
+class ToggleGroupContextBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToggleGroupContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: ToggleGroupContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToggleGroupContextBase, decorators: [{
+            type: Directive
+        }] });
+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 = 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;
+        }
+        const selected = enabledItems.find((item) => this.isSelected(item.value()));
+        return selected?.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: "21.2.14", ngImport: i0, type: ToggleGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: ToggleGroupComponent, isStandalone: true, selector: "ui-toggle-group", 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.aria-orientation": "orientation()", "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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToggleGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-toggle-group',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: ToggleGroupContextBase, useExisting: forwardRef(() => ToggleGroupComponent) }],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"group"',
+                        '[attr.dir]': 'dir() ?? null',
+                        '[attr.aria-orientation]': 'orientation()',
+                        '[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(...(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: "21.2.14", ngImport: i0, type: ToggleGroupItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: ToggleGroupItemDirective, isStandalone: true, selector: "button[ui-toggle-group-item]", 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: "21.2.14", ngImport: i0, type: ToggleGroupItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[ui-toggle-group-item]',
+                    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;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ToggleGroupComponent, ToggleGroupContextBase, ToggleGroupItemDirective };
+//# sourceMappingURL=edsis-ui-toggle-group.mjs.map

package/fesm2022/edsis-ui-toggle-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edsis-ui-toggle-group.mjs","sources":["../../../library/ui/toggle-group/toggle-group.component.ts","../../../library/ui/toggle-group/edsis-ui-toggle-group.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  ElementRef,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  model,\n  numberAttribute,\n  signal,\n} from '@angular/core';\nimport { type ToggleSize, toggleVariants, type ToggleVariant } from '@edsis/ui/toggle';\nimport { cn } from '@edsis/ui/utils';\n\nexport type ToggleGroupType = 'single' | 'multiple';\nexport type ToggleGroupOrientation = 'horizontal' | 'vertical';\nexport type ToggleGroupVariant = ToggleVariant;\nexport type ToggleGroupSize = ToggleSize;\n\ninterface ToggleGroupItemRegistration {\n  readonly element: HTMLElement;\n  readonly value: () => string;\n  readonly disabled: () => boolean;\n}\n\nconst spacingClasses = {\n  0: '',\n  1: 'gap-1',\n  2: 'gap-2',\n  3: 'gap-3',\n  4: 'gap-4',\n} as const;\n\nconst connectedItemClasses: Record<ToggleGroupOrientation, string> = {\n  horizontal: [\n    '[&>[data-slot=toggle-group-item]:not(:first-child)]:rounded-s-none',\n    '[&>[data-slot=toggle-group-item]:not(:first-child)]:[border-inline-start-width:0]',\n    '[&>[data-slot=toggle-group-item]:not(:last-child)]:rounded-e-none',\n  ].join(' '),\n  vertical: [\n    '[&>[data-slot=toggle-group-item]:not(:first-child)]:rounded-t-none',\n    '[&>[data-slot=toggle-group-item]:not(:first-child)]:border-t-0',\n    '[&>[data-slot=toggle-group-item]:not(:last-child)]:rounded-b-none',\n  ].join(' '),\n};\n\n@Directive()\nexport abstract class ToggleGroupContextBase {\n  abstract groupType(): ToggleGroupType;\n  abstract groupOrientation(): ToggleGroupOrientation;\n  abstract groupVariant(): ToggleGroupVariant;\n  abstract groupSize(): ToggleGroupSize;\n  abstract groupDisabled(): boolean;\n  abstract isRtl(): boolean;\n\n  abstract register(element: HTMLElement, value: () => string, disabled: () => boolean): void;\n  abstract unregister(element: HTMLElement): void;\n  abstract isSelected(value: string): boolean;\n  abstract toggle(value: string): void;\n  abstract tabindexFor(value: string, disabled: boolean): number;\n  abstract markFocused(value: string): void;\n  abstract focusNext(from: HTMLElement, offset: number): void;\n  abstract focusFirst(): void;\n  abstract focusLast(): void;\n}\n\n@Component({\n  selector: 'ui-toggle-group',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: ToggleGroupContextBase, useExisting: forwardRef(() => ToggleGroupComponent) }],\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': '\"group\"',\n    '[attr.dir]': 'dir() ?? null',\n    '[attr.aria-orientation]': 'orientation()',\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\n    '[attr.data-orientation]': 'orientation()',\n    '[attr.data-slot]': '\"toggle-group\"',\n    '[attr.data-type]': 'type()',\n  },\n  template: `<ng-content />`,\n})\nexport class ToggleGroupComponent extends ToggleGroupContextBase {\n  readonly type = input.required<ToggleGroupType>();\n  readonly value = model<string | null>(null);\n  readonly values = model<string[]>([]);\n  readonly orientation = input<ToggleGroupOrientation>('horizontal');\n  readonly variant = input<ToggleGroupVariant>('default');\n  readonly size = input<ToggleGroupSize>('default');\n  readonly spacing = input(2, { transform: numberAttribute });\n  readonly loop = input<boolean>(true);\n  readonly disabled = input<boolean>(false);\n  readonly dir = input<'ltr' | 'rtl' | null>(null);\n  readonly class = input<string>('');\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly focusedValue = signal<string | null>(null);\n  private readonly registrationVersion = signal(0);\n  private readonly items = new Map<HTMLElement, ToggleGroupItemRegistration>();\n\n  private readonly resolvedSpacing = computed(() => normalizeSpacing(this.spacing()));\n  private readonly tabStopValue = computed(() => {\n    this.registrationVersion();\n\n    const enabledItems = this.enabledItems();\n    if (enabledItems.length === 0) return null;\n\n    const current = this.focusedValue();\n    if (current && enabledItems.some((item) => item.value() === current)) {\n      return current;\n    }\n\n    const selected = enabledItems.find((item) => this.isSelected(item.value()));\n    return selected?.value() ?? enabledItems[0].value();\n  });\n\n  protected readonly classes = computed(() =>\n    cn(\n      'inline-flex w-fit',\n      this.orientation() === 'vertical' ? 'flex-col items-stretch' : 'items-center',\n      spacingClasses[this.resolvedSpacing()],\n      this.resolvedSpacing() === 0 && connectedItemClasses[this.orientation()],\n      this.class(),\n    ),\n  );\n\n  override groupType(): ToggleGroupType {\n    return this.type();\n  }\n\n  override groupOrientation(): ToggleGroupOrientation {\n    return this.orientation();\n  }\n\n  override groupVariant(): ToggleGroupVariant {\n    return this.variant();\n  }\n\n  override groupSize(): ToggleGroupSize {\n    return this.size();\n  }\n\n  override groupDisabled(): boolean {\n    return this.disabled();\n  }\n\n  override isRtl(): boolean {\n    const explicitDir = this.dir();\n    if (explicitDir) return explicitDir === 'rtl';\n\n    const host = this.host.nativeElement;\n    const nearestDir = host.closest('[dir]')?.getAttribute('dir');\n    if (nearestDir === 'rtl' || nearestDir === 'ltr') {\n      return nearestDir === 'rtl';\n    }\n\n    return getComputedStyle(host).direction === 'rtl';\n  }\n\n  override register(element: HTMLElement, value: () => string, disabled: () => boolean): void {\n    this.items.set(element, { element, value, disabled });\n    this.bumpRegistrationVersion();\n  }\n\n  override unregister(element: HTMLElement): void {\n    this.items.delete(element);\n    this.bumpRegistrationVersion();\n  }\n\n  override isSelected(value: string): boolean {\n    return this.type() === 'multiple' ? this.values().includes(value) : this.value() === value;\n  }\n\n  override toggle(value: string): void {\n    const item = this.itemForValue(value);\n    if (!item || this.disabled() || item.disabled()) return;\n\n    this.focusedValue.set(value);\n\n    if (this.type() === 'multiple') {\n      this.values.update((current) =>\n        current.includes(value) ? current.filter((itemValue) => itemValue !== value) : [...current, value],\n      );\n      return;\n    }\n\n    this.value.set(this.value() === value ? null : value);\n  }\n\n  override tabindexFor(value: string, disabled: boolean): number {\n    if (this.disabled() || disabled) return -1;\n    return this.tabStopValue() === value ? 0 : -1;\n  }\n\n  override markFocused(value: string): void {\n    const item = this.itemForValue(value);\n    if (!item || this.disabled() || item.disabled()) return;\n    this.focusedValue.set(value);\n  }\n\n  override focusNext(from: HTMLElement, offset: number): void {\n    const enabledItems = this.enabledItems();\n    const currentIndex = enabledItems.findIndex((item) => item.element === from);\n    if (currentIndex < 0 || enabledItems.length === 0) return;\n\n    let nextIndex = currentIndex + offset;\n\n    if (this.loop()) {\n      nextIndex = (nextIndex + enabledItems.length) % enabledItems.length;\n    } else if (nextIndex < 0 || nextIndex >= enabledItems.length) {\n      return;\n    }\n\n    const next = enabledItems[nextIndex];\n    this.focusedValue.set(next.value());\n    next.element.focus();\n  }\n\n  override focusFirst(): void {\n    const first = this.enabledItems()[0];\n    if (!first) return;\n    this.focusedValue.set(first.value());\n    first.element.focus();\n  }\n\n  override focusLast(): void {\n    const enabledItems = this.enabledItems();\n    const last = enabledItems[enabledItems.length - 1];\n    if (!last) return;\n    this.focusedValue.set(last.value());\n    last.element.focus();\n  }\n\n  private enabledItems(): ToggleGroupItemRegistration[] {\n    return [...this.items.values()].filter((item) => !item.disabled());\n  }\n\n  private itemForValue(value: string): ToggleGroupItemRegistration | undefined {\n    return [...this.items.values()].find((item) => item.value() === value);\n  }\n\n  private bumpRegistrationVersion(): void {\n    this.registrationVersion.update((version) => version + 1);\n  }\n}\n\n@Directive({\n  selector: 'button[ui-toggle-group-item]',\n  host: {\n    '[class]': 'classes()',\n    type: 'button',\n    '[attr.aria-disabled]': 'isDisabled() ? \"true\" : null',\n    '[attr.aria-pressed]': 'selected()',\n    '[attr.data-disabled]': 'isDisabled() ? \"\" : null',\n    '[attr.data-orientation]': 'ctx.groupOrientation()',\n    '[attr.data-size]': 'ctx.groupSize()',\n    '[attr.data-slot]': '\"toggle-group-item\"',\n    '[attr.data-state]': 'selected() ? \"on\" : \"off\"',\n    '[attr.data-variant]': 'ctx.groupVariant()',\n    '[attr.tabindex]': 'ctx.tabindexFor(value(), isDisabled())',\n    '[disabled]': 'isDisabled() || null',\n    '(click)': 'onClick()',\n    '(focus)': 'onFocus()',\n    '(keydown.arrowDown)': 'onArrow($any($event), 1)',\n    '(keydown.arrowLeft)': 'onHorizontalArrow($any($event), -1)',\n    '(keydown.arrowRight)': 'onHorizontalArrow($any($event), 1)',\n    '(keydown.arrowUp)': 'onArrow($any($event), -1)',\n    '(keydown.end)': 'onEnd($any($event))',\n    '(keydown.home)': 'onHome($any($event))',\n  },\n})\nexport class ToggleGroupItemDirective {\n  protected readonly ctx = inject(ToggleGroupContextBase);\n  private readonly element = inject<ElementRef<HTMLButtonElement>>(ElementRef);\n\n  readonly value = input.required<string>();\n  readonly disabled = input<boolean>(false);\n  readonly class = input<string>('');\n\n  protected readonly selected = computed(() => this.ctx.isSelected(this.value()));\n  protected readonly classes = computed(() =>\n    cn(toggleVariants({ variant: this.ctx.groupVariant(), size: this.ctx.groupSize() }), this.class()),\n  );\n\n  ngOnInit(): void {\n    this.ctx.register(this.element.nativeElement, this.value, this.disabled);\n  }\n\n  ngOnDestroy(): void {\n    this.ctx.unregister(this.element.nativeElement);\n  }\n\n  protected isDisabled(): boolean {\n    return this.ctx.groupDisabled() || this.disabled();\n  }\n\n  protected onClick(): void {\n    if (this.isDisabled()) return;\n    this.ctx.toggle(this.value());\n  }\n\n  protected onFocus(): void {\n    if (this.isDisabled()) return;\n    this.ctx.markFocused(this.value());\n  }\n\n  protected onArrow(event: KeyboardEvent, offset: number): void {\n    event.preventDefault();\n    this.ctx.focusNext(this.element.nativeElement, offset);\n  }\n\n  protected onHorizontalArrow(event: KeyboardEvent, offset: number): void {\n    event.preventDefault();\n    this.ctx.focusNext(this.element.nativeElement, this.ctx.isRtl() ? offset * -1 : offset);\n  }\n\n  protected onHome(event: KeyboardEvent): void {\n    event.preventDefault();\n    this.ctx.focusFirst();\n  }\n\n  protected onEnd(event: KeyboardEvent): void {\n    event.preventDefault();\n    this.ctx.focusLast();\n  }\n}\n\nfunction normalizeSpacing(value: number): keyof typeof spacingClasses {\n  if (value in spacingClasses) {\n    return value as keyof typeof spacingClasses;\n  }\n\n  return 2;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/edsis-ui-toggle.mjs

@@ -0,0 +1,76 @@
+import * as i0 from '@angular/core';
+import { model, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { cn } from '@edsis/ui/utils';
+import { cva } from 'class-variance-authority';
+
+const toggleVariants = cva([
+    'group/toggle inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md',
+    'text-sm font-medium transition-colors',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+    'disabled:pointer-events-none disabled:opacity-50',
+    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+].join(' '), {
+    variants: {
+        variant: {
+            default: [
+                'bg-transparent text-foreground',
+                'hover:bg-muted hover:text-muted-foreground',
+                'data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+            ].join(' '),
+            outline: [
+                'border border-input bg-transparent text-foreground shadow-sm',
+                'hover:bg-accent hover:text-accent-foreground',
+                'data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+            ].join(' '),
+        },
+        size: {
+            sm: 'h-8 min-w-8 px-2.5 text-xs',
+            default: 'h-9 min-w-9 px-3',
+            lg: 'h-10 min-w-10 px-3.5',
+        },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+});
+
+class ToggleComponent {
+    pressed = model(false, ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(toggleVariants({ variant: this.variant(), size: this.size() }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        this.pressed.update((pressed) => !pressed);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: ToggleComponent, isStandalone: true, selector: "button[ui-toggle]", inputs: { pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange" }, host: { attributes: { "type": "button" }, listeners: { "click": "toggle()" }, properties: { "class": "classes()", "attr.aria-pressed": "pressed()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-size": "size()", "attr.data-state": "pressed() ? \"on\" : \"off\"", "attr.data-variant": "variant()", "disabled": "disabled() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[ui-toggle]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        type: 'button',
+                        '[attr.aria-pressed]': 'pressed()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-state]': 'pressed() ? "on" : "off"',
+                        '[attr.data-variant]': 'variant()',
+                        '[disabled]': 'disabled() || null',
+                        '(click)': 'toggle()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }, { type: i0.Output, args: ["pressedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ToggleComponent, toggleVariants };
+//# sourceMappingURL=edsis-ui-toggle.mjs.map

package/fesm2022/edsis-ui-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edsis-ui-toggle.mjs","sources":["../../../library/ui/toggle/toggle.variants.ts","../../../library/ui/toggle/toggle.component.ts","../../../library/ui/toggle/edsis-ui-toggle.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const toggleVariants = cva(\n  [\n    'group/toggle inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md',\n    'text-sm font-medium transition-colors',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n    'disabled:pointer-events-none disabled:opacity-50',\n    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: [\n          'bg-transparent text-foreground',\n          'hover:bg-muted hover:text-muted-foreground',\n          'data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n        ].join(' '),\n        outline: [\n          'border border-input bg-transparent text-foreground shadow-sm',\n          'hover:bg-accent hover:text-accent-foreground',\n          'data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n        ].join(' '),\n      },\n      size: {\n        sm: 'h-8 min-w-8 px-2.5 text-xs',\n        default: 'h-9 min-w-9 px-3',\n        lg: 'h-10 min-w-10 px-3.5',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'default' },\n  },\n);\n\nexport type ToggleVariant = NonNullable<VariantProps<typeof toggleVariants>['variant']>;\nexport type ToggleSize = NonNullable<VariantProps<typeof toggleVariants>['size']>;\n","import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport { cn } from '@edsis/ui/utils';\nimport { type ToggleSize, toggleVariants, type ToggleVariant } from './toggle.variants';\n\n@Component({\n  selector: 'button[ui-toggle]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    type: 'button',\n    '[attr.aria-pressed]': 'pressed()',\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\n    '[attr.data-size]': 'size()',\n    '[attr.data-state]': 'pressed() ? \"on\" : \"off\"',\n    '[attr.data-variant]': 'variant()',\n    '[disabled]': 'disabled() || null',\n    '(click)': 'toggle()',\n  },\n  template: `<ng-content />`,\n})\nexport class ToggleComponent {\n  readonly pressed = model(false);\n  readonly disabled = input(false);\n  readonly variant = input<ToggleVariant>('default');\n  readonly size = input<ToggleSize>('default');\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(toggleVariants({ variant: this.variant(), size: this.size() }), this.class()),\n  );\n\n  toggle(): void {\n    if (this.disabled()) {\n      return;\n    }\n\n    this.pressed.update((pressed) => !pressed);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAEO,MAAM,cAAc,GAAG,GAAG,CAC/B;IACE,wGAAwG;IACxG,uCAAuC;IACvC,yEAAyE;IACzE,kDAAkD;IAClD,6DAA6D;AAC9D,CAAA,CAAC,IAAI,CAAC,GAAG,CAAC,EACX;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE;gBACP,gCAAgC;gBAChC,4CAA4C;gBAC5C,kEAAkE;aACnE,CAAC,IAAI,CAAC,GAAG,CAAC;AACX,YAAA,OAAO,EAAE;gBACP,8DAA8D;gBAC9D,8CAA8C;gBAC9C,kEAAkE;aACnE,CAAC,IAAI,CAAC,GAAG,CAAC;AACZ,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,4BAA4B;AAChC,YAAA,OAAO,EAAE,kBAAkB;AAC3B,YAAA,EAAE,EAAE,sBAAsB;AAC3B,SAAA;AACF,KAAA;IACD,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;AACzD,CAAA;;MCXU,eAAe,CAAA;AACjB,IAAA,OAAO,GAAG,KAAK,CAAC,KAAK,8EAAC;AACtB,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,+EAAC;AACvB,IAAA,OAAO,GAAG,KAAK,CAAgB,SAAS,8EAAC;AACzC,IAAA,IAAI,GAAG,KAAK,CAAa,SAAS,2EAAC;AACnC,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,8EACjF;IAED,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB;QACF;AAEA,QAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC;IAC5C;wGAjBW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,ukCAFhB,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAEf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAhB3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mBAAmB;oBAC7B,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,qBAAqB,EAAE,WAAW;AAClC,wBAAA,sBAAsB,EAAE,wBAAwB;AAChD,wBAAA,kBAAkB,EAAE,QAAQ;AAC5B,wBAAA,mBAAmB,EAAE,0BAA0B;AAC/C,wBAAA,qBAAqB,EAAE,WAAW;AAClC,wBAAA,YAAY,EAAE,oBAAoB;AAClC,wBAAA,SAAS,EAAE,UAAU;AACtB,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;;ACnBD;;AAEG;;;;"}