@c8y/ngx-components 1024.16.19 → 1024.18.0

package/fesm2022/c8y-ngx-components.mjs

@@ -8297,7 +8297,7 @@ class StringifyObjectPipe {
         this.isoDateTimeRegex = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)(([+-](\d{2}):(\d{2})|Z)?)$/;
     }
     transform(value) {
-        if (!value) {
+        if (value === null || value === undefined || value === '') {
             return '';
         }
         if (typeof value === 'object' && !isDate(value)) {
@@ -40002,7 +40002,8 @@ class RealtimeMessage {
 /**
  * Resizable Grid Component
  *
- * Provides a flexible layout with two adjustable columns separated by a draggable divider.
+ * Provides a flexible layout with two adjustable panes separated by a draggable divider.
+ * Supports both a horizontal (left/right) and a vertical (top/bottom) split.
  *
  * ## Basic Usage
  *
@@ -40016,17 +40017,42 @@ class RealtimeMessage {
  *   <div #colB>Right column content</div>
  * </c8y-resizable-grid>
  * ```
+ *
+ * ## Vertical (top/bottom) split
+ *
+ * ```html
+ * <c8y-resizable-grid
+ *   [orientation]="'vertical'"
+ *   [leftColumnWidth]="'40%'">
+ *   <div #colA>Top pane content</div>
+ *   <div #colB>Bottom pane content</div>
+ * </c8y-resizable-grid>
+ * ```
  */
 class ResizableGridComponent {
+    /**
+     * Whether the grid splits panes top/bottom instead of left/right.
+     * @internal Used by the template and internal size calculations.
+     */
+    get isVertical() {
+        return this.orientation === 'vertical';
+    }
+    get _colAHeight() {
+        return this._colAWidth;
+    }
     /**
      * Public getter for aria-valuenow
      */
     get colAWidthPercent() {
         if (!this.colA || !this.colA.nativeElement.parentElement)
             return 50; // Default or fallback
-        const totalWidth = this.colA.nativeElement.parentElement.offsetWidth;
-        const currentWidth = this.colA.nativeElement.offsetWidth;
-        return totalWidth > 0 ? Math.round((currentWidth / totalWidth) * 100) : 0;
+        const totalSize = this.isVertical
+            ? this.colA.nativeElement.parentElement.offsetHeight
+            : this.colA.nativeElement.parentElement.offsetWidth;
+        const currentSize = this.isVertical
+            ? this.colA.nativeElement.offsetHeight
+            : this.colA.nativeElement.offsetWidth;
+        return totalSize > 0 ? Math.round((currentSize / totalSize) * 100) : 0;
     }
     /**
      * Creates an instance of ResizableGridComponent.
@@ -40035,40 +40061,47 @@ class ResizableGridComponent {
     constructor(renderer) {
         this.renderer = renderer;
         /**
-         * Initial width of the left column (A). Can be any valid CSS width value (e.g., '50%', '300px').
+         * Initial size of pane A along the resize axis. Can be any valid CSS size value (e.g., '50%', '300px').
+         * Applies to width when `orientation` is `'horizontal'`, and to height when it is `'vertical'`.
          */
         this.leftColumnWidth = '50%';
         /**
-         * Optional key for localStorage to persist the left column width between sessions.
+         * Optional key for localStorage to persist pane A's size between sessions.
          */
         this.trackId = null;
         /**
-         * Minimum width (in pixels) before a column is considered collapsed.
+         * Minimum size (in pixels) before a pane is considered collapsed.
          */
         this.collapseThreshold = 320;
         /**
-         * If true, columns can collapse below the threshold. If false, columns stop at the threshold.
+         * If true, panes can collapse below the threshold. If false, panes stop at the threshold.
          */
         this.collapsible = true;
+        /**
+         * Split direction of the grid.
+         * - `'horizontal'`: panes side by side (left/right), draggable vertical divider. (default)
+         * - `'vertical'`: panes stacked (top/bottom), draggable horizontal divider.
+         */
+        this.orientation = 'horizontal';
         /**
          * True if the user is currently resizing the grid.
          */
         this.isResizing = false;
         /**
-         * CSS width value for the left column (A).
-         * Used for dynamic styling via HostBinding.
+         * CSS size value for pane A along the resize axis.
+         * Bound to both `--col-a-width` and `--col-a-height` so either orientation's stylesheet can consume it.
          */
         this._colAWidth = '50%';
         /**
-         * X position of the mouse when resizing starts.
+         * Mouse position (X for horizontal, Y for vertical) when resizing starts.
          */
-        this.startX = 0;
+        this.startPos = 0;
         /**
-         * Pixel width of column A when resizing starts.
+         * Pixel size of pane A when resizing starts.
          */
-        this.startColAWidthPx = 0;
+        this.startColASizePx = 0;
         /**
-         * Last known non-collapsed width of column A (for restore logic).
+         * Last known non-collapsed size of pane A (for restore logic).
          */
         this.lastKnownNonCollapsedWidth = null;
         this.resizeStep = 10; // Pixels to move with arrow keys
@@ -40112,9 +40145,9 @@ class ResizableGridComponent {
         }
         event.preventDefault();
         this.isResizing = true;
-        this.startX = event.clientX;
-        this.startColAWidthPx = this.colA.nativeElement.offsetWidth;
-        this.renderer.setStyle(document.body, 'cursor', 'col-resize');
+        this.startPos = this.isVertical ? event.clientY : event.clientX;
+        this.startColASizePx = this.getElementSize(this.colA.nativeElement);
+        this.renderer.setStyle(document.body, 'cursor', this.isVertical ? 'row-resize' : 'col-resize');
         this.renderer.addClass(document.body, 'no-select');
         // Store the current _colAWidth as the starting point for lastKnownNonCollapsedWidth
         // before we potentially remove collapse classes.
@@ -40139,8 +40172,9 @@ class ResizableGridComponent {
         if (!this.isResizing || !this.colA || !this.colB) {
             return;
         }
-        const deltaX = event.clientX - this.startX;
-        this.updateColumnWidth(this.startColAWidthPx + deltaX);
+        const currentPos = this.isVertical ? event.clientY : event.clientX;
+        const delta = currentPos - this.startPos;
+        this.updateColumnWidth(this.startColASizePx + delta);
     }
     /**
      * Mouse up event handler for ending resize and applying collapse logic.
@@ -40151,7 +40185,7 @@ class ResizableGridComponent {
             this.renderer.removeStyle(document.body, 'cursor');
             this.renderer.removeClass(document.body, 'no-select');
             requestAnimationFrame(() => {
-                this.checkAndApplyCollapse(this.colA.nativeElement.offsetWidth, this.colB.nativeElement.offsetWidth);
+                this.checkAndApplyCollapse(this.getElementSize(this.colA.nativeElement), this.getElementSize(this.colB.nativeElement));
             });
         }
     }
@@ -40163,104 +40197,122 @@ class ResizableGridComponent {
         if (!this.colA || !this.colB) {
             return;
         }
-        const currentWidth = this.colA.nativeElement.offsetWidth;
-        const totalWidth = this.colA.nativeElement.parentElement?.offsetWidth || window.innerWidth;
-        let newWidthPx = currentWidth;
+        const currentSize = this.getElementSize(this.colA.nativeElement);
+        const totalSize = this.getTotalSize();
+        let newSizePx = currentSize;
         // If the column is collapsed, always allow keyboard to restore it
         const colACollapsed = this.colA.nativeElement.classList.contains('collapsed');
         const colBCollapsed = this.colB.nativeElement.classList.contains('collapsed');
+        const decreaseKey = this.isVertical ? 'ArrowUp' : 'ArrowLeft';
+        const increaseKey = this.isVertical ? 'ArrowDown' : 'ArrowRight';
         switch (event.key) {
-            case 'ArrowLeft':
+            case decreaseKey:
                 if (colACollapsed) {
-                    newWidthPx = this.collapseThreshold + this.resizeStep; // Restore to just above threshold
+                    newSizePx = this.collapseThreshold + this.resizeStep; // Restore to just above threshold
                 }
                 else {
-                    newWidthPx = Math.max(0, currentWidth - this.resizeStep);
+                    newSizePx = Math.max(0, currentSize - this.resizeStep);
                 }
                 event.preventDefault();
                 break;
-            case 'ArrowRight':
+            case increaseKey:
                 if (colACollapsed) {
-                    newWidthPx = this.collapseThreshold + this.resizeStep;
+                    newSizePx = this.collapseThreshold + this.resizeStep;
                 }
                 else {
-                    newWidthPx = Math.min(totalWidth, currentWidth + this.resizeStep);
+                    newSizePx = Math.min(totalSize, currentSize + this.resizeStep);
                 }
                 event.preventDefault();
                 break;
             case 'Home':
-                newWidthPx = 0;
+                newSizePx = 0;
                 event.preventDefault();
                 break;
             case 'End':
-                newWidthPx = totalWidth;
+                newSizePx = totalSize;
                 event.preventDefault();
                 break;
             default:
                 return;
         }
-        // If right column is collapsed, allow keyboard to restore it by expanding left
-        if (colBCollapsed && (event.key === 'ArrowRight' || event.key === 'End')) {
-            newWidthPx = totalWidth - this.collapseThreshold - this.resizeStep;
+        // If right/bottom pane is collapsed, allow keyboard to restore it by expanding pane A
+        if (colBCollapsed && (event.key === increaseKey || event.key === 'End')) {
+            newSizePx = totalSize - this.collapseThreshold - this.resizeStep;
         }
         this.removeCollapseClasses();
-        this.updateColumnWidth(newWidthPx, true);
+        this.updateColumnWidth(newSizePx, true);
     }
     /**
-     * Sets up the initial width of the left column, using localStorage if trackId is provided.
+     * Sets up the initial size of pane A, using localStorage if trackId is provided.
      */
     setupInitialWidth() {
         if (!this.colA || !this.colB) {
             return;
         }
-        let initialWidth = this.leftColumnWidth;
+        let initialSize = this.leftColumnWidth;
         // Only attempt to retrieve from localStorage if trackId is provided
         if (this.trackId) {
-            const savedWidth = localStorage.getItem(this.trackId);
-            if (savedWidth) {
-                initialWidth = savedWidth;
+            const savedSize = localStorage.getItem(this.trackId);
+            if (savedSize) {
+                initialSize = savedSize;
             }
         }
-        this._colAWidth = initialWidth;
-        this.lastKnownNonCollapsedWidth = initialWidth;
+        this._colAWidth = initialSize;
+        this.lastKnownNonCollapsedWidth = initialSize;
         requestAnimationFrame(() => {
-            this.checkAndApplyCollapse(this.colA.nativeElement.offsetWidth, this.colB.nativeElement.offsetWidth);
+            this.checkAndApplyCollapse(this.getElementSize(this.colA.nativeElement), this.getElementSize(this.colB.nativeElement));
         });
     }
     /**
-     * Updates the column A width and handles boundaries.
-     * @param targetWidthPx The desired width in pixels for column A.
+     * Updates pane A's size and handles boundaries.
+     * @param targetSizePx The desired size in pixels for pane A.
      * @param applyCollapseImmediately If true, calls checkAndApplyCollapse directly.
      */
-    updateColumnWidth(targetWidthPx, applyCollapseImmediately = false) {
+    updateColumnWidth(targetSizePx, applyCollapseImmediately = false) {
         if (!this.colA || !this.colB) {
             return;
         }
-        const totalWidth = this.colA.nativeElement.parentElement?.offsetWidth || window.innerWidth;
+        const totalSize = this.getTotalSize();
         // If not collapsible, enforce the threshold as the minimum
-        const minWidthPx = this.collapsible ? 0 : this.collapseThreshold;
-        const maxWidthPx = this.collapsible ? totalWidth : totalWidth - this.collapseThreshold;
-        let newWidthPx = Math.max(minWidthPx, targetWidthPx);
-        newWidthPx = Math.min(newWidthPx, maxWidthPx);
-        const newWidthString = `${newWidthPx}px`;
-        this._colAWidth = newWidthString;
+        const minSizePx = this.collapsible ? 0 : this.collapseThreshold;
+        const maxSizePx = this.collapsible ? totalSize : totalSize - this.collapseThreshold;
+        let newSizePx = Math.max(minSizePx, targetSizePx);
+        newSizePx = Math.min(newSizePx, maxSizePx);
+        const newSizeString = `${newSizePx}px`;
+        this._colAWidth = newSizeString;
         // Update lastKnownNonCollapsedWidth during drag, regardless of trackId
-        if (newWidthPx > 0 && newWidthPx < totalWidth) {
-            this.lastKnownNonCollapsedWidth = newWidthString;
+        if (newSizePx > 0 && newSizePx < totalSize) {
+            this.lastKnownNonCollapsedWidth = newSizeString;
         }
         // Only save to localStorage if trackId is provided and not in a collapsed state
-        if (this.trackId && newWidthPx > 0 && newWidthPx < totalWidth) {
-            localStorage.setItem(this.trackId, newWidthString);
+        if (this.trackId && newSizePx > 0 && newSizePx < totalSize) {
+            localStorage.setItem(this.trackId, newSizeString);
         }
         // A11y: If triggered by keyboard, apply collapse immediately for feedback
         if (applyCollapseImmediately) {
-            this.checkAndApplyCollapse(newWidthPx, totalWidth - newWidthPx);
+            this.checkAndApplyCollapse(newSizePx, totalSize - newSizePx);
         }
     }
     /**
-     * Checks if either column should be collapsed based on their widths and applies the appropriate classes/styles.
-     * @param colAWidth Width of column A in pixels
-     * @param colBWidth Width of column B in pixels
+     * Reads an element's size along the current resize axis (width for horizontal, height for vertical).
+     */
+    getElementSize(element) {
+        return this.isVertical ? element.offsetHeight : element.offsetWidth;
+    }
+    /**
+     * Total size of the grid along the current resize axis, falling back to the viewport size.
+     */
+    getTotalSize() {
+        const parent = this.colA.nativeElement.parentElement;
+        if (!parent) {
+            return this.isVertical ? window.innerHeight : window.innerWidth;
+        }
+        return this.getElementSize(parent);
+    }
+    /**
+     * Checks if either pane should be collapsed based on their sizes and applies the appropriate classes/styles.
+     * @param colAWidth Size of pane A in pixels, along the resize axis
+     * @param colBWidth Size of pane B in pixels, along the resize axis
      */
     checkAndApplyCollapse(colAWidth, colBWidth) {
         if (!this.colA || !this.colB) {
@@ -40321,11 +40373,11 @@ class ResizableGridComponent {
         this.renderer.removeClass(colBNative, 'expanded');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResizableGridComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ResizableGridComponent, isStandalone: true, selector: "c8y-resizable-grid", inputs: { leftColumnWidth: "leftColumnWidth", trackId: "trackId", collapseThreshold: "collapseThreshold", collapsible: "collapsible" }, host: { listeners: { "window:mousemove": "onMouseMove($event)", "window:mouseup": "onMouseUp()" }, properties: { "class.is-resizing": "this.isResizing", "style.--col-a-width": "this._colAWidth" } }, viewQueries: [{ propertyName: "colA", first: true, predicate: ["colA"], descendants: true }, { propertyName: "colB", first: true, predicate: ["colB"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"resizable-grid-container\" [class.is-resizing]=\"isResizing\">\n  <div #colA class=\"col-a\" [id]=\"colAId\">\n    <!-- Content for the left column goes here -->\n    <ng-content select=\"[left-pane]\"></ng-content>\n  </div>\n  <div\n    class=\"resizer\"\n    (mousedown)=\"onMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    tabindex=\"0\"\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n    [attr.aria-controls]=\"colAId + ' ' + colBId\"\n    [attr.aria-label]=\"'Resize columns' | translate\"\n    [attr.aria-valuenow]=\"colAWidthPercent\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <i class=\"dlt-c8y-icon-arrow-circle-divide-horizontal\"></i>\n  </div>\n  <div #colB class=\"col-b\" [id]=\"colBId\">\n    <!-- Content for the right column goes here -->\n    <ng-content select=\"[right-pane]\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ResizableGridComponent, isStandalone: true, selector: "c8y-resizable-grid", inputs: { leftColumnWidth: "leftColumnWidth", trackId: "trackId", collapseThreshold: "collapseThreshold", collapsible: "collapsible", orientation: "orientation" }, host: { listeners: { "window:mousemove": "onMouseMove($event)", "window:mouseup": "onMouseUp()" }, properties: { "class.is-resizing": "this.isResizing", "style.--col-a-width": "this._colAWidth", "style.--col-a-height": "this._colAHeight" } }, viewQueries: [{ propertyName: "colA", first: true, predicate: ["colA"], descendants: true }, { propertyName: "colB", first: true, predicate: ["colB"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"resizable-grid-container\"\n  [class.is-resizing]=\"isResizing\"\n  [class.resizable-grid-container--vertical]=\"isVertical\"\n>\n  <div\n    class=\"col-a\"\n    #colA\n    [id]=\"colAId\"\n  >\n    <!-- Content for the left/top pane goes here -->\n    <ng-content select=\"[left-pane]\"></ng-content>\n  </div>\n  <div\n    class=\"resizer\"\n    [attr.aria-label]=\"'Resize columns' | translate\"\n    tabindex=\"0\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-orientation]=\"isVertical ? 'horizontal' : 'vertical'\"\n    [attr.aria-controls]=\"colAId + ' ' + colBId\"\n    [attr.aria-valuenow]=\"colAWidthPercent\"\n    role=\"separator\"\n    (mousedown)=\"onMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n  >\n    <i class=\"dlt-c8y-icon-arrow-circle-divide-horizontal\"></i>\n  </div>\n  <div\n    class=\"col-b\"\n    #colB\n    [id]=\"colBId\"\n  >\n    <!-- Content for the right/bottom pane goes here -->\n    <ng-content select=\"[right-pane]\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResizableGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-resizable-grid', standalone: true, imports: [CommonModule$1, C8yTranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"resizable-grid-container\" [class.is-resizing]=\"isResizing\">\n  <div #colA class=\"col-a\" [id]=\"colAId\">\n    <!-- Content for the left column goes here -->\n    <ng-content select=\"[left-pane]\"></ng-content>\n  </div>\n  <div\n    class=\"resizer\"\n    (mousedown)=\"onMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    tabindex=\"0\"\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n    [attr.aria-controls]=\"colAId + ' ' + colBId\"\n    [attr.aria-label]=\"'Resize columns' | translate\"\n    [attr.aria-valuenow]=\"colAWidthPercent\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <i class=\"dlt-c8y-icon-arrow-circle-divide-horizontal\"></i>\n  </div>\n  <div #colB class=\"col-b\" [id]=\"colBId\">\n    <!-- Content for the right column goes here -->\n    <ng-content select=\"[right-pane]\"></ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-resizable-grid', standalone: true, imports: [CommonModule$1, C8yTranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n  class=\"resizable-grid-container\"\n  [class.is-resizing]=\"isResizing\"\n  [class.resizable-grid-container--vertical]=\"isVertical\"\n>\n  <div\n    class=\"col-a\"\n    #colA\n    [id]=\"colAId\"\n  >\n    <!-- Content for the left/top pane goes here -->\n    <ng-content select=\"[left-pane]\"></ng-content>\n  </div>\n  <div\n    class=\"resizer\"\n    [attr.aria-label]=\"'Resize columns' | translate\"\n    tabindex=\"0\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-orientation]=\"isVertical ? 'horizontal' : 'vertical'\"\n    [attr.aria-controls]=\"colAId + ' ' + colBId\"\n    [attr.aria-valuenow]=\"colAWidthPercent\"\n    role=\"separator\"\n    (mousedown)=\"onMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n  >\n    <i class=\"dlt-c8y-icon-arrow-circle-divide-horizontal\"></i>\n  </div>\n  <div\n    class=\"col-b\"\n    #colB\n    [id]=\"colBId\"\n  >\n    <!-- Content for the right/bottom pane goes here -->\n    <ng-content select=\"[right-pane]\"></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { leftColumnWidth: [{
                 type: Input
             }], trackId: [{
@@ -40334,6 +40386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], collapsible: [{
                 type: Input
+            }], orientation: [{
+                type: Input
             }], colA: [{
                 type: ViewChild,
                 args: ['colA']
@@ -40346,6 +40400,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }], _colAWidth: [{
                 type: HostBinding,
                 args: ['style.--col-a-width']
+            }], _colAHeight: [{
+                type: HostBinding,
+                args: ['style.--col-a-height']
             }], onMouseMove: [{
                 type: HostListener,
                 args: ['window:mousemove', ['$event']]
@@ -40904,7 +40961,8 @@ const DEFAULT_RESIZABLE_CONFIG = Object.freeze({
     collapseThreshold: 320,
     leftColumnWidth: '50%',
     trackId: 'c8y-sv-resizable-default',
-    collapsible: true
+    collapsible: true,
+    orientation: 'horizontal'
 });
 /**
  * A responsive split view layout component with automatic selection management and resizable panes.
@@ -40997,6 +41055,17 @@ const DEFAULT_RESIZABLE_CONFIG = Object.freeze({
  * </c8y-sv>
  * ```
  *
+ * #### Vertical (top/bottom) split
+ *
+ * Set `orientation: 'vertical'` in `resizableConfig` to stack the list above the details pane,
+ * with a draggable horizontal divider, instead of the default side-by-side layout.
+ *
+ * ```html
+ * <c8y-sv [resizableConfig]="{ orientation: 'vertical', leftColumnWidth: '40%' }">
+ *   <!-- content -->
+ * </c8y-sv>
+ * ```
+ *
  * #### List-Only mode
  *
  * Omit `<c8y-sv-details>` for a simple list view:
@@ -41015,10 +41084,11 @@ class SplitViewComponent {
     /**
      * Configuration for resizable grid behavior.
      *
-     * @property trackId - Unique ID for persisting column widths in localStorage
-     * @property leftColumnWidth - Initial width of left column (default: '50%')
-     * @property collapseThreshold - Width threshold (in px) for collapsing columns (default: 320)
-     * @property collapsible - Whether columns can collapse below threshold (default: true)
+     * @property trackId - Unique ID for persisting pane sizes in localStorage
+     * @property leftColumnWidth - Initial size of the first pane along the split axis (default: '50%')
+     * @property collapseThreshold - Size threshold (in px) for collapsing panes (default: 320)
+     * @property collapsible - Whether panes can collapse below threshold (default: true)
+     * @property orientation - `'horizontal'` for left/right panes, `'vertical'` for top/bottom panes (default: 'horizontal')
      *
      * @example
      * ```html
@@ -41029,6 +41099,11 @@ class SplitViewComponent {
      *   collapsible: false
      * }">
      * ```
+     *
+     * @example Vertical (top/bottom) split
+     * ```html
+     * <c8y-sv [resizableConfig]="{ orientation: 'vertical', leftColumnWidth: '40%' }">
+     * ```
      */
     set resizableConfig(config) {
         this._resizableConfig = config ?? {};
@@ -41084,7 +41159,8 @@ class SplitViewComponent {
             collapseThreshold: DEFAULT_RESIZABLE_CONFIG.collapseThreshold,
             leftColumnWidth: DEFAULT_RESIZABLE_CONFIG.leftColumnWidth,
             trackId: DEFAULT_RESIZABLE_CONFIG.trackId,
-            collapsible: DEFAULT_RESIZABLE_CONFIG.collapsible
+            collapsible: DEFAULT_RESIZABLE_CONFIG.collapsible,
+            orientation: DEFAULT_RESIZABLE_CONFIG.orientation
         };
         this._checkViewportWidth();
     }
@@ -41172,20 +41248,28 @@ class SplitViewComponent {
         const leftColumnWidth = this._resizableConfig.leftColumnWidth ?? DEFAULT_RESIZABLE_CONFIG.leftColumnWidth;
         const trackId = this._resizableConfig.trackId ?? DEFAULT_RESIZABLE_CONFIG.trackId;
         const collapsible = this._resizableConfig.collapsible ?? DEFAULT_RESIZABLE_CONFIG.collapsible;
+        const orientation = this._resizableConfig.orientation ?? DEFAULT_RESIZABLE_CONFIG.orientation;
         const current = this._memoizedResizableConfig;
         if (current.collapseThreshold !== collapseThreshold ||
             current.leftColumnWidth !== leftColumnWidth ||
             current.trackId !== trackId ||
-            current.collapsible !== collapsible) {
-            this._memoizedResizableConfig = { collapseThreshold, leftColumnWidth, trackId, collapsible };
+            current.collapsible !== collapsible ||
+            current.orientation !== orientation) {
+            this._memoizedResizableConfig = {
+                collapseThreshold,
+                leftColumnWidth,
+                trackId,
+                collapsible,
+                orientation
+            };
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SplitViewComponent, deps: [{ token: SplitViewSelectionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SplitViewComponent, isStandalone: true, selector: "c8y-sv", inputs: { showDefaultRouterOutlet: "showDefaultRouterOutlet", isResizable: "isResizable", initialSelection: "initialSelection", resizableBreakpoint: "resizableBreakpoint", resizableConfig: "resizableConfig" }, outputs: { selectionChange: "selectionChange" }, providers: [SplitViewSelectionService], queries: [{ propertyName: "_detailsComp", first: true, predicate: SplitViewDetailsComponent, descendants: true }], ngImport: i0, template: "<div\n  [attr.aria-label]=\"'Split view interface' | translate\"\n  tabindex=\"-1\"\n  role=\"main\"\n  [ngClass]=\"getContainerClasses()\"\n  data-cy=\"c8y-sv\"\n>\n  @if (shouldUseResizableGrid) {\n    <c8y-resizable-grid\n      [collapseThreshold]=\"effectiveResizableConfig.collapseThreshold\"\n      [collapsible]=\"effectiveResizableConfig.collapsible\"\n      [leftColumnWidth]=\"effectiveResizableConfig.leftColumnWidth\"\n      [trackId]=\"effectiveResizableConfig.trackId\"\n    >\n      <div left-pane>\n        <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n      </div>\n      <div right-pane>\n        <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n      </div>\n    </c8y-resizable-grid>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n    @if (showDefaultRouterOutlet && !hasProjectedDetails) {\n      <router-outlet class=\"d-contents\"></router-outlet>\n    }\n  }\n\n  <ng-template #listContent>\n    <ng-content select=\":not(c8y-sv-details)\"></ng-content>\n  </ng-template>\n\n  <ng-template #detailsContent>\n    @if (hasProjectedDetails) {\n      <ng-content select=\"c8y-sv-details\"></ng-content>\n    }\n  </ng-template>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SplitViewComponent, isStandalone: true, selector: "c8y-sv", inputs: { showDefaultRouterOutlet: "showDefaultRouterOutlet", isResizable: "isResizable", initialSelection: "initialSelection", resizableBreakpoint: "resizableBreakpoint", resizableConfig: "resizableConfig" }, outputs: { selectionChange: "selectionChange" }, providers: [SplitViewSelectionService], queries: [{ propertyName: "_detailsComp", first: true, predicate: SplitViewDetailsComponent, descendants: true }], ngImport: i0, template: "<div\n  [attr.aria-label]=\"'Split view interface' | translate\"\n  tabindex=\"-1\"\n  role=\"main\"\n  [ngClass]=\"getContainerClasses()\"\n  data-cy=\"c8y-sv\"\n>\n  @if (shouldUseResizableGrid) {\n    <c8y-resizable-grid\n      [collapseThreshold]=\"effectiveResizableConfig.collapseThreshold\"\n      [collapsible]=\"effectiveResizableConfig.collapsible\"\n      [leftColumnWidth]=\"effectiveResizableConfig.leftColumnWidth\"\n      [trackId]=\"effectiveResizableConfig.trackId\"\n      [orientation]=\"effectiveResizableConfig.orientation\"\n    >\n      <div left-pane>\n        <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n      </div>\n      <div right-pane>\n        <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n      </div>\n    </c8y-resizable-grid>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n    @if (showDefaultRouterOutlet && !hasProjectedDetails) {\n      <router-outlet class=\"d-contents\"></router-outlet>\n    }\n  }\n\n  <ng-template #listContent>\n    <ng-content select=\":not(c8y-sv-details)\"></ng-content>\n  </ng-template>\n\n  <ng-template #detailsContent>\n    @if (hasProjectedDetails) {\n      <ng-content select=\"c8y-sv-details\"></ng-content>\n    }\n  </ng-template>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible", "orientation"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SplitViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-sv', standalone: true, imports: [CommonModule$1, RouterOutlet, C8yTranslatePipe, ResizableGridComponent], providers: [SplitViewSelectionService], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n  [attr.aria-label]=\"'Split view interface' | translate\"\n  tabindex=\"-1\"\n  role=\"main\"\n  [ngClass]=\"getContainerClasses()\"\n  data-cy=\"c8y-sv\"\n>\n  @if (shouldUseResizableGrid) {\n    <c8y-resizable-grid\n      [collapseThreshold]=\"effectiveResizableConfig.collapseThreshold\"\n      [collapsible]=\"effectiveResizableConfig.collapsible\"\n      [leftColumnWidth]=\"effectiveResizableConfig.leftColumnWidth\"\n      [trackId]=\"effectiveResizableConfig.trackId\"\n    >\n      <div left-pane>\n        <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n      </div>\n      <div right-pane>\n        <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n      </div>\n    </c8y-resizable-grid>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n    @if (showDefaultRouterOutlet && !hasProjectedDetails) {\n      <router-outlet class=\"d-contents\"></router-outlet>\n    }\n  }\n\n  <ng-template #listContent>\n    <ng-content select=\":not(c8y-sv-details)\"></ng-content>\n  </ng-template>\n\n  <ng-template #detailsContent>\n    @if (hasProjectedDetails) {\n      <ng-content select=\"c8y-sv-details\"></ng-content>\n    }\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'c8y-sv', standalone: true, imports: [CommonModule$1, RouterOutlet, C8yTranslatePipe, ResizableGridComponent], providers: [SplitViewSelectionService], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n  [attr.aria-label]=\"'Split view interface' | translate\"\n  tabindex=\"-1\"\n  role=\"main\"\n  [ngClass]=\"getContainerClasses()\"\n  data-cy=\"c8y-sv\"\n>\n  @if (shouldUseResizableGrid) {\n    <c8y-resizable-grid\n      [collapseThreshold]=\"effectiveResizableConfig.collapseThreshold\"\n      [collapsible]=\"effectiveResizableConfig.collapsible\"\n      [leftColumnWidth]=\"effectiveResizableConfig.leftColumnWidth\"\n      [trackId]=\"effectiveResizableConfig.trackId\"\n      [orientation]=\"effectiveResizableConfig.orientation\"\n    >\n      <div left-pane>\n        <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n      </div>\n      <div right-pane>\n        <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n      </div>\n    </c8y-resizable-grid>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n    @if (showDefaultRouterOutlet && !hasProjectedDetails) {\n      <router-outlet class=\"d-contents\"></router-outlet>\n    }\n  }\n\n  <ng-template #listContent>\n    <ng-content select=\":not(c8y-sv-details)\"></ng-content>\n  </ng-template>\n\n  <ng-template #detailsContent>\n    @if (hasProjectedDetails) {\n      <ng-content select=\"c8y-sv-details\"></ng-content>\n    }\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: () => [{ type: SplitViewSelectionService }], propDecorators: { showDefaultRouterOutlet: [{
                 type: Input
             }], isResizable: [{