@yuuvis/client-framework 2.20.1 → 3.0.0-beta.20.1

package/lib/config/halo-focus-defaults/halo-focus-offset.const.d.ts

@@ -1,25 +0,0 @@
-/**
- * Default offset (in pixels) between the halo border and the focused element's edges.
- *
- * This value determines how far the halo appears from the focused element:
- * - **Positive value** (default: 3): Halo appears outside the element
- * - **Zero (0)**: Halo aligns exactly with element edges (neutral offset)
- * - **Negative value**: Halo appears inside the element (inset)
- *
- * **Override Methods:**
- * - **Per-element**: Use `halo-offset="value"` attribute
- * - **Per-container**: Use `halo-container-offset="value"` or preset attributes
- *
- * @example
- * ```html
- * <!-- Uses default 3px offset (outside) -->
- * <button>Default</button>
- *
- * <!-- Custom 5px offset -->
- * <input halo-offset="5" />
- *
- * ```
- *
- * @default 3
- */
-export declare const defaultHaloFocusOffset = 3;

package/lib/config/halo-focus-defaults/halo-focus-styles.const.d.ts

@@ -1,26 +0,0 @@
-/**
- * Default CSS styles for the halo focus element.
- *
- * These styles define the visual appearance and behavior of the halo border that
- * highlights keyboard-focused elements. The halo is a fixed-position overlay that
- * follows the focused element across the page.
- *
- * **Style Properties:**
- * - `position: 'fixed'` - Keeps halo in viewport regardless of scroll position
- * - `pointerEvents: 'none'` - Allows click-through; halo doesn't block interactions
- * - `zIndex: '9999'` - Ensures halo appears above most other elements
- * - `border` - Primary border using CSS variable `--ymt-primary` (2px solid)
- * - `boxShadow` - Soft shadow with 20% opacity for subtle depth effect
- * - `borderRadius` - Default 8px rounded corners for modern appearance
- * - `opacity: '0'` - Initially hidden; visibility controlled by service
- * - `transform: 'translateZ(0)'` - Creates GPU layer for smoother animations
- *
- * **CSS Variable Dependencies:**
- * - `--ymt-primary` - Primary theme color for border and shadow
- *
- * **Note:** These are base styles that can be overridden globally via HaloFocusConfig
- * or per-element using halo-* attributes.
- *
- * @see {@link HaloFocusConfig} for global style customization
- */
-export declare const haloFocusStyles: Partial<CSSStyleDeclaration>;

package/lib/config/halo-focus-defaults/index.d.ts

@@ -1,4 +0,0 @@
-export * from './halo-excluded-elements.const';
-export * from './halo-focus-navigation-keys.const';
-export * from './halo-focus-offset.const';
-export * from './halo-focus-styles.const';

package/lib/config/index.d.ts

@@ -1,2 +0,0 @@
-export * from './halo-focus-defaults';
-export * from './session';

package/lib/config/session/index.d.ts

@@ -1,3 +0,0 @@
-export * from './session-default-duration.const';
-export * from './session-activity-window-before-end.const';
-export * from './session-popup-before-end.const';

package/lib/config/session/session-activity-window-before-end.const.d.ts

@@ -1,43 +0,0 @@
-/**
- * Time window (in milliseconds) before session expiry when user activity triggers auto-extension.
- *
- * During this window, the service tracks user interactions (mouse, keyboard, scroll) and HTTP activity.
- * If any activity is detected, the session is automatically extended, preventing the expiry warning popup.
- *
- * **Session Timeline:**
- * ```
- * [Session Start] ──────────────────────────────► [Session Expires]
- *                                     ▲         ▲
- *                                     │         └─ sessionPopupBeforeEnd (1 min)
- *                                     └─ Activity window starts (2 min)
- *
- * ┌─────────────────────────────────────────────┐
- * │ Activity Window (2 minutes)                 │
- * │ • Tracks: mousemove, keydown, click, scroll │
- * │ • Tracks: HTTP requests (debounced)         │
- * │ • If activity detected → auto-extend        │
- * │ • If no activity → show warning popup       │
- * └─────────────────────────────────────────────┘
- * ```
- *
- * **Why This Matters:**
- * - Prevents unnecessary interruptions for active users
- * - Reduces server-side session renewal traffic by batching extensions
- * - Provides a grace period before showing the expiry warning
- *
- * **Tracked Activities:**
- * - **User interactions**: `mousemove`, `keydown`, `click`, `scroll` on `window`
- * - **HTTP traffic**: Any request via `BackendService.httpCommunicationOccurred$` (debounced 500ms)
- *
- * **Interaction with Other Constants:**
- * - Must be **greater than** {@link sessionPopupBeforeEnd} to allow the activity window before the popup
- * - Typical relationship: `activityWindow > popupWarning` (e.g., 2 min > 1 min)
- *
- * **Performance Note:**
- * Activity tracking is only active during this window, not throughout the entire session,
- * minimizing performance impact of event listeners.
- *
- * @default 2 minutes (120000 milliseconds)
- * @see {@link SessionService.setupUserActivityTracking} for implementation details
- */
-export declare const sessionActivityWindowBeforeEnd: number;

package/lib/config/session/session-default-duration.const.d.ts

@@ -1,47 +0,0 @@
-/**
- * Default session duration (in milliseconds) when no explicit duration is provided.
- *
- * This value is used as the fallback session lifetime when:
- * - `provideSession()` is called without a duration parameter
- * - Before `startSession(duration)` is called with a backend-provided value
- *
- * **Timeline:**
- * ```
- * [Session Start] ──────────────────────────────► [Session Expires]
- *                 ← sessionDefaultDuration →
- * ```
- *
- * **Override Methods:**
- * - **At startup (known duration)**: `provideSession(customDuration)`
- * - **After login (dynamic duration)**: `sessionService.startSession(backendDuration)`
- *
- * **Usage Scenarios:**
- *
- * Scenario 1 - Fixed duration:
- * ```ts
- * // app.config.ts
- * providers: [
- *   provideSession(45 * 60 * 1000) // Override to 45 minutes
- * ]
- * ```
- *
- * Scenario 2 - Backend-provided duration:
- * ```ts
- * // app.config.ts
- * providers: [
- *   provideSession() // Uses default 30 minutes initially
- * ]
- *
- * // auth.service.ts (after login)
- * login().subscribe(response => {
- *   sessionService.startSession(response.sessionExpiresIn); // Update to backend value
- * });
- * ```
- *
- * **Related Constants:**
- * - {@link sessionActivityWindowBeforeEnd} - When to start tracking user activity
- * - {@link sessionPopupBeforeEnd} - When to show the expiry warning popup
- *
- * @default 30 minutes (1800000 milliseconds)
- */
-export declare const sessionDefaultDuration: number;

package/lib/config/session/session-popup-before-end.const.d.ts

@@ -1,47 +0,0 @@
-/**
- * Time (in milliseconds) before session expiry when the warning popup is displayed.
- *
- * When this threshold is reached without detected user activity during the activity window,
- * a snackbar notification appears, warning the user that their session will expire soon
- * and providing an "Extend session" action button.
- *
- * **Session Timeline:**
- * ```
- * [Session Start] ──────────────────────────────► [Session Expires]
- *                            ▲                 ▲
- *                            │                 └─ Popup appears (1 min before expiry)
- *                            └─ Activity window starts (2 min before expiry)
- *
- * User has no activity during the 2-minute window:
- * ├─ 2 min before: Activity tracking starts
- * ├─ 1 min before: ⚠️ Popup shows "Session expires in one minute"
- * └─ 0 min: Auto-logout if no action taken
- * ```
- *
- * **Popup Behavior:**
- * - Displays a warning message: "Session expires in one minute"
- * - Provides an action button: "Extend session"
- * - Clicking "Extend session" → extends session by the full session duration
- * - Ignoring the popup → automatic logout when timer reaches zero
- * - Only one popup is shown at a time (subsequent extensions dismiss the existing popup)
- *
- * **Cross-Tab Synchronization:**
- * If the user extends the session in one browser tab, all other tabs:
- * - Automatically dismiss their popups (if shown)
- * - Reset their timers to the new expiry time
- * - Avoid showing redundant warnings
- *
- * **Interaction with Other Constants:**
- * - Must be **less than** {@link sessionActivityWindowBeforeEnd}
- * - Typical relationship: `activityWindow > popupWarning` (e.g., 2 min > 1 min)
- * - The gap between them determines how long the activity window runs before the popup
- *
- * **UX Considerations:**
- * - **1 minute** gives users enough time to react without being too intrusive
- * - Too short (e.g., 10 seconds): Users may not have time to respond
- * - Too long (e.g., 5 minutes): Users may be unnecessarily interrupted if they return
- *
- * @default 1 minute (60000 milliseconds)
- * @see {@link SessionService.showPopup} for popup implementation
- */
-export declare const sessionPopupBeforeEnd: number;

package/lib/enums/channel-message.enum.d.ts

@@ -1,4 +0,0 @@
-export declare enum ChannelMessage {
-    SessionExtended = "SessionExtended",
-    SessionLogout = "SessionLogout"
-}

package/lib/enums/index.d.ts

@@ -1 +0,0 @@
-export * from './channel-message.enum';

package/lib/models/halo-focus-config/halo-focus-config.model.d.ts

@@ -1,48 +0,0 @@
-/**
- * Configuration options for the Halo Focus service.
- *
- * These settings define the default visual appearance of the focus halo.
- * Individual elements can override these defaults using halo-* attributes,
- * and containers can set defaults for their children using halo-container-* attributes.
- *
- * @example
- * const config: HaloFocusConfig = {
- *   innerColor: '#007bff',
- *   outerColor: 'rgba(0, 123, 255, 0.25)'
- * };
- */
-export interface HaloFocusConfig {
-    /**
-     * Inner color for the halo element.
-     *
-     * Accepts any valid CSS color value:
-     * - Named colors: 'blue', 'red'
-     * - Hex: '#007bff', '#f00'
-     * - RGB: 'rgb(0, 123, 255)'
-     * - RGBA: 'rgba(0, 123, 255, 0.5)'
-     * - CSS variables: 'var(--primary-color)'
-     * - Modern CSS: 'rgba(from var(--color) r g b / 0.5)'
-     *
-     * @default 'var(--ymt-primary)'
-     *
-     * @example
-     * innerColor: '#007bff'
-     * innerColor: 'var(--accent-color)'
-     */
-    innerColor?: string;
-    /**
-     * Outer color that appears around the halo element.
-     *
-     * Creates a subtle glow effect around the focused element.
-     * The outer color is 4px wide and surrounds the inner color.
-     *
-     * Accepts any valid CSS color value with alpha transparency recommended.
-     *
-     * @default 'rgba(from var(--ymt-primary) r g b / 0.2)'
-     *
-     * @example
-     * outerColor: 'rgba(0, 123, 255, 0.25)'
-     * outerColor: 'rgba(from var(--accent) r g b / 0.3)'
-     */
-    outerColor?: string;
-}

package/lib/models/halo-focus-config/index.d.ts

@@ -1 +0,0 @@
-export * from './halo-focus-config.model';

package/lib/models/index.d.ts

@@ -1,3 +0,0 @@
-export * from './halo-focus-config';
-export * from './session';
-export * from './snack-bar';

package/lib/models/session/channel-payload.model.d.ts

@@ -1,5 +0,0 @@
-import { ChannelMessage } from "../../enums";
-export type ChannelPayload = {
-    type: ChannelMessage;
-    expiresAt?: number;
-};

package/lib/models/session/index.d.ts

@@ -1 +0,0 @@
-export * from './channel-payload.model';

package/lib/models/snack-bar/index.d.ts

@@ -1,3 +0,0 @@
-export * from './snack-bar-data.model';
-export * from './snack-bar-level.model';
-export * from './snack-bar-options.model';

package/lib/models/snack-bar/snack-bar-data.model.d.ts

@@ -1,6 +0,0 @@
-import { SnackBarLevel } from "./snack-bar-level.model";
-export interface SnackBarData {
-    level: SnackBarLevel;
-    message: string;
-    action?: string;
-}

package/lib/models/snack-bar/snack-bar-level.model.d.ts

@@ -1 +0,0 @@
-export type SnackBarLevel = 'info' | 'success' | 'warning' | 'danger';

package/lib/models/snack-bar/snack-bar-options.model.d.ts

@@ -1,9 +0,0 @@
-import { MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from "@angular/material/snack-bar";
-import { SnackBarLevel } from "./snack-bar-level.model";
-export interface SnackBarOptions {
-    duration?: number;
-    horizontalPosition?: MatSnackBarHorizontalPosition;
-    verticalPosition?: MatSnackBarVerticalPosition;
-    action?: string;
-    level?: SnackBarLevel;
-}

package/lib/providers/halo-focus/index.d.ts

@@ -1 +0,0 @@
-export * from './provide-halo-focus';

package/lib/providers/halo-focus/provide-halo-focus.d.ts

@@ -1,62 +0,0 @@
-import { EnvironmentProviders } from '@angular/core';
-import { HaloFocusConfig } from '../../models';
-/**
- * Provides and initializes the Halo Focus feature for the Angular application.
- *
- * This function sets up a global visual accessibility enhancement that creates a
- * "halo" border around keyboard-focused elements, making navigation more visible
- * and improving the user experience for keyboard users.
- *
- * **What It Does:**
- * - Registers HaloFocusService and HaloUtility as application-wide providers
- * - Automatically initializes the service during app startup via APP_INITIALIZER
- * - Runs initialization outside Angular zone for optimal performance
- * - Creates a persistent halo element that tracks focus throughout the application
- *
- * **Key Features:**
- * - Keyboard-only focus indication (respects CSS :focus-visible)
- * - Performance-optimized with requestAnimationFrame and zone-free execution
- * - Fully customizable via global config or per-element attributes
- * - Supports container-level defaults for consistent styling
- * - Automatic visibility detection and responsive to DOM changes
- *
- * **Configuration Options:**
- * @param config - Optional global configuration object
- * @param config.innerColor - Inner color of the halo (default: 'var(--ymt-primary)')
- * @param config.outerColor - Outer color around the halo (default: 'rgba(from var(--ymt-primary) r g b / 0.2)')
- *
- * @returns EnvironmentProviders for the Halo Focus feature
- *
- * @example
- * // Basic usage in app.config.ts
- * export const appConfig: ApplicationConfig = {
- *   providers: [
- *     provideHaloFocus()
- *   ]
- * };
- *
- * @example
- * // With custom configuration
- * export const appConfig: ApplicationConfig = {
- *   providers: [
- *     provideHaloFocus({
- *       innerColor: '#007bff',
- *       outerColor: 'rgba(0, 123, 255, 0.25)'
- *     })
- *   ]
- * };
- *
- * @example
- * // Using element-level attributes in your template
- * <button halo-color="red">Custom Red Halo</button>
- * <input halo-offset="5" />
- * <select halo-skip>No Halo</select>
- *
- * @example
- * // Using container-level attributes
- * <form halo-container halo-container-color="blue" halo-container-offset="5">
- *   <input /> <!-- Will use blue color and 5px offset -->
- *   <button halo-color="red">Submit</button> <!-- Overrides with red -->
- * </form>
- */
-export declare function provideHaloFocus(config?: HaloFocusConfig): EnvironmentProviders;

package/lib/providers/index.d.ts

@@ -1,2 +0,0 @@
-export * from './halo-focus';
-export * from './session';

package/lib/providers/session/index.d.ts

@@ -1 +0,0 @@
-export * from './provide-session.provider';

package/lib/providers/session/provide-session.provider.d.ts

@@ -1,43 +0,0 @@
-import { EnvironmentProviders } from '@angular/core';
-/**
- * Provides and initializes the SessionService at application startup.
- *
- * What it does
- * - Registers SessionService as a singleton to manage session expiry across the app
- * - Runs `session.init()` via APP_INITIALIZER when the app boots
- * - Initializes cross-tab BroadcastChannel sync, HTTP debounce hooks, and user-activity listeners
- * - Automatically tracks HTTP activity and user interactions to extend sessions
- *
- * Usage scenarios
- *
- * Scenario 1: Known session duration at startup
- * When the session duration is predetermined and constant, provide it here.
- * ```ts
- * // app.config.ts
- * export const appConfig: ApplicationConfig = {
- *   providers: [
- *     provideSession(30 * 60 * 1000), // 30 minutes
- *   ]
- * };
- * ```
- *
- * Scenario 2: Dynamic session duration from backend
- * When the session duration is determined after login (e.g., from backend response),
- * omit the parameter here and call `startSession()` after receiving the duration.
- * ```ts
- * // app.config.ts
- * export const appConfig: ApplicationConfig = {
- *   providers: [
- *     provideSession(), // Defaults to 30 minutes until startSession() is called
- *   ]
- * };
- *
- * // After login in AuthService:
- * login().subscribe(response => {
- *   sessionService.startSession(response.sessionExpiresIn); // Set actual duration
- * });
- * ```
- *
- * @param sessionDuration Optional session duration in milliseconds. If omitted, defaults to 30 minutes (1800000ms).
- */
-export declare function provideSession(sessionDuration?: number): EnvironmentProviders;

package/lib/services/halo-focus/halo-focus.service.d.ts

@@ -1,95 +0,0 @@
-import { HaloFocusConfig } from '../../models';
-import * as i0 from "@angular/core";
-/**
- * Service that creates and manages a visual "halo" border around keyboard-focused elements
- * to enhance navigation visibility and improve accessibility.
- *
- * This service operates globally across the application, automatically tracking focus events
- * and dynamically positioning a halo element around the currently focused element. The halo
- * responds to window scrolls, resizes, and DOM mutations to maintain accurate positioning.
- *
- * **Key Features:**
- * - Keyboard-only focus indication (respects :focus-visible)
- * - Performance-optimized with requestAnimationFrame and runs outside Angular zone
- * - Element-level and container-level customization support
- * - Automatic visibility detection (handles clipping, hidden elements, etc.)
- * - Responsive to dynamic DOM changes via ResizeObserver and MutationObserver
- * - Smart exclusion for Angular Material form fields (prevents redundant styling)
- *
- * **Usage:**
- * 1. Add `provideHaloFocus()` to your providers array in app.config.ts
- * 2. The service initializes automatically and appends a halo element to the DOM
- * 3. Optionally customize appearance globally or per-element using attributes
- *
- * **Element-Level Attributes:**
- * - `halo-skip` - Excludes element from halo highlighting
- * - `halo-color="color"` - Custom halo color (e.g., "blue", "#00ff00", "rgb(255,0,0)")
- * - `halo-offset="value"` - Custom numeric offset in pixels (default: 3)
- *
- * **Container-Level Attributes:**
- * Define default halo styles for all focused children. Child elements can override
- * container settings with their own halo-* attributes.
- *
- * - `halo-container` - Marks element as a halo container (required for other attributes)
- * - `halo-container-skip` - Excludes all focused children from halo highlighting
- * - `halo-container-color="color"` - Default halo color for focused children
- * - `halo-container-offset="value"` - Default offset for focused children
- *
- * **Material Form Field Integration:**
- * Elements inside Angular Material form fields (mat-form-field) are automatically excluded
- * from halo focus to prevent visual conflicts with Material's built-in focus styling.
- * Excluded elements: input, mat-select (configurable via haloExcludedElementsInMatFormField)
- *
- * @example
- * ```html
- * <!-- Element-level customization -->
- * <button halo-color="red">Custom Red Halo</button>
- * <input halo-offset="5" />
- * <select halo-skip>No Halo</select>
- *
- * <!-- Container-level defaults -->
- * <form halo-container halo-container-color="blue" halo-container-offset="5">
- *   <input /> <!-- Inherits blue color and 5px offset -->
- *   <button halo-color="red">Submit</button> <!-- Overrides with red, keeps 5px offset -->
- * </form>
- * ```
- *
- * **Performance Notes:**
- * - Service runs outside Angular's zone to prevent unnecessary change detection
- * - Uses requestAnimationFrame for smooth rendering
- * - Only shows halo for keyboard interactions (respects :focus-visible)
- *
- * @see {@link provideHaloFocus} for initialization and configuration
- * @see {@link HaloFocusConfig} for global configuration options
- */
-export declare class HaloFocusService {
-    #private;
-    /**
-     * Initializes the Halo Focus service and sets up the global halo tracking system.
-     *
-     * This method performs the following initialization steps:
-     * 1. Applies optional configuration for halo appearance (inner and outer colors)
-     * 2. Creates and appends the halo DIV element to the document body
-     * 3. Attaches global event listeners for focus, blur, keyboard, mouse, scroll, and resize events
-     * 4. Sets up ResizeObserver and MutationObserver for tracking dynamic DOM changes
-     *
-     * **Lifecycle:**
-     * - Called automatically by `provideHaloFocus()` during app initialization
-     * - Runs outside Angular's zone to prevent triggering change detection
-     * - Initializes only once per application lifecycle
-     *
-     * **Performance:**
-     * - Uses passive event listeners where applicable
-     * - Leverages requestAnimationFrame for efficient rendering
-     * - Observers are conditionally created only if browser supports them
-     *
-     * @param config - Optional configuration object for customizing halo appearance
-     * @param config.innerColor - Custom inner color (overrides default primary color)
-     * @param config.outerColor - Custom outer color (overrides default shadow)
-     *
-     * @internal This method should not be called manually; use `provideHaloFocus()` instead
-     */
-    init(config?: HaloFocusConfig): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<HaloFocusService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<HaloFocusService>;
-}