@ojiepermana/angular 22.1.14 → 22.2.1

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

@@ -1,143 +1,244 @@
-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';
-
-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.6", ngImport: i0, type: MaterialSymbolsService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.6", ngImport: i0, type: MaterialSymbolsService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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. */
+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);
+	}
+	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);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: MaterialSymbolsService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: MaterialSymbolsService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: MaterialSymbolsService,
+	decorators: [{ type: Service }]
+});
 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.6", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", 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.6", 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' });
- */
+var IconComponent = class IconComponent {
+	materialSymbols = inject(MaterialSymbolsService);
+	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(() => {
+		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 */ []);
+	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;
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.materialSymbols.ensureLoaded();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: IconComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		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.2.2",
+	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
+			}]
+		}]
+	}
+});
 function provideMaterialSymbols(config = {}) {
-    return makeEnvironmentProviders([
-        { provide: MATERIAL_SYMBOLS_CONFIG, useValue: config },
-        provideEnvironmentInitializer(() => inject(MaterialSymbolsService).ensureLoaded()),
-    ]);
+	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 };
+export { IconComponent, MATERIAL_SYMBOLS_CONFIG, MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_HREF, MATERIAL_SYMBOLS_FONT_ID, MaterialSymbolsService, provideMaterialSymbols };