@bitforgehq/ui 0.3.0 → 0.3.2

package/fesm2022/bitforgehq-ui-mobile.mjs

@@ -1,12 +1,12 @@
 import * as i0 from "@angular/core";
 import { Component, DOCUMENT, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, TemplateRef, ViewContainerRef, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, effect, inject, input, linkedSignal, makeEnvironmentProviders, output, provideEnvironmentInitializer, reflectComponentType, signal, untracked, viewChild } from "@angular/core";
 import { Capacitor, SystemBars, SystemBarsStyle } from "@capacitor/core";
+import { BF_COLOR_SCHEME_STORAGE, BF_LABELS, BF_TAB_BAR_CONTROLLER, BF_TAB_LINKS, BfButtonComponent, BfColorSchemeService, BfIconButtonComponent, BfListComponent, BfListItemComponent, BfSpinnerComponent, BfTabBarComponent, ɵcreateMemoryColorSchemeStorage, ɵprovideBfDocumentReset } from "@bitforgehq/ui";
 import { ActivatedRoute, BaseRouteReuseStrategy, ChildrenOutletContexts, NavigationCancel, NavigationEnd, NavigationError, NavigationSkipped, NavigationStart, PRIMARY_OUTLET, RouteReuseStrategy, Router, provideRouter, withComponentInputBinding, withRouterConfig } from "@angular/router";
 import * as core from "@bitforgehq/ui/overlay";
 import { BF_OVERLAY_DATA as BF_OVERLAY_DATA$1, BF_OVERLAY_HOST, BfOverlayRef as BfOverlayRef$1, BfOverlayService as BfOverlayService$1, BfOverlayStack as BfOverlayStack$1, BfToastRef, OVERLAY_DURATION as OVERLAY_DURATION$1, OVERLAY_EASING as OVERLAY_EASING$1, OVERLAY_REDUCED_DURATION, fadeDown as fadeDown$1, fadeOut as fadeOut$1, fadeUp as fadeUp$1, prefersReducedMotion, scaleIn as scaleIn$1, slideDown as slideDown$1, slideUp as slideUp$1, ɵBfToastQueue, ɵwatchPanelHeading } from "@bitforgehq/ui/overlay";
 import { Location, LocationStrategy, NgComponentOutlet, NgTemplateOutlet } from "@angular/common";
 import { combineLatest } from "rxjs";
-import { BF_LABELS, BF_TAB_BAR_CONTROLLER, BF_TAB_LINKS, BfButtonComponent, BfIconButtonComponent, BfListComponent, BfListItemComponent, BfSpinnerComponent, BfTabBarComponent, ɵprovideBfDocumentReset } from "@bitforgehq/ui";
 import { BfIconComponent } from "@bitforgehq/ui/icons";
 import { ArrowLeft, ChevronLeft } from "lucide";
 import { LiveAnnouncer } from "@angular/cdk/a11y";
@@ -22,49 +22,13 @@ const BF_SHELL_DEFAULTS = {
 	maxLivePages: Infinity
 };
 const BF_SHELL_CONFIG = new InjectionToken("BF_SHELL_CONFIG");
-const THEME_KEY = "bf-theme";
 const VIEWPORT_CONTENT = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover";
 const NO_ZOOM_DIRECTIVES = [["maximum-scale", "1"], ["user-scalable", "no"]];
 function toPlatform(platform) {
 	return platform === "ios" || platform === "android" ? platform : "web";
 }
-function createMemoryThemeStorage() {
-	const values = /* @__PURE__ */ new Map();
-	return {
-		getItem: (key) => values.get(key) ?? null,
-		setItem: (key, value) => {
-			values.set(key, String(value));
-		}
-	};
-}
-function browserStorage() {
-	try {
-		return typeof window !== "undefined" && window.localStorage ? window.localStorage : null;
-	} catch {
-		return null;
-	}
-}
-const BF_THEME_STORAGE = new InjectionToken("BF_THEME_STORAGE", {
-	providedIn: "root",
-	factory: () => browserStorage() ?? createMemoryThemeStorage()
-});
-function readStoredTheme(storage) {
-	try {
-		const stored = storage.getItem(THEME_KEY);
-		return stored === "light" || stored === "dark" || stored === "system" ? stored : "system";
-	} catch {
-		return "system";
-	}
-}
-function persistTheme(storage, theme) {
-	try {
-		storage.setItem(THEME_KEY, theme);
-	} catch {}
-}
-function prefersDark() {
-	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-	return window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
+const createMemoryThemeStorage = ɵcreateMemoryColorSchemeStorage;
+const BF_THEME_STORAGE = BF_COLOR_SCHEME_STORAGE;
 function forbidViewportZoom(document) {
 	const meta = document.head.querySelector("meta[name=\"viewport\"]");
 	if (!meta) {
@@ -98,31 +62,20 @@ function webViewMajor(navigator) {
 	const match = /Chrome\/(\d+)/.exec(navigator?.userAgent ?? "");
 	return match ? Number(match[1]) : null;
 }
-function listenToSystemTheme(onChange) {
-	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-	window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => onChange(event.matches));
-}
 var BfPlatformService = class BfPlatformService {
 	document = inject(DOCUMENT);
 	shellConfig = inject(BF_SHELL_CONFIG, { optional: true });
-	storage = inject(BF_THEME_STORAGE);
+	colorScheme = inject(BfColorSchemeService);
 	isNative = Capacitor.isNativePlatform();
 	platform = toPlatform(Capacitor.getPlatform());
 	mode = computed(() => this.platform === "ios" ? "ios" : "md", ...ngDevMode ? [{ debugName: "mode" }] : 	/* istanbul ignore next */ []);
-	theme = signal(readStoredTheme(this.storage), ...ngDevMode ? [{ debugName: "theme" }] : 	/* istanbul ignore next */ []);
-	systemDark = signal(prefersDark(), ...ngDevMode ? [{ debugName: "systemDark" }] : 	/* istanbul ignore next */ []);
-	dark = computed(() => this.theme() === "system" ? this.systemDark() : this.theme() === "dark", ...ngDevMode ? [{ debugName: "dark" }] : 	/* istanbul ignore next */ []);
+	theme = this.colorScheme.scheme;
+	systemDark = this.colorScheme.systemDark;
+	dark = this.colorScheme.dark;
 	constructor() {
-		listenToSystemTheme((matches) => this.systemDark.set(matches));
 		if (this.shellConfig === null) return;
 		if (this.isNative) forbidViewportZoom(this.document);
-		const html = this.document.documentElement;
-		html.classList.toggle("dark", this.dark());
-		persistTheme(this.storage, this.theme());
-		effect(() => {
-			html.classList.toggle("dark", this.dark());
-			persistTheme(this.storage, this.theme());
-		});
+		this.colorScheme.claimDocument();
 		if (this.isNative && this.shellConfig.syncSystemBars !== false) {
 			const major = webViewMajor(this.document.defaultView?.navigator);
 			effect(() => {
@@ -2071,7 +2024,7 @@ var BfBackButtonComponent = class BfBackButtonComponent {
 		dependencies: [{
 			kind: "component",
 			type: BfIconButtonComponent,
-			selector: "bf-icon-button",
+			selector: "bf-icon-button, a[bfIconButton]",
 			inputs: [
 				"variant",
 				"size",
@@ -2087,7 +2040,8 @@ var BfBackButtonComponent = class BfBackButtonComponent {
 			inputs: [
 				"icon",
 				"size",
-				"label"
+				"label",
+				"filled"
 			]
 		}]
 	});
@@ -5191,7 +5145,7 @@ var BfActionSheetComponent = class BfActionSheetComponent {
 				kind: "component",
 				type: BfListComponent,
 				selector: "bf-list",
-				inputs: ["inset"]
+				inputs: ["inset", "divided"]
 			},
 			{
 				kind: "component",
@@ -5228,7 +5182,8 @@ var BfActionSheetComponent = class BfActionSheetComponent {
 				inputs: [
 					"icon",
 					"size",
-					"label"
+					"label",
+					"filled"
 				]
 			}
 		]