@ojiepermana/angular 22.2.1 → 22.2.3

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

@@ -1,87 +1,91 @@
 import * as i0 from "@angular/core";
-import { Component, InjectionToken, PLATFORM_ID, Service, computed, inject, input, makeEnvironmentProviders, provideEnvironmentInitializer } from "@angular/core";
-import { DOCUMENT, isPlatformBrowser } from "@angular/common";
-const MATERIAL_SYMBOLS_FONT_ATTR = "data-icon-font";
-const MATERIAL_SYMBOLS_FONT_ID = "material-symbols";
-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";
-const MATERIAL_SYMBOLS_CONFIG = new InjectionToken("MATERIAL_SYMBOLS_CONFIG");
-var MaterialSymbolsService = class MaterialSymbolsService {
-	documentRef = inject(DOCUMENT, { optional: true });
-	platformId = inject(PLATFORM_ID);
-	config = inject(MATERIAL_SYMBOLS_CONFIG, { optional: true });
-	ensureLoaded() {
-		if (!this.config) return;
-		this.load(this.config);
+import { Component, InjectionToken, Service, computed, effect, inject, input, isDevMode } from "@angular/core";
+import { LucideDynamicIcon, isLucideIconComponent } from "@lucide/angular";
+const UI_ICON_CONTRIBUTIONS = new InjectionToken("UI_ICON_CONTRIBUTIONS");
+const UI_ICONS = new InjectionToken("UI_ICONS");
+const WARN_PREFIX = "[Icon]";
+var IconRegistry = class IconRegistry {
+	rootSet = inject(UI_ICONS, { optional: true }) ?? /* @__PURE__ */ new Map();
+	warned = /* @__PURE__ */ new Set();
+	resolve(name) {
+		return this.rootSet.get(name);
 	}
-	load(config) {
-		const head = this.documentRef?.head;
-		if (!isPlatformBrowser(this.platformId) || !head) return;
-		if (head.querySelector(`link[${MATERIAL_SYMBOLS_FONT_ATTR}="${MATERIAL_SYMBOLS_FONT_ID}"]`)) return;
-		const link = head.ownerDocument.createElement("link");
-		link.rel = "stylesheet";
-		link.href = config?.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";
-		link.setAttribute(MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_ID);
-		head.appendChild(link);
+	names() {
+		return [...new Set([...this.rootSet.values()].map((icon) => icon.name))].sort();
+	}
+	ɵwarnUnregistered(name) {
+		if (!isDevMode() || this.warned.has(name)) return;
+		this.warned.add(name);
+		console.warn(`${WARN_PREFIX} Ikon "${name}" tidak terdaftar. Daftarkan lewat provideIcons().`);
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
-		type: MaterialSymbolsService,
+		type: IconRegistry,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Service
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
-		type: MaterialSymbolsService
+		type: IconRegistry
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
-	type: MaterialSymbolsService,
+	type: IconRegistry,
 	decorators: [{ type: Service }]
 });
-const DEFAULT_RENDER_SIZE = 24;
 var IconComponent = class IconComponent {
-	materialSymbols = inject(MaterialSymbolsService);
+	nearest = inject(UI_ICONS, { optional: true });
+	registry = inject(IconRegistry);
 	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
 	class = input("", {
 		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
 		alias: "class"
 	});
 	size = input(null, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
-	fill = input(0, ...ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []);
-	weight = input(300, ...ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []);
-	grade = input(200, ...ngDevMode ? [{ debugName: "grade" }] : /* istanbul ignore next */ []);
-	opticalSize = input(48, ...ngDevMode ? [{ debugName: "opticalSize" }] : /* istanbul ignore next */ []);
-	resolvedSize = computed(() => {
+	strokeWidth = input(null, ...ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []);
+	label = input(null, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	icon = computed(() => {
+		const name = this.name();
+		if (!name) return;
+		return this.nearest?.get(name) ?? this.registry.resolve(name);
+	}, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	sizeToken = computed(() => {
 		const size = this.size();
-		return size === "inherit" ? null : size ?? DEFAULT_RENDER_SIZE;
-	}, ...ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []);
-	fontVariationSettings = computed(() => `"FILL" ${this.fill()}, "wght" ${this.weight()}, "GRAD" ${this.grade()}, "opsz" ${this.opticalSize()}`, ...ngDevMode ? [{ debugName: "fontVariationSettings" }] : /* istanbul ignore next */ []);
+		return size === null ? null : size === "inherit" ? "1em" : `${size}px`;
+	}, ...ngDevMode ? [{ debugName: "sizeToken" }] : /* istanbul ignore next */ []);
+	strokeWidthToken = computed(() => {
+		const strokeWidth = this.strokeWidth();
+		return strokeWidth === null ? null : String(strokeWidth);
+	}, ...ngDevMode ? [{ debugName: "strokeWidthToken" }] : /* istanbul ignore next */ []);
 	classes = computed(() => {
-		const base = "material-symbols inline-flex items-center justify-center leading-none select-none";
+		const base = "inline-flex items-center justify-center leading-none select-none";
 		const extra = this.class();
 		return extra ? `${base} ${extra}` : base;
 	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	constructor() {
-		this.materialSymbols.ensureLoaded();
+		effect(() => {
+			const name = this.name();
+			if (name && !this.icon()) this.registry.ɵwarnUnregistered(name);
+		});
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: IconComponent,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.1.0",
-		version: "22.2.2",
+		minVersion: "17.0.0",
+		version: "22.2.3",
 		type: IconComponent,
 		isStandalone: true,
 		selector: "Icon",
@@ -107,72 +111,71 @@ var IconComponent = class IconComponent {
 				isRequired: false,
 				transformFunction: null
 			},
-			fill: {
-				classPropertyName: "fill",
-				publicName: "fill",
+			strokeWidth: {
+				classPropertyName: "strokeWidth",
+				publicName: "strokeWidth",
 				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",
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			}
 		},
 		host: {
-			attributes: {
-				"aria-hidden": "true",
-				"translate": "no"
-			},
+			attributes: { "translate": "no" },
 			properties: {
 				"class": "classes()",
-				"style.font-size.px": "resolvedSize()",
-				"style.line-height.px": "resolvedSize()",
-				"style.font-variation-settings": "fontVariationSettings()"
+				"style.--icon-size": "sizeToken()",
+				"style.--icon-stroke-width": "strokeWidthToken()",
+				"attr.role": "label() ? \"img\" : null",
+				"attr.aria-label": "label()"
 			}
 		},
 		ngImport: i0,
-		template: `{{ name() }}`,
+		template: `
+    @if (icon(); as data) {
+      <svg [lucideIcon]="data" [title]="label()"></svg>
+    }
+  `,
 		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"]
+		styles: [":host{flex-shrink:0}svg{inline-size:var(--icon-size);block-size:var(--icon-size);stroke-width:var(--icon-stroke-width)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: LucideDynamicIcon,
+			selector: "svg[lucideIcon]",
+			inputs: ["lucideIcon"]
+		}]
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: IconComponent,
 	decorators: [{
 		type: Component,
 		args: [{
 			selector: "Icon",
+			imports: [LucideDynamicIcon],
 			host: {
 				"[class]": "classes()",
-				"[style.font-size.px]": "resolvedSize()",
-				"[style.line-height.px]": "resolvedSize()",
-				"[style.font-variation-settings]": "fontVariationSettings()",
-				"aria-hidden": "true",
+				"[style.--icon-size]": "sizeToken()",
+				"[style.--icon-stroke-width]": "strokeWidthToken()",
+				"[attr.role]": "label() ? \"img\" : null",
+				"[attr.aria-label]": "label()",
 				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"]
+			template: `
+    @if (icon(); as data) {
+      <svg [lucideIcon]="data" [title]="label()"></svg>
+    }
+  `,
+			styles: [":host{flex-shrink:0}svg{inline-size:var(--icon-size);block-size:var(--icon-size);stroke-width:var(--icon-stroke-width)}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -201,44 +204,50 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		fill: [{
+		strokeWidth: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "fill",
+				alias: "strokeWidth",
 				required: false
 			}]
 		}],
-		weight: [{
+		label: [{
 			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",
+				alias: "label",
 				required: false
 			}]
 		}]
 	}
 });
-function provideMaterialSymbols(config = {}) {
-	return makeEnvironmentProviders([{
-		provide: MATERIAL_SYMBOLS_CONFIG,
-		useValue: config
-	}, provideEnvironmentInitializer(() => inject(MaterialSymbolsService).ensureLoaded())]);
+function toIconData(icon, index) {
+	const data = isLucideIconComponent(icon) ? icon.icon : icon;
+	if (!data || typeof data !== "object" || typeof data.name !== "string" || !Array.isArray(data.node)) throw new Error(`[Icon] provideIcons() argumen ke-${index} bukan ikon Lucide.`);
+	return data;
+}
+function provideIcons(...icons) {
+	const own = /* @__PURE__ */ new Map();
+	icons.forEach((icon, index) => {
+		const data = toIconData(icon, index);
+		own.set(data.name, data);
+		for (const alias of data.aliases ?? []) own.set(alias, data);
+	});
+	return [{
+		provide: UI_ICON_CONTRIBUTIONS,
+		useValue: own,
+		multi: true
+	}, {
+		provide: UI_ICONS,
+		useFactory: () => {
+			const merged = new Map(inject(UI_ICONS, {
+				skipSelf: true,
+				optional: true
+			}) ?? []);
+			for (const contribution of inject(UI_ICON_CONTRIBUTIONS, { self: true })) for (const [name, data] of contribution) merged.set(name, data);
+			return merged;
+		}
+	}];
 }
-export { IconComponent, MATERIAL_SYMBOLS_CONFIG, MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_HREF, MATERIAL_SYMBOLS_FONT_ID, MaterialSymbolsService, provideMaterialSymbols };
+export { IconComponent, IconRegistry, provideIcons };

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

@@ -3,7 +3,7 @@ import { Component, ElementRef, computed, inject, input } from "@angular/core";
 import { cn } from "@ojiepermana/angular/component/utils/core";
 import { buttonVariants } from "@ojiepermana/angular/component/button";
 const GROUP_BASE = [
-	"relative flex min-w-0 flex-wrap overflow-hidden rounded-lg border border-input bg-transparent text-sm shadow-sm",
+	"relative flex min-w-0 flex-wrap overflow-hidden rounded-lg border border-input bg-transparent text-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",
@@ -50,7 +50,7 @@ var InputGroupComponent = class InputGroupComponent {
 	classes = computed(() => cn(GROUP_BASE, this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: InputGroupComponent,
 		deps: [],
@@ -58,7 +58,7 @@ var InputGroupComponent = class InputGroupComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: InputGroupComponent,
 		isStandalone: true,
 		selector: "InputGroup",
@@ -77,7 +77,7 @@ var InputGroupComponent = class InputGroupComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputGroupComponent,
 	decorators: [{
@@ -103,7 +103,7 @@ var InputGroupAddonComponent = class InputGroupAddonComponent {
 	classes = computed(() => cn(ADDON_BASE, addonAlignClasses[this.align()], this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: InputGroupAddonComponent,
 		deps: [],
@@ -111,7 +111,7 @@ var InputGroupAddonComponent = class InputGroupAddonComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: InputGroupAddonComponent,
 		isStandalone: true,
 		selector: "InputGroupAddon",
@@ -142,7 +142,7 @@ var InputGroupAddonComponent = class InputGroupAddonComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputGroupAddonComponent,
 	decorators: [{
@@ -180,7 +180,7 @@ var InputGroupTextComponent = class InputGroupTextComponent {
 	classes = computed(() => cn("inline-flex items-center gap-1.5 whitespace-nowrap text-sm leading-none text-current", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: InputGroupTextComponent,
 		deps: [],
@@ -188,7 +188,7 @@ var InputGroupTextComponent = class InputGroupTextComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: InputGroupTextComponent,
 		isStandalone: true,
 		selector: "InputGroupText",
@@ -207,7 +207,7 @@ var InputGroupTextComponent = class InputGroupTextComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputGroupTextComponent,
 	decorators: [{
@@ -237,7 +237,7 @@ var InputGroupButtonComponent = class InputGroupButtonComponent {
 	}), "shrink-0 shadow-none", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: InputGroupButtonComponent,
 		deps: [],
@@ -245,7 +245,7 @@ var InputGroupButtonComponent = class InputGroupButtonComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: InputGroupButtonComponent,
 		isStandalone: true,
 		selector: "button[InputGroupButton], a[InputGroupButton]",
@@ -284,7 +284,7 @@ var InputGroupButtonComponent = class InputGroupButtonComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputGroupButtonComponent,
 	decorators: [{
@@ -335,7 +335,7 @@ var InputGroupInputComponent = class InputGroupInputComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: InputGroupInputComponent,
 		deps: [],
@@ -343,7 +343,7 @@ var InputGroupInputComponent = class InputGroupInputComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: InputGroupInputComponent,
 		isStandalone: true,
 		selector: "input[InputGroupInput]",
@@ -365,7 +365,7 @@ var InputGroupInputComponent = class InputGroupInputComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputGroupInputComponent,
 	decorators: [{
@@ -397,7 +397,7 @@ var InputGroupTextareaComponent = class InputGroupTextareaComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: InputGroupTextareaComponent,
 		deps: [],
@@ -405,7 +405,7 @@ var InputGroupTextareaComponent = class InputGroupTextareaComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: InputGroupTextareaComponent,
 		isStandalone: true,
 		selector: "textarea[InputGroupTextarea]",
@@ -427,7 +427,7 @@ var InputGroupTextareaComponent = class InputGroupTextareaComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputGroupTextareaComponent,
 	decorators: [{

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

@@ -8,7 +8,7 @@ const REGEXP_ONLY_DIGITS_AND_CHARS = /^[A-Za-z0-9]$/;
 var InputOtpContextBase = class InputOtpContextBase {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: InputOtpContextBase,
 		deps: [],
@@ -16,7 +16,7 @@ var InputOtpContextBase = class InputOtpContextBase {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: InputOtpContextBase,
 		isStandalone: true,
 		ngImport: i0
@@ -24,17 +24,17 @@ var InputOtpContextBase = class InputOtpContextBase {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputOtpContextBase,
 	decorators: [{ type: Directive }]
 });
 var InputOtpGroupComponent = class InputOtpGroupComponent {
 	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
-	classes = computed(() => cn("flex items-center overflow-hidden rounded-md border border-input bg-background shadow-sm", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("flex items-center overflow-hidden rounded-md border border-input bg-background", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: InputOtpGroupComponent,
 		deps: [],
@@ -42,7 +42,7 @@ var InputOtpGroupComponent = class InputOtpGroupComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: InputOtpGroupComponent,
 		isStandalone: true,
 		selector: "InputOtpGroup",
@@ -64,7 +64,7 @@ var InputOtpGroupComponent = class InputOtpGroupComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputOtpGroupComponent,
 	decorators: [{
@@ -92,7 +92,7 @@ var InputOtpSeparatorComponent = class InputOtpSeparatorComponent {
 	classes = computed(() => cn("inline-flex h-control-10 w-6 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: InputOtpSeparatorComponent,
 		deps: [],
@@ -100,7 +100,7 @@ var InputOtpSeparatorComponent = class InputOtpSeparatorComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: InputOtpSeparatorComponent,
 		isStandalone: true,
 		selector: "InputOtpSeparator",
@@ -136,7 +136,7 @@ var InputOtpSeparatorComponent = class InputOtpSeparatorComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputOtpSeparatorComponent,
 	decorators: [{
@@ -224,7 +224,7 @@ var InputOtpSlotComponent = class InputOtpSlotComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: InputOtpSlotComponent,
 		deps: [],
@@ -232,7 +232,7 @@ var InputOtpSlotComponent = class InputOtpSlotComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.2.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: InputOtpSlotComponent,
 		isStandalone: true,
 		selector: "InputOtpSlot",
@@ -304,7 +304,7 @@ var InputOtpSlotComponent = class InputOtpSlotComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputOtpSlotComponent,
 	decorators: [{
@@ -660,7 +660,7 @@ var InputOtpComponent = class InputOtpComponent extends InputOtpContextBase {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: InputOtpComponent,
 		deps: null,
@@ -668,7 +668,7 @@ var InputOtpComponent = class InputOtpComponent extends InputOtpContextBase {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.2.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: InputOtpComponent,
 		isStandalone: true,
 		selector: "InputOtp",
@@ -804,7 +804,7 @@ var InputOtpComponent = class InputOtpComponent extends InputOtpContextBase {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputOtpComponent,
 	decorators: [{

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

@@ -5,12 +5,12 @@ import * as i1 from "@ojiepermana/angular/component/utils/scale";
 import { ComponentScaleDirective } from "@ojiepermana/angular/component/utils/scale";
 const BASE = [
 	"flex h-control-md w-full rounded-md border border-input bg-transparent px-3 py-1",
-	"text-sm shadow-sm transition-colors",
+	"text-sm transition-colors",
 	"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
 	"placeholder:text-muted-foreground",
-	"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+	"focus-ring",
 	"disabled:cursor-not-allowed disabled:opacity-50",
-	"aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive"
+	"aria-[invalid=true]:border-destructive aria-[invalid=true]:[--focus-ring-color:hsl(var(--destructive))]"
 ].join(" ");
 var InputComponent = class InputComponent {
 	componentScale = inject(ComponentScaleDirective);
@@ -24,7 +24,7 @@ var InputComponent = class InputComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: InputComponent,
 		deps: [],
@@ -32,7 +32,7 @@ var InputComponent = class InputComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: InputComponent,
 		isStandalone: true,
 		selector: "input[Input]",
@@ -60,7 +60,7 @@ var InputComponent = class InputComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputComponent,
 	decorators: [{