@ojiepermana/angular 22.1.11 → 22.1.12

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

@@ -1,7 +1,319 @@
-export * from '@ojiepermana/angular-component/tabs';
+import * as i0 from '@angular/core';
+import { Directive, inject, model, input, signal, computed, forwardRef, Component, ElementRef } from '@angular/core';
+import { injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
+import * as i1 from '@ojiepermana/angular/component/utils/scale';
+import { ComponentScaleDirective } from '@ojiepermana/angular/component/utils/scale';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * 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.1.4", ngImport: i0, type: TabsContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: TabsContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TabsContextBase, decorators: [{
+            type: Directive
+        }] });
+class TabsListContextBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TabsListContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: TabsListContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TabsListContextBase, decorators: [{
+            type: Directive
+        }] });
+class TabsComponent extends TabsContextBase {
+    componentScale = inject(ComponentScaleDirective);
+    radius = this.componentScale.radius;
+    density = this.componentScale.density;
+    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 = injectUniqueId('Tabs');
+    // Registered triggers, kept in DOM order by {@link register}. A signal rather
+    // than a plain list because every trigger's roving `tabindex` is derived from
+    // the whole set, so adding or removing one has to re-render the others.
+    triggers = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
+    /**
+     * The value the group actually renders.
+     *
+     * A group whose `value` is empty -- nothing bound at all, or a consumer signal
+     * that starts at null -- still has to show a tab, so the first enabled trigger
+     * stands in. Derived rather than written back: `value` is the consumer's
+     * two-way binding to own, and filling it in on their behalf reported a
+     * selection they never made, from inside a child's ngOnInit.
+     */
+    effectiveValue = computed(() => this.value() ?? this.enabledTriggers()[0]?.value() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveValue" }] : /* istanbul ignore next */ []));
+    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.update((triggers) => [...triggers.filter((trigger) => trigger.element !== element), { element, value, disabled }]
+            // Sorted by document position, not by arrival. A trigger inside an @if
+            // registers whenever its block renders, so a tab removed and put back
+            // would otherwise land at the end of the list -- and everything derived
+            // from the order (arrow direction, Home/End, the fallback tab stop)
+            // would follow registration order instead of what the user sees.
+            .sort((a, b) => a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
+    }
+    unregister(element) {
+        this.triggers.update((triggers) => triggers.filter((trigger) => trigger.element !== element));
+    }
+    /**
+     * The roving `tabindex` for one trigger.
+     *
+     * Normally the selected trigger is the single tab stop. When the bound value
+     * matches no ENABLED trigger the first enabled one takes the tab stop instead.
+     * Without that fallback a value nothing answers to -- a typo, a tab removed
+     * from the DOM while it was selected, a selected tab that is disabled -- left
+     * every trigger at `tabindex=-1`, which drops the whole tablist out of the tab
+     * order and leaves a keyboard user with no way into it at all.
+     *
+     * The fallback is presentation only: it never rewrites `value`, because that
+     * is the consumer's two-way binding to own.
+     */
+    tabIndexFor(element) {
+        const enabledTriggers = this.enabledTriggers();
+        const trigger = enabledTriggers.find((candidate) => candidate.element === element);
+        if (!trigger) {
+            return -1;
+        }
+        const selectedTrigger = enabledTriggers.find((candidate) => candidate.value() === this.effectiveValue());
+        return (selectedTrigger ?? enabledTriggers[0]) === trigger ? 0 : -1;
+    }
+    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().filter((trigger) => !trigger.disabled());
+    }
+    triggerForValue(value) {
+        return this.triggers().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.1.4", ngImport: i0, type: TabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", 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, hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Tabs',
+                    hostDirectives: [
+                        {
+                            directive: ComponentScaleDirective,
+                            inputs: ['radius', 'density'],
+                        },
+                    ],
+                    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-control-md 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-control-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TabsListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TabsListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TabsList',
+                    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.effectiveValue() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    tabIndex = computed(() => this.ctx.tabIndexFor(this.el.nativeElement), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* 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.1.4", ngImport: i0, type: TabsTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", 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": "tabIndex()", "attr.data-state": "selected() ? \"active\" : \"inactive\"", "disabled": "disabled() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TabsTriggerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[TabsTrigger]',
+                    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]': 'tabIndex()',
+                        '[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.effectiveValue() === 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.1.4", ngImport: i0, type: TabsContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TabsContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TabsContent',
+                    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 };

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

@@ -1,7 +1,50 @@
-export * from '@ojiepermana/angular-component/textarea';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, computed, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import * as i1 from '@ojiepermana/angular/component/utils/scale';
+import { ComponentScaleDirective } from '@ojiepermana/angular/component/utils/scale';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+class TextareaComponent {
+    componentScale = inject(ComponentScaleDirective);
+    radius = this.componentScale.radius;
+    density = this.componentScale.density;
+    el = inject(ElementRef);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn([
+        'flex min-h-15 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.1.4", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: TextareaComponent, isStandalone: true, selector: "textarea[Textarea]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'textarea[Textarea]',
+                    hostDirectives: [
+                        {
+                            directive: ComponentScaleDirective,
+                            inputs: ['radius', 'density'],
+                        },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { TextareaComponent };

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

@@ -1,7 +1,241 @@
-export * from '@ojiepermana/angular-component/timeline';
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, Component, inject } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const TIMELINE_BASE = [
+    'w-full min-w-0 text-sm text-foreground',
+    '[--timeline-content-gap:calc(var(--spacing)*3)] [--timeline-indicator-size:1.5rem] [--timeline-item-gap:calc(var(--spacing)*6)]',
+].join(' ');
+const timelineSizeClasses = {
+    default: '[--timeline-indicator-size:1.5rem]',
+    lg: '[--timeline-indicator-size:2.5rem] [--timeline-content-gap:calc(var(--spacing)*4)]',
+};
+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.1.4", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TimelineComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Timeline',
+                    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.1.4", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TimelineItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TimelineItem',
+                    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 */ []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    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.1.4", ngImport: i0, type: TimelineIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "ariaLabel() ? \"img\" : null", "attr.aria-label": "ariaLabel()", "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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TimelineIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TimelineIndicator',
+                    host: {
+                        '[class]': 'classes()',
+                        // A labeled indicator is a status graphic (role="img" so aria-label is valid);
+                        // without a label it stays a decorative marker.
+                        '[attr.role]': 'ariaLabel() ? "img" : null',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", 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.1.4", ngImport: i0, type: TimelineContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TimelineContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TimelineContent',
+                    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.1.4", ngImport: i0, type: TimelineBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TimelineBlockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TimelineBlock',
+                    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.1.4", ngImport: i0, type: TimelineSubgridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TimelineSubgridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TimelineSubgrid',
+                    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 };