@ojiepermana/angular 22.1.11 → 22.1.12

package/fesm2022/ojiepermana-angular-component-hover-card.mjs

@@ -1,7 +1,277 @@
-export * from '@ojiepermana/angular-component/hover-card';
+import * as i0 from '@angular/core';
+import { InjectionToken, input, forwardRef, Component, inject, TemplateRef, Directive, ViewContainerRef, ElementRef, DestroyRef, output, signal } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { connectedPositionFor, oppositeSide, overlayDismissals } from '@ojiepermana/angular/component/utils/overlay';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const HOVER_CARD_DEFAULTS = new InjectionToken('HOVER_CARD_DEFAULTS');
+class HoverCardComponent {
+    side = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = input('center', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    sideOffset = input(8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+    openDelay = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
+    closeDelay = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HoverCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: HoverCardComponent, isStandalone: true, selector: "HoverCard", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, providers: [{ provide: HOVER_CARD_DEFAULTS, useExisting: forwardRef(() => HoverCardComponent) }], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HoverCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'HoverCard',
+                    providers: [{ provide: HOVER_CARD_DEFAULTS, useExisting: forwardRef(() => HoverCardComponent) }],
+                    host: {
+                        class: 'contents',
+                    },
+                    template: '<ng-content />',
+                }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }] } });
+
+class HoverCardContentDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HoverCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: HoverCardContentDirective, isStandalone: true, selector: "ng-template[HoverCardContent]", exportAs: ["HoverCardContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HoverCardContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[HoverCardContent]',
+                    exportAs: 'HoverCardContent',
+                }]
+        }] });
+
+// Hover cards are visual preview content (Radix-style): the trigger keeps its
+// own semantics and must NOT advertise aria-haspopup="dialog" for content that
+// is not a dialog.
+class HoverCardTriggerDirective {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    el = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    defaults = inject(HOVER_CARD_DEFAULTS, { optional: true });
+    HoverCardTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "HoverCardTrigger" }] : /* istanbul ignore next */ []));
+    side = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    sideOffset = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+    openDelay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
+    closeDelay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    openedChange = output();
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    openTimeoutId = null;
+    closeTimeoutId = null;
+    isTriggerHovered = false;
+    isContentHovered = false;
+    isTriggerFocused = false;
+    isContentFocused = false;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.clearOpenTimeout();
+            this.clearCloseTimeout();
+            this.close(false);
+        });
+    }
+    handleTriggerPointerEnter() {
+        if (this.disabled()) {
+            return;
+        }
+        this.isTriggerHovered = true;
+        this.clearCloseTimeout();
+        this.scheduleOpen();
+    }
+    handleTriggerPointerLeave(event) {
+        this.isTriggerHovered = false;
+        if (this.relatedTargetInsideContent(event.relatedTarget)) {
+            return;
+        }
+        this.scheduleClose();
+    }
+    handleTriggerFocusIn() {
+        if (this.disabled()) {
+            return;
+        }
+        this.isTriggerFocused = true;
+        this.clearCloseTimeout();
+        this.scheduleOpen();
+    }
+    handleTriggerFocusOut(event) {
+        this.isTriggerFocused = false;
+        if (this.relatedTargetInsideContent(event.relatedTarget)) {
+            return;
+        }
+        this.scheduleClose();
+    }
+    open() {
+        if (this.isOpen() || this.disabled()) {
+            return;
+        }
+        const side = this.side() ?? this.defaults?.side() ?? 'bottom';
+        const align = this.align() ?? this.defaults?.align() ?? 'center';
+        const sideOffset = this.sideOffset() ?? this.defaults?.sideOffset() ?? 8;
+        const primary = connectedPositionFor(side, align, sideOffset);
+        const fallback = connectedPositionFor(oppositeSide(side), align, sideOffset);
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.el)
+            .withPositions([primary, fallback])
+            .withPush(true)
+            .withViewportMargin(8)
+            .withFlexibleDimensions(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+            panelClass: 'hover-card-panel',
+        });
+        const portal = new TemplatePortal(this.HoverCardTrigger().template, this.vcr);
+        this.overlayRef.attach(portal);
+        this.bindOverlayInteractions();
+        overlayDismissals(this.overlayRef, this.el.nativeElement)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+        this.isOpen.set(true);
+        this.openedChange.emit(true);
+    }
+    close(emitOpenedChange = true) {
+        this.clearOpenTimeout();
+        this.clearCloseTimeout();
+        if (!this.isOpen()) {
+            return;
+        }
+        const overlayRef = this.overlayRef;
+        this.unbindOverlayInteractions();
+        this.overlayRef = null;
+        this.isContentHovered = false;
+        this.isContentFocused = false;
+        this.isOpen.set(false);
+        overlayRef?.dispose();
+        if (emitOpenedChange) {
+            this.openedChange.emit(false);
+        }
+    }
+    bindOverlayInteractions() {
+        const overlayElement = this.overlayRef?.overlayElement;
+        if (!overlayElement) {
+            return;
+        }
+        overlayElement.addEventListener('pointerenter', this.onContentPointerEnter);
+        overlayElement.addEventListener('pointerleave', this.onContentPointerLeave);
+        overlayElement.addEventListener('focusin', this.onContentFocusIn);
+        overlayElement.addEventListener('focusout', this.onContentFocusOut);
+    }
+    unbindOverlayInteractions() {
+        const overlayElement = this.overlayRef?.overlayElement;
+        if (!overlayElement) {
+            return;
+        }
+        overlayElement.removeEventListener('pointerenter', this.onContentPointerEnter);
+        overlayElement.removeEventListener('pointerleave', this.onContentPointerLeave);
+        overlayElement.removeEventListener('focusin', this.onContentFocusIn);
+        overlayElement.removeEventListener('focusout', this.onContentFocusOut);
+    }
+    onContentPointerEnter = () => {
+        this.isContentHovered = true;
+        this.clearCloseTimeout();
+    };
+    onContentPointerLeave = (event) => {
+        this.isContentHovered = false;
+        if (this.el.nativeElement.contains(event.relatedTarget)) {
+            return;
+        }
+        this.scheduleClose();
+    };
+    onContentFocusIn = () => {
+        this.isContentFocused = true;
+        this.clearCloseTimeout();
+    };
+    onContentFocusOut = (event) => {
+        this.isContentFocused = false;
+        if (this.el.nativeElement.contains(event.relatedTarget)) {
+            return;
+        }
+        this.scheduleClose();
+    };
+    scheduleOpen() {
+        this.clearCloseTimeout();
+        if (this.isOpen()) {
+            return;
+        }
+        this.clearOpenTimeout();
+        this.openTimeoutId = window.setTimeout(() => {
+            this.openTimeoutId = null;
+            if (this.disabled() || (!this.isTriggerHovered && !this.isTriggerFocused)) {
+                return;
+            }
+            this.open();
+        }, this.openDelay() ?? this.defaults?.openDelay() ?? 100);
+    }
+    scheduleClose() {
+        this.clearOpenTimeout();
+        if (!this.isOpen()) {
+            return;
+        }
+        this.clearCloseTimeout();
+        this.closeTimeoutId = window.setTimeout(() => {
+            this.closeTimeoutId = null;
+            if (this.isTriggerHovered ||
+                this.isContentHovered ||
+                this.isTriggerFocused ||
+                this.isContentFocused) {
+                return;
+            }
+            this.close();
+        }, this.closeDelay() ?? this.defaults?.closeDelay() ?? 100);
+    }
+    clearOpenTimeout() {
+        if (this.openTimeoutId !== null) {
+            window.clearTimeout(this.openTimeoutId);
+            this.openTimeoutId = null;
+        }
+    }
+    clearCloseTimeout() {
+        if (this.closeTimeoutId !== null) {
+            window.clearTimeout(this.closeTimeoutId);
+            this.closeTimeoutId = null;
+        }
+    }
+    relatedTargetInsideContent(relatedTarget) {
+        return this.overlayRef?.overlayElement.contains(relatedTarget) ?? false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HoverCardTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: HoverCardTriggerDirective, isStandalone: true, selector: "[HoverCardTrigger]", inputs: { HoverCardTrigger: { classPropertyName: "HoverCardTrigger", publicName: "HoverCardTrigger", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "pointerenter": "handleTriggerPointerEnter()", "pointerleave": "handleTriggerPointerLeave($event)", "focusin": "handleTriggerFocusIn()", "focusout": "handleTriggerFocusOut($event)", "keydown.escape": "close()" }, properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"" } }, exportAs: ["HoverCardTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HoverCardTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[HoverCardTrigger]',
+                    exportAs: 'HoverCardTrigger',
+                    host: {
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '(pointerenter)': 'handleTriggerPointerEnter()',
+                        '(pointerleave)': 'handleTriggerPointerLeave($event)',
+                        '(focusin)': 'handleTriggerFocusIn()',
+                        '(focusout)': 'handleTriggerFocusOut($event)',
+                        '(keydown.escape)': 'close()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { HoverCardTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "HoverCardTrigger", required: true }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { HOVER_CARD_DEFAULTS, HoverCardComponent, HoverCardContentDirective, HoverCardTriggerDirective };

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

@@ -1,7 +1,143 @@
-export * from '@ojiepermana/angular-component/icon';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, Service, input, computed, Component, makeEnvironmentProviders, provideEnvironmentInitializer } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const MATERIAL_SYMBOLS_FONT_ATTR = 'data-icon-font';
+const MATERIAL_SYMBOLS_FONT_ID = 'material-symbols';
+/**
+ * Loads BOTH Material Symbols variable families the design system uses:
+ * Rounded (the default everywhere) and Sharp (swapped in under
+ * `appearance='border-rail'` scopes via the `--icon-font-family` token).
+ * Full variable axes are requested so per-icon `fill`/`weight`/`grade`/
+ * `opticalSize` inputs keep working.
+ */
+const MATERIAL_SYMBOLS_FONT_HREF = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block';
+/**
+ * Presence of this token is what enables {@link IconComponent} to auto-load the
+ * font. It is only provided when the app opts in via `provideMaterialSymbols()`;
+ * without it, `<Icon>` makes no network request.
+ */
+const MATERIAL_SYMBOLS_CONFIG = new InjectionToken('MATERIAL_SYMBOLS_CONFIG');
+class MaterialSymbolsService {
+    documentRef = inject(DOCUMENT, { optional: true });
+    platformId = inject(PLATFORM_ID);
+    config = inject(MATERIAL_SYMBOLS_CONFIG, { optional: true });
+    /**
+     * Token-gated load. No-op unless the app opted in via `provideMaterialSymbols()`
+     * (which provides {@link MATERIAL_SYMBOLS_CONFIG}). Called by `IconComponent`
+     * so rendering an icon never triggers an implicit network request on its own.
+     */
+    ensureLoaded() {
+        if (!this.config) {
+            return;
+        }
+        this.load(this.config);
+    }
+    /**
+     * Explicitly inject the font stylesheet, regardless of whether the config
+     * token is present. Used by integrations that decide to load the font from
+     * their own option surface (e.g. `provideUiTheme({ icons: { materialSymbols: true } })`).
+     */
+    load(config) {
+        const head = this.documentRef?.head;
+        if (!isPlatformBrowser(this.platformId) || !head) {
+            return;
+        }
+        const existing = head.querySelector(`link[${MATERIAL_SYMBOLS_FONT_ATTR}="${MATERIAL_SYMBOLS_FONT_ID}"]`);
+        if (existing) {
+            return;
+        }
+        const link = head.ownerDocument.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = config?.href ?? MATERIAL_SYMBOLS_FONT_HREF;
+        link.setAttribute(MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_ID);
+        head.appendChild(link);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MaterialSymbolsService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: MaterialSymbolsService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MaterialSymbolsService, decorators: [{
+            type: Service
+        }] });
+
+/** Render-size fallback (px) when no `size` is given — independent of the
+ * `opticalSize` VARIATION axis, which stays at the design's 48 grid. */
+const DEFAULT_RENDER_SIZE = 24;
+class IconComponent {
+    materialSymbols = inject(MaterialSymbolsService);
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** Glyph size in px, or 'inherit' to defer to the surrounding font-size
+     * (lets a CSS token size the glyph — no inline style is emitted). */
+    size = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    fill = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
+    /** Light strokes + high-emphasis grade at the 48 optical grid — the
+     * system's icon voice. Override per icon only with intent. */
+    weight = input(300, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
+    grade = input(200, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grade" }] : /* istanbul ignore next */ []));
+    opticalSize = input(48, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opticalSize" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => {
+        const size = this.size();
+        return size === 'inherit' ? null : (size ?? DEFAULT_RENDER_SIZE);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    fontVariationSettings = computed(() => `"FILL" ${this.fill()}, "wght" ${this.weight()}, "GRAD" ${this.grade()}, "opsz" ${this.opticalSize()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fontVariationSettings" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const base = 'material-symbols inline-flex items-center justify-center leading-none select-none';
+        const extra = this.class();
+        return extra ? `${base} ${extra}` : base;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.materialSymbols.ensureLoaded();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: IconComponent, isStandalone: true, selector: "Icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, grade: { classPropertyName: "grade", publicName: "grade", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "translate": "no" }, properties: { "class": "classes()", "style.font-size.px": "resolvedSize()", "style.line-height.px": "resolvedSize()", "style.font-variation-settings": "fontVariationSettings()" } }, ngImport: i0, template: `{{ name() }}`, isInline: true, styles: [":host{font-family:var(--icon-font-family, \"Material Symbols Rounded\");font-weight:400;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Icon', host: {
+                        '[class]': 'classes()',
+                        '[style.font-size.px]': 'resolvedSize()',
+                        '[style.line-height.px]': 'resolvedSize()',
+                        '[style.font-variation-settings]': 'fontVariationSettings()',
+                        'aria-hidden': 'true',
+                        translate: 'no',
+                    }, template: `{{ name() }}`, styles: [":host{font-family:var(--icon-font-family, \"Material Symbols Rounded\");font-weight:400;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], grade: [{ type: i0.Input, args: [{ isSignal: true, alias: "grade", required: false }] }], opticalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "opticalSize", required: false }] }] } });
+
+/**
+ * Opt in to loading the Material Symbols icon font that `<Icon>` renders with.
+ *
+ * By default `IconComponent` makes **no** network request — better for privacy,
+ * offline, and strict CSP. Add this provider to your bootstrap to fetch the font
+ * stylesheet once at startup. Pass `{ href }` to load from a self-hosted source
+ * instead of Google Fonts.
+ *
+ * @example
+ * // Google Fonts (default source):
+ * bootstrapApplication(App, { providers: [provideMaterialSymbols()] });
+ *
+ * @example
+ * // Self-hosted / offline:
+ * provideMaterialSymbols({ href: '/assets/material-symbols.css' });
+ */
+function provideMaterialSymbols(config = {}) {
+    return makeEnvironmentProviders([
+        { provide: MATERIAL_SYMBOLS_CONFIG, useValue: config },
+        provideEnvironmentInitializer(() => inject(MaterialSymbolsService).ensureLoaded()),
+    ]);
+}
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { IconComponent, MATERIAL_SYMBOLS_CONFIG, MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_HREF, MATERIAL_SYMBOLS_FONT_ID, MaterialSymbolsService, provideMaterialSymbols };

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

@@ -1,7 +1,180 @@
-export * from '@ojiepermana/angular-component/input-group';
+import * as i0 from '@angular/core';
+import { input, computed, Component, inject, ElementRef } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import { buttonVariants } from '@ojiepermana/angular/component/button';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const GROUP_BASE = [
+    'relative flex min-w-0 flex-wrap overflow-hidden rounded-lg border border-input bg-transparent text-sm shadow-sm',
+    'transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+    '[&>[data-slot=input-group-control]]:min-w-0',
+    '[&>[data-slot=input-group-control]]:flex-1',
+    '[&>[data-slot=input-group-control]]:rounded-none',
+    '[&>[data-slot=input-group-control]]:border-0',
+    '[&>[data-slot=input-group-control]]:bg-transparent',
+    '[&>[data-slot=input-group-control]]:shadow-none',
+    '[&>[data-slot=input-group-control]]:outline-none',
+    '[&>[data-slot=input-group-control]]:focus-visible:ring-0',
+    '[&>[data-slot=input-group-control]]:focus-visible:outline-none',
+].join(' ');
+const addonAlignClasses = {
+    'inline-start': [
+        'order-10',
+        '[border-inline-end-width:1px]',
+        '[border-inline-end-color:hsl(var(--border))]',
+    ].join(' '),
+    'inline-end': [
+        'order-30',
+        '[border-inline-start-width:1px]',
+        '[border-inline-start-color:hsl(var(--border))]',
+    ].join(' '),
+    'block-start': [
+        'order-0 basis-full py-2',
+        '[border-block-end-width:1px]',
+        '[border-block-end-color:hsl(var(--border))]',
+    ].join(' '),
+    'block-end': [
+        'order-40 basis-full py-2',
+        '[border-block-start-width:1px]',
+        '[border-block-start-color:hsl(var(--border))]',
+    ].join(' '),
+};
+const ADDON_BASE = [
+    'flex min-h-9 shrink-0 items-center gap-1.5 bg-[hsl(var(--muted)/var(--opacity-30))] px-3 text-sm text-muted-foreground',
+    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+].join(' ');
+const CONTROL_BASE = [
+    'order-20 min-w-0 flex-1 bg-transparent text-sm text-foreground',
+    'placeholder:text-muted-foreground',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    'focus-visible:outline-none',
+    'aria-[invalid=true]:text-destructive',
+].join(' ');
+class InputGroupComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(GROUP_BASE, 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: InputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: InputGroupComponent, isStandalone: true, selector: "InputGroup", 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: InputGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'InputGroup',
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class InputGroupAddonComponent {
+    align = input('inline-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(ADDON_BASE, addonAlignClasses[this.align()], 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: InputGroupAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: InputGroupAddonComponent, isStandalone: true, selector: "InputGroupAddon", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-align": "align()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputGroupAddonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'InputGroupAddon',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-align]': 'align()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class InputGroupTextComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('inline-flex items-center gap-1.5 whitespace-nowrap text-sm leading-none text-current', 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: InputGroupTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: InputGroupTextComponent, isStandalone: true, selector: "InputGroupText", 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: InputGroupTextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'InputGroupText',
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class InputGroupButtonComponent {
+    variant = input('ghost', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('xs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), 'shrink-0 shadow-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: InputGroupButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: InputGroupButtonComponent, isStandalone: true, selector: "button[InputGroupButton], a[InputGroupButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-size": "size()", "attr.data-variant": "variant()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputGroupButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[InputGroupButton], a[InputGroupButton]',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-variant]': 'variant()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class InputGroupInputComponent {
+    el = inject(ElementRef);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(CONTROL_BASE, 'h-9 px-3 py-2', 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: InputGroupInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: InputGroupInputComponent, isStandalone: true, selector: "input[InputGroupInput]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input-group-control" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputGroupInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input[InputGroupInput]',
+                    host: {
+                        '[class]': 'classes()',
+                        'data-slot': 'input-group-control',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class InputGroupTextareaComponent {
+    el = inject(ElementRef);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(CONTROL_BASE, 'min-h-30 w-full resize-none px-3 py-2.5', 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: InputGroupTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: InputGroupTextareaComponent, isStandalone: true, selector: "textarea[InputGroupTextarea]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input-group-control" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputGroupTextareaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'textarea[InputGroupTextarea]',
+                    host: {
+                        '[class]': 'classes()',
+                        'data-slot': 'input-group-control',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { InputGroupAddonComponent, InputGroupButtonComponent, InputGroupComponent, InputGroupInputComponent, InputGroupTextComponent, InputGroupTextareaComponent };