@ojiepermana/angular 21.3.4 → 22.0.1

package/fesm2022/ojiepermana-angular-component-timeline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-timeline.mjs","sources":["../../../projects/angular/component/timeline/timeline.component.ts","../../../projects/angular/component/timeline/ojiepermana-angular-component-timeline.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\nexport type TimelineAlign = 'start' | 'baseline' | 'center' | 'end';\nexport type TimelineSize = 'default' | 'lg';\nexport type TimelineStatus = 'complete' | 'current' | 'incomplete';\nexport type TimelineIndicatorVariant = 'default' | 'bare';\nexport type TimelineIndicatorColor =\n  | 'red'\n  | 'orange'\n  | 'amber'\n  | 'yellow'\n  | 'lime'\n  | 'green'\n  | 'emerald'\n  | 'teal'\n  | 'cyan'\n  | 'sky'\n  | 'blue'\n  | 'indigo'\n  | 'violet'\n  | 'purple'\n  | 'fuchsia'\n  | 'pink'\n  | 'rose';\n\nconst TIMELINE_BASE = [\n  'w-full min-w-0 text-sm text-foreground',\n  '[--timeline-content-gap:0.75rem] [--timeline-indicator-size:1.5rem] [--timeline-item-gap:1.5rem]',\n].join(' ');\n\nconst timelineSizeClasses: Record<TimelineSize, string> = {\n  default: '[--timeline-indicator-size:1.5rem]',\n  lg: '[--timeline-indicator-size:2.5rem] [--timeline-content-gap:1rem]',\n};\n\nconst timelineAlignClasses: Record<TimelineAlign, string> = {\n  start: 'items-start',\n  baseline: 'items-baseline',\n  center: 'items-center',\n  end: 'items-end',\n};\n\nconst timelineItemStatusClasses: Record<TimelineStatus, string> = {\n  complete: 'before:bg-primary after:bg-primary',\n  current: 'before:bg-border after:bg-border',\n  incomplete: 'before:bg-border/70 after:bg-border/70',\n};\n\nconst timelineIndicatorStatusClasses: Record<TimelineStatus, string> = {\n  complete: 'border-primary bg-primary text-primary-foreground',\n  current: 'border-ring bg-background text-foreground ring-2 ring-ring ring-offset-2 ring-offset-background',\n  incomplete: 'border-border bg-background text-muted-foreground',\n};\n\nconst timelineIndicatorColorClasses: Record<TimelineIndicatorColor, string> = {\n  red: 'border-red-500 bg-red-500 text-white',\n  orange: 'border-orange-500 bg-orange-500 text-white',\n  amber: 'border-amber-500 bg-amber-500 text-white',\n  yellow: 'border-yellow-400 bg-yellow-400 text-black',\n  lime: 'border-lime-500 bg-lime-500 text-black',\n  green: 'border-green-600 bg-green-600 text-white',\n  emerald: 'border-emerald-600 bg-emerald-600 text-white',\n  teal: 'border-teal-600 bg-teal-600 text-white',\n  cyan: 'border-cyan-600 bg-cyan-600 text-white',\n  sky: 'border-sky-600 bg-sky-600 text-white',\n  blue: 'border-blue-600 bg-blue-600 text-white',\n  indigo: 'border-indigo-600 bg-indigo-600 text-white',\n  violet: 'border-violet-600 bg-violet-600 text-white',\n  purple: 'border-purple-600 bg-purple-600 text-white',\n  fuchsia: 'border-fuchsia-600 bg-fuchsia-600 text-white',\n  pink: 'border-pink-600 bg-pink-600 text-white',\n  rose: 'border-rose-600 bg-rose-600 text-white',\n};\n\n@Component({\n  selector: 'ui-timeline',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"timeline\"',\n    '[attr.data-orientation]': 'horizontal() ? \"horizontal\" : \"vertical\"',\n    '[attr.data-align]': 'align()',\n    '[attr.data-size]': 'size()',\n  },\n  template: `<ng-content />`,\n})\nexport class TimelineComponent {\n  readonly horizontal = input(false, { transform: booleanAttribute });\n  readonly align = input<TimelineAlign>('center');\n  readonly size = input<TimelineSize>('default');\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(\n      TIMELINE_BASE,\n      timelineSizeClasses[this.size()],\n      this.horizontal() ? 'flex min-w-0 items-start gap-[var(--timeline-item-gap)] overflow-x-auto pb-1' : 'grid',\n      this.class(),\n    ),\n  );\n}\n\n@Component({\n  selector: 'ui-timeline-item',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"timeline-item\"',\n    '[attr.data-orientation]': 'orientation()',\n    '[attr.data-align]': 'resolvedAlign()',\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-status]': 'status() ?? null',\n  },\n  template: `<ng-content />`,\n})\nexport class TimelineItemComponent {\n  private readonly timeline = inject(TimelineComponent, { optional: true });\n\n  readonly status = input<TimelineStatus | null>(null);\n  readonly align = input<TimelineAlign | null>(null);\n  readonly size = input<TimelineSize | null>(null);\n  readonly class = input<string>('');\n\n  readonly orientation = computed(() => (this.timeline?.horizontal() ? 'horizontal' : 'vertical'));\n  readonly resolvedAlign = computed(() => this.align() ?? this.timeline?.align() ?? 'center');\n  readonly resolvedSize = computed(() => this.size() ?? this.timeline?.size() ?? 'default');\n\n  protected readonly classes = computed(() => {\n    const status = this.status();\n    const orientation = this.orientation();\n\n    return cn(\n      'relative min-w-0',\n      timelineSizeClasses[this.resolvedSize()],\n      orientation === 'horizontal'\n        ? [\n            \"before:content-['']\",\n            'grid min-w-32 flex-1 justify-items-center gap-y-2 text-center',\n            'before:absolute before:left-0 before:right-0 before:top-[calc(var(--timeline-indicator-size)/2)] before:h-px before:bg-border',\n            'first:before:left-1/2 last:before:right-1/2',\n          ].join(' ')\n        : [\n            \"after:content-['']\",\n            'grid grid-cols-[var(--timeline-indicator-size)_minmax(0,1fr)] gap-x-[var(--timeline-content-gap)] pb-[var(--timeline-item-gap)] last:pb-0',\n            'after:absolute after:bottom-0 after:left-[calc(var(--timeline-indicator-size)/2)] after:top-[calc(var(--timeline-indicator-size)+0.25rem)] after:w-px after:-translate-x-1/2 after:bg-border last:after:hidden',\n            timelineAlignClasses[this.resolvedAlign()],\n          ].join(' '),\n      status ? timelineItemStatusClasses[status] : 'before:bg-border after:bg-border',\n      this.class(),\n    );\n  });\n}\n\n@Component({\n  selector: 'ui-timeline-indicator',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"timeline-indicator\"',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-status]': 'resolvedStatus()',\n    '[attr.data-color]': 'color() ?? null',\n  },\n  template: `<ng-content />`,\n})\nexport class TimelineIndicatorComponent {\n  private readonly item = inject(TimelineItemComponent, { optional: true });\n\n  readonly variant = input<TimelineIndicatorVariant>('default');\n  readonly status = input<TimelineStatus | null>(null);\n  readonly color = input<TimelineIndicatorColor | null>(null);\n  readonly class = input<string>('');\n\n  protected readonly resolvedStatus = computed(() => this.status() ?? this.item?.status() ?? 'incomplete');\n  protected readonly classes = computed(() => {\n    const color = this.color();\n\n    return cn(\n      'relative z-10 col-start-1 row-start-1 inline-flex shrink-0 items-center justify-center justify-self-center',\n      this.item?.orientation() === 'horizontal' ? 'row-start-1' : '',\n      this.variant() === 'bare'\n        ? 'bg-background text-muted-foreground'\n        : [\n            'size-[var(--timeline-indicator-size)] rounded-full border text-xs font-medium shadow-sm',\n            color ? timelineIndicatorColorClasses[color] : timelineIndicatorStatusClasses[this.resolvedStatus()],\n          ].join(' '),\n      this.class(),\n    );\n  });\n}\n\n@Component({\n  selector: 'ui-timeline-content',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"timeline-content\"',\n  },\n  template: `<ng-content />`,\n})\nexport class TimelineContentComponent {\n  private readonly item = inject(TimelineItemComponent, { optional: true });\n\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(\n      'min-w-0 text-sm leading-6 text-foreground',\n      this.item?.orientation() === 'horizontal' ? 'row-start-2 max-w-40 text-center' : 'col-start-2 row-start-1',\n      this.class(),\n    ),\n  );\n}\n\n@Component({\n  selector: 'ui-timeline-block',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"timeline-block\"',\n  },\n  template: `<ng-content />`,\n})\nexport class TimelineBlockComponent {\n  private readonly item = inject(TimelineItemComponent, { optional: true });\n\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn('min-w-0', this.item?.orientation() === 'horizontal' ? 'row-start-2 w-full' : 'col-span-full', this.class()),\n  );\n}\n\n@Component({\n  selector: 'ui-timeline-subgrid',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"timeline-subgrid\"',\n  },\n  template: `<ng-content />`,\n})\nexport class TimelineSubgridComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(\n      'grid min-w-0 grid-cols-[var(--timeline-indicator-size)_minmax(0,1fr)] gap-x-[var(--timeline-content-gap)]',\n      this.class(),\n    ),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -2,6 +2,8 @@ import * as i0 from '@angular/core';
 import { inject, Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
+const DEFAULT_TOAST_DURATION_MS = 5000;
+const resolveToastMessage = (message, value) => typeof message === 'function' ? message(value) : message;
 /**
  * Thin, opinionated wrapper over MatSnackBar that applies shadcn styling
  * via `panelClass: ui-toast-panel` and variant data attributes.
@@ -15,8 +17,9 @@ class ToastService {
                 : options.title
             : (options.description ?? '');
         const variant = options.variant ?? 'default';
+        const duration = options.durationMs === null ? undefined : (options.durationMs ?? DEFAULT_TOAST_DURATION_MS);
         return this.snack.open(message, options.action ?? '', {
-            duration: options.durationMs ?? 5000,
+            duration,
             horizontalPosition: options.horizontalPosition ?? 'end',
             verticalPosition: options.verticalPosition ?? 'bottom',
             panelClass: ['ui-toast-panel', `ui-toast-${variant}`],
@@ -25,16 +28,37 @@ class ToastService {
     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) {
+        this.show({ title: messages.loading, durationMs: null });
+        try {
+            const task = typeof taskOrFactory === 'function' ? taskOrFactory() : taskOrFactory;
+            const value = await task;
+            this.dismiss();
+            this.success({ title: resolveToastMessage(messages.success, value) });
+            return value;
+        }
+        catch (error) {
+            this.dismiss();
+            this.error({ title: resolveToastMessage(messages.error, error) });
+            throw error;
+        }
+    }
     dismiss() {
         this.snack.dismiss();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ToastService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ToastService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });

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

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-component-toast.mjs","sources":["../../../projects/angular/component/toast/src/lib/toast.service.ts","../../../projects/angular/component/toast/ojiepermana-angular-component-toast.ts"],"sourcesContent":["import { Injectable, inject } from '@angular/core';\nimport { MatSnackBar, MatSnackBarConfig, MatSnackBarRef } from '@angular/material/snack-bar';\n\nexport type ToastVariant = 'default' | 'destructive' | 'success';\n\nexport interface ToastOptions {\n  readonly title?: string;\n  readonly description?: string;\n  readonly action?: string;\n  readonly variant?: ToastVariant;\n  readonly durationMs?: number;\n  readonly horizontalPosition?: MatSnackBarConfig['horizontalPosition'];\n  readonly verticalPosition?: MatSnackBarConfig['verticalPosition'];\n}\n\n/**\n * Thin, opinionated wrapper over MatSnackBar that applies shadcn styling\n * via `panelClass: ui-toast-panel` and variant data attributes.\n */\n@Injectable({ providedIn: 'root' })\nexport class ToastService {\n  private readonly snack = inject(MatSnackBar);\n\n  show(options: ToastOptions): MatSnackBarRef<unknown> {\n    const message = options.title\n      ? options.description\n        ? `${options.title}\\n${options.description}`\n        : options.title\n      : (options.description ?? '');\n\n    const variant = options.variant ?? 'default';\n\n    return this.snack.open(message, options.action ?? '', {\n      duration: options.durationMs ?? 5000,\n      horizontalPosition: options.horizontalPosition ?? 'end',\n      verticalPosition: options.verticalPosition ?? 'bottom',\n      panelClass: ['ui-toast-panel', `ui-toast-${variant}`],\n    });\n  }\n\n  success(opts: Omit<ToastOptions, 'variant'>): MatSnackBarRef<unknown> {\n    return this.show({ ...opts, variant: 'success' });\n  }\n\n  error(opts: Omit<ToastOptions, 'variant'>): MatSnackBarRef<unknown> {\n    return this.show({ ...opts, variant: 'destructive' });\n  }\n\n  dismiss(): void {\n    this.snack.dismiss();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAeA;;;AAGG;MAEU,YAAY,CAAA;AACN,IAAA,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;AAE5C,IAAA,IAAI,CAAC,OAAqB,EAAA;AACxB,QAAA,MAAM,OAAO,GAAG,OAAO,CAAC;cACpB,OAAO,CAAC;kBACN,GAAG,OAAO,CAAC,KAAK,CAAA,EAAA,EAAK,OAAO,CAAC,WAAW,CAAA;kBACxC,OAAO,CAAC;eACT,OAAO,CAAC,WAAW,IAAI,EAAE,CAAC;AAE/B,QAAA,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,SAAS;AAE5C,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,MAAM,IAAI,EAAE,EAAE;AACpD,YAAA,QAAQ,EAAE,OAAO,CAAC,UAAU,IAAI,IAAI;AACpC,YAAA,kBAAkB,EAAE,OAAO,CAAC,kBAAkB,IAAI,KAAK;AACvD,YAAA,gBAAgB,EAAE,OAAO,CAAC,gBAAgB,IAAI,QAAQ;AACtD,YAAA,UAAU,EAAE,CAAC,gBAAgB,EAAE,CAAA,SAAA,EAAY,OAAO,EAAE,CAAC;AACtD,SAAA,CAAC;IACJ;AAEA,IAAA,OAAO,CAAC,IAAmC,EAAA;AACzC,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;IACnD;AAEA,IAAA,KAAK,CAAC,IAAmC,EAAA;AACvC,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC;IACvD;IAEA,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;IACtB;wGA9BW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,cADC,MAAM,EAAA,CAAA;;4FACnB,YAAY,EAAA,UAAA,EAAA,CAAA;kBADxB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACnBlC;;AAEG;;;;"}
+{"version":3,"file":"ojiepermana-angular-component-toast.mjs","sources":["../../../projects/angular/component/toast/toast.service.ts","../../../projects/angular/component/toast/ojiepermana-angular-component-toast.ts"],"sourcesContent":["import { Injectable, inject } from '@angular/core';\nimport { MatSnackBar, MatSnackBarConfig, MatSnackBarRef } from '@angular/material/snack-bar';\n\nexport type ToastVariant = 'default' | 'destructive' | 'success' | 'info' | 'warning';\n\nexport type ToastMessage<T> = string | ((value: T) => string);\n\nexport interface ToastPromiseMessages<T> {\n  readonly loading: string;\n  readonly success: ToastMessage<T>;\n  readonly error: ToastMessage<unknown>;\n}\n\nexport interface ToastOptions {\n  readonly title?: string;\n  readonly description?: string;\n  readonly action?: string;\n  readonly variant?: ToastVariant;\n  readonly durationMs?: number | null;\n  readonly horizontalPosition?: MatSnackBarConfig['horizontalPosition'];\n  readonly verticalPosition?: MatSnackBarConfig['verticalPosition'];\n}\n\nconst DEFAULT_TOAST_DURATION_MS = 5000;\n\nconst resolveToastMessage = <T>(message: ToastMessage<T>, value: T): string =>\n  typeof message === 'function' ? message(value) : message;\n\n/**\n * Thin, opinionated wrapper over MatSnackBar that applies shadcn styling\n * via `panelClass: ui-toast-panel` and variant data attributes.\n */\n@Injectable({ providedIn: 'root' })\nexport class ToastService {\n  private readonly snack = inject(MatSnackBar);\n\n  show(options: ToastOptions): MatSnackBarRef<unknown> {\n    const message = options.title\n      ? options.description\n        ? `${options.title}\\n${options.description}`\n        : options.title\n      : (options.description ?? '');\n\n    const variant = options.variant ?? 'default';\n    const duration = options.durationMs === null ? undefined : (options.durationMs ?? DEFAULT_TOAST_DURATION_MS);\n\n    return this.snack.open(message, options.action ?? '', {\n      duration,\n      horizontalPosition: options.horizontalPosition ?? 'end',\n      verticalPosition: options.verticalPosition ?? 'bottom',\n      panelClass: ['ui-toast-panel', `ui-toast-${variant}`],\n    });\n  }\n\n  success(opts: Omit<ToastOptions, 'variant'>): MatSnackBarRef<unknown> {\n    return this.show({ ...opts, variant: 'success' });\n  }\n\n  info(opts: Omit<ToastOptions, 'variant'>): MatSnackBarRef<unknown> {\n    return this.show({ ...opts, variant: 'info' });\n  }\n\n  warning(opts: Omit<ToastOptions, 'variant'>): MatSnackBarRef<unknown> {\n    return this.show({ ...opts, variant: 'warning' });\n  }\n\n  error(opts: Omit<ToastOptions, 'variant'>): MatSnackBarRef<unknown> {\n    return this.show({ ...opts, variant: 'destructive' });\n  }\n\n  async promise<T>(taskOrFactory: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>): Promise<T> {\n    this.show({ title: messages.loading, durationMs: null });\n\n    try {\n      const task = typeof taskOrFactory === 'function' ? taskOrFactory() : taskOrFactory;\n      const value = await task;\n      this.dismiss();\n      this.success({ title: resolveToastMessage(messages.success, value) });\n      return value;\n    } catch (error: unknown) {\n      this.dismiss();\n      this.error({ title: resolveToastMessage(messages.error, error) });\n      throw error;\n    }\n  }\n\n  dismiss(): void {\n    this.snack.dismiss();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,289 @@
+import * as i0 from '@angular/core';
+import { Directive, input, model, numberAttribute, inject, ElementRef, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toggleVariants } from '@ojiepermana/angular/component/toggle';
+import { cn } from '@ojiepermana/angular/component/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: "22.0.0", ngImport: i0, type: ToggleGroupContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ToggleGroupContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", 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.0.0", ngImport: i0, type: ToggleGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", 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: "22.0.0", 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(/* @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.0.0", ngImport: i0, type: ToggleGroupItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", 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: "22.0.0", 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=ojiepermana-angular-component-toggle-group.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-toggle-group.mjs","sources":["../../../projects/angular/component/toggle-group/toggle-group.component.ts","../../../projects/angular/component/toggle-group/ojiepermana-angular-component-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 '@ojiepermana/angular/component/toggle';\nimport { cn } from '@ojiepermana/angular/component/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/ojiepermana-angular-component-toggle.mjs

@@ -0,0 +1,82 @@
+import * as i0 from '@angular/core';
+import { model, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/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, /* @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.0.0", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", 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: "22.0.0", 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=ojiepermana-angular-component-toggle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-toggle.mjs","sources":["../../../projects/angular/component/toggle/toggle.variants.ts","../../../projects/angular/component/toggle/toggle.component.ts","../../../projects/angular/component/toggle/ojiepermana-angular-component-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 '@ojiepermana/angular/component/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;IACjB,OAAO,GAAG,KAAK,CAAC,KAAK;gFAAC;IACtB,QAAQ,GAAG,KAAK,CAAC,KAAK;iFAAC;IACvB,OAAO,GAAG,KAAK,CAAgB,SAAS;gFAAC;IACzC,IAAI,GAAG,KAAK,CAAa,SAAS;6EAAC;IACnC,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;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;gFACjF;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;uGAjBW,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,QAAA,EAAA,IAAA,EAAA,eAAe,ukCAFhB,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEf,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;;;;"}