import * as i0 from '@angular/core';
import { EventEmitter, signal, computed, inject, ElementRef, booleanAttribute, numberAttribute, Input, Output, Component, NgZone, ChangeDetectorRef, DOCUMENT, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { SiIconComponent } from '@siemens/element-ng/icon';
import { SiTranslatePipe } 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 (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
/* eslint-disable @angular-eslint/prefer-output-emitter-ref */
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;
    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.
     *
     * @defaultValue false
     */
    collapseOthers = false;
    collapseChanged = new EventEmitter();
    stateChange = new EventEmitter();
    /** @internal */
    index = 0;
    /** @internal */
    before;
    /** @internal */
    after;
    /** @internal */
    fractionalSize = signal(undefined, ...(ngDevMode ? [{ debugName: "fractionalSize" }] : []));
    /** @internal */
    collapsedSize = signal(0, ...(ngDevMode ? [{ debugName: "collapsedSize" }] : []));
    /** @internal */
    collapsedState = signal(false, ...(ngDevMode ? [{ debugName: "collapsedState" }] : []));
    /**
     * Get collapsed state.
     * @returns True if the split part is collapsed, false is expanded.
     */
    get collapsed() {
        return this.collapsedState();
    }
    /** @internal */
    expandedSize = signal(undefined, ...(ngDevMode ? [{ debugName: "expandedSize" }] : []));
    /** @internal */
    actualSize = computed(() => {
        if (this.collapsedState()) {
            return this.collapsedSize();
        }
        return this.expandedSize() ?? 0;
    }, ...(ngDevMode ? [{ debugName: "actualSize" }] : []));
    /** @internal */
    saveUIState;
    /** @internal */
    nextExpandedAfter = computed(() => {
        if (!this.collapsedState()) {
            return this;
        }
        const nextExpanded = this.after ? this.after.nextExpandedAfter() : this;
        return nextExpanded;
    }, ...(ngDevMode ? [{ debugName: "nextExpandedAfter" }] : []));
    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: "21.0.8", ngImport: i0, type: SiSplitPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSplitPartComponent, isStandalone: true, selector: "si-split-part", inputs: { actions: "actions", collapseDirection: "collapseDirection", collapseIconClass: "collapseIconClass", collapseToMinSize: ["collapseToMinSize", "collapseToMinSize", booleanAttribute], 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 [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 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:600;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: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSplitPartComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-split-part', imports: [NgTemplateOutlet, SiIconComponent, SiTranslatePipe], 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 [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 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:600;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 }]
            }], 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', ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
    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('', ...(ngDevMode ? [{ debugName: "gridTemplateRows" }] : []));
    // eslint-disable-next-line
    gridTemplateColumns = signal('', ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : []));
    // eslint-disable-next-line
    gridTemplateAreas = signal('', ...(ngDevMode ? [{ debugName: "gridTemplateAreas" }] : []));
    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 '), ...(ngDevMode ? [{ debugName: "gridTemplate" }] : []));
            this.gridTemplateRows = computed(() => this._orientation() === 'vertical' ? gridTemplate() : '1fr', ...(ngDevMode ? [{ debugName: "gridTemplateRows" }] : []));
            this.gridTemplateColumns = computed(() => this._orientation() === 'horizontal' ? gridTemplate() : '1fr', ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : []));
            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('" "')}"`;
                }
            }, ...(ngDevMode ? [{ debugName: "gridTemplateAreas" }] : []));
            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: "21.0.8", ngImport: i0, type: SiSplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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: "21.0.8", 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 (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiSplitModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSplitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiSplitModule, imports: [SiSplitComponent, SiSplitPartComponent], exports: [SiSplitComponent, SiSplitPartComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSplitModule, imports: [SiSplitPartComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSplitModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [SiSplitComponent, SiSplitPartComponent],
                    exports: [SiSplitComponent, SiSplitPartComponent]
                }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SiSplitComponent, SiSplitModule, SiSplitPartComponent };
//# sourceMappingURL=siemens-element-ng-split.mjs.map
