@ojiepermana/angular 22.1.11 → 22.1.13

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

@@ -1,7 +1,35 @@
-export * from '@ojiepermana/angular-component/separator';
+import * as i0 from '@angular/core';
+import { input, computed, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+class SeparatorComponent {
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    decorative = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block shrink-0 bg-border', this.orientation() === 'horizontal' ? 'h-px w-full' : 'h-full w-px', 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: SeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SeparatorComponent, isStandalone: true, selector: "Separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "decorative() ? \"none\" : \"separator\"", "attr.aria-orientation": "decorative() ? null : orientation()", "attr.data-orientation": "orientation()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Separator',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': 'decorative() ? "none" : "separator"',
+                        '[attr.aria-orientation]': 'decorative() ? null : orientation()',
+                        '[attr.data-orientation]': 'orientation()',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { SeparatorComponent };

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

@@ -1,7 +1,411 @@
-export * from '@ojiepermana/angular-component/sheet';
+import * as i0 from '@angular/core';
+import { inject, ViewContainerRef, DestroyRef, ElementRef, model, input, output, signal, computed, viewChild, effect, Component, Directive } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { FocusTrapFactory } from '@angular/cdk/a11y';
+import { DOCUMENT } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs/operators';
+import { ButtonComponent } from '@ojiepermana/angular/component/button';
+import { cn, injectUniqueId } 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.
+const SIDE_BASE = {
+    top: 'inset-x-0 top-0 border-b border-border',
+    bottom: 'inset-x-0 bottom-0 border-t border-border',
+    left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border sm:max-w-sm',
+    right: 'inset-y-0 right-0 h-full w-3/4 border-l border-border sm:max-w-sm',
+};
+const DRAWER_SIDE_CLASSES = {
+    top: 'max-h-[85vh] rounded-b-lg',
+    bottom: 'max-h-[85vh] rounded-t-lg',
+    left: 'rounded-r-lg',
+    right: 'rounded-l-lg',
+};
+const SIDE_ENTER_FROM = {
+    top: 'translateY(-100%)',
+    bottom: 'translateY(100%)',
+    left: 'translateX(-100%)',
+    right: 'translateX(100%)',
+};
+class SheetComponent {
+    componentScale = inject(ComponentScaleDirective);
+    radius = this.componentScale.radius;
+    density = this.componentScale.density;
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    trapFactory = inject(FocusTrapFactory);
+    doc = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    host = inject((ElementRef));
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    side = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /** Paksa perilaku 'sheet' atau 'drawer' tanpa bergantung pada nama tag host. */
+    variant = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    closeOnEscape = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+    closeOnBackdropClick = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
+    /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
+    backdrop = input('dim', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
+    showCloseButton = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
+    closeButtonLabel = input('Close', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeButtonLabel" }] : /* istanbul ignore next */ []));
+    /** Optional opening trigger used for deterministic focus restoration. */
+    restoreFocus = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restoreFocus" }] : /* istanbul ignore next */ []));
+    labelledBy = input(null, { ...(ngDevMode ? { debugName: "labelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    describedBy = input(null, { ...(ngDevMode ? { debugName: "describedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /** ARIA role for the surface. Defaults to `'dialog'`. */
+    role = input('dialog', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    openedChange = output();
+    registeredTitleId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registeredTitleId" }] : /* istanbul ignore next */ []));
+    registeredDescriptionId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registeredDescriptionId" }] : /* istanbul ignore next */ []));
+    /** Explicit `aria-labelledby` wins; otherwise a projected `SheetTitle` supplies the id. */
+    resolvedLabelledBy = computed(() => this.labelledBy() ?? this.registeredTitleId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabelledBy" }] : /* istanbul ignore next */ []));
+    /** Explicit `aria-describedby` wins; otherwise a projected `SheetDescription` supplies the id. */
+    resolvedDescribedBy = computed(() => this.describedBy() ?? this.registeredDescriptionId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
+    tpl = viewChild.required('tpl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tpl" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    focusTrap = null;
+    previousFocus = null;
+    resolvedSide = computed(() => this.side() ?? (this.isDrawerHost() ? 'bottom' : 'right'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSide" }] : /* istanbul ignore next */ []));
+    surfaceClasses = computed(() => cn('gap-4 p-6 flex flex-col', SIDE_BASE[this.resolvedSide()], this.isDrawerHost() ? DRAWER_SIDE_CLASSES[this.resolvedSide()] : '', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surfaceClasses" }] : /* istanbul ignore next */ []));
+    enterFrom = computed(() => SIDE_ENTER_FROM[this.resolvedSide()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enterFrom" }] : /* istanbul ignore next */ []));
+    /** CDK `backdropClass` list: shared marker plus the selected appearance modifier. */
+    backdropClass = computed(() => {
+        const classes = ['dialog-backdrop'];
+        const kind = this.backdrop();
+        if (kind === 'blur')
+            classes.push('dialog-backdrop-blur');
+        else if (kind === 'transparent')
+            classes.push('dialog-backdrop-transparent');
+        return classes;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.destroyRef.onDestroy(() => this.detach(false));
+        effect(() => {
+            if (this.open()) {
+                this.attach();
+            }
+            else {
+                this.detach();
+            }
+        });
+    }
+    attach() {
+        if (this.overlayRef)
+            return;
+        this.previousFocus =
+            this.restoreFocus() ??
+                (this.doc.activeElement instanceof HTMLElement ? this.doc.activeElement : null);
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            backdropClass: this.backdropClass(),
+            panelClass: 'sheet-panel',
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            positionStrategy: this.overlay.position().global(),
+        });
+        const portal = new TemplatePortal(this.tpl(), this.vcr);
+        this.overlayRef.attach(portal);
+        this.focusTrap = this.trapFactory.create(this.overlayRef.hostElement);
+        this.focusTrap.focusInitialElementWhenReady();
+        if (this.closeOnBackdropClick()) {
+            this.overlayRef
+                .backdropClick()
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.open.set(false));
+        }
+        this.overlayRef
+            .keydownEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef), filter((e) => e.key === 'Escape' && this.closeOnEscape()))
+            .subscribe((e) => {
+            e.preventDefault();
+            this.open.set(false);
+        });
+        this.openedChange.emit(true);
+    }
+    detach(emitOpenedChange = true) {
+        if (!this.overlayRef)
+            return;
+        const previousFocus = this.previousFocus;
+        this.focusTrap?.destroy();
+        this.focusTrap = null;
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+        this.previousFocus = null;
+        this.restoreFocusAfterOverlayTeardown(previousFocus);
+        if (emitOpenedChange) {
+            this.openedChange.emit(false);
+        }
+    }
+    close() {
+        this.open.set(false);
+    }
+    /** Called by a projected `SheetTitle` so default usage has an accessible name (AXE-safe). */
+    registerTitleId(id) {
+        this.registeredTitleId.set(id);
+    }
+    /** Cleared by a `SheetTitle` on destroy so a closed/reopened sheet never points at a stale id. */
+    unregisterTitleId(id) {
+        if (this.registeredTitleId() === id) {
+            this.registeredTitleId.set(null);
+        }
+    }
+    /** Called by a projected `SheetDescription`. */
+    registerDescriptionId(id) {
+        this.registeredDescriptionId.set(id);
+    }
+    /** Cleared by a `SheetDescription` on destroy. */
+    unregisterDescriptionId(id) {
+        if (this.registeredDescriptionId() === id) {
+            this.registeredDescriptionId.set(null);
+        }
+    }
+    isDrawerHost() {
+        const variant = this.variant();
+        if (variant) {
+            return variant === 'drawer';
+        }
+        // Fallback: infer dari tag host (selector komponen ini: 'Sheet, Drawer').
+        // localName DOM selalu lowercase, meski tag template ditulis '<Drawer>'.
+        return this.host.nativeElement.localName === 'drawer';
+    }
+    /** See DatePicker: wait for CDK pane disposal before returning focus on WebKit. */
+    restoreFocusAfterOverlayTeardown(element) {
+        if (!element?.isConnected) {
+            return;
+        }
+        const view = this.doc.defaultView;
+        if (!view) {
+            queueMicrotask(() => element.isConnected && element.focus());
+            return;
+        }
+        view.requestAnimationFrame(() => {
+            if (element.isConnected) {
+                element.focus();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SheetComponent, isStandalone: true, selector: "Sheet, Drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, host: { properties: { "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0, template: `
+    <ng-template #tpl>
+      <div
+        class="sheet-surface fixed z-50 bg-background shadow-lg transition ease-in-out"
+        [attr.role]="role()"
+        aria-modal="true"
+        [attr.aria-labelledby]="resolvedLabelledBy()"
+        [attr.aria-describedby]="resolvedDescribedBy()"
+        [class]="surfaceClasses()"
+        [style.--sheet-from]="enterFrom()"
+        [style.--radius-base]="componentScale.radiusBase()"
+        [style.--spacing-base]="componentScale.densityBase()"
+      >
+        @if (showCloseButton()) {
+          <button
+            type="button"
+            Button
+            variant="ghost"
+            size="icon-sm"
+            class="sheet-close-button absolute right-4 top-4 h-8 w-8 rounded-md p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
+            [attr.aria-label]="closeButtonLabel()"
+            (click)="close()"
+          >
+            <span aria-hidden="true">X</span>
+            <span class="sr-only">{{ closeButtonLabel() }}</span>
+          </button>
+        }
+        <ng-content />
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [".sheet-surface{animation:sheet-in .3s cubic-bezier(.2,0,0,1)}@keyframes sheet-in{0%{transform:var(--sheet-from)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.sheet-surface{animation-duration:0ms}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Sheet, Drawer', hostDirectives: [
+                        {
+                            directive: ComponentScaleDirective,
+                            inputs: ['radius', 'density'],
+                        },
+                    ], host: {
+                        '[attr.aria-labelledby]': 'null',
+                        '[attr.aria-describedby]': 'null',
+                    }, imports: [ButtonComponent], template: `
+    <ng-template #tpl>
+      <div
+        class="sheet-surface fixed z-50 bg-background shadow-lg transition ease-in-out"
+        [attr.role]="role()"
+        aria-modal="true"
+        [attr.aria-labelledby]="resolvedLabelledBy()"
+        [attr.aria-describedby]="resolvedDescribedBy()"
+        [class]="surfaceClasses()"
+        [style.--sheet-from]="enterFrom()"
+        [style.--radius-base]="componentScale.radiusBase()"
+        [style.--spacing-base]="componentScale.densityBase()"
+      >
+        @if (showCloseButton()) {
+          <button
+            type="button"
+            Button
+            variant="ghost"
+            size="icon-sm"
+            class="sheet-close-button absolute right-4 top-4 h-8 w-8 rounded-md p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
+            [attr.aria-label]="closeButtonLabel()"
+            (click)="close()"
+          >
+            <span aria-hidden="true">X</span>
+            <span class="sr-only">{{ closeButtonLabel() }}</span>
+          </button>
+        }
+        <ng-content />
+      </div>
+    </ng-template>
+  `, styles: [".sheet-surface{animation:sheet-in .3s cubic-bezier(.2,0,0,1)}@keyframes sheet-in{0%{transform:var(--sheet-from)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.sheet-surface{animation-duration:0ms}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], restoreFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreFocus", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+
+class SheetCloseDirective {
+    sheet = inject(SheetComponent);
+    closeSheet() {
+        this.sheet.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: SheetCloseDirective, isStandalone: true, selector: "button[SheetClose], a[SheetClose], button[DrawerClose], a[DrawerClose]", host: { listeners: { "click": "closeSheet()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SheetCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[SheetClose], a[SheetClose], button[DrawerClose], a[DrawerClose]',
+                    host: {
+                        '(click)': 'closeSheet()',
+                    },
+                }]
+        }] });
+
+class SheetHeaderComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex flex-col gap-2 text-center sm:text-left', 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: SheetHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SheetHeaderComponent, isStandalone: true, selector: "SheetHeader, DrawerHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SheetHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'SheetHeader, DrawerHeader',
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SheetTitleComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    id = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    autoId = injectUniqueId('sheet-title');
+    sheet = inject(SheetComponent, { optional: true });
+    /** The id rendered on the element, used by the parent sheet for aria-labelledby. */
+    resolvedId = computed(() => this.id() ?? this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('text-lg font-semibold text-foreground', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => this.sheet?.registerTitleId(this.resolvedId()));
+        inject(DestroyRef).onDestroy(() => this.sheet?.unregisterTitleId(this.resolvedId()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SheetTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SheetTitleComponent, isStandalone: true, selector: "SheetTitle, DrawerTitle, h2[SheetTitle], h2[DrawerTitle]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SheetTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'SheetTitle, DrawerTitle, h2[SheetTitle], h2[DrawerTitle]',
+                    host: { '[class]': 'classes()', '[attr.id]': 'resolvedId()' },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SheetDescriptionComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    id = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    autoId = injectUniqueId('sheet-description');
+    sheet = inject(SheetComponent, { optional: true });
+    /** The id rendered on the element, used by the parent sheet for aria-describedby. */
+    resolvedId = computed(() => this.id() ?? this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('text-sm text-muted-foreground', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => this.sheet?.registerDescriptionId(this.resolvedId()));
+        inject(DestroyRef).onDestroy(() => this.sheet?.unregisterDescriptionId(this.resolvedId()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SheetDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SheetDescriptionComponent, isStandalone: true, selector: "SheetDescription, DrawerDescription, p[SheetDescription], p[DrawerDescription]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SheetDescriptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'SheetDescription, DrawerDescription, p[SheetDescription], p[DrawerDescription]',
+                    host: { '[class]': 'classes()', '[attr.id]': 'resolvedId()' },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SheetContentComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex-1 overflow-auto', 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: SheetContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SheetContentComponent, isStandalone: true, selector: "SheetContent, DrawerContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SheetContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'SheetContent, DrawerContent',
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SheetFooterComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', 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: SheetFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SheetFooterComponent, isStandalone: true, selector: "SheetFooter, DrawerFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SheetFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'SheetFooter, DrawerFooter',
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { SheetCloseDirective, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetTitleComponent };

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

@@ -1,7 +1,29 @@
-export * from '@ojiepermana/angular-component/skeleton';
+import * as i0 from '@angular/core';
+import { input, computed, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+class SkeletonComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block animate-pulse rounded-md bg-muted motion-reduce:animate-none', 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: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkeletonComponent, isStandalone: true, selector: "Skeleton", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-hidden": "\"true\"" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Skeleton',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.aria-hidden]': '"true"',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { SkeletonComponent };