@filip.mazev/blocks 1.4.14 → 1.4.16

package/fesm2022/filip.mazev-blocks-core.mjs

@@ -1,11 +1,12 @@
 import * as i0 from "@angular/core";
-import { DOCUMENT, DestroyRef, Directive, Injectable, InjectionToken, NgZone, PLATFORM_ID, computed, effect, inject, input, isDevMode, signal } from "@angular/core";
+import { DOCUMENT, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, NgZone, PLATFORM_ID, afterNextRender, booleanAttribute, computed, effect, inject, input, isDevMode, signal } from "@angular/core";
 import { DOCUMENT as DOCUMENT$1, isPlatformBrowser } from "@angular/common";
 import { fromEvent } from "rxjs";
 import { debounceTime, distinctUntilChanged, map } from "rxjs/operators";
-import { toObservable } from "@angular/core/rxjs-interop";
+import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
 import { configureAppearance } from "@filip.mazev/blocks/effects/runtime";
 import { ConnectionPositionPair, FlexibleConnectedPositionStrategy, Overlay } from "@angular/cdk/overlay";
+import { FocusMonitor } from "@angular/cdk/a11y";
 import { NgControl, Validators } from "@angular/forms";
 var DesktopOS;
 (function(DesktopOS) {
@@ -348,26 +349,18 @@ const DEFAULT_APPEARANCE_CONFIG = Object.freeze({
 	quality: "auto",
 	reducedTransparency: false
 });
-const LEGACY_THEME_IDS = {
-	white: "graphite-sky-blue",
-	blue: "azure-coral",
-	purple: "violet-teal",
-	orange: "tangerine-indigo",
-	red: "scarlet-cyan",
-	green: "lime-violet"
-};
 const THEME_PALETTES = [
 	{
-		id: "graphite-sky-blue",
-		label: "Graphite / Sky Blue",
-		className: "theme-graphite-sky-blue",
-		colors: ["#525252", "#38bdf8"]
+		id: "carbon-cobalt",
+		label: "Carbon / Cobalt",
+		className: "theme-carbon-cobalt",
+		colors: ["#292a2d", "#356fe8"]
 	},
 	{
-		id: "azure-coral",
-		label: "Azure / Coral",
-		className: "theme-azure-coral",
-		colors: ["#217eff", "#f87763"]
+		id: "azure-ember",
+		label: "Azure / Ember",
+		className: "theme-azure-ember",
+		colors: ["#217eff", "#d85a1a"]
 	},
 	{
 		id: "violet-teal",
@@ -382,10 +375,10 @@ const THEME_PALETTES = [
 		colors: ["#ff6900", "#4f78f5"]
 	},
 	{
-		id: "scarlet-cyan",
-		label: "Scarlet / Cyan",
-		className: "theme-scarlet-cyan",
-		colors: ["#e3241b", "#0891b2"]
+		id: "brick-rose-cyan",
+		label: "Brick Rose / Cyan",
+		className: "theme-brick-rose-cyan",
+		colors: ["#b64a50", "#0891b2"]
 	},
 	{
 		id: "lime-violet",
@@ -401,9 +394,7 @@ const THEME_PALETTES = [
 	}
 ];
 function resolveThemeId(value) {
-	const palette = THEME_PALETTES.find((item) => item.id === value);
-	if (palette) return palette.id;
-	if (value && Object.prototype.hasOwnProperty.call(LEGACY_THEME_IDS, value)) return LEGACY_THEME_IDS[value];
+	return THEME_PALETTES.find((item) => item.id === value)?.id;
 }
 var BxA11yService = class BxA11yService {
 	document = inject(DOCUMENT$1);
@@ -477,7 +468,7 @@ var ThemingService = class ThemingService {
 	_appearance = signal({ ...DEFAULT_APPEARANCE_CONFIG }, ...ngDevMode ? [{ debugName: "_appearance" }] : /* istanbul ignore next */ []);
 	appearance = this._appearance.asReadonly();
 	palettes = THEME_PALETTES;
-	_palette = signal("graphite-sky-blue", ...ngDevMode ? [{ debugName: "_palette" }] : /* istanbul ignore next */ []);
+	_palette = signal("carbon-cobalt", ...ngDevMode ? [{ debugName: "_palette" }] : /* istanbul ignore next */ []);
 	palette = this._palette.asReadonly();
 	paletteLabel = computed(() => this.palettes.find((item) => item.id === this.palette())?.label ?? this.palettes[0].label, ...ngDevMode ? [{ debugName: "paletteLabel" }] : /* istanbul ignore next */ []);
 	_highContrast = signal(false, ...ngDevMode ? [{ debugName: "_highContrast" }] : /* istanbul ignore next */ []);
@@ -505,7 +496,7 @@ var ThemingService = class ThemingService {
 			this.restoreAppearance();
 			const palette = this.readStored("theme-palette");
 			const storedHighContrast = this.readStored("theme-high-contrast");
-			this.setPalette(resolveThemeId(palette) ?? "graphite-sky-blue");
+			this.setPalette(resolveThemeId(palette) ?? "carbon-cobalt");
 			this.setHighContrast(storedHighContrast === null ? palette === "high-contrast" : storedHighContrast === "true");
 			this.appearanceController = configureAppearance(this.document.documentElement, {
 				...this.appearance(),
@@ -527,7 +518,6 @@ var ThemingService = class ThemingService {
 		const id = resolveThemeId(palette);
 		if (!id) return;
 		this._palette.set(id);
-		for (const legacy of Object.keys(LEGACY_THEME_IDS)) this.document.documentElement.classList.remove(`theme-${legacy}`);
 		for (const item of this.palettes) this.document.documentElement.classList.toggle(item.className, item.id === id);
 		if (this.isBrowser) this.writeStored("theme-palette", id);
 	}
@@ -764,14 +754,13 @@ i0.ɵɵngDeclareClassMetadata({
 	}]
 });
 var BxBaseControl = class BxBaseControl {
-	isFieldRequired = computed(() => {
-		if (this.required && this.required()) return true;
-		const control = this.ngControl?.control;
-		return control?.hasValidator ? control.hasValidator(Validators.required) : false;
-	}, ...ngDevMode ? [{ debugName: "isFieldRequired" }] : /* istanbul ignore next */ []);
+	focusMonitor = inject(FocusMonitor);
+	focusElement = inject(ElementRef).nativeElement;
+	destroyRef = inject(DestroyRef);
 	internalValue = signal(null, ...ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []);
 	isTouched = signal(false, ...ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []);
 	isDisabled = signal(false, ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	keyboardFocused = signal(false, ...ngDevMode ? [{ debugName: "keyboardFocused" }] : /* istanbul ignore next */ []);
 	ngControl = inject(NgControl, {
 		optional: true,
 		self: true
@@ -783,18 +772,31 @@ var BxBaseControl = class BxBaseControl {
 	ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 	errorMessages = input({}, ...ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []);
 	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readOnly = input(false, {
+		...ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	isReadonly = computed(() => this.readonly() || this.readOnly(), ...ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []);
 	loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 	onChange = () => {};
 	onTouched = () => {};
 	constructor() {
+		afterNextRender(() => {
+			this.focusMonitor.monitor(this.focusElement, true).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((origin) => this.keyboardFocused.set(origin === "keyboard"));
+			this.destroyRef.onDestroy(() => this.focusMonitor.stopMonitoring(this.focusElement));
+		});
+		effect(() => {
+			this.isDisabled.set(this.disabled() || this.ngControl?.disabled === true);
+		});
 		if (this.ngControl) this.ngControl.valueAccessor = this;
 	}
 	ngOnInit() {
 		this.isDisabled.set(this.disabled() || this.ngControl?.disabled === true);
-		if (isDevMode() && this.ngControl?.control?.validator) {
-			if (!(Object.keys(this.errorMessages()).length > 0)) console.error(`[Blocks UI Strict Mode] The form control for this field has validators, but the [errorMessages] input is empty. You must provide error messages for all applied validators.`);
-		}
 	}
 	writeValue(value) {
 		this.internalValue.set(value);
@@ -809,15 +811,20 @@ var BxBaseControl = class BxBaseControl {
 		this.isDisabled.set(isDisabled);
 	}
 	updateValue(value) {
-		if (this.isDisabled()) return;
+		if (this.isDisabled() || this.isReadonly()) return;
 		this.internalValue.set(value);
 		this.onChange(value);
 	}
 	markAsTouched() {
-		if (!this.isTouched()) {
-			this.isTouched.set(true);
-			this.onTouched();
-		}
+		this.isTouched.set(true);
+		this.onTouched();
+	}
+	onControlPointerDown() {
+		if (this.isReadonly()) this.keyboardFocused.set(false);
+	}
+	isFieldRequired() {
+		const control = this.ngControl?.control;
+		return this.required() || !!control?.hasValidator?.(Validators.required) || !!control?.hasValidator?.(Validators.requiredTrue);
 	}
 	get errorMessage() {
 		if (this.ngControl?.invalid && (this.ngControl.touched || this.ngControl.dirty)) {
@@ -826,7 +833,9 @@ var BxBaseControl = class BxBaseControl {
 			const firstKey = Object.keys(errors)[0];
 			const customErrorMap = this.errorMessages();
 			if (customErrorMap && customErrorMap[firstKey]) return customErrorMap[firstKey];
-			if (typeof errors[firstKey] === "string") return errors[firstKey];
+			const error = errors[firstKey];
+			if (typeof error === "string") return error;
+			if (error && typeof error === "object" && "message" in error && typeof error.message === "string") return error.message;
 			if (isDevMode()) console.error(`[Blocks UI Strict Mode] Validation failed for key '${firstKey}', but no message was provided in [errorMessages].`);
 			return `[Missing error message: ${firstKey}]`;
 		}
@@ -894,6 +903,20 @@ var BxBaseControl = class BxBaseControl {
 				isRequired: false,
 				transformFunction: null
 			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readOnly: {
+				classPropertyName: "readOnly",
+				publicName: "readOnly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			loading: {
 				classPropertyName: "loading",
 				publicName: "loading",
@@ -909,6 +932,10 @@ var BxBaseControl = class BxBaseControl {
 				transformFunction: null
 			}
 		},
+		host: {
+			listeners: { "pointerdown": "onControlPointerDown()" },
+			properties: { "class.bx-readonly": "isReadonly()" }
+		},
 		ngImport: i0
 	});
 };
@@ -917,7 +944,13 @@ i0.ɵɵngDeclareClassMetadata({
 	version: "22.2.3",
 	ngImport: i0,
 	type: BxBaseControl,
-	decorators: [{ type: Directive }],
+	decorators: [{
+		type: Directive,
+		args: [{ host: {
+			"[class.bx-readonly]": "isReadonly()",
+			"(pointerdown)": "onControlPointerDown()"
+		} }]
+	}],
 	ctorParameters: () => [],
 	propDecorators: {
 		label: [{
@@ -976,6 +1009,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		readOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readOnly",
+				required: false
+			}]
+		}],
 		loading: [{
 			type: i0.Input,
 			args: [{
@@ -999,15 +1048,15 @@ const SCROLL_LOCK_INSTANCE_IDENTIFIER = "scroll_lock_instance_";
 const PALETTE_NAMES = [
 	"primary",
 	"accent",
-	"graphite",
-	"sky-blue",
+	"carbon",
+	"cobalt",
+	"ember",
+	"brick-rose",
 	"azure",
-	"coral",
 	"violet",
 	"teal",
 	"tangerine",
 	"indigo",
-	"scarlet",
 	"cyan",
 	"lime",
 	"cool-violet",
@@ -1282,6 +1331,11 @@ function trackOverlayOrigin(overlay, origin) {
 		host.classList.remove("bx-overlay-tracked");
 	};
 }
-export { BREAKPOINTS, BX_I18N, BxA11yService, BxBaseControl, BxOverlayPositionService, BxShortcutService, DEFAULT_APPEARANCE_CONFIG, DEFAULT_DEBOUNCE_TIME, DesktopOS, DeviceTypeService, FALLBACK_COLOR, LEGACY_THEME_IDS, MobileOS, PALETTE_NAMES, SCROLL_LOCK_INSTANCE_IDENTIFIER, SEMANTIC_PAIRS, SHADE_NUMBERS, ScrollLockService, THEME_PALETTES, TOKEN_COLOR_DELIMITER, TOKEN_DELIMITER, TOKEN_PREFIX, ThemingService, WindowDimensionsService, getComplementaryToken, inheritOverlayTheme, invertPaletteToken, isOSShortcut, isPaletteToken, isTextWithKey, isThemedColor, resolveThemeId, resolveTokenToCssVar, trackOverlayOrigin, uuidv4 };
+function resolveText(text, adapter, params) {
+	adapter?.version?.();
+	if (text === void 0) return "";
+	return isTextWithKey(text) ? adapter?.translate(text.key, params) ?? text.key : text;
+}
+export { BREAKPOINTS, BX_I18N, BxA11yService, BxBaseControl, BxOverlayPositionService, BxShortcutService, DEFAULT_APPEARANCE_CONFIG, DEFAULT_DEBOUNCE_TIME, DesktopOS, DeviceTypeService, FALLBACK_COLOR, MobileOS, PALETTE_NAMES, SCROLL_LOCK_INSTANCE_IDENTIFIER, SEMANTIC_PAIRS, SHADE_NUMBERS, ScrollLockService, THEME_PALETTES, TOKEN_COLOR_DELIMITER, TOKEN_DELIMITER, TOKEN_PREFIX, ThemingService, WindowDimensionsService, getComplementaryToken, inheritOverlayTheme, invertPaletteToken, isOSShortcut, isPaletteToken, isTextWithKey, isThemedColor, resolveText, resolveThemeId, resolveTokenToCssVar, trackOverlayOrigin, uuidv4 };
 
 //# sourceMappingURL=filip.mazev-blocks-core.mjs.map