@filip.mazev/blocks 1.4.15 → 1.4.17

package/core/styles/_a11y.scss

@@ -1,5 +1,10 @@
+@use '@angular/cdk' as cdk;
+
 @forward 'motion';
 
+// Emit the CDK utility once through the shared global accessibility entry point.
+@include cdk.a11y-visually-hidden;
+
 :root {
     --bx-reduced-motion: 0;
 

package/core/styles/_field-actions.scss

@@ -0,0 +1,36 @@
+@use 'mixins' as *;
+@use 'motion' as *;
+
+// Shared clear action for search and selection controls.
+@mixin field-clear-action {
+    @include bx-transition(color, 0.15s, ease);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    background: transparent;
+    border: none;
+    padding: spacing(1);
+    inline-size: spacing(6);
+    block-size: spacing(6);
+    border-radius: radius(sm);
+    color: var(--bx-text-secondary);
+    cursor: pointer;
+    flex-shrink: 0;
+
+    &:focus-visible {
+        outline: 2px solid var(--bx-border-brand);
+        outline-offset: 0;
+    }
+
+    &:hover:not(:disabled) {
+        color: var(--bx-text-primary);
+        background: var(--bx-bg-element-hover);
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+}

package/core/styles/_field-state.scss

@@ -14,9 +14,18 @@
         display: none;
     }
 
-    &:focus-within:not(.is-disabled, :disabled),
-    &:focus-visible:not(:disabled),
-    &.is-open:not(:disabled) {
+    &:focus-within:not(
+            .is-disabled,
+            :disabled,
+            .is-readonly,
+            [readonly],
+            [aria-readonly='true'],
+            :has([readonly], [aria-readonly='true'])
+        ),
+    &:focus-visible:not(:disabled, [readonly], [aria-readonly='true']),
+    &.is-open:not(:disabled),
+    &.is-readonly.is-keyboard-focused:focus-within,
+    &:has(.bx-readonly.is-keyboard-focused):focus-within {
         --bx-glass-edge: var(--bx-border-brand);
 
         outline: 2px solid var(--bx-border-brand);

package/core/styles/_helpers.scss

@@ -5,3 +5,6 @@
 @forward 'motion';
 @forward 'field-state';
 @forward 'choice-finish';
+@forward 'text-overflow';
+@forward 'slider-rail';
+@forward 'field-actions';

package/core/styles/_index.scss

@@ -15,3 +15,4 @@
 @forward 'slider';
 @forward 'validation';
 @forward 'overlay';
+@forward 'text';

package/core/styles/_slider-rail.scss

@@ -0,0 +1,11 @@
+@use 'mixins' as *;
+
+// Shared finish and geometry for native slider tracks and the range slider rail.
+@mixin slider-rail {
+    box-sizing: border-box;
+    height: spacing(2);
+    border: 1px solid var(--bx-border-strong);
+    border-radius: radius(pill);
+    background: var(--bx-bg-neutral);
+    box-shadow: inset 0 1px 2px rgb(0 0 0 / 16%);
+}

package/core/styles/_slider.scss

@@ -1,25 +1,23 @@
 @use 'mixins' as *;
 @use 'motion' as *;
+@use 'slider-rail' as *;
 
 // Native range pseudo-elements differ across engines and must remain separate rules.
 @mixin track {
-    box-sizing: border-box;
-    height: spacing(2);
-    border: 1px solid var(--bx-border-strong);
-    border-radius: radius(pill);
+    @include slider-rail;
+
     background: linear-gradient(
         to right,
         var(--bx-accent) 0 var(--bx-slider-progress, 50%),
         var(--bx-bg-neutral) var(--bx-slider-progress, 50%) 100%
     );
-    box-shadow: inset 0 1px 2px rgb(0 0 0 / 16%);
 }
 
 @mixin thumb {
     appearance: none;
     box-sizing: border-box;
-    width: spacing(6);
-    height: spacing(6);
+    width: var(--bx-slider-thumb-size, #{spacing(6)});
+    height: var(--bx-slider-thumb-size, #{spacing(6)});
     border-radius: radius(pill);
     border: 1px solid var(--bx-border-strong);
     background: var(--bx-bg-surface);
@@ -50,7 +48,38 @@
         display: block;
     }
 
-    // The native thumb remains the hit target; the opaque decorative thumb reflects nearby colors.
+    &::before {
+        content: '';
+        display: var(--bx-slider-fill-display, block);
+        position: absolute;
+        top: var(--bx-slider-center-y, 50%);
+        left: var(--bx-slider-track-start, 0);
+        width: calc(
+            var(--bx-slider-thumb-size, #{spacing(6)}) / 2 + var(--bx-slider-position, 0.5) *
+                (var(--bx-slider-track-width, 100%) - var(--bx-slider-thumb-size, #{spacing(6)}))
+        );
+        height: spacing(2);
+        transform: translateY(-50%);
+        border-radius: radius(pill);
+        background: var(--bx-accent);
+        pointer-events: none;
+        z-index: 1;
+    }
+
+    &:dir(rtl)::before {
+        left: auto;
+        right: var(--bx-slider-track-start, 0);
+    }
+
+    input.bx-slider::-webkit-slider-runnable-track {
+        background: var(--bx-bg-neutral);
+    }
+
+    input.bx-slider::-moz-range-track {
+        background: var(--bx-bg-neutral);
+    }
+
+    // The native thumb remains the hit target; the decorative lens paints over it.
     input.bx-slider::-webkit-slider-thumb {
         background: transparent;
         border-color: transparent;
@@ -73,11 +102,41 @@
     position: absolute;
     top: var(--bx-slider-center-y, 50%);
     left: calc(
-        var(--bx-slider-track-start, 0px) + var(--bx-slider-position, 0.5) *
-            (var(--bx-slider-track-width, 100%) - #{spacing(6)})
+        var(--bx-slider-track-start, 0px) +
+            var(--bx-slider-physical-position, var(--bx-slider-position, 0.5)) *
+            (var(--bx-slider-track-width, 100%) - var(--bx-slider-thumb-size, #{spacing(6)}))
     );
     transform: translateY(-50%);
     pointer-events: none;
+    z-index: 2;
+    overflow: hidden;
+    background:
+        radial-gradient(circle at 35% 0%, rgb(255 255 255 / 45%), transparent 65%),
+        color-mix(in srgb, var(--bx-bg-surface) 24%, transparent);
+    border-color: color-mix(in srgb, var(--bx-text-primary) 35%, var(--bx-border-strong));
+    backdrop-filter: blur(var(--bx-slider-lens-blur, 1.5px));
+
+    --bx-slider-lens-width: calc(
+        var(--bx-slider-track-width) * var(--bx-slider-magnification, 1.5)
+    );
+    --bx-slider-lens-inset: calc(
+        var(--bx-slider-thumb-size, #{spacing(6)}) / 2 * var(--bx-slider-magnification, 1.5)
+    );
+    --bx-slider-lens-travel: calc(
+        (var(--bx-slider-track-width) - var(--bx-slider-thumb-size, #{spacing(6)})) *
+            var(--bx-slider-magnification, 1.5)
+    );
+    --bx-slider-lens-start-offset: calc(
+        var(--bx-slider-lens-inset) + var(--bx-slider-lens-start, 0) * var(--bx-slider-lens-travel)
+    );
+    --bx-slider-lens-end-offset: calc(
+        var(--bx-slider-lens-inset) + var(--bx-slider-lens-end, var(--bx-slider-position, 0.5)) *
+            var(--bx-slider-lens-travel)
+    );
+
+    &:dir(rtl) {
+        --bx-slider-physical-position: calc(1 - var(--bx-slider-position, 0.5));
+    }
 
     &::after {
         @include bx-transition(opacity, 0.2s, ease-out);
@@ -101,6 +160,38 @@
     }
 }
 
+// Reuse the rail geometry in CSS instead of sampling screen pixels on drag.
+// A separate rounded fill keeps the magnified selection's end caps curved.
+.bx-slider-lens {
+    display: var(--bx-slider-lens-display, block);
+    position: absolute;
+    top: 50%;
+    left: calc(
+        var(--bx-slider-thumb-size, #{spacing(6)}) / 2 -
+            1px - var(--bx-slider-lens-inset) - var(
+                --bx-slider-physical-position,
+                var(--bx-slider-position, 0.5)
+            ) *
+            var(--bx-slider-lens-travel)
+    );
+    width: var(--bx-slider-lens-width);
+    height: calc(#{spacing(2)} * var(--bx-slider-magnification, 1.5));
+    transform: translateY(-50%);
+    border-radius: radius(pill);
+    background: var(--bx-slider-lens-track-color, var(--bx-bg-neutral));
+    filter: blur(var(--bx-slider-lens-blur, 1.5px));
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset-block: 0;
+        inset-inline: var(--bx-slider-lens-start-offset)
+            calc(var(--bx-slider-lens-width) - var(--bx-slider-lens-end-offset));
+        background: var(--bx-accent);
+        border-radius: inherit;
+    }
+}
+
 input.bx-slider {
     appearance: none;
     width: 100%;
@@ -127,7 +218,7 @@ input.bx-slider {
     &::-webkit-slider-thumb {
         @include thumb;
 
-        margin-top: calc((#{spacing(2)} - #{spacing(6)}) / 2 - 1px);
+        margin-top: calc((#{spacing(2)} - var(--bx-slider-thumb-size, #{spacing(6)})) / 2 - 1px);
     }
 
     &::-moz-range-thumb {
@@ -140,6 +231,10 @@ input.bx-slider {
         border-radius: radius(pill);
     }
 
+    &[readonly] {
+        cursor: default;
+    }
+
     &:disabled {
         opacity: 0.5;
         cursor: not-allowed;
@@ -147,6 +242,8 @@ input.bx-slider {
 }
 
 @mixin opaque-thumb {
+    --bx-slider-lens-display: none;
+
     background: var(--bx-bg-surface);
     backdrop-filter: none;
 }
@@ -217,3 +314,14 @@ input.bx-slider {
         box-shadow: none;
     }
 }
+
+.bx-slider-value-label {
+    display: block;
+    color: var(--bx-text-secondary);
+    font-size: 0.75rem;
+    text-align: center;
+}
+
+.bx-slider-value-label[hidden] {
+    display: none;
+}

package/core/styles/_text-overflow.scss

@@ -0,0 +1,7 @@
+// Shared ellipsis mechanics. Include through helpers when styling a text surface.
+@mixin truncate-text {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/core/styles/_text.scss

@@ -0,0 +1,5 @@
+@use 'text-overflow' as *;
+
+.bx-truncate {
+    @include truncate-text;
+}

package/core/styles/_validation.scss

@@ -1,4 +1,5 @@
 @use 'field-state' as *;
+@use 'mixins' as *;
 
 // A projected surface inside a form field receives the complete field material,
 // including its valid focus state, without application-specific effects CSS.
@@ -20,3 +21,50 @@
         outline-color: Mark;
     }
 }
+
+.bx-native-control {
+    box-sizing: border-box;
+    inline-size: 100%;
+    padding: spacing(3);
+    border: 1px solid var(--bx-border-strong);
+    border-radius: radius(sm);
+    background: var(--bx-bg-neutral);
+    color: var(--bx-text-primary);
+    font: inherit;
+
+    &:focus-visible:not([readonly], [aria-readonly='true']),
+    &.is-keyboard-focused:focus-visible {
+        outline: 2px solid var(--bx-border-brand);
+        outline-offset: 2px;
+    }
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    &[readonly]:not(:disabled) {
+        cursor: default;
+    }
+
+    &[aria-invalid='true'] {
+        border-color: var(--bx-border-danger);
+    }
+}
+
+.bx-field-prefix,
+.bx-field-suffix {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.bx-field-prefix {
+    padding-inline: var(--bx-field-adornment-padding, #{spacing(3)})
+        var(--bx-field-adornment-gap, #{spacing(2)});
+}
+
+.bx-field-suffix {
+    padding-inline: var(--bx-field-adornment-gap, #{spacing(2)})
+        var(--bx-field-adornment-padding, #{spacing(3)});
+}

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) {
@@ -753,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
@@ -772,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);
@@ -798,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)) {
@@ -815,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}]`;
 		}
@@ -883,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",
@@ -898,6 +932,10 @@ var BxBaseControl = class BxBaseControl {
 				transformFunction: null
 			}
 		},
+		host: {
+			listeners: { "pointerdown": "onControlPointerDown()" },
+			properties: { "class.bx-readonly": "isReadonly()" }
+		},
 		ngImport: i0
 	});
 };
@@ -906,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: [{
@@ -965,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: [{
@@ -1271,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, 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