primeng 22.1.2 → 22.1.3

package/fesm2022/primeng-basecomponent.mjs

@@ -1,17 +1,19 @@
 import { DOCUMENT, isPlatformServer } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectorRef, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, PLATFORM_ID, Renderer2, computed, effect, inject, input, isSignal, signal } from "@angular/core";
-import { Theme, ThemeService } from "@primeuix/styled";
-import { cn, getKeyValue, isArray, isFunction, isNotEmpty, isString, mergeProps, resolve, toFlatCase, uuid } from "@primeuix/utils";
+import { ChangeDetectorRef, Directive, ElementRef, Injectable, InjectionToken, Injector, PLATFORM_ID, Renderer2, computed, effect, inject, input, isSignal, signal } from "@angular/core";
+import { cn, getKeyValue, isArray, isFunction, isNotEmpty, isString, mergeProps, resolve, toFlatCase } from "@primeuix/utils";
 import { Base, BaseStyle } from "primeng/base";
 import { PrimeNG } from "primeng/config";
 import { showInvalidLicenseBanner } from "primeng/license";
-import { UseStyle } from "primeng/usestyle";
+import { blockBodyScroll, unblockBodyScroll } from "primeng/dom";
+import { UseId } from "primeng/useid";
+import { StyleScope } from "primeng/usestyle";
+import { markInstance } from "primeng/utils";
 var BaseComponentStyle = class BaseComponentStyle extends BaseStyle {
 	name = "common";
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: BaseComponentStyle,
 		deps: null,
@@ -19,7 +21,7 @@ var BaseComponentStyle = class BaseComponentStyle extends BaseStyle {
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: BaseComponentStyle,
 		providedIn: "root"
@@ -27,7 +29,7 @@ var BaseComponentStyle = class BaseComponentStyle extends BaseStyle {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: BaseComponentStyle,
 	decorators: [{
@@ -50,16 +52,20 @@ var BaseComponent = class BaseComponent {
 	}) ?? void 0;
 	baseComponentStyle = inject(BaseComponentStyle);
 	baseStyle = inject(BaseStyle);
+	$styleScope = inject(StyleScope);
 	scopedStyleEl;
+	_scopedStyleName;
 	parent = this.$params.parent;
 	cn = cn;
 	_themeScopedListener;
+	_instanceStyles;
 	themeChangeListenerMap = /* @__PURE__ */ new Map();
 	dt = input(...ngDevMode ? [void 0, { debugName: "dt" }] : /* istanbul ignore next */ []);
 	unstyled = input(...ngDevMode ? [void 0, { debugName: "unstyled" }] : /* istanbul ignore next */ []);
 	pt = input(...ngDevMode ? [void 0, { debugName: "pt" }] : /* istanbul ignore next */ []);
 	ptOptions = input(...ngDevMode ? [void 0, { debugName: "ptOptions" }] : /* istanbul ignore next */ []);
-	$attrSelector = uuid("pc");
+	$useId = inject(UseId);
+	$attrSelector = this.$useId.next("pc");
 	get $name() {
 		return this["componentName"] || "UnknownComponent";
 	}
@@ -115,7 +121,6 @@ var BaseComponent = class BaseComponent {
 	onAfterViewChecked() {}
 	onDestroy() {}
 	constructor() {
-		this._shareStylesWithShadowRoot();
 		effect((onCleanup) => {
 			if (this.document && !isPlatformServer(this.platformId)) {
 				if (this.dt()) {
@@ -144,8 +149,11 @@ var BaseComponent = class BaseComponent {
 	ngOnInit() {
 		this._$paramsCache = void 0;
 		this._$styleCache = void 0;
-		this._loadCoreStyles();
-		this._loadStyles();
+		this.$styleScope.batch(() => {
+			this._loadCoreStyles();
+			this._loadStyles();
+			this.$styleScope.connect(this.$el, this.injector);
+		});
 		this.onInit();
 		this._hook("onInit");
 	}
@@ -166,7 +174,7 @@ var BaseComponent = class BaseComponent {
 		this._hook("onAfterContentChecked");
 	}
 	ngAfterViewInit() {
-		this.$el?.setAttribute(this.$attrSelector, "");
+		this.$markInstance(this.$el);
 		if (this.config?.verified() === false) showInvalidLicenseBanner();
 		this.onAfterViewInit();
 		this._hook("onAfterViewInit");
@@ -179,6 +187,10 @@ var BaseComponent = class BaseComponent {
 		this._removeThemeListeners();
 		this._unloadScopedThemeStyles();
 		this.onDestroy();
+		if (this.$styleScope.isolated) {
+			this._instanceStyles?.forEach((name) => this.$styleScope.removeInstanceStyle(name));
+			this._instanceStyles = void 0;
+		}
 		this._hook("onDestroy");
 	}
 	_mergeProps(fn, ...args) {
@@ -201,11 +213,17 @@ var BaseComponent = class BaseComponent {
 		selfHook?.(...args);
 		defaultHook?.(...args);
 	}
+	get $theme() {
+		return this.$styleScope.theme;
+	}
+	get $base() {
+		return this.$styleScope.coreStyleNames ?? Base;
+	}
 	_load() {
-		if (!Base.isStyleNameLoaded("base")) {
+		if (!this.$base.isStyleNameLoaded("base")) {
 			this.baseStyle.loadBaseCSS(this.$styleOptions);
 			this._loadGlobalStyles();
-			Base.setLoadedStyleName("base");
+			this.$base.setLoadedStyleName("base");
 		}
 		this._loadThemeStyles();
 	}
@@ -213,97 +231,99 @@ var BaseComponent = class BaseComponent {
 		this._load();
 		this._themeChangeListener("_load", () => this._load());
 	}
-	_shareStylesWithShadowRoot() {
-		if (isPlatformServer(this.platformId)) return;
-		const rootNode = this.$el?.getRootNode?.();
-		if (typeof ShadowRoot === "undefined" || !(rootNode instanceof ShadowRoot)) return;
-		inject(DestroyRef).onDestroy(inject(UseStyle).addShadowRoot(rootNode));
-	}
 	_loadGlobalStyles() {
 		const globalCSS = this._useGlobalPT(this._getOptionValue, "global.css", this.$params);
 		if (isNotEmpty(globalCSS)) this.baseStyle.load(globalCSS, {
 			name: "global",
 			...this.$styleOptions
-		});
+		}, (computedStyle) => this.$styleScope.scopeCSS(computedStyle));
 	}
 	_loadCoreStyles() {
-		if (!Base.isStyleNameLoaded(this.$style?.name) && this.$style?.name) {
+		if (!this.$base.isStyleNameLoaded(this.$style?.name) && this.$style?.name) {
 			this.baseComponentStyle.loadCSS(this.$styleOptions);
 			this.$style.loadCSS(this.$styleOptions);
-			Base.setLoadedStyleName(this.$style.name);
+			this.$base.setLoadedStyleName(this.$style.name);
 		}
 	}
 	_loadThemeStyles() {
 		if (this.$unstyled() || this.config?.theme() === "none") return;
-		if (!Theme.isStyleNameLoaded("common")) {
+		if (!this.$theme.isStyleNameLoaded("common")) {
 			const { primitive, semantic, global, style } = this.$style?.getCommonTheme?.() || {};
 			this.baseStyle.load(primitive?.css, {
 				name: "primitive-variables",
 				variables: true,
+				raw: true,
 				...this.$styleOptions
 			});
 			this.baseStyle.load(semantic?.css, {
 				name: "semantic-variables",
 				variables: true,
+				raw: true,
 				...this.$styleOptions
 			});
 			this.baseStyle.load(global?.css, {
 				name: "global-variables",
 				variables: true,
+				raw: true,
 				...this.$styleOptions
 			});
 			this.baseStyle.loadBaseStyle({
 				name: "global-style",
 				...this.$styleOptions
 			}, style);
-			Theme.setLoadedStyleName("common");
+			this.$theme.setLoadedStyleName("common");
 		}
-		if (!Theme.isStyleNameLoaded(this.$style?.name) && this.$style?.name) {
+		if (!this.$theme.isStyleNameLoaded(this.$style?.name) && this.$style?.name) {
 			const { css, style } = this.$style?.getComponentTheme?.() || {};
-			this.$style?.load(css, {
+			this.baseStyle.load(css, {
 				name: `${this.$style?.name}-variables`,
 				variables: true,
+				raw: true,
 				...this.$styleOptions
 			});
 			this.$style?.loadStyle({
 				name: `${this.$style?.name}-style`,
 				...this.$styleOptions
 			}, style);
-			Theme.setLoadedStyleName(this.$style?.name);
+			this.$theme.setLoadedStyleName(this.$style?.name);
 		}
-		if (!Theme.isStyleNameLoaded("layer-order")) {
+		if (!this.$theme.isStyleNameLoaded("layer-order")) {
 			const layerOrder = this.$style?.getLayerOrderThemeCSS?.();
 			this.baseStyle.load(layerOrder, {
 				name: "layer-order",
 				first: true,
 				...this.$styleOptions
 			});
-			Theme.setLoadedStyleName("layer-order");
+			this.$theme.setLoadedStyleName("layer-order");
 		}
 	}
 	_loadScopedThemeStyles(preset) {
 		if (this.config?.theme()?.options?.cssVariables === false && this.$style?.name) {
-			if (Theme.addScopedToken({ [this.$style.name]: preset })) {
-				Theme.deleteLoadedStyleName(this.$style.name);
+			if (this.$theme.addScopedToken({ [this.$style.name]: preset })) {
+				this.$theme.deleteLoadedStyleName(this.$style.name);
 				this._loadThemeStyles();
 			}
 		}
-		const { css } = this.$style?.getPresetTheme?.(preset, `[${this.$attrSelector}]`) || {};
-		const scopedStyle = this.$style?.load(css, {
+		const { css } = this.$style?.getPresetTheme?.(preset, this.$instanceSelector) || {};
+		const scopedStyle = this.baseStyle.load(css, {
 			name: `${this.$attrSelector}-${this.$style?.name}`,
+			raw: true,
 			...this.$styleOptions
 		});
+		this._scopedStyleName = scopedStyle?.name ?? this._scopedStyleName;
 		this.scopedStyleEl = scopedStyle?.el;
 	}
 	_unloadScopedThemeStyles() {
-		this.baseStyle.useStyle.remove(`${this.$attrSelector}-${this.$style?.name}`);
+		if (this._scopedStyleName === void 0) return;
+		this.baseStyle.useStyle.remove(this._scopedStyleName, this.scopedStyleEl);
+		this._scopedStyleName = void 0;
+		this.scopedStyleEl = void 0;
 	}
 	_themeChangeListener(id, callback = () => {}) {
 		this._offThemeChangeListener(id);
-		Base.clearLoadedStyleNames();
 		const hold = callback.bind(this);
 		this.themeChangeListenerMap.set(id, hold);
-		ThemeService.on("theme:change", hold);
+		this.$styleScope.service.on("theme:change", hold);
 	}
 	_removeThemeListeners() {
 		this._offThemeChangeListener("_themeScopedListener");
@@ -312,7 +332,7 @@ var BaseComponent = class BaseComponent {
 	}
 	_offThemeChangeListener(id) {
 		if (this.themeChangeListenerMap.has(id)) {
-			ThemeService.off("theme:change", this.themeChangeListenerMap.get(id));
+			this.$styleScope.service.off("theme:change", this.themeChangeListenerMap.get(id));
 			this.themeChangeListenerMap.delete(id);
 		}
 	}
@@ -341,7 +361,8 @@ var BaseComponent = class BaseComponent {
 			...key === "root" && {
 				[`${datasetPrefix}name`]: toFlatCase(isExtended ? this.$pt()?.["data-pc-section"] : this.$name),
 				...isExtended && { [`${datasetPrefix}extend`]: toFlatCase(this.$name) },
-				[`${this.$attrSelector}`]: ""
+				"data-pc-id": this.$attrSelector,
+				[this.$attrSelector]: ""
 			},
 			[`${datasetPrefix}section`]: toFlatCase(key.includes(".") ? key.split(".").at(-1) ?? "" : key)
 		};
@@ -404,11 +425,33 @@ var BaseComponent = class BaseComponent {
 		}, false);
 	}
 	cx(key, params = {}) {
-		return !this.$unstyled() ? cn(this._getOptionValue(this.$style.classes, key, {
+		return !this.$unstyled() ? this.$styleScope.pcn(this._getOptionValue(this.$style.classes, key, {
 			...this.$params,
 			...params
 		})) : void 0;
 	}
+	pcn(...classes) {
+		return this.$styleScope.pcn(...classes);
+	}
+	psel(selector) {
+		return this.$styleScope.psel(selector);
+	}
+	get $bodyScrollOptions() {
+		if (!this.$styleScope.isolated && this.$styleScope.classPrefix() === "p") return void 0;
+		return {
+			className: this.pcn("p-overflow-hidden"),
+			variableName: this.$styleScope.resolvers.$dt("scrollbar.width").name
+		};
+	}
+	$blockBodyScroll() {
+		const options = this.$bodyScrollOptions;
+		blockBodyScroll(options);
+		this.$styleScope.lockBodyScroll(options);
+	}
+	$unblockBodyScroll() {
+		unblockBodyScroll(this.$bodyScrollOptions);
+		this.$styleScope.unlockBodyScroll();
+	}
 	sx(key = "", when = true, params = {}) {
 		if (when) {
 			const self = this._getOptionValue(this.$style.inlineStyles, key, {
@@ -424,13 +467,35 @@ var BaseComponent = class BaseComponent {
 			};
 		}
 	}
+	$markInstance(el) {
+		markInstance(el, this.$attrSelector);
+	}
+	get $instanceSelector() {
+		return `[data-pc-id~="${this.$attrSelector}"]`;
+	}
+	$keyedId(id) {
+		return this.$styleScope.keyedId(id);
+	}
+	$isolatedStyle(name, css) {
+		const id = `${this.$attrSelector}-${name}`;
+		if (css === null) {
+			this.$styleScope.removeInstanceStyle(id);
+			this._instanceStyles?.delete(id);
+			return;
+		}
+		this.$styleScope.setInstanceStyle(id, css, this.config?.csp()?.nonce);
+		(this._instanceStyles ??= /* @__PURE__ */ new Set()).add(id);
+	}
+	$overlayParent(target, overlay) {
+		return this.$styleScope.overlayParent(target, overlay);
+	}
 	translate(key, subKey) {
 		const value = this.config.getTranslation(key);
 		return subKey ? value?.[subKey] : value;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: BaseComponent,
 		deps: [],
@@ -438,7 +503,7 @@ var BaseComponent = class BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: BaseComponent,
 		isStandalone: true,
 		inputs: {
@@ -478,7 +543,7 @@ var BaseComponent = class BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: BaseComponent,
 	decorators: [{
@@ -526,4 +591,3 @@ i0.ɵɵngDeclareClassMetadata({
 });
 export { BaseComponent, BaseComponentStyle, PARENT_INSTANCE };
 
-//# sourceMappingURL=primeng-basecomponent.mjs.map

package/fesm2022/primeng-baseeditableholder.mjs

@@ -38,7 +38,7 @@ var BaseEditableHolder = class BaseEditableHolder extends BaseModelHolder {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: BaseEditableHolder,
 		deps: null,
@@ -46,7 +46,7 @@ var BaseEditableHolder = class BaseEditableHolder extends BaseModelHolder {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: BaseEditableHolder,
 		isStandalone: true,
 		inputs: {
@@ -85,7 +85,7 @@ var BaseEditableHolder = class BaseEditableHolder extends BaseModelHolder {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: BaseEditableHolder,
 	decorators: [{
@@ -129,4 +129,3 @@ i0.ɵɵngDeclareClassMetadata({
 });
 export { BaseEditableHolder };
 
-//# sourceMappingURL=primeng-baseeditableholder.mjs.map

package/fesm2022/primeng-baseinput.mjs

@@ -31,7 +31,7 @@ var BaseInput = class BaseInput extends BaseEditableHolder {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: BaseInput,
 		deps: null,
@@ -39,7 +39,7 @@ var BaseInput = class BaseInput extends BaseEditableHolder {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: BaseInput,
 		isStandalone: true,
 		inputs: {
@@ -120,7 +120,7 @@ var BaseInput = class BaseInput extends BaseEditableHolder {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: BaseInput,
 	decorators: [{
@@ -212,4 +212,3 @@ i0.ɵɵngDeclareClassMetadata({
 });
 export { BaseInput };
 
-//# sourceMappingURL=primeng-baseinput.mjs.map

package/fesm2022/primeng-basemodelholder.mjs

@@ -10,7 +10,7 @@ var BaseModelHolder = class BaseModelHolder extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: BaseModelHolder,
 		deps: null,
@@ -18,7 +18,7 @@ var BaseModelHolder = class BaseModelHolder extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: BaseModelHolder,
 		isStandalone: true,
 		usesInheritance: true,
@@ -27,7 +27,7 @@ var BaseModelHolder = class BaseModelHolder extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: BaseModelHolder,
 	decorators: [{
@@ -37,4 +37,3 @@ i0.ɵɵngDeclareClassMetadata({
 });
 export { BaseModelHolder };
 
-//# sourceMappingURL=primeng-basemodelholder.mjs.map

package/fesm2022/primeng-bind.mjs

@@ -2,6 +2,7 @@ import * as i0 from "@angular/core";
 import { Directive, ElementRef, NgModule, Renderer2, SecurityContext, computed, effect, inject, input, signal } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
 import { cn, equals } from "@primeuix/utils";
+import { markInstance } from "primeng/utils";
 const SANITIZED_SINKS = {
 	innerhtml: SecurityContext.HTML,
 	srcdoc: SecurityContext.HTML,
@@ -44,7 +45,8 @@ var Bind = class Bind {
 					const safe = this.sanitizer.sanitize(SANITIZED_SINKS[normalizedKey], value.toString()) ?? "";
 					this.renderer.setAttribute(this.el.nativeElement, key, safe);
 					if (key in this.el.nativeElement) this.el.nativeElement[key] = safe;
-				} else {
+				} else if (key === "data-pc-id") markInstance(this.el.nativeElement, value.toString());
+				else {
 					this.renderer.setAttribute(this.el.nativeElement, key, value.toString());
 					if (key in this.el.nativeElement) this.el.nativeElement[key] = value;
 				}
@@ -63,7 +65,7 @@ var Bind = class Bind {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: Bind,
 		deps: [],
@@ -71,7 +73,7 @@ var Bind = class Bind {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: Bind,
 		isStandalone: true,
 		selector: "[pBind]",
@@ -91,7 +93,7 @@ var Bind = class Bind {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: Bind,
 	decorators: [{
@@ -118,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({
 var BindModule = class BindModule {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: BindModule,
 		deps: [],
@@ -126,7 +128,7 @@ var BindModule = class BindModule {
 	});
 	static ɵmod = i0.ɵɵngDeclareNgModule({
 		minVersion: "14.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: BindModule,
 		imports: [Bind],
@@ -134,14 +136,14 @@ var BindModule = class BindModule {
 	});
 	static ɵinj = i0.ɵɵngDeclareInjector({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: BindModule
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: BindModule,
 	decorators: [{
@@ -154,4 +156,3 @@ i0.ɵɵngDeclareClassMetadata({
 });
 export { Bind, BindModule };
 
-//# sourceMappingURL=primeng-bind.mjs.map