@ojiepermana/angular-component 22.0.27

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

@@ -0,0 +1,271 @@
+import * as i0 from '@angular/core';
+import { Directive, model, input, computed, forwardRef, ChangeDetectionStrategy, Component, inject, ElementRef } from '@angular/core';
+import { uniqueId, cn } from '@ojiepermana/angular-component/utils';
+
+/**
+ * Shared state for a tabs group. Children read the active value and register
+ * themselves so the group can drive roving-tabindex keyboard navigation.
+ */
+class TabsContextBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TabsContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: TabsContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TabsContextBase, decorators: [{
+            type: Directive
+        }] });
+class TabsListContextBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TabsListContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: TabsListContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TabsListContextBase, decorators: [{
+            type: Directive
+        }] });
+class TabsComponent extends TabsContextBase {
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    idPrefix = uniqueId('Tabs');
+    triggers = new Map();
+    classes = computed(() => cn(this.orientation() === 'vertical' ? 'flex items-start gap-4' : 'block', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    register(element, value, disabled) {
+        this.triggers.set(element, { element, value, disabled });
+        if (this.value() == null && !disabled()) {
+            this.value.set(value());
+        }
+    }
+    unregister(element) {
+        this.triggers.delete(element);
+    }
+    activate(value, focus = false) {
+        const trigger = this.triggerForValue(value);
+        if (!trigger || trigger.disabled())
+            return;
+        this.value.set(value);
+        if (focus) {
+            trigger.element.focus();
+        }
+    }
+    focusNext(from, offset) {
+        const enabledTriggers = this.enabledTriggers();
+        const currentIndex = enabledTriggers.findIndex((trigger) => trigger.element === from);
+        if (currentIndex < 0 || enabledTriggers.length === 0)
+            return;
+        const nextTrigger = enabledTriggers[(currentIndex + offset + enabledTriggers.length) % enabledTriggers.length];
+        this.activate(nextTrigger.value(), true);
+    }
+    focusFirst() {
+        const firstTrigger = this.enabledTriggers()[0];
+        if (firstTrigger)
+            this.activate(firstTrigger.value(), true);
+    }
+    focusLast() {
+        const enabledTriggers = this.enabledTriggers();
+        const lastTrigger = enabledTriggers[enabledTriggers.length - 1];
+        if (lastTrigger)
+            this.activate(lastTrigger.value(), true);
+    }
+    triggerId(value) {
+        return `${this.idPrefix}-trigger-${this.normalizeValue(value)}`;
+    }
+    contentId(value) {
+        return `${this.idPrefix}-content-${this.normalizeValue(value)}`;
+    }
+    enabledTriggers() {
+        return [...this.triggers.values()].filter((trigger) => !trigger.disabled());
+    }
+    triggerForValue(value) {
+        return [...this.triggers.values()].find((trigger) => trigger.value() === value);
+    }
+    normalizeValue(value) {
+        const normalized = value
+            .toLowerCase()
+            .replace(/[^a-z0-9_-]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+        return normalized || 'tab';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: TabsComponent, isStandalone: true, selector: "Tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-orientation": "orientation()" } }, providers: [{ provide: TabsContextBase, useExisting: forwardRef(() => TabsComponent) }], 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: TabsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Tabs',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: TabsContextBase, useExisting: forwardRef(() => TabsComponent) }],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-orientation]': 'orientation()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class TabsListComponent extends TabsListContextBase {
+    ctx = inject(TabsComponent);
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(this.variantClasses(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    listVariant() {
+        return this.variant();
+    }
+    variantClasses() {
+        if (this.variant() === 'line') {
+            return this.ctx.orientation() === 'vertical'
+                ? 'inline-flex flex-col items-stretch justify-start gap-1 border-e border-border bg-transparent p-0 pe-3 text-muted-foreground'
+                : 'inline-flex h-9 items-center justify-start gap-4 border-b border-border bg-transparent p-0 text-muted-foreground';
+        }
+        return this.ctx.orientation() === 'vertical'
+            ? 'inline-flex flex-col items-stretch justify-start rounded-md bg-muted p-1 text-muted-foreground'
+            : 'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TabsListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: TabsListComponent, isStandalone: true, selector: "TabsList", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"tablist\"", "attr.aria-orientation": "ctx.orientation()", "attr.data-variant": "variant()" } }, providers: [{ provide: TabsListContextBase, useExisting: forwardRef(() => TabsListComponent) }], 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: TabsListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TabsList',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: TabsListContextBase, useExisting: forwardRef(() => TabsListComponent) }],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"tablist"',
+                        '[attr.aria-orientation]': 'ctx.orientation()',
+                        '[attr.data-variant]': 'variant()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class TabsTriggerComponent {
+    ctx = inject(TabsComponent);
+    list = inject(TabsListContextBase, { optional: true });
+    el = 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.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    triggerId = computed(() => this.ctx.triggerId(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+    contentId = computed(() => this.ctx.contentId(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium', 'ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', this.variantClasses(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.ctx.register(this.el.nativeElement, this.value, this.disabled);
+    }
+    ngOnDestroy() {
+        this.ctx.unregister(this.el.nativeElement);
+    }
+    onClick() {
+        if (this.disabled())
+            return;
+        this.ctx.activate(this.value());
+    }
+    onArrow(e, delta, axis) {
+        if (this.ctx.orientation() !== axis)
+            return;
+        e.preventDefault();
+        this.ctx.focusNext(this.el.nativeElement, delta);
+    }
+    onHome(e) {
+        e.preventDefault();
+        this.ctx.focusFirst();
+    }
+    onEnd(e) {
+        e.preventDefault();
+        this.ctx.focusLast();
+    }
+    variantClasses() {
+        const variant = this.list?.listVariant() ?? 'default';
+        if (variant === 'line') {
+            return this.ctx.orientation() === 'vertical'
+                ? 'w-full justify-start rounded-none border-e-2 border-transparent px-3 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none'
+                : 'rounded-none border-b-2 border-transparent px-2 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none';
+        }
+        return cn('rounded-sm px-3 py-1.5 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm', this.ctx.orientation() === 'vertical' && 'w-full justify-start');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TabsTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: TabsTriggerComponent, isStandalone: true, selector: "button[TabsTrigger]", 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()", "keydown.arrowRight": "onArrow($any($event), 1, \"horizontal\")", "keydown.arrowLeft": "onArrow($any($event), -1, \"horizontal\")", "keydown.arrowDown": "onArrow($any($event), 1, \"vertical\")", "keydown.arrowUp": "onArrow($any($event), -1, \"vertical\")", "keydown.home": "onHome($any($event))", "keydown.end": "onEnd($any($event))" }, properties: { "class": "classes()", "id": "triggerId()", "attr.role": "\"tab\"", "attr.aria-selected": "selected()", "attr.aria-controls": "contentId()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "selected() ? 0 : -1", "attr.data-state": "selected() ? \"active\" : \"inactive\"", "disabled": "disabled() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TabsTriggerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[TabsTrigger]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[id]': 'triggerId()',
+                        type: 'button',
+                        '[attr.role]': '"tab"',
+                        '[attr.aria-selected]': 'selected()',
+                        '[attr.aria-controls]': 'contentId()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.tabindex]': 'selected() ? 0 : -1',
+                        '[attr.data-state]': 'selected() ? "active" : "inactive"',
+                        '[disabled]': 'disabled() || null',
+                        '(click)': 'onClick()',
+                        '(keydown.arrowRight)': 'onArrow($any($event), 1, "horizontal")',
+                        '(keydown.arrowLeft)': 'onArrow($any($event), -1, "horizontal")',
+                        '(keydown.arrowDown)': 'onArrow($any($event), 1, "vertical")',
+                        '(keydown.arrowUp)': 'onArrow($any($event), -1, "vertical")',
+                        '(keydown.home)': 'onHome($any($event))',
+                        '(keydown.end)': 'onEnd($any($event))',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], 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 }] }] } });
+class TabsContentComponent {
+    ctx = inject(TabsComponent);
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    active = computed(() => this.ctx.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    triggerId = computed(() => this.ctx.triggerId(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+    contentId = computed(() => this.ctx.contentId(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('mt-2 block ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 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: TabsContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: TabsContentComponent, isStandalone: true, selector: "TabsContent", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, properties: { "class": "classes()", "id": "contentId()", "attr.role": "\"tabpanel\"", "attr.aria-labelledby": "triggerId()", "attr.data-state": "active() ? \"active\" : \"inactive\"", "hidden": "!active()" } }, ngImport: i0, template: `@if (active()) {
+    <ng-content />
+  }`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TabsContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TabsContent',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[id]': 'contentId()',
+                        '[attr.role]': '"tabpanel"',
+                        '[attr.aria-labelledby]': 'triggerId()',
+                        '[attr.data-state]': 'active() ? "active" : "inactive"',
+                        '[hidden]': '!active()',
+                        tabindex: '0',
+                    },
+                    template: `@if (active()) {
+    <ng-content />
+  }`,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TabsComponent, TabsContentComponent, TabsContextBase, TabsListComponent, TabsListContextBase, TabsTriggerComponent };
+//# sourceMappingURL=ojiepermana-angular-component-tabs.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-tabs.mjs","sources":["../../../library/component/tabs/tabs.component.ts","../../../library/component/tabs/ojiepermana-angular-component-tabs.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  ElementRef,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  model,\n} from '@angular/core';\nimport { cn, uniqueId } from '@ojiepermana/angular-component/utils';\n\nexport type TabsListVariant = 'default' | 'line';\n\ninterface TabsTriggerRegistration {\n  readonly element: HTMLElement;\n  readonly value: () => string;\n  readonly disabled: () => boolean;\n}\n\n/**\n * Shared state for a tabs group. Children read the active value and register\n * themselves so the group can drive roving-tabindex keyboard navigation.\n */\n@Directive()\nexport abstract class TabsContextBase {\n  abstract value: ReturnType<typeof model<string | null>>;\n  abstract register(element: HTMLElement, value: () => string, disabled: () => boolean): void;\n  abstract unregister(element: HTMLElement): void;\n  abstract activate(value: string, focus?: boolean): void;\n  abstract focusNext(from: HTMLElement, offset: number): void;\n  abstract focusFirst(): void;\n  abstract focusLast(): void;\n  abstract triggerId(value: string): string;\n  abstract contentId(value: string): string;\n}\n\n@Directive()\nexport abstract class TabsListContextBase {\n  abstract listVariant(): TabsListVariant;\n}\n\n@Component({\n  selector: 'Tabs',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: TabsContextBase, useExisting: forwardRef(() => TabsComponent) }],\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-orientation]': 'orientation()',\n  },\n  template: `<ng-content />`,\n})\nexport class TabsComponent extends TabsContextBase {\n  readonly value = model<string | null>(null);\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n  readonly class = input<string>('');\n\n  private readonly idPrefix = uniqueId('Tabs');\n  private readonly triggers = new Map<HTMLElement, TabsTriggerRegistration>();\n\n  protected readonly classes = computed(() =>\n    cn(this.orientation() === 'vertical' ? 'flex items-start gap-4' : 'block', this.class()),\n  );\n\n  override register(element: HTMLElement, value: () => string, disabled: () => boolean): void {\n    this.triggers.set(element, { element, value, disabled });\n\n    if (this.value() == null && !disabled()) {\n      this.value.set(value());\n    }\n  }\n\n  override unregister(element: HTMLElement): void {\n    this.triggers.delete(element);\n  }\n\n  override activate(value: string, focus = false): void {\n    const trigger = this.triggerForValue(value);\n    if (!trigger || trigger.disabled()) return;\n\n    this.value.set(value);\n    if (focus) {\n      trigger.element.focus();\n    }\n  }\n\n  override focusNext(from: HTMLElement, offset: number): void {\n    const enabledTriggers = this.enabledTriggers();\n    const currentIndex = enabledTriggers.findIndex((trigger) => trigger.element === from);\n    if (currentIndex < 0 || enabledTriggers.length === 0) return;\n\n    const nextTrigger = enabledTriggers[(currentIndex + offset + enabledTriggers.length) % enabledTriggers.length];\n    this.activate(nextTrigger.value(), true);\n  }\n\n  override focusFirst(): void {\n    const firstTrigger = this.enabledTriggers()[0];\n    if (firstTrigger) this.activate(firstTrigger.value(), true);\n  }\n\n  override focusLast(): void {\n    const enabledTriggers = this.enabledTriggers();\n    const lastTrigger = enabledTriggers[enabledTriggers.length - 1];\n    if (lastTrigger) this.activate(lastTrigger.value(), true);\n  }\n\n  override triggerId(value: string): string {\n    return `${this.idPrefix}-trigger-${this.normalizeValue(value)}`;\n  }\n\n  override contentId(value: string): string {\n    return `${this.idPrefix}-content-${this.normalizeValue(value)}`;\n  }\n\n  private enabledTriggers(): TabsTriggerRegistration[] {\n    return [...this.triggers.values()].filter((trigger) => !trigger.disabled());\n  }\n\n  private triggerForValue(value: string): TabsTriggerRegistration | undefined {\n    return [...this.triggers.values()].find((trigger) => trigger.value() === value);\n  }\n\n  private normalizeValue(value: string): string {\n    const normalized = value\n      .toLowerCase()\n      .replace(/[^a-z0-9_-]+/g, '-')\n      .replace(/^-+|-+$/g, '');\n\n    return normalized || 'tab';\n  }\n}\n\n@Component({\n  selector: 'TabsList',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: TabsListContextBase, useExisting: forwardRef(() => TabsListComponent) }],\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': '\"tablist\"',\n    '[attr.aria-orientation]': 'ctx.orientation()',\n    '[attr.data-variant]': 'variant()',\n  },\n  template: `<ng-content />`,\n})\nexport class TabsListComponent extends TabsListContextBase {\n  protected readonly ctx = inject(TabsComponent);\n  readonly variant = input<TabsListVariant>('default');\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn(this.variantClasses(), this.class()));\n\n  override listVariant(): TabsListVariant {\n    return this.variant();\n  }\n\n  private variantClasses(): string {\n    if (this.variant() === 'line') {\n      return this.ctx.orientation() === 'vertical'\n        ? 'inline-flex flex-col items-stretch justify-start gap-1 border-e border-border bg-transparent p-0 pe-3 text-muted-foreground'\n        : 'inline-flex h-9 items-center justify-start gap-4 border-b border-border bg-transparent p-0 text-muted-foreground';\n    }\n\n    return this.ctx.orientation() === 'vertical'\n      ? 'inline-flex flex-col items-stretch justify-start rounded-md bg-muted p-1 text-muted-foreground'\n      : 'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground';\n  }\n}\n\n@Component({\n  selector: 'button[TabsTrigger]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[id]': 'triggerId()',\n    type: 'button',\n    '[attr.role]': '\"tab\"',\n    '[attr.aria-selected]': 'selected()',\n    '[attr.aria-controls]': 'contentId()',\n    '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n    '[attr.tabindex]': 'selected() ? 0 : -1',\n    '[attr.data-state]': 'selected() ? \"active\" : \"inactive\"',\n    '[disabled]': 'disabled() || null',\n    '(click)': 'onClick()',\n    '(keydown.arrowRight)': 'onArrow($any($event), 1, \"horizontal\")',\n    '(keydown.arrowLeft)': 'onArrow($any($event), -1, \"horizontal\")',\n    '(keydown.arrowDown)': 'onArrow($any($event), 1, \"vertical\")',\n    '(keydown.arrowUp)': 'onArrow($any($event), -1, \"vertical\")',\n    '(keydown.home)': 'onHome($any($event))',\n    '(keydown.end)': 'onEnd($any($event))',\n  },\n  template: `<ng-content />`,\n})\nexport class TabsTriggerComponent {\n  protected readonly ctx = inject(TabsComponent);\n  private readonly list = inject(TabsListContextBase, { optional: true });\n  private readonly el = inject<ElementRef<HTMLElement>>(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.value() === this.value());\n  protected readonly triggerId = computed(() => this.ctx.triggerId(this.value()));\n  protected readonly contentId = computed(() => this.ctx.contentId(this.value()));\n\n  protected readonly classes = computed(() =>\n    cn(\n      'inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium',\n      'ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      'disabled:pointer-events-none disabled:opacity-50',\n      this.variantClasses(),\n      this.class(),\n    ),\n  );\n\n  ngOnInit(): void {\n    this.ctx.register(this.el.nativeElement, this.value, this.disabled);\n  }\n\n  ngOnDestroy(): void {\n    this.ctx.unregister(this.el.nativeElement);\n  }\n\n  protected onClick(): void {\n    if (this.disabled()) return;\n    this.ctx.activate(this.value());\n  }\n\n  protected onArrow(e: KeyboardEvent, delta: number, axis: 'horizontal' | 'vertical'): void {\n    if (this.ctx.orientation() !== axis) return;\n    e.preventDefault();\n    this.ctx.focusNext(this.el.nativeElement, delta);\n  }\n\n  protected onHome(e: KeyboardEvent): void {\n    e.preventDefault();\n    this.ctx.focusFirst();\n  }\n\n  protected onEnd(e: KeyboardEvent): void {\n    e.preventDefault();\n    this.ctx.focusLast();\n  }\n\n  private variantClasses(): string {\n    const variant = this.list?.listVariant() ?? 'default';\n\n    if (variant === 'line') {\n      return this.ctx.orientation() === 'vertical'\n        ? 'w-full justify-start rounded-none border-e-2 border-transparent px-3 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none'\n        : 'rounded-none border-b-2 border-transparent px-2 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none';\n    }\n\n    return cn(\n      'rounded-sm px-3 py-1.5 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      this.ctx.orientation() === 'vertical' && 'w-full justify-start',\n    );\n  }\n}\n\n@Component({\n  selector: 'TabsContent',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[id]': 'contentId()',\n    '[attr.role]': '\"tabpanel\"',\n    '[attr.aria-labelledby]': 'triggerId()',\n    '[attr.data-state]': 'active() ? \"active\" : \"inactive\"',\n    '[hidden]': '!active()',\n    tabindex: '0',\n  },\n  template: `@if (active()) {\n    <ng-content />\n  }`,\n})\nexport class TabsContentComponent {\n  private readonly ctx = inject(TabsComponent);\n  readonly value = input.required<string>();\n  readonly class = input<string>('');\n  protected readonly active = computed(() => this.ctx.value() === this.value());\n  protected readonly triggerId = computed(() => this.ctx.triggerId(this.value()));\n  protected readonly contentId = computed(() => this.ctx.contentId(this.value()));\n  protected readonly classes = computed(() =>\n    cn(\n      'mt-2 block ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\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-textarea.mjs

@@ -0,0 +1,39 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular-component/utils';
+
+class TextareaComponent {
+    el = inject(ElementRef);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn([
+        'flex min-h-[60px] w-full resize-y rounded-md border border-input bg-transparent px-3 py-2',
+        'text-sm shadow-sm transition-colors',
+        'placeholder:text-muted-foreground',
+        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive',
+    ].join(' '), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: TextareaComponent, isStandalone: true, selector: "textarea[Textarea]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'textarea[Textarea]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: '',
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TextareaComponent };
+//# sourceMappingURL=ojiepermana-angular-component-textarea.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-textarea.mjs","sources":["../../../library/component/textarea/textarea.component.ts","../../../library/component/textarea/ojiepermana-angular-component-textarea.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, computed, inject, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular-component/utils';\n\n@Component({\n  selector: 'textarea[Textarea]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'classes()' },\n  template: '',\n})\nexport class TextareaComponent {\n  private readonly el = inject<ElementRef<HTMLTextAreaElement>>(ElementRef);\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(\n      [\n        'flex min-h-[60px] w-full resize-y rounded-md border border-input bg-transparent px-3 py-2',\n        'text-sm shadow-sm transition-colors',\n        'placeholder:text-muted-foreground',\n        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive',\n      ].join(' '),\n      this.class(),\n    ),\n  );\n\n  focus(): void {\n    this.el.nativeElement.focus();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,iBAAiB,CAAA;AACX,IAAA,EAAE,GAAG,MAAM,CAAkC,UAAU,CAAC;IAChE,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CACA;QACE,2FAA2F;QAC3F,qCAAqC;QACrC,mCAAmC;QACnC,yEAAyE;QACzE,iDAAiD;QACjD,2FAA2F;KAC5F,CAAC,IAAI,CAAC,GAAG,CAAC,EACX,IAAI,CAAC,KAAK,EAAE,CACb;gFACF;IAED,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE;IAC/B;uGApBW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,kQAFlB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAED,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,oBAAoB;oBAC9B,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE;AAChC,oBAAA,QAAQ,EAAE,EAAE;AACb,iBAAA;;;ACRD;;AAEG;;;;"}

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

@@ -0,0 +1,237 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { cn } from '@ojiepermana/angular-component/utils';
+
+const TIMELINE_BASE = [
+    'w-full min-w-0 text-sm text-foreground',
+    '[--timeline-content-gap:0.75rem] [--timeline-indicator-size:1.5rem] [--timeline-item-gap:1.5rem]',
+].join(' ');
+const timelineSizeClasses = {
+    default: '[--timeline-indicator-size:1.5rem]',
+    lg: '[--timeline-indicator-size:2.5rem] [--timeline-content-gap:1rem]',
+};
+const timelineAlignClasses = {
+    start: 'items-start',
+    baseline: 'items-baseline',
+    center: 'items-center',
+    end: 'items-end',
+};
+const timelineItemStatusClasses = {
+    complete: 'before:bg-primary after:bg-primary',
+    current: 'before:bg-border after:bg-border',
+    incomplete: 'before:bg-border/70 after:bg-border/70',
+};
+const timelineIndicatorStatusClasses = {
+    complete: 'border-primary bg-primary text-primary-foreground',
+    current: 'border-ring bg-background text-foreground ring-2 ring-ring ring-offset-2 ring-offset-background',
+    incomplete: 'border-border bg-background text-muted-foreground',
+};
+const timelineIndicatorColorClasses = {
+    red: 'border-[hsl(var(--timeline-indicator-red))] bg-[hsl(var(--timeline-indicator-red))] text-[hsl(var(--timeline-indicator-red-foreground))]',
+    orange: 'border-[hsl(var(--timeline-indicator-orange))] bg-[hsl(var(--timeline-indicator-orange))] text-[hsl(var(--timeline-indicator-orange-foreground))]',
+    amber: 'border-[hsl(var(--timeline-indicator-amber))] bg-[hsl(var(--timeline-indicator-amber))] text-[hsl(var(--timeline-indicator-amber-foreground))]',
+    yellow: 'border-[hsl(var(--timeline-indicator-yellow))] bg-[hsl(var(--timeline-indicator-yellow))] text-[hsl(var(--timeline-indicator-yellow-foreground))]',
+    lime: 'border-[hsl(var(--timeline-indicator-lime))] bg-[hsl(var(--timeline-indicator-lime))] text-[hsl(var(--timeline-indicator-lime-foreground))]',
+    green: 'border-[hsl(var(--timeline-indicator-green))] bg-[hsl(var(--timeline-indicator-green))] text-[hsl(var(--timeline-indicator-green-foreground))]',
+    emerald: 'border-[hsl(var(--timeline-indicator-emerald))] bg-[hsl(var(--timeline-indicator-emerald))] text-[hsl(var(--timeline-indicator-emerald-foreground))]',
+    teal: 'border-[hsl(var(--timeline-indicator-teal))] bg-[hsl(var(--timeline-indicator-teal))] text-[hsl(var(--timeline-indicator-teal-foreground))]',
+    cyan: 'border-[hsl(var(--timeline-indicator-cyan))] bg-[hsl(var(--timeline-indicator-cyan))] text-[hsl(var(--timeline-indicator-cyan-foreground))]',
+    sky: 'border-[hsl(var(--timeline-indicator-sky))] bg-[hsl(var(--timeline-indicator-sky))] text-[hsl(var(--timeline-indicator-sky-foreground))]',
+    blue: 'border-[hsl(var(--timeline-indicator-blue))] bg-[hsl(var(--timeline-indicator-blue))] text-[hsl(var(--timeline-indicator-blue-foreground))]',
+    indigo: 'border-[hsl(var(--timeline-indicator-indigo))] bg-[hsl(var(--timeline-indicator-indigo))] text-[hsl(var(--timeline-indicator-indigo-foreground))]',
+    violet: 'border-[hsl(var(--timeline-indicator-violet))] bg-[hsl(var(--timeline-indicator-violet))] text-[hsl(var(--timeline-indicator-violet-foreground))]',
+    purple: 'border-[hsl(var(--timeline-indicator-purple))] bg-[hsl(var(--timeline-indicator-purple))] text-[hsl(var(--timeline-indicator-purple-foreground))]',
+    fuchsia: 'border-[hsl(var(--timeline-indicator-fuchsia))] bg-[hsl(var(--timeline-indicator-fuchsia))] text-[hsl(var(--timeline-indicator-fuchsia-foreground))]',
+    pink: 'border-[hsl(var(--timeline-indicator-pink))] bg-[hsl(var(--timeline-indicator-pink))] text-[hsl(var(--timeline-indicator-pink-foreground))]',
+    rose: 'border-[hsl(var(--timeline-indicator-rose))] bg-[hsl(var(--timeline-indicator-rose))] text-[hsl(var(--timeline-indicator-rose-foreground))]',
+};
+class TimelineComponent {
+    horizontal = input(false, { ...(ngDevMode ? { debugName: "horizontal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    align = input('center', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* 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(TIMELINE_BASE, timelineSizeClasses[this.size()], this.horizontal() ? 'flex min-w-0 items-start gap-[var(--timeline-item-gap)] overflow-x-auto pb-1' : 'grid', 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: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: TimelineComponent, isStandalone: true, selector: "Timeline", inputs: { horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", 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 } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline\"", "attr.data-orientation": "horizontal() ? \"horizontal\" : \"vertical\"", "attr.data-align": "align()", "attr.data-size": "size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TimelineComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Timeline',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"timeline"',
+                        '[attr.data-orientation]': 'horizontal() ? "horizontal" : "vertical"',
+                        '[attr.data-align]': 'align()',
+                        '[attr.data-size]': 'size()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class TimelineItemComponent {
+    timeline = inject(TimelineComponent, { optional: true });
+    status = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    align = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    size = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    orientation = computed(() => (this.timeline?.horizontal() ? 'horizontal' : 'vertical'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    resolvedAlign = computed(() => this.align() ?? this.timeline?.align() ?? 'center', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.timeline?.size() ?? 'default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const status = this.status();
+        const orientation = this.orientation();
+        return cn('relative min-w-0', timelineSizeClasses[this.resolvedSize()], orientation === 'horizontal'
+            ? [
+                "before:content-['']",
+                'grid min-w-32 flex-1 justify-items-center gap-y-2 text-center',
+                'before:absolute before:left-0 before:right-0 before:top-[calc(var(--timeline-indicator-size)/2)] before:h-px before:bg-border',
+                'first:before:left-1/2 last:before:right-1/2',
+            ].join(' ')
+            : [
+                "after:content-['']",
+                'grid grid-cols-[var(--timeline-indicator-size)_minmax(0,1fr)] gap-x-[var(--timeline-content-gap)] pb-[var(--timeline-item-gap)] last:pb-0',
+                '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',
+                timelineAlignClasses[this.resolvedAlign()],
+            ].join(' '), status ? timelineItemStatusClasses[status] : 'before:bg-border after:bg-border', 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: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: TimelineItemComponent, isStandalone: true, selector: "TimelineItem", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", 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 } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-item\"", "attr.data-orientation": "orientation()", "attr.data-align": "resolvedAlign()", "attr.data-size": "resolvedSize()", "attr.data-status": "status() ?? null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TimelineItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TimelineItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"timeline-item"',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-align]': 'resolvedAlign()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-status]': 'status() ?? null',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class TimelineIndicatorComponent {
+    item = inject(TimelineItemComponent, { optional: true });
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    status = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    color = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    resolvedStatus = computed(() => this.status() ?? this.item?.status() ?? 'incomplete', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const color = this.color();
+        return cn('relative z-10 col-start-1 row-start-1 inline-flex shrink-0 items-center justify-center justify-self-center', this.item?.orientation() === 'horizontal' ? 'row-start-1' : '', this.variant() === 'bare'
+            ? 'bg-background text-muted-foreground'
+            : [
+                'size-[var(--timeline-indicator-size)] rounded-full border text-xs font-medium shadow-sm',
+                color ? timelineIndicatorColorClasses[color] : timelineIndicatorStatusClasses[this.resolvedStatus()],
+            ].join(' '), 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: TimelineIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: TimelineIndicatorComponent, isStandalone: true, selector: "TimelineIndicator", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-indicator\"", "attr.data-variant": "variant()", "attr.data-status": "resolvedStatus()", "attr.data-color": "color() ?? null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TimelineIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TimelineIndicator',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"timeline-indicator"',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-status]': 'resolvedStatus()',
+                        '[attr.data-color]': 'color() ?? null',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class TimelineContentComponent {
+    item = inject(TimelineItemComponent, { optional: true });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('min-w-0 text-sm leading-6 text-foreground', this.item?.orientation() === 'horizontal' ? 'row-start-2 max-w-40 text-center' : 'col-start-2 row-start-1', 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: TimelineContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: TimelineContentComponent, isStandalone: true, selector: "TimelineContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-content\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TimelineContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TimelineContent',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"timeline-content"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class TimelineBlockComponent {
+    item = inject(TimelineItemComponent, { optional: true });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('min-w-0', this.item?.orientation() === 'horizontal' ? 'row-start-2 w-full' : 'col-span-full', 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: TimelineBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: TimelineBlockComponent, isStandalone: true, selector: "TimelineBlock", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-block\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TimelineBlockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TimelineBlock',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"timeline-block"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class TimelineSubgridComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('grid min-w-0 grid-cols-[var(--timeline-indicator-size)_minmax(0,1fr)] gap-x-[var(--timeline-content-gap)]', 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: TimelineSubgridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: TimelineSubgridComponent, isStandalone: true, selector: "TimelineSubgrid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-subgrid\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TimelineSubgridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TimelineSubgrid',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"timeline-subgrid"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TimelineBlockComponent, TimelineComponent, TimelineContentComponent, TimelineIndicatorComponent, TimelineItemComponent, TimelineSubgridComponent };
+//# sourceMappingURL=ojiepermana-angular-component-timeline.mjs.map