@ojiepermana/angular 22.1.10 → 22.1.12

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

@@ -1,7 +1,245 @@
-export * from '@ojiepermana/angular-component/toast';
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, Service } from '@angular/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const DEFAULT_TOAST_DURATION_MS = 5000;
+const VARIANT_CLASSES = {
+    default: 'border-border bg-background text-foreground',
+    destructive: 'border-destructive/50 bg-destructive text-destructive-foreground',
+    success: 'border-success/50 bg-success text-success-foreground',
+    info: 'border-info/50 bg-info text-info-foreground',
+    warning: 'border-warning/50 bg-warning text-warning-foreground',
+};
+const resolveToastMessage = (message, value) => typeof message === 'function' ? message(value) : message;
+/**
+ * Signal-era toast tanpa dependensi Material: stack dirender ke sebuah live
+ * region (`role="status"`, `aria-live="polite"`) sehingga screen reader
+ * mengumumkan setiap toast.
+ */
+class ToastService {
+    documentRef = inject(DOCUMENT, { optional: true });
+    container = null;
+    active = new Map();
+    constructor() {
+        // The live region is created as soon as the service is injected, and it is
+        // never taken away again.
+        //
+        // A screen reader only announces content that appears INSIDE a live region
+        // that was already there. Creating the region together with the first toast
+        // meant the first message was silently missed, and removing the region when
+        // the stack emptied made the next first message miss too. An empty region
+        // costs nothing: it is fixed, has no background, and ignores the pointer.
+        const doc = this.documentRef;
+        if (doc) {
+            this.ensureContainer(doc);
+            inject(DestroyRef).onDestroy(() => {
+                this.container?.remove();
+                this.container = null;
+            });
+        }
+    }
+    show(options) {
+        const doc = this.documentRef;
+        if (!doc) {
+            return { dismiss: () => { }, afterDismissed: Promise.resolve({ dismissedByAction: false }) };
+        }
+        const variant = options.variant ?? 'default';
+        const container = this.ensureContainer(doc);
+        // Only move the container while it is empty. The container outlives its
+        // toasts now, so repositioning it for a later toast would teleport the ones
+        // already on screen out from under the reader.
+        if (this.active.size === 0) {
+            this.applyPosition(container, options);
+        }
+        const toast = doc.createElement('div');
+        toast.className = [
+            'toast-panel pointer-events-auto flex w-80 items-start gap-3 rounded-md border p-4 shadow-lg',
+            `toast-${variant}`,
+            VARIANT_CLASSES[variant],
+        ].join(' ');
+        toast.setAttribute('data-variant', variant);
+        const body = doc.createElement('div');
+        body.className = 'flex min-w-0 flex-1 flex-col gap-1';
+        if (options.title) {
+            const title = doc.createElement('p');
+            title.className = 'text-sm font-semibold leading-tight';
+            title.textContent = options.title;
+            body.appendChild(title);
+        }
+        if (options.description) {
+            const description = doc.createElement('p');
+            description.className = 'text-sm leading-snug opacity-90';
+            description.textContent = options.description;
+            body.appendChild(description);
+        }
+        toast.appendChild(body);
+        let resolveDismiss = () => { };
+        const afterDismissed = new Promise((resolve) => {
+            resolveDismiss = resolve;
+        });
+        let timeoutId = null;
+        const duration = options.durationMs === null ? null : (options.durationMs ?? DEFAULT_TOAST_DURATION_MS);
+        let remainingMs = duration;
+        let timerStartedAt = 0;
+        const clearTimer = () => {
+            if (timeoutId !== null) {
+                (doc.defaultView ?? globalThis).clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+        };
+        const dismiss = (dismissedByAction = false) => {
+            clearTimer();
+            if (!this.active.delete(toast)) {
+                return;
+            }
+            toast.remove();
+            // The container stays: see the constructor. Removing it here is what made
+            // the next first toast go unannounced.
+            resolveDismiss({ dismissedByAction });
+        };
+        const resumeTimer = () => {
+            if (remainingMs === null || timeoutId !== null) {
+                return;
+            }
+            if (remainingMs <= 0) {
+                dismiss(false);
+                return;
+            }
+            timerStartedAt = Date.now();
+            timeoutId = (doc.defaultView ?? globalThis).setTimeout(() => {
+                timeoutId = null;
+                remainingMs = 0;
+                dismiss(false);
+            }, remainingMs);
+        };
+        const pauseTimer = () => {
+            if (remainingMs === null || timeoutId === null) {
+                return;
+            }
+            remainingMs = Math.max(0, remainingMs - (Date.now() - timerStartedAt));
+            clearTimer();
+        };
+        if (options.action) {
+            const action = doc.createElement('button');
+            action.type = 'button';
+            action.className =
+                'shrink-0 rounded-md border border-current/30 px-2 py-1 text-xs font-medium transition-opacity hover:opacity-80';
+            action.textContent = options.action;
+            action.addEventListener('click', () => dismiss(true), { once: true });
+            toast.appendChild(action);
+        }
+        const dismissButton = doc.createElement('button');
+        dismissButton.type = 'button';
+        dismissButton.className =
+            'toast-dismiss shrink-0 rounded-md p-1 text-current/80 transition-opacity hover:opacity-100';
+        dismissButton.setAttribute('aria-label', options.dismissLabel ?? 'Dismiss notification');
+        const dismissIcon = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        dismissIcon.setAttribute('aria-hidden', 'true');
+        dismissIcon.setAttribute('viewBox', '0 0 24 24');
+        dismissIcon.setAttribute('width', '16');
+        dismissIcon.setAttribute('height', '16');
+        dismissIcon.setAttribute('fill', 'none');
+        dismissIcon.setAttribute('stroke', 'currentColor');
+        dismissIcon.setAttribute('stroke-width', '2');
+        const dismissPath = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+        dismissPath.setAttribute('d', 'M6 6l12 12M18 6 6 18');
+        dismissIcon.appendChild(dismissPath);
+        dismissButton.appendChild(dismissIcon);
+        dismissButton.addEventListener('click', () => dismiss(false), { once: true });
+        toast.appendChild(dismissButton);
+        container.appendChild(toast);
+        this.active.set(toast, dismiss);
+        if (duration !== null && (options.pauseOnInteraction ?? true)) {
+            toast.addEventListener('pointerenter', pauseTimer);
+            toast.addEventListener('pointerleave', resumeTimer);
+            toast.addEventListener('focusin', pauseTimer);
+            toast.addEventListener('focusout', (event) => {
+                if (!toast.contains(event.relatedTarget)) {
+                    resumeTimer();
+                }
+            });
+        }
+        resumeTimer();
+        return { dismiss: () => dismiss(false), afterDismissed };
+    }
+    success(opts) {
+        return this.show({ ...opts, variant: 'success' });
+    }
+    info(opts) {
+        return this.show({ ...opts, variant: 'info' });
+    }
+    warning(opts) {
+        return this.show({ ...opts, variant: 'warning' });
+    }
+    error(opts) {
+        return this.show({ ...opts, variant: 'destructive' });
+    }
+    async promise(taskOrFactory, messages) {
+        const loading = this.show({ title: messages.loading, durationMs: null });
+        try {
+            const task = typeof taskOrFactory === 'function' ? taskOrFactory() : taskOrFactory;
+            const value = await task;
+            loading.dismiss();
+            this.success({ title: resolveToastMessage(messages.success, value) });
+            return value;
+        }
+        catch (error) {
+            loading.dismiss();
+            this.error({ title: resolveToastMessage(messages.error, error) });
+            throw error;
+        }
+    }
+    dismiss() {
+        for (const dismiss of [...this.active.values()]) {
+            dismiss(false);
+        }
+    }
+    ensureContainer(doc) {
+        if (this.container?.isConnected) {
+            return this.container;
+        }
+        const container = doc.createElement('div');
+        container.className = 'toast-container pointer-events-none fixed z-50 flex flex-col gap-2 p-4';
+        container.setAttribute('role', 'status');
+        container.setAttribute('aria-live', 'polite');
+        doc.body.appendChild(container);
+        this.container = container;
+        return container;
+    }
+    /**
+     * Position the persistent container for the toast being shown.
+     *
+     * Applied only when the stack is empty (see {@link show}), so a run of toasts
+     * shares one corner and nothing already visible jumps. The previous corner is
+     * cleared first, so switching corners between runs works.
+     */
+    applyPosition(container, options) {
+        for (const property of ['top', 'bottom', 'left', 'right', 'transform']) {
+            container.style.removeProperty(property);
+        }
+        const vertical = options.verticalPosition ?? 'bottom';
+        const horizontal = options.horizontalPosition ?? 'end';
+        container.style.setProperty(vertical === 'top' ? 'top' : 'bottom', '0');
+        if (horizontal === 'center') {
+            container.style.setProperty('left', '50%');
+            container.style.setProperty('transform', 'translateX(-50%)');
+        }
+        else if (horizontal === 'start' || horizontal === 'left') {
+            container.style.setProperty('left', '0');
+        }
+        else {
+            container.style.setProperty('right', '0');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: ToastService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ToastService, decorators: [{
+            type: Service
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { ToastService };

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

@@ -1,7 +1,294 @@
-export * from '@ojiepermana/angular-component/toggle-group';
+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';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+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: "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 }] }] } });
+function normalizeSpacing(value) {
+    if (value in spacingClasses) {
+        return value;
+    }
+    return 2;
+}
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { ToggleGroupComponent, ToggleGroupContextBase, ToggleGroupItemDirective };

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

@@ -1,7 +1,80 @@
-export * from '@ojiepermana/angular-component/toggle';
+import * as i0 from '@angular/core';
+import { model, input, computed, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import { cva } from 'class-variance-authority';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+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-control-sm min-w-control-sm px-2.5 text-xs',
+            default: 'h-control-md min-w-control-md px-3',
+            lg: 'h-control-10 min-w-control-10 px-3.5',
+        },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+});
+
+class ToggleComponent {
+    pressed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* 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 */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(toggleVariants({ variant: this.variant(), size: this.size() }), this.class()), /* @ts-ignore */
+    ...(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: "22.1.4", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: ToggleComponent, isStandalone: true, selector: "button[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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[Toggle]',
+                    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 };