@ojiepermana/angular-component 22.0.27

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

@@ -0,0 +1,334 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, input, output, signal, inject, PLATFORM_ID, computed, effect, forwardRef, ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
+import EmblaCarousel from 'embla-carousel';
+import { cn } from '@ojiepermana/angular-component/utils';
+
+class CarouselContextBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CarouselContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: CarouselContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CarouselContextBase, decorators: [{
+            type: Directive
+        }] });
+class CarouselComponent extends CarouselContextBase {
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    opts = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opts" }] : /* istanbul ignore next */ []));
+    plugins = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []));
+    keyboard = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboard" }] : /* istanbul ignore next */ []));
+    label = input('Carousel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    apiReady = output();
+    apiChange = output();
+    selectedIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    slideCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slideCount" }] : /* istanbul ignore next */ []));
+    canScrollPrev = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canScrollPrev" }] : /* istanbul ignore next */ []));
+    canScrollNext = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canScrollNext" }] : /* istanbul ignore next */ []));
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    viewport = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+    api = null;
+    classes = computed(() => cn('relative block', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect((onCleanup) => {
+            const viewport = this.viewport();
+            const orientation = this.orientation();
+            const opts = this.opts();
+            const plugins = this.plugins();
+            if (!this.isBrowser || !viewport) {
+                this.api = null;
+                this.resetState();
+                return;
+            }
+            const carousel = EmblaCarousel(viewport, { ...opts, axis: orientation === 'horizontal' ? 'x' : 'y' }, [
+                ...plugins,
+            ]);
+            const updateState = () => this.updateState(carousel);
+            this.api = carousel;
+            this.apiChange.emit(carousel);
+            this.apiReady.emit(carousel);
+            updateState();
+            carousel.on('select', updateState);
+            carousel.on('reInit', updateState);
+            carousel.on('resize', updateState);
+            onCleanup(() => {
+                carousel.destroy();
+                if (this.api === carousel) {
+                    this.api = null;
+                    this.apiChange.emit(null);
+                    this.resetState();
+                }
+            });
+        });
+    }
+    registerViewport(viewport) {
+        this.viewport.set(viewport);
+    }
+    unregisterViewport(viewport) {
+        if (this.viewport() === viewport) {
+            this.viewport.set(null);
+        }
+    }
+    scrollPrev() {
+        this.api?.scrollPrev();
+    }
+    scrollNext() {
+        this.api?.scrollNext();
+    }
+    scrollTo(index) {
+        this.api?.scrollTo(index);
+    }
+    onKeydown(event) {
+        if (!this.keyboard())
+            return;
+        const horizontal = this.orientation() === 'horizontal';
+        const previousKey = horizontal ? 'ArrowLeft' : 'ArrowUp';
+        const nextKey = horizontal ? 'ArrowRight' : 'ArrowDown';
+        if (event.key === previousKey) {
+            event.preventDefault();
+            this.scrollPrev();
+            return;
+        }
+        if (event.key === nextKey) {
+            event.preventDefault();
+            this.scrollNext();
+            return;
+        }
+        if (event.key === 'Home') {
+            event.preventDefault();
+            this.scrollTo(0);
+            return;
+        }
+        if (event.key === 'End') {
+            event.preventDefault();
+            this.scrollTo(Math.max(0, this.slideCount() - 1));
+        }
+    }
+    updateState(carousel) {
+        this.slideCount.set(carousel.scrollSnapList().length);
+        this.selectedIndex.set(carousel.selectedScrollSnap());
+        this.canScrollPrev.set(carousel.canScrollPrev());
+        this.canScrollNext.set(carousel.canScrollNext());
+    }
+    resetState() {
+        this.selectedIndex.set(0);
+        this.slideCount.set(0);
+        this.canScrollPrev.set(false);
+        this.canScrollNext.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CarouselComponent, isStandalone: true, selector: "Carousel", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, opts: { classPropertyName: "opts", publicName: "opts", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apiReady: "apiReady", apiChange: "apiChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "classes()", "attr.role": "\"region\"", "attr.aria-roledescription": "\"carousel\"", "attr.aria-label": "label()", "attr.data-orientation": "orientation()", "attr.tabindex": "keyboard() ? 0 : null" } }, providers: [{ provide: CarouselContextBase, useExisting: forwardRef(() => CarouselComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CarouselComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Carousel',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: CarouselContextBase, useExisting: forwardRef(() => CarouselComponent) }],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"region"',
+                        '[attr.aria-roledescription]': '"carousel"',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.tabindex]': 'keyboard() ? 0 : null',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], opts: [{ type: i0.Input, args: [{ isSignal: true, alias: "opts", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], apiReady: [{ type: i0.Output, args: ["apiReady"] }], apiChange: [{ type: i0.Output, args: ["apiChange"] }] } });
+class CarouselContentComponent {
+    ctx = inject(CarouselContextBase);
+    viewport = viewChild('viewport', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    contentClasses = computed(() => cn('flex', this.ctx.orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        const viewport = this.viewport()?.nativeElement;
+        if (viewport)
+            this.ctx.registerViewport(viewport);
+    }
+    ngOnDestroy() {
+        const viewport = this.viewport()?.nativeElement;
+        if (viewport)
+            this.ctx.unregisterViewport(viewport);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CarouselContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: CarouselContentComponent, isStandalone: true, selector: "CarouselContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"block\"" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #viewport class="overflow-hidden">
+      <div [class]="contentClasses()"><ng-content /></div>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CarouselContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'CarouselContent',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': '"block"',
+                    },
+                    template: `
+    <div #viewport class="overflow-hidden">
+      <div [class]="contentClasses()"><ng-content /></div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class CarouselItemComponent {
+    ctx = inject(CarouselContextBase);
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('min-w-0 shrink-0 grow-0 basis-full', this.ctx.orientation() === 'horizontal' ? 'pl-4' : 'pt-4', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CarouselItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CarouselItemComponent, isStandalone: true, selector: "CarouselItem", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"group\"", "attr.aria-roledescription": "\"slide\"", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CarouselItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'CarouselItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"group"',
+                        '[attr.aria-roledescription]': '"slide"',
+                        '[attr.aria-label]': 'ariaLabel()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class CarouselPreviousComponent {
+    ctx = inject(CarouselContextBase);
+    label = input('Previous slide', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(carouselButtonClasses, carouselPreviousPlacement(this.ctx.orientation()), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CarouselPreviousComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CarouselPreviousComponent, isStandalone: true, selector: "button[CarouselPrevious]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "ctx.scrollPrev()" }, properties: { "class": "classes()", "attr.aria-label": "label()", "disabled": "!ctx.canScrollPrev() || null" } }, ngImport: i0, template: `
+    <svg
+      aria-hidden="true"
+      class="h-4 w-4"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round">
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CarouselPreviousComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[CarouselPrevious]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        type: 'button',
+                        '[attr.aria-label]': 'label()',
+                        '[disabled]': '!ctx.canScrollPrev() || null',
+                        '(click)': 'ctx.scrollPrev()',
+                    },
+                    template: `
+    <svg
+      aria-hidden="true"
+      class="h-4 w-4"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round">
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class CarouselNextComponent {
+    ctx = inject(CarouselContextBase);
+    label = input('Next slide', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(carouselButtonClasses, carouselNextPlacement(this.ctx.orientation()), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CarouselNextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CarouselNextComponent, isStandalone: true, selector: "button[CarouselNext]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "ctx.scrollNext()" }, properties: { "class": "classes()", "attr.aria-label": "label()", "disabled": "!ctx.canScrollNext() || null" } }, ngImport: i0, template: `
+    <svg
+      aria-hidden="true"
+      class="h-4 w-4"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round">
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CarouselNextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[CarouselNext]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        type: 'button',
+                        '[attr.aria-label]': 'label()',
+                        '[disabled]': '!ctx.canScrollNext() || null',
+                        '(click)': 'ctx.scrollNext()',
+                    },
+                    template: `
+    <svg
+      aria-hidden="true"
+      class="h-4 w-4"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round">
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+const carouselButtonClasses = 'absolute inline-flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background p-0 text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50';
+function carouselPreviousPlacement(orientation) {
+    return orientation === 'horizontal'
+        ? '-left-12 top-1/2 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90';
+}
+function carouselNextPlacement(orientation) {
+    return orientation === 'horizontal'
+        ? '-right-12 top-1/2 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90';
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CarouselComponent, CarouselContentComponent, CarouselContextBase, CarouselItemComponent, CarouselNextComponent, CarouselPreviousComponent };
+//# sourceMappingURL=ojiepermana-angular-component-carousel.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-carousel.mjs","sources":["../../../library/component/carousel/carousel.component.ts","../../../library/component/carousel/ojiepermana-angular-component-carousel.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  ElementRef,\n  PLATFORM_ID,\n  computed,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n  type InputSignal,\n  type Signal,\n} from '@angular/core';\nimport EmblaCarousel, { type EmblaCarouselType, type EmblaOptionsType, type EmblaPluginType } from 'embla-carousel';\nimport { cn } from '@ojiepermana/angular-component/utils';\n\nexport type CarouselApi = EmblaCarouselType;\nexport type CarouselOptions = EmblaOptionsType;\nexport type CarouselPlugin = EmblaPluginType;\nexport type CarouselOrientation = 'horizontal' | 'vertical';\n\n@Directive()\nexport abstract class CarouselContextBase {\n  abstract readonly orientation: Signal<CarouselOrientation>;\n  abstract readonly canScrollPrev: Signal<boolean>;\n  abstract readonly canScrollNext: Signal<boolean>;\n\n  abstract registerViewport(viewport: HTMLElement): void;\n  abstract unregisterViewport(viewport: HTMLElement): void;\n  abstract scrollPrev(): void;\n  abstract scrollNext(): void;\n  abstract scrollTo(index: number): void;\n}\n\n@Component({\n  selector: 'Carousel',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: CarouselContextBase, useExisting: forwardRef(() => CarouselComponent) }],\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': '\"region\"',\n    '[attr.aria-roledescription]': '\"carousel\"',\n    '[attr.aria-label]': 'label()',\n    '[attr.data-orientation]': 'orientation()',\n    '[attr.tabindex]': 'keyboard() ? 0 : null',\n    '(keydown)': 'onKeydown($event)',\n  },\n  template: `<ng-content />`,\n})\nexport class CarouselComponent extends CarouselContextBase {\n  override readonly orientation = input<CarouselOrientation>('horizontal');\n  readonly opts: InputSignal<CarouselOptions> = input<CarouselOptions>({});\n  readonly plugins: InputSignal<readonly CarouselPlugin[]> = input<readonly CarouselPlugin[]>([]);\n  readonly keyboard = input<boolean>(true);\n  readonly label = input<string>('Carousel');\n  readonly class = input<string>('');\n\n  readonly apiReady = output<CarouselApi>();\n  readonly apiChange = output<CarouselApi | null>();\n\n  readonly selectedIndex = signal(0);\n  readonly slideCount = signal(0);\n  override readonly canScrollPrev = signal(false);\n  override readonly canScrollNext = signal(false);\n\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly viewport = signal<HTMLElement | null>(null);\n  private api: CarouselApi | null = null;\n\n  protected readonly classes = computed(() => cn('relative block', this.class()));\n\n  constructor() {\n    super();\n\n    effect((onCleanup) => {\n      const viewport = this.viewport();\n      const orientation = this.orientation();\n      const opts = this.opts();\n      const plugins = this.plugins();\n\n      if (!this.isBrowser || !viewport) {\n        this.api = null;\n        this.resetState();\n        return;\n      }\n\n      const carousel = EmblaCarousel(viewport, { ...opts, axis: orientation === 'horizontal' ? 'x' : 'y' }, [\n        ...plugins,\n      ]);\n      const updateState = (): void => this.updateState(carousel);\n\n      this.api = carousel;\n      this.apiChange.emit(carousel);\n      this.apiReady.emit(carousel);\n\n      updateState();\n      carousel.on('select', updateState);\n      carousel.on('reInit', updateState);\n      carousel.on('resize', updateState);\n\n      onCleanup(() => {\n        carousel.destroy();\n        if (this.api === carousel) {\n          this.api = null;\n          this.apiChange.emit(null);\n          this.resetState();\n        }\n      });\n    });\n  }\n\n  override registerViewport(viewport: HTMLElement): void {\n    this.viewport.set(viewport);\n  }\n\n  override unregisterViewport(viewport: HTMLElement): void {\n    if (this.viewport() === viewport) {\n      this.viewport.set(null);\n    }\n  }\n\n  override scrollPrev(): void {\n    this.api?.scrollPrev();\n  }\n\n  override scrollNext(): void {\n    this.api?.scrollNext();\n  }\n\n  override scrollTo(index: number): void {\n    this.api?.scrollTo(index);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (!this.keyboard()) return;\n\n    const horizontal = this.orientation() === 'horizontal';\n    const previousKey = horizontal ? 'ArrowLeft' : 'ArrowUp';\n    const nextKey = horizontal ? 'ArrowRight' : 'ArrowDown';\n\n    if (event.key === previousKey) {\n      event.preventDefault();\n      this.scrollPrev();\n      return;\n    }\n\n    if (event.key === nextKey) {\n      event.preventDefault();\n      this.scrollNext();\n      return;\n    }\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      this.scrollTo(0);\n      return;\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      this.scrollTo(Math.max(0, this.slideCount() - 1));\n    }\n  }\n\n  private updateState(carousel: CarouselApi): void {\n    this.slideCount.set(carousel.scrollSnapList().length);\n    this.selectedIndex.set(carousel.selectedScrollSnap());\n    this.canScrollPrev.set(carousel.canScrollPrev());\n    this.canScrollNext.set(carousel.canScrollNext());\n  }\n\n  private resetState(): void {\n    this.selectedIndex.set(0);\n    this.slideCount.set(0);\n    this.canScrollPrev.set(false);\n    this.canScrollNext.set(false);\n  }\n}\n\n@Component({\n  selector: 'CarouselContent',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': '\"block\"',\n  },\n  template: `\n    <div #viewport class=\"overflow-hidden\">\n      <div [class]=\"contentClasses()\"><ng-content /></div>\n    </div>\n  `,\n})\nexport class CarouselContentComponent {\n  private readonly ctx = inject(CarouselContextBase);\n  private readonly viewport = viewChild<ElementRef<HTMLElement>>('viewport');\n\n  readonly class = input<string>('');\n\n  protected readonly contentClasses = computed(() =>\n    cn('flex', this.ctx.orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', this.class()),\n  );\n\n  ngAfterViewInit(): void {\n    const viewport = this.viewport()?.nativeElement;\n    if (viewport) this.ctx.registerViewport(viewport);\n  }\n\n  ngOnDestroy(): void {\n    const viewport = this.viewport()?.nativeElement;\n    if (viewport) this.ctx.unregisterViewport(viewport);\n  }\n}\n\n@Component({\n  selector: 'CarouselItem',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': '\"group\"',\n    '[attr.aria-roledescription]': '\"slide\"',\n    '[attr.aria-label]': 'ariaLabel()',\n  },\n  template: `<ng-content />`,\n})\nexport class CarouselItemComponent {\n  private readonly ctx = inject(CarouselContextBase);\n\n  readonly ariaLabel = input<string | null>(null);\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn('min-w-0 shrink-0 grow-0 basis-full', this.ctx.orientation() === 'horizontal' ? 'pl-4' : 'pt-4', this.class()),\n  );\n}\n\n@Component({\n  selector: 'button[CarouselPrevious]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    type: 'button',\n    '[attr.aria-label]': 'label()',\n    '[disabled]': '!ctx.canScrollPrev() || null',\n    '(click)': 'ctx.scrollPrev()',\n  },\n  template: `\n    <svg\n      aria-hidden=\"true\"\n      class=\"h-4 w-4\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\">\n      <path d=\"m15 18-6-6 6-6\" />\n    </svg>\n  `,\n})\nexport class CarouselPreviousComponent {\n  protected readonly ctx = inject(CarouselContextBase);\n\n  readonly label = input<string>('Previous slide');\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(carouselButtonClasses, carouselPreviousPlacement(this.ctx.orientation()), this.class()),\n  );\n}\n\n@Component({\n  selector: 'button[CarouselNext]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    type: 'button',\n    '[attr.aria-label]': 'label()',\n    '[disabled]': '!ctx.canScrollNext() || null',\n    '(click)': 'ctx.scrollNext()',\n  },\n  template: `\n    <svg\n      aria-hidden=\"true\"\n      class=\"h-4 w-4\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\">\n      <path d=\"m9 18 6-6-6-6\" />\n    </svg>\n  `,\n})\nexport class CarouselNextComponent {\n  protected readonly ctx = inject(CarouselContextBase);\n\n  readonly label = input<string>('Next slide');\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(carouselButtonClasses, carouselNextPlacement(this.ctx.orientation()), this.class()),\n  );\n}\n\nconst carouselButtonClasses =\n  'absolute inline-flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background p-0 text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50';\n\nfunction carouselPreviousPlacement(orientation: CarouselOrientation): string {\n  return orientation === 'horizontal'\n    ? '-left-12 top-1/2 -translate-y-1/2'\n    : '-top-12 left-1/2 -translate-x-1/2 rotate-90';\n}\n\nfunction carouselNextPlacement(orientation: CarouselOrientation): string {\n  return orientation === 'horizontal'\n    ? '-right-12 top-1/2 -translate-y-1/2'\n    : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90';\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-checkbox.mjs

@@ -0,0 +1,165 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, viewChild, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { uniqueId, cn } from '@ojiepermana/angular-component/utils';
+
+/**
+ * Checkbox built on a native `<input type="checkbox">` (shadcn pattern) — no
+ * Material dependency. Projected content renders as the clickable label.
+ */
+class CheckboxComponent {
+    id = input(uniqueId('Checkbox'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    indeterminate = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    ariaInvalid = input(null, { ...(ngDevMode ? { debugName: "ariaInvalid" } : /* istanbul ignore next */ {}), alias: 'aria-invalid' });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    checkedChange = output();
+    ref = viewChild.required('ref');
+    checked = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    ariaInvalidAttr = computed(() => {
+        const value = this.ariaInvalid();
+        if (value === false || value === 'false' || value == null) {
+            return null;
+        }
+        return value === true || value === '' ? 'true' : `${value}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidAttr" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('Checkbox inline-flex', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    labelClasses = computed(() => cn('inline-flex select-none items-center gap-2 text-sm font-medium leading-none', this.isDisabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+    boxClasses = computed(() => cn('inline-flex size-4 shrink-0 items-center justify-center rounded-sm border shadow-sm transition-colors', 'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background', this.invalid()
+        ? 'border-destructive'
+        : this.checked() || this.indeterminate()
+            ? 'border-primary'
+            : 'border-input', this.checked() || this.indeterminate()
+        ? this.invalid()
+            ? 'bg-destructive text-destructive-foreground'
+            : 'bg-primary text-primary-foreground'
+        : 'bg-background'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boxClasses" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.ariaInvalidAttr() === 'true', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    handleChange(event) {
+        const next = event.target.checked;
+        this.checked.set(next);
+        this.onChange(next);
+        this.checkedChange.emit(next);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    focus() {
+        this.ref().nativeElement.focus();
+    }
+    writeValue(v) {
+        this.checked.set(!!v);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(d) {
+        this.disabledState.set(d);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CheckboxComponent, isStandalone: true, selector: "Checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <label [class]="labelClasses()" [attr.for]="id()">
+      <input
+        #ref
+        type="checkbox"
+        class="peer sr-only"
+        [id]="id()"
+        [attr.name]="name()"
+        [checked]="checked()"
+        [indeterminate]="indeterminate()"
+        [disabled]="isDisabled()"
+        [required]="required()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-describedby]="ariaDescribedby()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [attr.aria-invalid]="ariaInvalidAttr()"
+        (change)="handleChange($event)"
+        (blur)="handleBlur()" />
+      <span aria-hidden="true" [class]="boxClasses()">
+        @if (indeterminate()) {
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="size-3">
+            <path d="M5 12h14" />
+          </svg>
+        } @else if (checked()) {
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="size-3">
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        }
+      </span>
+      <ng-content />
+    </label>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Checkbox',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }],
+                    host: { '[class]': 'hostClasses()' },
+                    template: `
+    <label [class]="labelClasses()" [attr.for]="id()">
+      <input
+        #ref
+        type="checkbox"
+        class="peer sr-only"
+        [id]="id()"
+        [attr.name]="name()"
+        [checked]="checked()"
+        [indeterminate]="indeterminate()"
+        [disabled]="isDisabled()"
+        [required]="required()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-describedby]="ariaDescribedby()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [attr.aria-invalid]="ariaInvalidAttr()"
+        (change)="handleChange($event)"
+        (blur)="handleBlur()" />
+      <span aria-hidden="true" [class]="boxClasses()">
+        @if (indeterminate()) {
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="size-3">
+            <path d="M5 12h14" />
+          </svg>
+        } @else if (checked()) {
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="size-3">
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        }
+      </span>
+      <ng-content />
+    </label>
+  `,
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CheckboxComponent };
+//# sourceMappingURL=ojiepermana-angular-component-checkbox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-checkbox.mjs","sources":["../../../library/component/checkbox/checkbox.component.ts","../../../library/component/checkbox/ojiepermana-angular-component-checkbox.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  output,\n  signal,\n  viewChild,\n  type ElementRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { cn, uniqueId } from '@ojiepermana/angular-component/utils';\n\n/**\n * Checkbox built on a native `<input type=\"checkbox\">` (shadcn pattern) — no\n * Material dependency. Projected content renders as the clickable label.\n */\n@Component({\n  selector: 'Checkbox',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }],\n  host: { '[class]': 'hostClasses()' },\n  template: `\n    <label [class]=\"labelClasses()\" [attr.for]=\"id()\">\n      <input\n        #ref\n        type=\"checkbox\"\n        class=\"peer sr-only\"\n        [id]=\"id()\"\n        [attr.name]=\"name()\"\n        [checked]=\"checked()\"\n        [indeterminate]=\"indeterminate()\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-describedby]=\"ariaDescribedby()\"\n        [attr.aria-labelledby]=\"ariaLabelledby()\"\n        [attr.aria-invalid]=\"ariaInvalidAttr()\"\n        (change)=\"handleChange($event)\"\n        (blur)=\"handleBlur()\" />\n      <span aria-hidden=\"true\" [class]=\"boxClasses()\">\n        @if (indeterminate()) {\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" class=\"size-3\">\n            <path d=\"M5 12h14\" />\n          </svg>\n        } @else if (checked()) {\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" class=\"size-3\">\n            <path d=\"M20 6 9 17l-5-5\" />\n          </svg>\n        }\n      </span>\n      <ng-content />\n    </label>\n  `,\n})\nexport class CheckboxComponent implements ControlValueAccessor {\n  readonly id = input<string>(uniqueId('Checkbox'));\n  readonly name = input<string | null>(null);\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly indeterminate = input<boolean>(false);\n  readonly required = input<boolean>(false);\n  readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n  readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });\n  readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });\n  readonly ariaInvalid = input<boolean | string | null>(null, { alias: 'aria-invalid' });\n  readonly class = input<string>('');\n\n  readonly checkedChange = output<boolean>();\n\n  private readonly ref = viewChild.required<ElementRef<HTMLInputElement>>('ref');\n\n  protected readonly checked = signal<boolean>(false);\n  protected readonly disabledState = signal(false);\n  protected readonly ariaInvalidAttr = computed(() => {\n    const value = this.ariaInvalid();\n\n    if (value === false || value === 'false' || value == null) {\n      return null;\n    }\n\n    return value === true || value === '' ? 'true' : `${value}`;\n  });\n  protected readonly isDisabled = computed(() => this.disabled() || this.disabledState());\n  protected readonly hostClasses = computed(() => cn('Checkbox inline-flex', this.class()));\n  protected readonly labelClasses = computed(() =>\n    cn(\n      'inline-flex select-none items-center gap-2 text-sm font-medium leading-none',\n      this.isDisabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n    ),\n  );\n  protected readonly boxClasses = computed(() =>\n    cn(\n      'inline-flex size-4 shrink-0 items-center justify-center rounded-sm border shadow-sm transition-colors',\n      'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background',\n      this.invalid()\n        ? 'border-destructive'\n        : this.checked() || this.indeterminate()\n          ? 'border-primary'\n          : 'border-input',\n      this.checked() || this.indeterminate()\n        ? this.invalid()\n          ? 'bg-destructive text-destructive-foreground'\n          : 'bg-primary text-primary-foreground'\n        : 'bg-background',\n    ),\n  );\n\n  private readonly invalid = computed(() => this.ariaInvalidAttr() === 'true');\n\n  private onChange: (v: boolean) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  protected handleChange(event: Event): void {\n    const next = (event.target as HTMLInputElement).checked;\n    this.checked.set(next);\n    this.onChange(next);\n    this.checkedChange.emit(next);\n  }\n\n  protected handleBlur(): void {\n    this.onTouched();\n  }\n\n  focus(): void {\n    this.ref().nativeElement.focus();\n  }\n\n  writeValue(v: boolean): void {\n    this.checked.set(!!v);\n  }\n  registerOnChange(fn: (v: boolean) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(d: boolean): void {\n    this.disabledState.set(d);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}