@ojiepermana/angular 22.2.1 → 22.2.3

package/README.md

@@ -22,7 +22,8 @@ bun add @ojiepermana/angular
 ## Peer dependencies
 
 You must already have Angular v22.2+ in your app (`@angular/common`, `@angular/core`,
-plus `@angular/router` and `rxjs`). `@angular/cdk`, `@angular/forms`, and
+plus `@angular/router` and `rxjs`) and `@lucide/angular` (>=1.61.0 <2.0.0), which draws
+every icon. `@angular/cdk`, `@angular/forms`, and
 `@angular/platform-browser` are optional peers: install them when you use the
 surfaces that need them.
 
@@ -90,17 +91,27 @@ export const appConfig = {
 };
 ```
 
-### Material Symbols icons (opt-in)
+### Icons (Lucide)
 
-By default `provideUiTheme()` makes **no external network request**. To preload the
-Material Symbols font from Google Fonts, opt in explicitly:
+Icons are [Lucide](https://lucide.dev/icons/) SVGs from the required `@lucide/angular`
+peer, so nothing is fetched at runtime (no icon font, no third-party host). Register the
+icons you name as strings with `provideIcons()`; only those reach your bundle:
 
 ```ts
-provideUiTheme({ icons: { materialSymbols: true } });
+import { LucideHouse, LucideSettings } from '@lucide/angular';
+import { provideIcons } from '@ojiepermana/angular/component/icon';
+
+export const appConfig = {
+  providers: [provideIcons(LucideHouse, LucideSettings)],
+};
+```
+
+```html
+<Icon name="house" [size]="20" />
 ```
 
-For privacy / offline / strict-CSP setups, leave it off and self-host the font in
-your own stylesheet instead.
+Library components register their own fixed icons, so navigation and the theme settings
+drawer work without extra setup. Navigation `item.icon` values are Lucide names you register.
 
 ## SDK schematics
 

package/component/icon/README.md

@@ -1,25 +1,52 @@
 # Icon
 
-`@ojiepermana/angular/component/icon` menyediakan primitive icon berbasis Material Symbols untuk library UI ini.
+`@ojiepermana/angular/component/icon` menyediakan primitive icon berbasis [Lucide](https://lucide.dev/icons/) untuk library UI ini. Setiap ikon adalah SVG dari paket peer `@lucide/angular`, jadi tidak ada font ikon dan tidak ada permintaan jaringan.
+
+```bash
+bun add @lucide/angular
+```
 
 ```ts
-import { IconComponent } from '@ojiepermana/angular/component/icon';
-import { provideUiTheme } from '@ojiepermana/angular/theme/styles';
+import { LucideHouse, LucideSettings } from '@lucide/angular';
+import { IconComponent, provideIcons } from '@ojiepermana/angular/component/icon';
+
+// app.config.ts: daftarkan hanya ikon yang namanya Anda tulis sebagai string.
+export const appConfig = {
+  providers: [provideIcons(LucideHouse, LucideSettings)],
+};
 ```
 
 ```html
-<Icon name="dashboard" [size]="20" class="text-primary" />
+<Icon name="house" [size]="20" class="text-primary" />
+<Icon name="triangle-alert" label="Peringatan" />
 ```
 
-## API Notes
+## API
+
+- `name` menerima nama kebab Lucide, misalnya `layout-dashboard` atau `panel-left-close`. Alias Lucide ikut terdaftar sebagai kunci.
+- `size` (angka piksel atau `'inherit'`) menulis token `--icon-size` di host; `'inherit'` memakai `1em` supaya ikut ukuran font sekitar. Tanpa input, ukuran datang dari token tema.
+- `strokeWidth` (angka) menulis token `--icon-stroke-width` di host. Tanpa input, ketebalan datang dari token tema.
+- `label` memberi nama aksesibel. Tanpa `label` SVG memakai `aria-hidden="true"`; dengan `label` SVG memuat `<title>` dan host memakai `role="img"` plus `aria-label` yang sama.
+- `class` menerima utilitas Tailwind tambahan pada host. Ikon memakai `currentColor`, jadi kelas `text-*` mewarnai garis.
+
+## Token
+
+`--icon-size: 1.5rem` dan `--icon-stroke-width: 2` didefinisikan di `tokens.css` tema. Timpa di CSS untuk satu subtree; input `size` dan `strokeWidth` hanya menimpa kedua token itu pada satu ikon.
+
+## Registrasi ikon
+
+- `provideIcons(...icons)` menerima komponen Lucide (`LucideHouse`) maupun objek `LucideIconData`.
+- Bisa dipanggil di root aplikasi, di `providers` route, dan di `providers` komponen. Setiap level menambah level di atasnya, dan registrasi terdekat menang bila namanya sama.
+- Nama yang tidak terdaftar tidak merender SVG, tidak melempar error, dan menulis satu `console.warn` per nama di dev mode: `[Icon] Ikon "nama" tidak terdaftar. Daftarkan lewat provideIcons().`
+- `IconRegistry` (root) menyediakan `resolve(name)` dan `names()`, daftar nama kanonis terurut untuk galeri.
+- Komponen library yang merender ikon tetap (navigasi, theme settings, layout) mendaftarkannya sendiri; consumer hanya mendaftarkan ikon yang dipakai data aplikasinya, seperti `item.icon` di navigasi.
 
-- `name` menerima nama glyph Material Symbols, misalnya `dashboard` atau `left_panel_close`.
-- `size` mengatur `font-size` dan `line-height` host dalam pixel.
-- `fill`, `weight`, `grade`, dan `opticalSize` diteruskan ke `font-variation-settings`.
-- `class` menerima utilitas Tailwind tambahan pada host.
+## Migrasi dari Material Symbols
 
-## Font Loading
+Rilis ini menghapus Material Symbols (pengecualian tercatat terhadap kebijakan versi spec 0001; lihat spec 0010).
 
-- `IconComponent` akan memastikan stylesheet Material Symbols tersedia saat icon pertama dirender.
-- `provideUiTheme()` juga mem-bootstrap stylesheet yang sama lebih awal pada level aplikasi.
-- Gunakan `provideUiTheme({ icons: { materialSymbols: false } })` bila consumer ingin menonaktifkan preload global.
+1. Pasang peer: `bun add @lucide/angular`.
+2. Ganti nama glyph Material dengan nama Lucide, misalnya `dashboard` menjadi `layout-dashboard`, `home` menjadi `house`, `left_panel_close` menjadi `panel-left-close`.
+3. Daftarkan ikon yang dipakai lewat `provideIcons(...)`.
+4. Hapus `provideMaterialSymbols()` dan opsi `icons` dari `provideUiTheme()`, serta input `fill`, `weight`, `grade`, dan `opticalSize` dari `<Icon>`.
+5. Hapus host `fonts.googleapis.com` dan `fonts.gstatic.com` dari CSP bila hanya dipakai untuk ikon.

package/fesm2022/ojiepermana-angular-chart-area.mjs

@@ -69,7 +69,7 @@ var AreaChart = class AreaChart {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: AreaChart,
 		deps: [],
@@ -77,7 +77,7 @@ var AreaChart = class AreaChart {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: AreaChart,
 		isStandalone: true,
 		selector: "ChartArea",
@@ -294,7 +294,7 @@ var AreaChart = class AreaChart {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: AreaChart,
 	decorators: [{

package/fesm2022/ojiepermana-angular-chart-bar.mjs

@@ -387,7 +387,7 @@ var BarChart = class BarChart {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: BarChart,
 		deps: [],
@@ -395,7 +395,7 @@ var BarChart = class BarChart {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: BarChart,
 		isStandalone: true,
 		selector: "ChartBar",
@@ -609,7 +609,7 @@ var BarChart = class BarChart {
             />
             @if (showValueLabels() && bar.height > 0 && bar.width > 0) {
               <svg:text
-                class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs"
+                class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs-plus"
                 [attr.x]="barLabelX(bar)"
                 [attr.y]="barLabelY(bar)"
                 [attr.text-anchor]="barLabelAnchor(bar)"
@@ -669,7 +669,7 @@ var BarChart = class BarChart {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: BarChart,
 	decorators: [{
@@ -755,7 +755,7 @@ i0.ɵɵngDeclareClassMetadata({
             />
             @if (showValueLabels() && bar.height > 0 && bar.width > 0) {
               <svg:text
-                class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs"
+                class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs-plus"
                 [attr.x]="barLabelX(bar)"
                 [attr.y]="barLabelY(bar)"
                 [attr.text-anchor]="barLabelAnchor(bar)"

package/fesm2022/ojiepermana-angular-chart-core.mjs

@@ -104,7 +104,7 @@ var ChartContext = class ChartContext {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ChartContext,
 		deps: [],
@@ -112,7 +112,7 @@ var ChartContext = class ChartContext {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ChartContext,
 		autoProvided: false
@@ -120,7 +120,7 @@ var ChartContext = class ChartContext {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ChartContext,
 	decorators: [{
@@ -334,7 +334,7 @@ var ChartStyle = class ChartStyle {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ChartStyle,
 		deps: [],
@@ -342,7 +342,7 @@ var ChartStyle = class ChartStyle {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "14.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: ChartStyle,
 		isStandalone: true,
 		selector: "ChartStyle",
@@ -353,7 +353,7 @@ var ChartStyle = class ChartStyle {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ChartStyle,
 	decorators: [{
@@ -413,7 +413,7 @@ var ChartContainer = class ChartContainer {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ChartContainer,
 		deps: [],
@@ -421,7 +421,7 @@ var ChartContainer = class ChartContainer {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.2.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: ChartContainer,
 		isStandalone: true,
 		selector: "Chart",
@@ -478,7 +478,7 @@ var ChartContainer = class ChartContainer {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ChartContainer,
 	decorators: [{
@@ -539,7 +539,7 @@ var ChartDataTable = class ChartDataTable {
 	rowHeaderKey = input(null, ...ngDevMode ? [{ debugName: "rowHeaderKey" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ChartDataTable,
 		deps: [],
@@ -547,7 +547,7 @@ var ChartDataTable = class ChartDataTable {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: ChartDataTable,
 		isStandalone: true,
 		selector: "ChartDataTable",
@@ -611,7 +611,7 @@ var ChartDataTable = class ChartDataTable {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ChartDataTable,
 	decorators: [{
@@ -732,7 +732,7 @@ var ChartRovingFocus = class ChartRovingFocus {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ChartRovingFocus,
 		deps: [],
@@ -740,7 +740,7 @@ var ChartRovingFocus = class ChartRovingFocus {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: ChartRovingFocus,
 		isStandalone: true,
 		selector: "svg[ChartRovingFocus]",
@@ -753,7 +753,7 @@ var ChartRovingFocus = class ChartRovingFocus {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ChartRovingFocus,
 	decorators: [{
@@ -771,7 +771,7 @@ i0.ɵɵngDeclareClassMetadata({
 var ChartMarkFocus = class ChartMarkFocus {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ChartMarkFocus,
 		deps: [],
@@ -779,7 +779,7 @@ var ChartMarkFocus = class ChartMarkFocus {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: ChartMarkFocus,
 		isStandalone: true,
 		selector: "[ChartMarkFocus]",
@@ -789,7 +789,7 @@ var ChartMarkFocus = class ChartMarkFocus {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ChartMarkFocus,
 	decorators: [{
@@ -846,7 +846,7 @@ var CartesianContext = class CartesianContext {
 	categories = signal([], ...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: CartesianContext,
 		deps: [],
@@ -854,7 +854,7 @@ var CartesianContext = class CartesianContext {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: CartesianContext,
 		autoProvided: false
@@ -862,7 +862,7 @@ var CartesianContext = class CartesianContext {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: CartesianContext,
 	decorators: [{
@@ -903,7 +903,7 @@ var CategoricalViewportContext = class CategoricalViewportContext {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: CategoricalViewportContext,
 		deps: [],
@@ -911,7 +911,7 @@ var CategoricalViewportContext = class CategoricalViewportContext {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: CategoricalViewportContext,
 		autoProvided: false
@@ -919,7 +919,7 @@ var CategoricalViewportContext = class CategoricalViewportContext {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: CategoricalViewportContext,
 	decorators: [{
@@ -943,7 +943,7 @@ var ScatterViewportContext = class ScatterViewportContext {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ScatterViewportContext,
 		deps: [],
@@ -951,7 +951,7 @@ var ScatterViewportContext = class ScatterViewportContext {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ScatterViewportContext,
 		autoProvided: false
@@ -959,7 +959,7 @@ var ScatterViewportContext = class ScatterViewportContext {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ScatterViewportContext,
 	decorators: [{
@@ -1202,7 +1202,7 @@ var ChartThemeRadius = class ChartThemeRadius {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ChartThemeRadius,
 		deps: [],
@@ -1210,14 +1210,14 @@ var ChartThemeRadius = class ChartThemeRadius {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ChartThemeRadius
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ChartThemeRadius,
 	decorators: [{ type: Service }],
@@ -1258,7 +1258,7 @@ var ChartThemeSpace = class ChartThemeSpace {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ChartThemeSpace,
 		deps: [],
@@ -1266,14 +1266,14 @@ var ChartThemeSpace = class ChartThemeSpace {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ChartThemeSpace
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ChartThemeSpace,
 	decorators: [{ type: Service }],

package/fesm2022/ojiepermana-angular-chart-line.mjs

@@ -81,7 +81,7 @@ var LineChart = class LineChart {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: LineChart,
 		deps: [],
@@ -89,7 +89,7 @@ var LineChart = class LineChart {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: LineChart,
 		isStandalone: true,
 		selector: "ChartLine",
@@ -256,7 +256,7 @@ var LineChart = class LineChart {
                 />
                 @if (showValueLabels()) {
                   <svg:text
-                    class="chart-line-value pointer-events-none fill-muted-foreground text-2xs"
+                    class="chart-line-value pointer-events-none fill-muted-foreground text-2xs-plus"
                     [attr.x]="labelX(p)"
                     [attr.y]="labelY(p)"
                     [attr.text-anchor]="labelAnchor()"
@@ -317,7 +317,7 @@ var LineChart = class LineChart {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: LineChart,
 	decorators: [{
@@ -384,7 +384,7 @@ i0.ɵɵngDeclareClassMetadata({
                 />
                 @if (showValueLabels()) {
                   <svg:text
-                    class="chart-line-value pointer-events-none fill-muted-foreground text-2xs"
+                    class="chart-line-value pointer-events-none fill-muted-foreground text-2xs-plus"
                     [attr.x]="labelX(p)"
                     [attr.y]="labelY(p)"
                     [attr.text-anchor]="labelAnchor()"

package/fesm2022/ojiepermana-angular-chart-pie.mjs

@@ -105,7 +105,7 @@ var PieChart = class PieChart {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: PieChart,
 		deps: [],
@@ -113,7 +113,7 @@ var PieChart = class PieChart {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: PieChart,
 		isStandalone: true,
 		selector: "ChartPie",
@@ -264,7 +264,7 @@ var PieChart = class PieChart {
           @if (showLabels()) {
             @for (s of layout().slices; track s.seriesKey) {
               <svg:text
-                class="chart-slice-label fill-foreground text-2xs"
+                class="chart-slice-label fill-foreground text-2xs-plus"
                 text-anchor="middle"
                 dominant-baseline="middle"
                 [attr.x]="s.centroid[0] + s.translateX"
@@ -317,7 +317,7 @@ var PieChart = class PieChart {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: PieChart,
 	decorators: [{
@@ -367,7 +367,7 @@ i0.ɵɵngDeclareClassMetadata({
           @if (showLabels()) {
             @for (s of layout().slices; track s.seriesKey) {
               <svg:text
-                class="chart-slice-label fill-foreground text-2xs"
+                class="chart-slice-label fill-foreground text-2xs-plus"
                 text-anchor="middle"
                 dominant-baseline="middle"
                 [attr.x]="s.centroid[0] + s.translateX"