fix: guard DOM geometry calls with isBrowser (#DS-5266)

packages/components/clamped-text/clamped-text.ts

@@ -1,4 +1,5 @@
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
+import { Platform } from '@angular/cdk/platform';
 import {
     AfterViewInit,
     ChangeDetectionStrategy,
@@ -109,6 +110,7 @@ export class KbqClampedText implements KbqClamped, AfterViewInit {
     private readonly destroyRef = inject(DestroyRef);
     private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
     private readonly resizeObserver = inject(SharedResizeObserver);
+    private readonly platform = inject(Platform);
 
     /**
      * Clamped text locale configuration.
@@ -143,6 +145,8 @@ export class KbqClampedText implements KbqClamped, AfterViewInit {
     }
 
     ngAfterViewInit(): void {
+        if (!this.platform.isBrowser) return;
+
         const textContainer = this.textContainer().nativeElement;
 
         this.resizeObserver

packages/components/code-block/code-block.ts

@@ -304,6 +304,8 @@ export class KbqCodeBlock implements AfterViewInit {
      * has a scroll, and the calculated maximum height is not set.
      */
     private get canCodeContentBeFocused(): boolean {
+        if (!this.platform.isBrowser) return false;
+
         const element = this.scrollableCodeContent()?.getElementRef().nativeElement;
 
         return element && this.hasScroll(element) && !this.calculatedMaxHeight;
@@ -449,6 +451,8 @@ export class KbqCodeBlock implements AfterViewInit {
     }
 
     private setupContentOverflowDetection(): void {
+        if (!this.platform.isBrowser) return;
+
         if (!this.maxHeight()) return;
 
         const checkOverflow = () => {

packages/components/core/option/option.ts

@@ -289,12 +289,7 @@ export class KbqOption extends KbqOptionBase implements AfterViewChecked, OnDest
 
     /** @docs-private */
     getHeight(): number {
-        const element = this.elementRef.nativeElement;
-
-        // For SSR compatibility
-        if (typeof element.getClientRects !== 'function') return 0;
-
-        return element.getClientRects()[0]?.height ?? 0;
+        return this.elementRef.nativeElement.getClientRects()[0]?.height ?? 0;
     }
 
     select(emitEvent: boolean = true): void {

packages/components/core/services/measure-scrollbar.service.ts

@@ -1,9 +1,11 @@
+import { Platform } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
 import { inject, Injectable } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
 export class KbqMeasureScrollbarService {
     protected readonly document = inject<Document>(DOCUMENT);
+    private readonly platform = inject(Platform);
 
     get scrollBarWidth(): number {
         if (this._scrollBarWidth) {
@@ -29,6 +31,12 @@ export class KbqMeasureScrollbarService {
     }
 
     initScrollBarWidth() {
+        if (!this.platform.isBrowser) {
+            this._scrollBarWidth = 0;
+
+            return;
+        }
+
         const scrollDiv = this.document.createElement('div');
 
         for (const scrollProp in this.scrollbarMeasure) {

packages/components/dl/dl.component.ts

@@ -1,3 +1,4 @@
+import { Platform } from '@angular/cdk/platform';
 import {
     AfterContentInit,
     ChangeDetectorRef,
@@ -38,9 +39,10 @@ export class KbqDlComponent implements AfterContentInit, OnDestroy {
 
     private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
     private readonly changeDetectorRef = inject(ChangeDetectorRef);
+    private readonly platform = inject(Platform);
 
     ngAfterContentInit(): void {
-        if (this.vertical !== null) {
+        if (this.vertical !== null || !this.platform.isBrowser) {
             return;
         }
 

packages/components/file-upload/dropzone.ts

@@ -239,7 +239,6 @@ export class KbqLocalDropzone extends KbqDrop {
     });
 
     private readonly elementRef = kbqInjectNativeElement();
-    private readonly rects = this.elementRef.getBoundingClientRect();
     private readonly overlay: Overlay = inject(Overlay);
     private readonly viewContainerRef: ViewContainerRef = inject(ViewContainerRef);
     private readonly injector = inject(Injector);
@@ -347,13 +346,14 @@ export class KbqLocalDropzone extends KbqDrop {
     private onDragLeave(event: DragEvent): void {
         if (!isHtmlElementOrNull(event.currentTarget) || !isHtmlElementOrNull(event.relatedTarget)) return;
 
+        const rects = this.elementRef.getBoundingClientRect();
         const isWithinViewport = this.isSafari
             ? !isOutsideViewport({
                   event,
-                  innerWidth: this.rects.x + this.elementRef.offsetWidth,
-                  innerHeight: this.rects.y + this.elementRef.offsetHeight,
-                  xAxisMinThreshold: this.rects.x,
-                  yAxisMinThreshold: this.rects.y
+                  innerWidth: rects.x + this.elementRef.offsetWidth,
+                  innerHeight: rects.y + this.elementRef.offsetHeight,
+                  xAxisMinThreshold: rects.x,
+                  yAxisMinThreshold: rects.y
               })
             : event.currentTarget?.contains(event.relatedTarget);
 

packages/components/list/list-selection.component.ts

@@ -2,6 +2,7 @@
 import { Clipboard } from '@angular/cdk/clipboard';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { SelectionModel } from '@angular/cdk/collections';
+import { Platform } from '@angular/cdk/platform';
 import {
     AfterContentInit,
     AfterViewInit,
@@ -235,6 +236,7 @@ export class KbqListSelection implements AfterContentInit, AfterViewInit, OnDest
     _value: string[] | null;
 
     private readonly destroyRef = inject(DestroyRef);
+    private readonly platform = inject(Platform);
 
     private optionFocusSubscription: Subscription | null;
 
@@ -293,6 +295,8 @@ export class KbqListSelection implements AfterContentInit, AfterViewInit, OnDest
             this.initializeSelection();
         });
 
+        if (!this.platform.isBrowser) return;
+
         this.updateScrollSize();
     }
 
@@ -462,12 +466,7 @@ export class KbqListSelection implements AfterContentInit, AfterViewInit, OnDest
 
     /** @docs-private */
     getHeight(): number {
-        const element = this.elementRef.nativeElement;
-
-        // For SSR compatibility
-        if (typeof element.getClientRects !== 'function') return 0;
-
-        return element.getClientRects()[0]?.height ?? 0;
+        return this.elementRef.nativeElement.getClientRects()[0]?.height ?? 0;
     }
 
     // View to model callback that should be called if the list or its options lost focus.
@@ -909,12 +908,7 @@ export class KbqListOption implements OnDestroy, OnInit, IFocusableOption, KbqTi
 
     /** @docs-private */
     getHeight(): number {
-        const element = this.elementRef.nativeElement;
-
-        // For SSR compatibility
-        if (typeof element.getClientRects !== 'function') return 0;
-
-        return element.getClientRects()[0]?.height ?? 0;
+        return this.elementRef.nativeElement.getClientRects()[0]?.height ?? 0;
     }
 
     /** Handles click events on the list option. */

packages/components/navbar/navbar-item.component.ts

@@ -84,6 +84,8 @@ export class KbqNavbarTitle implements AfterViewInit {
     }
 
     get isOverflown() {
+        if (!this.isBrowser) return false;
+
         return this.nativeElement.scrollWidth > this.nativeElement.clientWidth;
     }
 

packages/components/navbar/navbar.component.ts

@@ -1,4 +1,5 @@
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
+import { Platform } from '@angular/cdk/platform';
 import {
     AfterContentInit,
     AfterViewInit,
@@ -211,6 +212,7 @@ export class KbqNavbar extends KbqFocusableComponent implements AfterViewInit, A
     protected readonly elementRef: ElementRef<HTMLElement>;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     protected readonly focusMonitor: FocusMonitor;
+    private readonly platform = inject(Platform);
 
     readonly rectangleElements = contentChildren(
         forwardRef(() => KbqNavbarRectangleElement),
@@ -227,12 +229,7 @@ export class KbqNavbar extends KbqFocusableComponent implements AfterViewInit, A
     private readonly resizeDebounceInterval: number = 100;
 
     private get width(): number {
-        const element = this.elementRef.nativeElement;
-
-        // For SSR compatibility
-        if (typeof element.getClientRects !== 'function') return 0;
-
-        return element.getBoundingClientRect().width;
+        return this.elementRef.nativeElement.getBoundingClientRect().width;
     }
 
     private get totalItemsWidth(): number {
@@ -273,6 +270,7 @@ export class KbqNavbar extends KbqFocusableComponent implements AfterViewInit, A
     ngAfterViewInit(): void {
         super.ngAfterViewInit();
 
+        if (!this.platform.isBrowser) return;
         // Note: this wait is required for loading and rendering fonts for icons;
         // unfortunately we cannot control font rendering
         setTimeout(this.updateExpandedStateForItems);

packages/components/overflow-items/overflow-items.ts

@@ -1,4 +1,5 @@
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
+import { Platform } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
 import {
     booleanAttribute,
@@ -135,6 +136,7 @@ export class KbqOverflowItems {
     private readonly renderer = inject(Renderer2);
     private readonly document = inject(DOCUMENT);
     private readonly window = inject(KBQ_WINDOW);
+    private readonly platform = inject(Platform);
 
     /**
      * `KbqOverflowItem` directive references.
@@ -249,6 +251,8 @@ export class KbqOverflowItems {
     }
 
     private setupObservers(): void {
+        if (!this.platform.isBrowser) return;
+
         const resizeObservers = merge(
             this.resizeObserver.observe(this.element),
             toObservable(this.additionalResizeObserverTargets).pipe(

packages/components/select/select-option.directive.ts

@@ -1,5 +1,6 @@
 import { ContentObserver } from '@angular/cdk/observers';
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
+import { Platform } from '@angular/cdk/platform';
 import { AfterViewInit, Directive, inject, OnDestroy } from '@angular/core';
 import { KbqOption } from '@koobiq/components/core';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
@@ -17,6 +18,7 @@ export class KbqOptionTooltip extends KbqTooltipTrigger implements AfterViewInit
     private readonly option = inject(KbqOption);
     private readonly resizeObserver = inject(SharedResizeObserver);
     private readonly contentObserver = inject(ContentObserver);
+    private readonly isBrowser = inject(Platform).isBrowser;
 
     private readonly debounceInterval = 100;
 
@@ -29,6 +31,8 @@ export class KbqOptionTooltip extends KbqTooltipTrigger implements AfterViewInit
     }
 
     get isOverflown(): boolean {
+        if (!this.isBrowser) return false;
+
         return this.textElement.clientWidth < this.textElement.scrollWidth;
     }
 

packages/components/select/select.component.ts

@@ -1428,6 +1428,8 @@ export class KbqSelect
 
     /** Checks if the component is currently visible in the viewport. */
     private isVisible(): boolean {
+        if (!this.isBrowser) return false;
+
         return this.elementRef.nativeElement.offsetTop < this.elementRef.nativeElement.offsetHeight;
     }
 

packages/components/sidebar/sidebar.component.ts

@@ -1,4 +1,5 @@
-import { DOCUMENT } from '@angular/common';
+import { Platform } from '@angular/cdk/platform';
+import { DOCUMENT } from '@angular/common';
 import {
     AfterContentInit,
     afterNextRender,
@@ -85,6 +86,7 @@ export class KbqSidebar implements OnDestroy, AfterContentInit {
     protected readonly document = inject<Document>(DOCUMENT);
     private readonly renderer = inject(Renderer2);
     private readonly changeDetectorRef = inject(ChangeDetectorRef);
+    private readonly isBrowser = inject(Platform).isBrowser;
 
     // TODO: Skipped for migration because:
     //  Accessor inputs cannot be migrated as they are too complex.
@@ -215,6 +217,8 @@ export class KbqSidebar implements OnDestroy, AfterContentInit {
     }
 
     private saveWidth() {
+        if (!this.isBrowser) return;
+
         this.params.openedStateWidth = `${this.elementRef.nativeElement.offsetWidth}px`;
     }
 }

packages/components/splitter/splitter.component.ts

@@ -1,4 +1,5 @@
 import { coerceBooleanProperty, coerceCssPixelValue, coerceNumberProperty } from '@angular/cdk/coercion';
+import { Platform } from '@angular/cdk/platform';
 import {
     AfterContentInit,
     AfterViewInit,
@@ -581,6 +582,7 @@ export class KbqSplitterAreaDirective implements AfterViewInit, OnDestroy {
     readonly sizeChange = output<number>();
 
     private readonly window = inject(KBQ_WINDOW);
+    private readonly platform = inject(Platform);
 
     isResizing(): boolean {
         return this.splitter.isDragging;
@@ -623,6 +625,8 @@ export class KbqSplitterAreaDirective implements AfterViewInit, OnDestroy {
     }
 
     getSize(): number {
+        if (!this.platform.isBrowser) return 0;
+
         return this.elementRef.nativeElement[this.getOffsetSizeProperty()];
     }
 

packages/components/tabs/paginated-tab-header.ts

@@ -351,6 +351,8 @@ export abstract class KbqPaginatedTabHeader implements AfterContentChecked, Afte
      * page.
      */
     updatePagination() {
+        if (!this.platform.isBrowser) return;
+
         this.checkPaginationEnabled();
         this.checkScrollingControls();
         this.updateTabScrollPosition();

packages/components/tabs/tab-header.component.ts

@@ -1,10 +1,12 @@
 import { CdkObserveContent } from '@angular/cdk/observers';
+import { Platform } from '@angular/cdk/platform';
 import {
     booleanAttribute,
     ChangeDetectionStrategy,
     Component,
     ContentChildren,
     ElementRef,
+    inject,
     input,
     QueryList,
     ViewChild,
@@ -57,8 +59,12 @@ export class KbqTabHeader extends KbqPaginatedTabHeader {
     @ViewChild('nextPaginator') readonly nextPaginator: ElementRef<HTMLElement>;
     @ViewChild('previousPaginator') readonly previousPaginator: ElementRef<HTMLElement>;
 
+    private readonly isBrowser = inject(Platform).isBrowser;
+
     /** Width of the active tab, adjusted for icon-only tab margins. */
     protected get activeTabOffsetWidth(): number | undefined {
+        if (!this.isBrowser) return undefined;
+
         const item = this.items.get(this.selectedIndex);
         const width = item?.elementRef?.nativeElement?.offsetWidth;
 
@@ -69,6 +75,8 @@ export class KbqTabHeader extends KbqPaginatedTabHeader {
 
     /** Left offset of the active tab, adjusted for icon-only tab margins. */
     protected get activeTabOffsetLeft(): number | undefined {
+        if (!this.isBrowser) return undefined;
+
         const item = this.items.get(this.selectedIndex);
         const left = item?.elementRef?.nativeElement?.offsetLeft;