@siemens/element-ng 47.2.0 → 47.4.0

package/fesm2022/siemens-element-ng-split.mjs

@@ -0,0 +1,575 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, signal, computed, inject, ElementRef, booleanAttribute, numberAttribute, Input, Output, Component, NgZone, ChangeDetectorRef, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
+import { SiIconNextComponent } from '@siemens/element-ng/icon';
+import * as i1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+import { __decorate } from 'tslib';
+import { SI_UI_STATE_SERVICE, isRTL, WebComponentContentChildren } from '@siemens/element-ng/common';
+import { asapScheduler, merge, fromEvent } from 'rxjs';
+import { observeOn, takeUntil } from 'rxjs/operators';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSplitPartComponent {
+    /** @defaultValue [] */
+    actions = [];
+    /**
+     * @defaultValue 'start'
+     */
+    collapseDirection = 'start';
+    /**
+     * Sets the icon class that is used in the buttons of split parts to
+     * collapse and uncollapse the parts.
+     *
+     * @defaultValue 'element-double-right'
+     */
+    collapseIconClass = 'element-double-right';
+    /**
+     * Collapse only to the given min size.
+     *
+     * @defaultValue false
+     */
+    collapseToMinSize = false;
+    /**
+     * Sets the status color on the split part header, visible as a bottom border and,
+     * if a headerStatusIcon is defined, as the icon´s background color.
+     *
+     * @deprecated Legacy input with no functionality. Will be removed in future major release.
+     */
+    headerStatusColor;
+    /**
+     * Sets the icon class that is used as status icon in the split part header.
+     *
+     * @deprecated Legacy input with no functionality. Will be removed in future major release.
+     */
+    headerStatusIconClass;
+    headerTemplate;
+    /**
+     * Sets the title of the split part header.
+     */
+    heading;
+    /**
+     * Minimum size in px.
+     *
+     * @defaultValue 0
+     */
+    minSize = 0;
+    /**
+     * When a split part is collapsed, the content gets hidden but it will
+     * still remain within the DOM. If you want to remove and destroy the component
+     * in collapsed mode and recreate it on un-collapse, set this property to
+     * true.
+     *
+     * @defaultValue false
+     */
+    removeContentOnCollapse = false;
+    /**
+     * Defines the behavior of the split part during scaling.
+     * E.g. when set to `none`, the spit part will keep its current size even when the parent container grows or shrinks.
+     *
+     * @defaultValue 'auto'
+     */
+    scale = 'auto';
+    /**
+     * Defines if the collapse button of a split part is displayed. Default value is true.
+     *
+     * @defaultValue true
+     */
+    showCollapseButton = true;
+    /**
+     * Defines if the header of the split part is visible. Default is true.
+     *
+     * @defaultValue true
+     */
+    showHeader = true;
+    /**
+     * Aria label for collapse button. Needed for a11y
+     *
+     * @defaultValue 'collapse'
+     */
+    collapseLabel = 'collapse';
+    /**
+     * An optional stateId to uniquely identify a component instance.
+     * Required for persistence of ui state.
+     */
+    stateId;
+    /**
+     * Expanded size in px.
+     */
+    size;
+    /**
+     * This toggles the behavior when collapsing this split part.
+     * If enabled, all split parts between this one and the end of the split in the respective direction will be collapsed if this part is collapsed.
+     * If disabled, only this split part will be collapsed.
+     *
+     * The default value will change to false in v48.
+     *
+     * @defaultValue true
+     */
+    collapseOthers = true;
+    collapseChanged = new EventEmitter();
+    stateChange = new EventEmitter();
+    /** @internal */
+    index = 0;
+    /** @internal */
+    before;
+    /** @internal */
+    after;
+    /** @internal */
+    fractionalSize = signal(undefined);
+    /** @internal */
+    collapsedSize = signal(0);
+    /** @internal */
+    collapsedState = signal(false);
+    /**
+     * Get collapsed state.
+     * @returns True if the split part is collapsed, false is expanded.
+     */
+    get collapsed() {
+        return this.collapsedState();
+    }
+    /** @internal */
+    expandedSize = signal(undefined);
+    /** @internal */
+    actualSize = computed(() => {
+        if (this.collapsedState()) {
+            return this.collapsedSize();
+        }
+        return this.expandedSize() ?? 0;
+    });
+    /** @internal */
+    saveUIState;
+    /** @internal */
+    nextExpandedAfter = computed(() => {
+        if (!this.collapsedState()) {
+            return this;
+        }
+        const nextExpanded = this.after ? this.after.nextExpandedAfter() : this;
+        return nextExpanded;
+    });
+    elementRef = inject(ElementRef);
+    headerContext = {
+        $implicit: this
+    };
+    /** @defaultValue true */
+    set expanded(value) {
+        this.collapsedState.set(!value);
+        if (this.collapseOthers) {
+            this.before?.refreshCollapseToStart();
+            this.after?.refreshCollapsedToEnd();
+        }
+    }
+    get expanded() {
+        return !this.collapsedState();
+    }
+    ngOnChanges(changes) {
+        if (changes.collapseToMinSize && this.collapseToMinSize) {
+            this.collapsedSize.set(this.minSize ?? 40);
+        }
+        else {
+            this.collapsedSize.set(40); // 40px is default size of the header
+        }
+        if (changes.size) {
+            this.expandedSize.set(this.size);
+        }
+    }
+    /** @internal */
+    refreshSizePx(orientation) {
+        if (!this.collapsedState()) {
+            const rect = this.elementRef.nativeElement.getBoundingClientRect();
+            if (orientation === 'vertical') {
+                this.expandedSize.set(rect.height);
+            }
+            else {
+                this.expandedSize.set(rect.width);
+            }
+        }
+    }
+    /**
+     * Toggles the collapsed or expanded state.
+     */
+    toggleCollapse() {
+        this.collapsedState.update(v => !v);
+        if (this.collapseOthers) {
+            this.before?.refreshCollapseToStart();
+            this.after?.refreshCollapsedToEnd();
+        }
+        this.collapseChanged.emit(this.collapsedState());
+        this.stateChange.emit({ expanded: this.expanded, size: this.actualSize() });
+        this.saveUIState();
+    }
+    refreshCollapsedToEnd() {
+        if (this.before?.collapsedState() && this.before.collapseDirection === 'end') {
+            this.collapsedState.set(true);
+            this.collapseDirection = 'end';
+            this.after?.refreshCollapsedToEnd();
+        }
+    }
+    refreshCollapseToStart() {
+        if (this.after?.collapsedState() && this.after.collapseDirection === 'start') {
+            this.collapsedState.set(true);
+            this.collapseDirection = 'start';
+            this.before?.refreshCollapseToStart();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSplitPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiSplitPartComponent, isStandalone: true, selector: "si-split-part", inputs: { actions: "actions", collapseDirection: "collapseDirection", collapseIconClass: "collapseIconClass", collapseToMinSize: ["collapseToMinSize", "collapseToMinSize", booleanAttribute], headerStatusColor: "headerStatusColor", headerStatusIconClass: "headerStatusIconClass", headerTemplate: "headerTemplate", heading: "heading", minSize: ["minSize", "minSize", numberAttribute], removeContentOnCollapse: ["removeContentOnCollapse", "removeContentOnCollapse", booleanAttribute], scale: "scale", showCollapseButton: ["showCollapseButton", "showCollapseButton", booleanAttribute], showHeader: ["showHeader", "showHeader", booleanAttribute], collapseLabel: "collapseLabel", stateId: "stateId", size: ["size", "size", numberAttribute], collapseOthers: ["collapseOthers", "collapseOthers", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { collapseChanged: "collapseChanged", stateChange: "stateChange" }, host: { properties: { "class.is-collapsed": "collapsedState()", "class.collapse-start": "collapseDirection === \"start\"", "style.grid-area": "\"p-\" + this.index" } }, usesOnChanges: true, ngImport: i0, template: "@if (!headerTemplate && showHeader) {\n  <div class=\"si-split-part-header\" [class.is-collapsed]=\"collapsedState()\">\n    <div class=\"si-split-part-title text-truncate\">\n      {{ heading | translate }}\n    </div>\n    @if (!collapsedState()) {\n      <div class=\"si-split-part-actions\">\n        @for (action of actions; track $index) {\n          <button\n            type=\"button\"\n            class=\"si-split-button\"\n            [title]=\"action.tooltip || ''\"\n            [attr.aria-label]=\"action.tooltip\"\n            (click)=\"action.click($event)\"\n          >\n            <si-icon-next [icon]=\"action.iconClass\" />\n          </button>\n        }\n      </div>\n    }\n    @if (showCollapseButton) {\n      <div class=\"si-split-part-collapse-button\">\n        <button\n          type=\"button\"\n          class=\"si-split-button\"\n          [attr.aria-label]=\"collapseLabel | translate\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon-next class=\"collapse-icon\" [icon]=\"collapseIconClass\" />\n        </button>\n      </div>\n    }\n  </div>\n}\n\n@if (headerTemplate) {\n  <ng-container *ngTemplateOutlet=\"headerTemplate; context: headerContext\" />\n}\n\n<div\n  class=\"si-split-part-content\"\n  [class.d-none]=\"!removeContentOnCollapse && collapsedState() && !collapseToMinSize\"\n>\n  @if (!removeContentOnCollapse || !collapsedState()) {\n    <ng-content />\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden}.si-split-part-content{flex:1 1 auto;display:flex;overflow:hidden;flex-direction:column}.si-split-part-header{display:flex;flex-direction:row;flex:none;align-items:center;padding:6px;background:var(--element-base-0);block-size:40px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header{flex:auto;flex-direction:column;max-block-size:100%;padding:6px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header .si-split-part-title{inline-size:100%;writing-mode:vertical-rl;transform:rotate(180deg)}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header .si-split-part-collapse-button{order:-1}.si-split-part-title{font-weight:700;flex:1}.si-split-part-actions{padding-inline:8px;flex:0 0 auto}.si-split-button{display:inline-block;padding:4px;color:var(--element-text-primary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;font-size:20px;line-height:1;vertical-align:middle;-webkit-user-select:none;user-select:none;background:none;border:0;cursor:pointer}.si-split-button:hover{background:var(--element-action-secondary-hover)}:host-context(.vertical)>:host .si-split-button{--orientation-rotate: rotate(90deg)}[dir=rtl] :host-context(.horizontal)>:host .si-split-button{--orientation-rtl: scaleX(-1)}:dir(rtl) :host-context(.horizontal)>:host .si-split-button{--orientation-rtl: scaleX(-1)}:host(.is-collapsed) .si-split-button{--collapse-rotate: rotate(180deg)}:host(.collapse-start) .si-split-button{--collapse-direction: rotate(180deg)}.si-split-button .collapse-icon{transform:var(--orientation-rotate, rotate(0)) var(--collapse-rotate, rotate(0)) var(--collapse-direction, rotate(0)) var(--orientation-rtl, scaleX(1))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSplitPartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-split-part', imports: [NgTemplateOutlet, SiIconNextComponent, SiTranslateModule], host: {
+                        '[class.is-collapsed]': 'collapsedState()',
+                        '[class.collapse-start]': 'collapseDirection === "start"',
+                        '[style.grid-area]': '"p-" + this.index'
+                    }, template: "@if (!headerTemplate && showHeader) {\n  <div class=\"si-split-part-header\" [class.is-collapsed]=\"collapsedState()\">\n    <div class=\"si-split-part-title text-truncate\">\n      {{ heading | translate }}\n    </div>\n    @if (!collapsedState()) {\n      <div class=\"si-split-part-actions\">\n        @for (action of actions; track $index) {\n          <button\n            type=\"button\"\n            class=\"si-split-button\"\n            [title]=\"action.tooltip || ''\"\n            [attr.aria-label]=\"action.tooltip\"\n            (click)=\"action.click($event)\"\n          >\n            <si-icon-next [icon]=\"action.iconClass\" />\n          </button>\n        }\n      </div>\n    }\n    @if (showCollapseButton) {\n      <div class=\"si-split-part-collapse-button\">\n        <button\n          type=\"button\"\n          class=\"si-split-button\"\n          [attr.aria-label]=\"collapseLabel | translate\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon-next class=\"collapse-icon\" [icon]=\"collapseIconClass\" />\n        </button>\n      </div>\n    }\n  </div>\n}\n\n@if (headerTemplate) {\n  <ng-container *ngTemplateOutlet=\"headerTemplate; context: headerContext\" />\n}\n\n<div\n  class=\"si-split-part-content\"\n  [class.d-none]=\"!removeContentOnCollapse && collapsedState() && !collapseToMinSize\"\n>\n  @if (!removeContentOnCollapse || !collapsedState()) {\n    <ng-content />\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden}.si-split-part-content{flex:1 1 auto;display:flex;overflow:hidden;flex-direction:column}.si-split-part-header{display:flex;flex-direction:row;flex:none;align-items:center;padding:6px;background:var(--element-base-0);block-size:40px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header{flex:auto;flex-direction:column;max-block-size:100%;padding:6px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header .si-split-part-title{inline-size:100%;writing-mode:vertical-rl;transform:rotate(180deg)}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header .si-split-part-collapse-button{order:-1}.si-split-part-title{font-weight:700;flex:1}.si-split-part-actions{padding-inline:8px;flex:0 0 auto}.si-split-button{display:inline-block;padding:4px;color:var(--element-text-primary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;font-size:20px;line-height:1;vertical-align:middle;-webkit-user-select:none;user-select:none;background:none;border:0;cursor:pointer}.si-split-button:hover{background:var(--element-action-secondary-hover)}:host-context(.vertical)>:host .si-split-button{--orientation-rotate: rotate(90deg)}[dir=rtl] :host-context(.horizontal)>:host .si-split-button{--orientation-rtl: scaleX(-1)}:dir(rtl) :host-context(.horizontal)>:host .si-split-button{--orientation-rtl: scaleX(-1)}:host(.is-collapsed) .si-split-button{--collapse-rotate: rotate(180deg)}:host(.collapse-start) .si-split-button{--collapse-direction: rotate(180deg)}.si-split-button .collapse-icon{transform:var(--orientation-rotate, rotate(0)) var(--collapse-rotate, rotate(0)) var(--collapse-direction, rotate(0)) var(--orientation-rtl, scaleX(1))}\n"] }]
+        }], propDecorators: { actions: [{
+                type: Input
+            }], collapseDirection: [{
+                type: Input
+            }], collapseIconClass: [{
+                type: Input
+            }], collapseToMinSize: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], headerStatusColor: [{
+                type: Input
+            }], headerStatusIconClass: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], minSize: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], removeContentOnCollapse: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], scale: [{
+                type: Input
+            }], showCollapseButton: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showHeader: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], collapseLabel: [{
+                type: Input
+            }], stateId: [{
+                type: Input
+            }], size: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], collapseOthers: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], collapseChanged: [{
+                type: Output
+            }], stateChange: [{
+                type: Output
+            }], expanded: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class SiSplitComponent {
+    /** @defaultValue 16 */
+    gutterSize = 16;
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    _orientation = signal('horizontal');
+    get orientation() {
+        return this._orientation();
+    }
+    set orientation(value) {
+        this._orientation.set(value);
+    }
+    /** @defaultValue [] */
+    sizes = [];
+    /**
+     * An optional stateId to uniquely identify a component instance.
+     * Required for persistence of ui state.
+     */
+    stateId;
+    sizesChange = new EventEmitter();
+    parts;
+    gutters = [];
+    // eslint-disable-next-line
+    gridTemplateRows = signal('');
+    // eslint-disable-next-line
+    gridTemplateColumns = signal('');
+    // eslint-disable-next-line
+    gridTemplateAreas = signal('');
+    elementRef = inject((ElementRef));
+    ngZone = inject(NgZone);
+    changeDetectorRef = inject(ChangeDetectorRef);
+    document = inject(DOCUMENT);
+    uiStateService = inject(SI_UI_STATE_SERVICE, { optional: true });
+    // New parts won't be measured, so we need this to scale up their fractional size to the expanded size.
+    // Using 10, as the sum of all fractional sizes is 1, so we need to scale them up as fr-values should be >= 1.
+    fractionalSizeToExpandedSizeFactor = 10;
+    ngOnChanges(changes) {
+        if (changes.sizes && !changes.sizes.firstChange) {
+            this.sizes.forEach((size, index) => {
+                const part = this.parts.get(index);
+                if (part) {
+                    part.fractionalSize.set(size);
+                    part.expandedSize.set(undefined);
+                }
+            });
+            this.alignRelativeSizes();
+        }
+    }
+    ngAfterContentInit() {
+        this.parts.changes.pipe(observeOn(asapScheduler)).subscribe(() => {
+            this.changeDetectorRef.markForCheck();
+            this.gutters = [];
+            for (let index = 0; index < this.parts.length; index++) {
+                const component = this.parts.get(index);
+                component.index = index;
+                component.after = this.parts.get(index + 1);
+                component.before = this.parts.get(index - 1);
+                component.fractionalSize.set(this.sizes[index]);
+                component.saveUIState = () => this.saveUIState();
+                if (component.after) {
+                    this.gutters.push({
+                        before: component,
+                        after: this.parts.get(index + 1),
+                        visible: computed(() => {
+                            const afterPart = component.after.nextExpandedAfter();
+                            return !afterPart.collapsedState() && !component.collapsedState();
+                        })
+                    });
+                }
+            }
+            this.alignRelativeSizes();
+            this.updateFractionalSizeToExpandSizeFactor();
+            this.restoreFormUIState();
+            const gridTemplate = computed(() => this.parts
+                .map(part => part.collapsedState()
+                ? part.collapseToMinSize
+                    ? `${part.minSize}px`
+                    : 'min-content'
+                : part.actualSize()
+                    ? part.scale === 'auto'
+                        ? `minmax(${part.minSize}px, ${part.actualSize()}fr)`
+                        : `minmax(${part.minSize}px, ${part.actualSize()}px)`
+                    : `minmax(${part.minSize}px, ${part.fractionalSize() * this.fractionalSizeToExpandedSizeFactor}fr)`)
+                .join(' min-content '));
+            this.gridTemplateRows = computed(() => this._orientation() === 'vertical' ? gridTemplate() : '1fr');
+            this.gridTemplateColumns = computed(() => this._orientation() === 'horizontal' ? gridTemplate() : '1fr');
+            this.gridTemplateAreas = computed(() => {
+                const areaNames = this.parts
+                    .map((part, index) => [`p-${index}`, part.after ? `g-${index}` : []])
+                    .flat(2);
+                if (this._orientation() === 'horizontal') {
+                    return `"${areaNames.join(' ')}"`;
+                }
+                else {
+                    return `"${areaNames.join('" "')}"`;
+                }
+            });
+            setTimeout(() => this.refreshAllPartSizes());
+        });
+        this.parts.notifyOnChanges();
+    }
+    alignRelativeSizes() {
+        const requestedNoSize = this.parts.filter(part => !part.size && !part.fractionalSize());
+        const requestedRelSize = this.parts.filter(part => part.fractionalSize() && !part.size);
+        if (requestedRelSize.length) {
+            const totalRequestedRelSize = requestedRelSize.reduce((a, b) => a + b.fractionalSize(), 0);
+            const averageRelSize = totalRequestedRelSize / requestedRelSize.length;
+            const totalAssignedRelSize = totalRequestedRelSize + requestedNoSize.length * averageRelSize;
+            requestedNoSize.forEach(part => part.fractionalSize.set(averageRelSize / totalAssignedRelSize));
+            requestedRelSize.forEach(part => part.fractionalSize.set(part.fractionalSize() / totalAssignedRelSize));
+        }
+        else {
+            requestedNoSize.forEach(part => part.fractionalSize.set(1 / requestedNoSize.length));
+        }
+    }
+    updateFractionalSizeToExpandSizeFactor() {
+        let previousScalableFractionalSum = 0;
+        let previousScalableExpandedSizeSum = 0;
+        for (let index = 0; index < this.parts.length; index++) {
+            const component = this.parts.get(index);
+            if (component.scale === 'auto' && component.expandedSize() !== undefined) {
+                previousScalableExpandedSizeSum += component.expandedSize();
+                previousScalableFractionalSum += component.fractionalSize();
+            }
+        }
+        this.fractionalSizeToExpandedSizeFactor = previousScalableFractionalSum
+            ? previousScalableExpandedSizeSum / previousScalableFractionalSum
+            : 10;
+    }
+    refreshAllPartSizes() {
+        const refParts = this.parts.filter(part => !part.collapsedState() &&
+            part.scale === 'auto' &&
+            (part.expandedSize() || part.fractionalSize()));
+        const beforeFrSum = refParts.reduce((a, b) => a + (b.expandedSize() ?? b.fractionalSize()), 0);
+        this.parts.forEach(part => part.refreshSizePx(this.orientation));
+        const afterFrSum = refParts.reduce((a, b) => a + b.expandedSize(), 0);
+        const beforeToAfterFactor = afterFrSum / beforeFrSum;
+        this.parts
+            .filter(part => part.collapsedState() && (part.scale === 'auto' || part.expandedSize() === undefined))
+            .forEach(part => part.expandedSize.update(prev => (prev ?? part.fractionalSize()) * beforeToAfterFactor));
+    }
+    resizeStart(gutter, event) {
+        this.refreshAllPartSizes();
+        this.changeDetectorRef.detectChanges();
+        const afterPart = gutter.after.nextExpandedAfter();
+        let beforeSize = gutter.before.expandedSize();
+        let afterSize = afterPart.expandedSize();
+        let appliedDelta = 0;
+        const rtl = isRTL();
+        const startPosition = this.getPosition(event);
+        const minDelta = -1 * (beforeSize - gutter.before.minSize);
+        const maxDelta = afterSize - afterPart.minSize;
+        const containerSize = this.measureContainerSize();
+        event.preventDefault(); // prevents text-selection
+        this.ngZone.runOutsideAngular(() => {
+            merge(fromEvent(this.document, 'mousemove'), fromEvent(this.document, 'touchmove'))
+                .pipe(takeUntil(merge(fromEvent(this.document, 'mouseup'), fromEvent(this.document, 'touchend'))))
+                .subscribe({
+                next: move => {
+                    let delta = this.getPosition(move) - startPosition;
+                    if (rtl && this.orientation === 'horizontal') {
+                        delta *= -1;
+                    }
+                    delta -= appliedDelta;
+                    if (maxDelta < appliedDelta + delta) {
+                        delta = maxDelta - appliedDelta;
+                    }
+                    else if (minDelta > appliedDelta + delta) {
+                        delta = minDelta - appliedDelta;
+                    }
+                    if (delta === 0) {
+                        return;
+                    }
+                    beforeSize += delta;
+                    afterSize -= delta;
+                    appliedDelta += delta;
+                    gutter.before.expandedSize.set(beforeSize);
+                    afterPart.expandedSize.set(afterSize);
+                    if (this.orientation === 'vertical') {
+                        this.elementRef.nativeElement.style.setProperty('grid-template-rows', this.gridTemplateRows());
+                    }
+                    else {
+                        this.elementRef.nativeElement.style.setProperty('grid-template-columns', this.gridTemplateColumns());
+                    }
+                    this.ngZone.run(() => this.sizesChange.emit(this.parts.map(part => (part.actualSize() * 100) / containerSize)));
+                },
+                complete: () => this.saveUIState()
+            });
+        });
+    }
+    measureContainerSize() {
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        if (this._orientation() === 'vertical') {
+            return rect.height;
+        }
+        else {
+            return rect.width;
+        }
+    }
+    getPosition(event) {
+        const positionObject = event.touches?.[0] ?? event;
+        return this.orientation === 'horizontal'
+            ? (positionObject.clientX ?? 0)
+            : (positionObject.clientY ?? 0);
+    }
+    saveUIState() {
+        if (!this.stateId || !this.uiStateService) {
+            return;
+        }
+        const containerSize = this.measureContainerSize();
+        const state = this.parts.reduce((partState, part) => {
+            if (part.stateId) {
+                partState[part.stateId] = {
+                    size: ((part.expandedSize() ?? 0) * 100) / containerSize,
+                    initialSize: this.sizes[part.index],
+                    expanded: part.expanded
+                };
+            }
+            return partState;
+        }, {});
+        this.uiStateService.save(this.stateId, state);
+    }
+    restoreFormUIState() {
+        if (!this.stateId || !this.uiStateService) {
+            return;
+        }
+        this.uiStateService.load(this.stateId).then(uiState => {
+            if (!uiState) {
+                return;
+            }
+            this.parts
+                .filter(part => part.stateId)
+                .map(part => ({ part, state: uiState[part.stateId] }))
+                .filter(({ part, state }) => this.sizes[part.index] === state?.initialSize)
+                .forEach(({ part, state }) => {
+                part.expandedSize.set(undefined);
+                part.fractionalSize.set(state?.size);
+                part.collapsedState.set(!(state?.expanded ?? true));
+            });
+            setTimeout(() => this.refreshAllPartSizes());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiSplitComponent, isStandalone: true, selector: "si-split", inputs: { gutterSize: "gutterSize", orientation: "orientation", sizes: "sizes", stateId: "stateId" }, outputs: { sizesChange: "sizesChange" }, host: { properties: { "class": "_orientation()", "style.grid-template-rows": "gridTemplateRows()", "style.grid-template-columns": "gridTemplateColumns()", "style.grid-template-areas": "gridTemplateAreas()" } }, queries: [{ propertyName: "parts", predicate: SiSplitPartComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content />\n\n@for (gutter of gutters; track $index) {\n  @if ($index < parts.length - 1) {\n    <div\n      class=\"si-split-gutter\"\n      [class.d-none]=\"!gutter.visible()\"\n      [style.grid-area]=\"'g-' + $index\"\n      [style.width.px]=\"orientation === 'horizontal' ? gutterSize : null\"\n      [style.height.px]=\"orientation === 'vertical' ? gutterSize : null\"\n      (mousedown)=\"resizeStart(gutter, $event)\"\n      (touchstart)=\"resizeStart(gutter, $event)\"\n    ></div>\n  }\n}\n", styles: [":host{display:grid;inline-size:100%;block-size:100%}.si-split-gutter{flex:0 0 auto;background:var(--element-base-0);cursor:ew-resize}.si-split-gutter:before{display:block;content:\"\";position:relative;inset-block-start:50%;margin-block-start:-20px;inset-inline-start:50%;margin-inline-start:-3px;inline-size:6px;block-size:40px;background:var(--element-ui-2);border-radius:3px}:host(.vertical)>.si-split-gutter{inline-size:auto;cursor:ns-resize}:host(.vertical)>.si-split-gutter:before{transform:rotate(90deg)}.si-split-gutter:hover:before{background:var(--element-ui-0-hover)}.si-split-gutter:active:before{background:var(--element-ui-0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+__decorate([
+    WebComponentContentChildren(SiSplitPartComponent)
+], SiSplitComponent.prototype, "parts", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSplitComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-split', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': '_orientation()',
+                        '[style.grid-template-rows]': 'gridTemplateRows()',
+                        '[style.grid-template-columns]': 'gridTemplateColumns()',
+                        '[style.grid-template-areas]': 'gridTemplateAreas()'
+                    }, template: "<ng-content />\n\n@for (gutter of gutters; track $index) {\n  @if ($index < parts.length - 1) {\n    <div\n      class=\"si-split-gutter\"\n      [class.d-none]=\"!gutter.visible()\"\n      [style.grid-area]=\"'g-' + $index\"\n      [style.width.px]=\"orientation === 'horizontal' ? gutterSize : null\"\n      [style.height.px]=\"orientation === 'vertical' ? gutterSize : null\"\n      (mousedown)=\"resizeStart(gutter, $event)\"\n      (touchstart)=\"resizeStart(gutter, $event)\"\n    ></div>\n  }\n}\n", styles: [":host{display:grid;inline-size:100%;block-size:100%}.si-split-gutter{flex:0 0 auto;background:var(--element-base-0);cursor:ew-resize}.si-split-gutter:before{display:block;content:\"\";position:relative;inset-block-start:50%;margin-block-start:-20px;inset-inline-start:50%;margin-inline-start:-3px;inline-size:6px;block-size:40px;background:var(--element-ui-2);border-radius:3px}:host(.vertical)>.si-split-gutter{inline-size:auto;cursor:ns-resize}:host(.vertical)>.si-split-gutter:before{transform:rotate(90deg)}.si-split-gutter:hover:before{background:var(--element-ui-0-hover)}.si-split-gutter:active:before{background:var(--element-ui-0)}\n"] }]
+        }], propDecorators: { gutterSize: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], sizes: [{
+                type: Input
+            }], stateId: [{
+                type: Input
+            }], sizesChange: [{
+                type: Output
+            }], parts: [{
+                type: ContentChildren,
+                args: [SiSplitPartComponent]
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSplitModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSplitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiSplitModule, imports: [SiSplitComponent, SiSplitPartComponent], exports: [SiSplitComponent, SiSplitPartComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSplitModule, imports: [SiSplitPartComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSplitModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SiSplitComponent, SiSplitPartComponent],
+                    exports: [SiSplitComponent, SiSplitPartComponent]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiSplitComponent, SiSplitModule, SiSplitPartComponent };
+//# sourceMappingURL=siemens-element-ng-split.mjs.map