@blotch/angular-lynx 22.2.4 → 22.2.5

package/fesm2022/blotch-angular-lynx.mjs

@@ -1787,6 +1787,7 @@ var LynxBlurView = class LynxBlurView extends LynxElementBase {
 	"android-capture-target";
 	"experimental-update-blur-radius";
 	"blur-effect";
+	"blur-material";
 	spacing;
 	"glass-interactive";
 	"glass-tint-color";
@@ -1813,6 +1814,7 @@ var LynxBlurView = class LynxBlurView extends LynxElementBase {
 			"android-capture-target": "android-capture-target",
 			"experimental-update-blur-radius": "experimental-update-blur-radius",
 			"blur-effect": "blur-effect",
+			"blur-material": "blur-material",
 			spacing: "spacing",
 			"glass-interactive": "glass-interactive",
 			"glass-tint-color": "glass-tint-color",
@@ -1839,6 +1841,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"android-capture-target",
 				"experimental-update-blur-radius",
 				"blur-effect",
+				"blur-material",
 				"spacing",
 				"glass-interactive",
 				"glass-tint-color",
@@ -3402,6 +3405,62 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => []
 });
+var LynxAccessibilityTraits = class LynxAccessibilityTraits {
+	lynxAccessibilityTraits = input(...ngDevMode ? [void 0, { debugName: "lynxAccessibilityTraits" }] : /* istanbul ignore next */ []);
+	#element = inject(ElementRef).nativeElement;
+	#added = [];
+	constructor() {
+		effect(() => {
+			const states = this.lynxAccessibilityTraits() ?? {};
+			const on = Object.keys(states).filter((trait) => states[trait]);
+			for (const trait of this.#added) if (!on.includes(trait)) this.#element.setAccessibilityTrait(trait, false);
+			for (const trait of on) this.#element.setAccessibilityTrait(trait, true);
+			this.#added = on;
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LynxAccessibilityTraits,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: LynxAccessibilityTraits,
+		isStandalone: true,
+		selector: "[lynxAccessibilityTraits]",
+		inputs: { lynxAccessibilityTraits: {
+			classPropertyName: "lynxAccessibilityTraits",
+			publicName: "lynxAccessibilityTraits",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: LynxAccessibilityTraits,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[lynxAccessibilityTraits]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { lynxAccessibilityTraits: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "lynxAccessibilityTraits",
+			required: false
+		}]
+	}] }
+});
 const LYNX_ELEMENTS = [
 	LynxView,
 	LynxText,
@@ -3434,7 +3493,8 @@ const LYNX_ELEMENTS = [
 	LynxWebView,
 	LynxCoverView,
 	LynxTitleBarView,
-	LynxRouterLinkActive
+	LynxRouterLinkActive,
+	LynxAccessibilityTraits
 ];
 const LOG_EVENT = "__lynx_log__";
 const logUrl = () => __DEV__ && typeof __DEV_LOG_URL__ !== "undefined" ? __DEV_LOG_URL__ : "";
@@ -4290,12 +4350,71 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ providedIn: "root" }]
 	}]
 });
+const DYNAMIC_COLOR_ROLES = [
+	"primary",
+	"onPrimary",
+	"primaryContainer",
+	"onPrimaryContainer",
+	"inversePrimary",
+	"secondary",
+	"onSecondary",
+	"secondaryContainer",
+	"onSecondaryContainer",
+	"tertiary",
+	"onTertiary",
+	"tertiaryContainer",
+	"onTertiaryContainer",
+	"background",
+	"onBackground",
+	"surface",
+	"onSurface",
+	"surfaceVariant",
+	"onSurfaceVariant",
+	"surfaceDim",
+	"surfaceBright",
+	"surfaceContainerLowest",
+	"surfaceContainerLow",
+	"surfaceContainer",
+	"surfaceContainerHigh",
+	"surfaceContainerHighest",
+	"inverseSurface",
+	"inverseOnSurface",
+	"outline",
+	"outlineVariant"
+];
+const HEX_COLOR = /^#[0-9a-f]{6}$/i;
+const parseScheme = (value) => {
+	if (typeof value !== "object" || value === null) return null;
+	const colors = value;
+	const scheme = {};
+	for (const role of DYNAMIC_COLOR_ROLES) {
+		const color = colors[role];
+		if (typeof color !== "string" || !HEX_COLOR.test(color)) return null;
+		scheme[role] = color;
+	}
+	return scheme;
+};
+const parseDynamicColors = (value) => {
+	if (typeof value !== "object" || value === null) return null;
+	const { light, dark } = value;
+	const lightScheme = parseScheme(light);
+	const darkScheme = parseScheme(dark);
+	return lightScheme && darkScheme ? {
+		light: lightScheme,
+		dark: darkScheme
+	} : null;
+};
+const sameColors = (a, b) => a === b || a !== null && b !== null && DYNAMIC_COLOR_ROLES.every((role) => a.light[role] === b.light[role] && a.dark[role] === b.dark[role]);
 var LynxTheme = class LynxTheme {
 	#globalData = inject(LynxGlobalData);
 	theme = computed(() => {
 		return this.#globalData.globalData()["theme"] ?? "Light";
 	}, ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
 	isDarkMode = computed(() => this.theme() === "Dark", ...ngDevMode ? [{ debugName: "isDarkMode" }] : /* istanbul ignore next */ []);
+	dynamicColors = computed(() => parseDynamicColors(this.#globalData.globalData()["dynamicColors"]), {
+		...ngDevMode ? { debugName: "dynamicColors" } : /* istanbul ignore next */ {},
+		equal: sameColors
+	});
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -4781,7 +4900,7 @@ const isAndroid = () => {
 const createBlurViewElement = (pageId) => {
 	const element = __CreateElement("blur-view", pageId);
 	if (!__WEB__ && isAndroid()) __SetAttribute(element, "android-capture-target", ANDROID_BLUR_CAPTURE_TARGET);
-	if (__WEB__ && __MAIN_THREAD__) import("./blotch-angular-lynx-web-glass-ciDHw7Bw.mjs").then(({ attachWebGlass }) => attachWebGlass(element)).catch(() => {});
+	if (__WEB__ && __MAIN_THREAD__) import("./blotch-angular-lynx-web-glass-zlVeee5K.mjs").then(({ attachWebGlass }) => attachWebGlass(element)).catch(() => {});
 	return element;
 };
 const createCommentElement = (pageId) => {
@@ -5081,6 +5200,7 @@ const withAddedTraits = (own, added) => {
 	for (const trait of added) if (!traits.includes(trait)) traits.push(trait);
 	return traits.join(",");
 };
+const isCustomProperty = (name) => name.startsWith("--");
 const wouldFormCycle = (parent, candidate) => {
 	const candidateId = __GetElementUniqueID(candidate);
 	for (let cur = parent; cur; cur = __GetParent(cur)) if (__GetElementUniqueID(cur) === candidateId) return true;
@@ -5105,6 +5225,10 @@ const flushesBefore = (first, second) => {
 	}
 	return false;
 };
+const isIOS = () => {
+	return ((typeof lynx !== "undefined" ? lynx.SystemInfo : void 0) ?? (typeof SystemInfo !== "undefined" ? SystemInfo : void 0))?.platform === "iOS";
+};
+const insertHidesBlurView = (parent, child) => !__WEB__ && child.tagName === "blur-view" && parent.tagName !== "blur-view" && isIOS();
 const isTextish = (el) => el.tagName === "text" || el.tagName === "raw-text";
 var LynxElement = class {
 	#nativeRef;
@@ -5125,6 +5249,7 @@ var LynxElement = class {
 	#inlineStyleWhole = null;
 	#inlineStyleKeys = /* @__PURE__ */ new Map();
 	#runtimeStyle = "";
+	#customProperties = /* @__PURE__ */ new Map();
 	#ownTraits = null;
 	#addedTraits = [];
 	#listeners = [];
@@ -5137,6 +5262,8 @@ var LynxElement = class {
 	#paintingDead = false;
 	static #pendingRemovals = /* @__PURE__ */ new Set();
 	static #pendingTextNormalization = /* @__PURE__ */ new Set();
+	static #pendingAttributeRemovals = /* @__PURE__ */ new Set();
+	#removedAttributes = /* @__PURE__ */ new Set();
 	static #byNativeId = /* @__PURE__ */ new Map();
 	static #canonicalFor(ref) {
 		return _a.#byNativeId.get(__GetElementUniqueID(ref)) ?? new _a(ref);
@@ -5183,7 +5310,14 @@ var LynxElement = class {
 				this.#ownTraits = value ?? null;
 				value = withAddedTraits(this.#ownTraits, this.#addedTraits);
 			}
-			__SetAttribute(this.element, name, value);
+			if (value == null) {
+				this.#removedAttributes.add(name);
+				_a.#pendingAttributeRemovals.add(this);
+				scheduleSettleFlush();
+			} else {
+				this.#removedAttributes.delete(name);
+				__SetAttribute(this.element, name, value);
+			}
 			if (value == null) this.#attrs.delete(name);
 			else this.#attrs.set(name, value);
 			if (this.tagName === "raw-text" && name === "text") {
@@ -5210,10 +5344,25 @@ var LynxElement = class {
 		this.setAttribute(name, null);
 	}
 	setStyle(key, value) {
+		if (isCustomProperty(key)) {
+			if (value == null || value === "") {
+				this.removeStyle(key);
+				return;
+			}
+			const text = String(value);
+			if (this.#customProperties.get(key) === text) return;
+			this.#customProperties.set(key, text);
+			this.#rewriteInlineStyle();
+			return;
+		}
 		__AddInlineStyle(this.element, key, value);
 		this.#inlineStyleKeys.set(key, value);
 	}
 	removeStyle(key) {
+		if (isCustomProperty(key)) {
+			if (this.#customProperties.delete(key)) this.#rewriteInlineStyle();
+			return;
+		}
 		__AddInlineStyle(this.element, key, null);
 		this.#inlineStyleKeys.delete(key);
 	}
@@ -5222,12 +5371,20 @@ var LynxElement = class {
 		this.#inlineStyleWhole = inlineStyle;
 	}
 	#withRuntimeStyle(inlineStyle) {
-		if (!this.#runtimeStyle) return inlineStyle;
-		return inlineStyle ? `${this.#runtimeStyle}; ${inlineStyle}` : this.#runtimeStyle;
+		if (!this.#runtimeStyle && this.#customProperties.size === 0) return inlineStyle;
+		const variables = [...this.#customProperties].map(([name, value]) => `${name}: ${value}`).join("; ");
+		return [
+			this.#runtimeStyle,
+			inlineStyle?.replace(/[\s;]+$/, ""),
+			variables
+		].filter(Boolean).join("; ");
 	}
 	#setRuntimeStyle(style) {
 		if (style === this.#runtimeStyle) return;
 		this.#runtimeStyle = style;
+		this.#rewriteInlineStyle();
+	}
+	#rewriteInlineStyle() {
 		__SetInlineStyles(this.element, this.#withRuntimeStyle(this.#inlineStyleWhole));
 		for (const [key, value] of this.#inlineStyleKeys) __AddInlineStyle(this.element, key, value);
 	}
@@ -5239,11 +5396,19 @@ var LynxElement = class {
 		if (refChild == null) this.appendChild(newChild);
 		else {
 			if (wouldFormCycle(this.element, newChild.element)) return;
-			__InsertElementBefore(this.element, newChild.element, refChild.element);
+			if (insertHidesBlurView(this, newChild)) this.#appendBefore(newChild, refChild);
+			else __InsertElementBefore(this.element, newChild.element, refChild.element);
 			this.#adoptChild(newChild, refChild);
 			if (isTextish(this) || isTextish(newChild)) _a.#enqueueTextNormalization(newChild);
 		}
 	}
+	#appendBefore(newChild, refChild) {
+		const childId = __GetElementUniqueID(newChild.element);
+		const following = [];
+		for (let sibling = refChild.element; sibling; sibling = __NextElement(sibling)) if (__GetElementUniqueID(sibling) !== childId) following.push(sibling);
+		__AppendElement(this.element, newChild.element);
+		for (const sibling of following) __AppendElement(this.element, sibling);
+	}
 	appendChild(newChild) {
 		if (newChild.isRootPageElement) return;
 		newChild.#cancelPendingRemoval();
@@ -5295,6 +5460,15 @@ var LynxElement = class {
 		}
 		_a.#pendingRemovals.add(this);
 	}
+	static commitPendingAttributeRemovals() {
+		if (_a.#pendingAttributeRemovals.size === 0) return;
+		const elements = [..._a.#pendingAttributeRemovals];
+		_a.#pendingAttributeRemovals.clear();
+		for (const el of elements) {
+			for (const name of el.#removedAttributes) __SetAttribute(el.element, name, null);
+			el.#removedAttributes.clear();
+		}
+	}
 	static commitPendingRemovals() {
 		if (_a.#pendingRemovals.size === 0) return;
 		const items = [..._a.#pendingRemovals];
@@ -5529,6 +5703,9 @@ _a = LynxElement;
 const processPendingRemovals = () => {
 	LynxElement.commitPendingRemovals();
 };
+const processPendingAttributeRemovals = () => {
+	LynxElement.commitPendingAttributeRemovals();
+};
 const processPendingTextNormalization = () => {
 	LynxElement.commitPendingTextNormalization();
 };
@@ -5540,6 +5717,7 @@ const scheduleSettleFlush = () => {
 		settleFlushScheduled = false;
 		if (isInsideChangeDetection()) return;
 		LynxElement.commitPendingRemovals();
+		LynxElement.commitPendingAttributeRemovals();
 		LynxElement.commitPendingTextNormalization();
 		__FlushElementTree();
 	});
@@ -5976,6 +6154,7 @@ var LynxRendererFactory2 = class LynxRendererFactory2 {
 			}
 			/* v8 ignore stop */
 			processPendingRemovals();
+			processPendingAttributeRemovals();
 			processPendingTextNormalization();
 			if (!isFirstRenderPending()) __FlushElementTree();
 			processPendingListUpdates();
@@ -8362,6 +8541,6 @@ const bootstrapOnMainThread = async (rootComponent, options) => {
 	if (__WEB__ && !wasHydrating) setTimeout(() => __FlushElementTree(), 0);
 	return appRef;
 };
-export { BaseGesture, ComposedGesture, ContinuousGesture, FlingDirection, FlingGesture, Gesture, GestureState, GestureStateManager, GestureType, LYNX_ELEMENTS, LYNX_FORM_ACCESSORS, LongPressGesture, LynxAccessibility, LynxAccessibilitySettings, LynxAnimation, LynxBlock, LynxBlurView, LynxCoverView, LynxDevTools, LynxErrorHandler, LynxExposure, LynxFont, LynxFor, LynxFrame, LynxGestureDetector, LynxGlobalData, LynxGlobalExposure, LynxIf, LynxImage, LynxInitData, LynxInlineTruncation, LynxInput, LynxInputValueAccessor, LynxList, LynxListItem, LynxLocale, LynxLocationStrategy, LynxLogger, LynxMainThread, LynxMainThreadEvent, LynxNativeModule, LynxOverlay, LynxPerformance, LynxPlatformLocation, LynxPortal, LynxRefresh, LynxRefreshHeader, LynxResourcePrefetch, LynxRouteReuseStrategy, LynxRouterLinkActive, LynxSafeArea, LynxScrollCoordinator, LynxScrollCoordinatorHeader, LynxScrollCoordinatorSlot, LynxScrollCoordinatorSlotDrag, LynxScrollCoordinatorToolbar, LynxScrollView, LynxSessionStorage, LynxSvg, LynxSystemInfo, LynxText, LynxTextMeasure, LynxTextarea, LynxTextareaValueAccessor, LynxTheme, LynxTitleBarView, LynxTransition, LynxTransitionGroup, LynxVideo, LynxView, LynxViewPager, LynxViewPagerItem, LynxWebView, MainThreadElement, MainThreadRef, PanGesture, PinchGesture, PortalRef, RotationGesture, SAFE_AREA_INSET_BOTTOM, SAFE_AREA_INSET_LEFT, SAFE_AREA_INSET_RIGHT, SAFE_AREA_INSET_TOP, TapGesture, backgroundFn, bootstrapApplication, createMainThreadRef, getLynxAppLocale, loadLazyBundle, mainThreadFn, provideLocale, provideRenderer, provideRouter, registerDataProcessors, ɵhmrAccept, ɵstartBackgroundThread };
+export { BaseGesture, ComposedGesture, ContinuousGesture, DYNAMIC_COLOR_ROLES, FlingDirection, FlingGesture, Gesture, GestureState, GestureStateManager, GestureType, LYNX_ELEMENTS, LYNX_FORM_ACCESSORS, LongPressGesture, LynxAccessibility, LynxAccessibilitySettings, LynxAccessibilityTraits, LynxAnimation, LynxBlock, LynxBlurView, LynxCoverView, LynxDevTools, LynxErrorHandler, LynxExposure, LynxFont, LynxFor, LynxFrame, LynxGestureDetector, LynxGlobalData, LynxGlobalExposure, LynxIf, LynxImage, LynxInitData, LynxInlineTruncation, LynxInput, LynxInputValueAccessor, LynxList, LynxListItem, LynxLocale, LynxLocationStrategy, LynxLogger, LynxMainThread, LynxMainThreadEvent, LynxNativeModule, LynxOverlay, LynxPerformance, LynxPlatformLocation, LynxPortal, LynxRefresh, LynxRefreshHeader, LynxResourcePrefetch, LynxRouteReuseStrategy, LynxRouterLinkActive, LynxSafeArea, LynxScrollCoordinator, LynxScrollCoordinatorHeader, LynxScrollCoordinatorSlot, LynxScrollCoordinatorSlotDrag, LynxScrollCoordinatorToolbar, LynxScrollView, LynxSessionStorage, LynxSvg, LynxSystemInfo, LynxText, LynxTextMeasure, LynxTextarea, LynxTextareaValueAccessor, LynxTheme, LynxTitleBarView, LynxTransition, LynxTransitionGroup, LynxVideo, LynxView, LynxViewPager, LynxViewPagerItem, LynxWebView, MainThreadElement, MainThreadRef, PanGesture, PinchGesture, PortalRef, RotationGesture, SAFE_AREA_INSET_BOTTOM, SAFE_AREA_INSET_LEFT, SAFE_AREA_INSET_RIGHT, SAFE_AREA_INSET_TOP, TapGesture, backgroundFn, bootstrapApplication, createMainThreadRef, getLynxAppLocale, loadLazyBundle, mainThreadFn, provideLocale, provideRenderer, provideRouter, registerDataProcessors, ɵhmrAccept, ɵstartBackgroundThread };
 
 //# sourceMappingURL=blotch-angular-lynx.mjs.map