@yuuvis/client-framework 2.12.4 → 2.13.0

package/fesm2022/yuuvis-client-framework.mjs

@@ -410,7 +410,9 @@ class HaloFocusService {
     //#region Rendering
     #updateHaloRect = () => {
         if (!this.#currentElement || !this.#haloElement || !document.contains(this.#currentElement)) {
-            this.#haloElement && (this.#haloElement.style.opacity = '0');
+            if (this.#haloElement) {
+                this.#haloElement.style.opacity = '0';
+            }
             this.#currentElement = null;
             return;
         }
@@ -439,7 +441,10 @@ class HaloFocusService {
             while (parent && parent !== document.body) {
                 const style = getComputedStyle(parent);
                 const overflow = style.overflow + style.overflowX + style.overflowY;
-                if (overflow.includes('hidden') || overflow.includes('clip') || overflow.includes('auto') || overflow.includes('scroll')) {
+                if (overflow.includes('hidden') ||
+                    overflow.includes('clip') ||
+                    overflow.includes('auto') ||
+                    overflow.includes('scroll')) {
                     this.#resizeObserver.observe(parent);
                 }
                 parent = parent.parentElement;
@@ -462,10 +467,10 @@ class HaloFocusService {
     }
     //#endregion
     //#region Event handlers
-    #onKeydown = (e) => {
+    #onKeydown = (event) => {
         this.#lastInteractionWasKeyboard = true;
         // Track arrow keys and other navigation keys that might move focused element
-        if (this.#currentElement && haloFocusNavigationKeys.includes(e.key)) {
+        if (this.#currentElement && haloFocusNavigationKeys.includes(event.key)) {
             this.#scheduleUpdate();
         }
     };
@@ -477,34 +482,36 @@ class HaloFocusService {
             this.#stopTracking();
         }
     };
-    #onFocus = (e) => {
-        const target = e.target;
+    #onFocus = (focusEvent) => {
+        const target = focusEvent.target;
         if (!this.#utility.isFocusable(target))
             return;
         const container = this.#utility.getHaloContainer(target);
         // Check all skip conditions
         if (target.hasAttribute('halo-skip') ||
             this.#utility.shouldSkipElementInMatFormField(target) ||
-            (container && container.hasAttribute('halo-container-skip')) ||
+            container?.hasAttribute('halo-container-skip') ||
             !this.#utility.matchesFocusVisible(target, this.#lastInteractionWasKeyboard)) {
-            this.#haloElement && (this.#haloElement.style.opacity = '0');
+            if (this.#haloElement) {
+                this.#haloElement.style.opacity = '0';
+            }
             this.#currentElement = null;
             return;
         }
         this.#stopTracking();
         this.#startTracking(target);
     };
-    #onBlur = (e) => {
-        if (e.target === this.#currentElement && this.#haloElement) {
+    #onBlur = (focusEvent) => {
+        if (focusEvent.target === this.#currentElement && this.#haloElement) {
             this.#haloElement.style.opacity = '0';
             this.#currentElement = null;
             this.#stopTracking();
         }
     };
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HaloFocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HaloFocusService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HaloFocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HaloFocusService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HaloFocusService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HaloFocusService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -665,45 +672,71 @@ class HaloUtilityService {
         return this.isParentVisible(element, rect);
     }
     /**
-     * Recursively checks if all parent elements are visible and not clipping the target element.
+     * Calculates the visible portion of an element considering overflow clipping from parent containers.
      *
-     * Traverses up the DOM tree from the element to document.body, checking each parent for:
-     * - Hidden state (display: none, visibility: hidden, opacity: 0)
-     * - Overflow clipping (overflow: hidden/clip) that completely hides the element
+     * Traverses up the DOM tree checking for parents with overflow clipping (hidden/clip/auto/scroll).
+     * For each clipping parent, calculates the intersection between the element's current visible area
+     * and the parent's boundaries, progressively clipping the visible rectangle.
      *
-     * If any parent has overflow clipping, calculates the visible intersection area.
-     * Returns false if element is completely clipped (no visible area).
+     * This is essential for showing halo focus only around the visible portion of elements that are
+     * partially scrolled out of view.
      *
-     * @param element - The element whose parents should be checked
-     * @param rect - The bounding rectangle of the element
-     * @returns true if element has visible area within all parent containers, false otherwise
+     * @param element - The element to calculate visible rectangle for
+     * @returns The visible rectangle, or null if element is completely hidden
      */
-    isParentVisible(element, rect) {
+    getVisibleRect(element) {
+        let rect = element.getBoundingClientRect();
+        let visibleRect = {
+            left: rect.left,
+            top: rect.top,
+            right: rect.right,
+            bottom: rect.bottom,
+            width: rect.width,
+            height: rect.height
+        };
         let parent = element.parentElement;
         while (parent && parent !== document.body) {
             const parentStyle = getComputedStyle(parent);
             // Check if parent is hidden
             if (parentStyle.display === 'none' || parentStyle.visibility === 'hidden' || parseFloat(parentStyle.opacity) === 0) {
-                return false;
+                return null;
             }
             const parentOverflow = parentStyle.overflow + parentStyle.overflowX + parentStyle.overflowY;
-            if (parentOverflow.includes('hidden') || parentOverflow.includes('clip')) {
+            if (parentOverflow.includes('hidden') || parentOverflow.includes('clip') || parentOverflow.includes('auto') || parentOverflow.includes('scroll')) {
                 const parentRect = parent.getBoundingClientRect();
-                // Calculate intersection - if there's no visible area, element is hidden
-                const visibleRight = Math.min(rect.right, parentRect.right);
-                const visibleLeft = Math.max(rect.left, parentRect.left);
-                const visibleBottom = Math.min(rect.bottom, parentRect.bottom);
-                const visibleTop = Math.max(rect.top, parentRect.top);
-                const visibleWidth = visibleRight - visibleLeft;
-                const visibleHeight = visibleBottom - visibleTop;
-                // If no intersection or intersection is too small (less than 1px), element is not visible
-                if (visibleWidth <= 0 || visibleHeight <= 0) {
-                    return false;
+                // Calculate intersection with this parent
+                visibleRect.right = Math.min(visibleRect.right, parentRect.right);
+                visibleRect.left = Math.max(visibleRect.left, parentRect.left);
+                visibleRect.bottom = Math.min(visibleRect.bottom, parentRect.bottom);
+                visibleRect.top = Math.max(visibleRect.top, parentRect.top);
+                visibleRect.width = visibleRect.right - visibleRect.left;
+                visibleRect.height = visibleRect.bottom - visibleRect.top;
+                // If no intersection or intersection is too small, element is completely hidden
+                if (visibleRect.width <= 0 || visibleRect.height <= 0) {
+                    return null;
                 }
             }
             parent = parent.parentElement;
         }
-        return true;
+        return visibleRect;
+    }
+    /**
+     * Recursively checks if all parent elements are visible and not clipping the target element.
+     *
+     * Traverses up the DOM tree from the element to document.body, checking each parent for:
+     * - Hidden state (display: none, visibility: hidden, opacity: 0)
+     * - Overflow clipping (overflow: hidden/clip) that completely hides the element
+     *
+     * If any parent has overflow clipping, calculates the visible intersection area.
+     * Returns false if element is completely clipped (no visible area).
+     *
+     * @param element - The element whose parents should be checked
+     * @param rect - The bounding rectangle of the element
+     * @returns true if element has visible area within all parent containers, false otherwise
+     */
+    isParentVisible(element, rect) {
+        const visibleRect = this.getVisibleRect(element);
+        return visibleRect !== null;
     }
     //#endregion
     // #region Utilities
@@ -872,13 +905,14 @@ class HaloUtilityService {
      * Positions and sizes the halo element to surround the focused element.
      *
      * Calculates halo dimensions and position based on:
-     * - Element's bounding rectangle (viewport-relative position)
+     * - Element's visible bounding rectangle (considering overflow clipping)
      * - Calculated offset from getTargetOffset() (custom or default)
      * - Element's border-radius for matching rounded corners
      *
      * **Calculation Details:**
-     * - Position: Element's top/left minus offset (for outside positioning)
-     * - Size: Element's width/height plus 2× offset (to extend on all sides)
+     * - Uses getVisibleRect to get only the visible portion of the element
+     * - Position: Visible rect's top/left minus offset (for outside positioning)
+     * - Size: Visible rect's width/height plus 2× offset (to extend on all sides)
      * - Border radius: Inherited from focused element's computed style
      *
      * Uses Math.floor for position and Math.ceil for dimensions to prevent
@@ -888,12 +922,17 @@ class HaloUtilityService {
      * @param haloElement - The halo DIV element to position and size
      */
     setHaloElementSize(currentElement, haloElement) {
-        const rect = currentElement.getBoundingClientRect();
+        const visibleRect = this.getVisibleRect(currentElement);
+        // If element is not visible, hide the halo
+        if (!visibleRect) {
+            haloElement.style.opacity = '0';
+            return;
+        }
         const offset = this.getTargetOffset(currentElement);
-        const left = Math.floor(rect.left - offset);
-        const top = Math.floor(rect.top - offset);
-        const width = Math.ceil(rect.width + offset * 2);
-        const height = Math.ceil(rect.height + offset * 2);
+        const left = Math.floor(visibleRect.left - offset);
+        const top = Math.floor(visibleRect.top - offset);
+        const width = Math.ceil(visibleRect.width + offset * 2);
+        const height = Math.ceil(visibleRect.height + offset * 2);
         const cs = getComputedStyle(currentElement);
         haloElement.style.left = `${left}px`;
         haloElement.style.top = `${top}px`;
@@ -901,10 +940,10 @@ class HaloUtilityService {
         haloElement.style.height = `${height}px`;
         haloElement.style.borderRadius = cs.borderRadius || '8px';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HaloUtilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HaloUtilityService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HaloUtilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HaloUtilityService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HaloUtilityService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HaloUtilityService, decorators: [{
             type: Injectable
         }] });
 
@@ -935,10 +974,10 @@ class SnackBarService {
             panelClass: ['yuv-snack-bar', 'level-' + options.level]
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SnackBarService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SnackBarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SnackBarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SnackBarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -962,8 +1001,8 @@ class SnackBarComponent {
             this.#snackBarRef.dismiss();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SnackBarComponent, isStandalone: true, selector: "yuv-snack-bar-component", host: { properties: { "class.info": "level() === 'info'", "class.success": "level() === 'success'", "class.warning": "level() === 'warning'", "class.danger": "level() === 'danger'" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SnackBarComponent, isStandalone: true, selector: "yuv-snack-bar-component", host: { properties: { "class.info": "level() === 'info'", "class.success": "level() === 'success'", "class.warning": "level() === 'warning'", "class.danger": "level() === 'danger'" } }, ngImport: i0, template: `
     <span matSnackBarLabel (click)="dismiss()"> {{ message() }} </span>
     @let a = action();
     @if (a) {
@@ -973,7 +1012,7 @@ class SnackBarComponent {
     }
   `, isInline: true, styles: [":host{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatSnackBarLabel, selector: "[matSnackBarLabel]" }, { kind: "directive", type: MatSnackBarActions, selector: "[matSnackBarActions]" }, { kind: "directive", type: MatSnackBarAction, selector: "[matSnackBarAction]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SnackBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SnackBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-snack-bar-component', template: `
     <span matSnackBarLabel (click)="dismiss()"> {{ message() }} </span>
@@ -998,7 +1037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Key behaviors
  * - Persists `expiresAt` in AppCacheService so multiple tabs share the same deadline
  * - Automatically listens to BackendService HTTP activity (debounced) to extend sessions
- * - Extends backend session by calling `/api-web/api/idm/whoami` endpoint (skipped when triggered by HTTP activity)
+ * - Extends backend session by calling `/api-web/api/idm/whoami` endpoint` (skipped when triggered by HTTP activity)
  * - User activity (mouse, keyboard, scroll) inside a defined window will auto-extend the session
  * - Displays a snack popup shortly before expiry; user can extend from the popup
  * - Broadcasts `SessionExtended` / `SessionLogout` to keep tabs in sync
@@ -1302,10 +1341,10 @@ class SessionService {
         this.#logoutTimer$?.unsubscribe();
         this.#httpActivitySubscription$?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SessionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SessionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SessionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SessionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SessionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SessionService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1431,11 +1470,11 @@ function provideSession(sessionDuration) {
 }
 
 class YuuvisClientFrameworkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuuvisClientFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: YuuvisClientFrameworkModule, imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuuvisClientFrameworkModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuuvisClientFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: YuuvisClientFrameworkModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuuvisClientFrameworkModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuuvisClientFrameworkModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuuvisClientFrameworkModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],