@gravionlabs/helix-core 22.1.1 → 22.1.3

package/fesm2022/gravionlabs-helix-core-splitter.mjs

@@ -1,16 +1,15 @@
-export * from '@gravionlabs/helix-core/types/splitter';
-import * as i2 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, numberAttribute, model, effect, output, contentChildren, contentChild, forwardRef, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import { getWidth, getHeight, getOuterWidth, getOuterHeight, addClass, isRTL, removeClass } from '@gravionlabs/helix-core/uix/utils';
-import { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
-import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
-import * as i1 from '@gravionlabs/helix-core/bind';
-import { Bind, BindModule } from '@gravionlabs/helix-core/bind';
-import { BaseStyle } from '@gravionlabs/helix-core/base';
-
-const style = /*css*/ `
+import * as i2 from "@angular/common";
+import { CommonModule, isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, ViewEncapsulation, computed, contentChild, contentChildren, effect, forwardRef, inject, input, model, numberAttribute, output } from "@angular/core";
+import { addClass, getHeight, getOuterHeight, getOuterWidth, getWidth, isRTL, removeClass } from "@gravionlabs/helix-core/uix/utils";
+import { HelixTemplate, SharedModule } from "@gravionlabs/helix-core/api";
+import { BaseComponent, PARENT_INSTANCE } from "@gravionlabs/helix-core/basecomponent";
+import * as i1 from "@gravionlabs/helix-core/bind";
+import { Bind, BindModule } from "@gravionlabs/helix-core/bind";
+import { BaseStyle } from "@gravionlabs/helix-core/base";
+export * from "@gravionlabs/helix-core/types/splitter";
+const style = `
     .h-splitter {
         display: flex;
         flex-wrap: nowrap;
@@ -93,505 +92,734 @@ const style = /*css*/ `
         border: 0 none;
     }
 `;
-
 const classes = {
-    root: ({ instance }) => ['h-splitter h-component', 'h-splitter-' + instance.layout()],
-    panel: ({ instance }) => ['h-splitterpanel', { 'h-splitterpanel-nested': instance.nestedState() }],
-    gutter: 'h-splitter-gutter',
-    gutterHandle: 'h-splitter-gutter-handle'
+	root: ({ instance }) => ["h-splitter h-component", "h-splitter-" + instance.layout()],
+	panel: ({ instance }) => ["h-splitterpanel", { "h-splitterpanel-nested": instance.nestedState() }],
+	gutter: "h-splitter-gutter",
+	gutterHandle: "h-splitter-gutter-handle"
 };
-const inlineStyles = {
-    root: ({ instance }) => [{ display: 'flex', 'flex-wrap': 'nowrap' }, instance.layout() === 'vertical' ? { 'flex-direction': 'column' } : '']
+const inlineStyles = { root: ({ instance }) => [{
+	display: "flex",
+	"flex-wrap": "nowrap"
+}, instance.layout() === "vertical" ? { "flex-direction": "column" } : ""] };
+var SplitterStyle = class SplitterStyle extends BaseStyle {
+	name = "splitter";
+	style = style;
+	classes = classes;
+	inlineStyles = inlineStyles;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SplitterStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SplitterStyle
+	});
 };
-class SplitterStyle extends BaseStyle {
-    name = 'splitter';
-    style = style;
-    classes = classes;
-    inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitterStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitterStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitterStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * Splitter is utilized to separate and resize panels.
- *
- * [Live Demo](https://www.primeng.org/splitter/)
- *
- * @module splitterstyle
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SplitterStyle,
+	decorators: [{ type: Injectable }]
+});
 var SplitterClasses;
-(function (SplitterClasses) {
-    /**
-     * Class name of the root element
-     */
-    SplitterClasses["root"] = "h-splitter";
-    /**
-     * Class name of the gutter element
-     */
-    SplitterClasses["gutter"] = "h-splitter-gutter";
-    /**
-     * Class name of the gutter handle element
-     */
-    SplitterClasses["gutterHandle"] = "h-splitter-gutter-handle";
+(function(SplitterClasses) {
+	SplitterClasses["root"] = "h-splitter";
+	SplitterClasses["gutter"] = "h-splitter-gutter";
+	SplitterClasses["gutterHandle"] = "h-splitter-gutter-handle";
 })(SplitterClasses || (SplitterClasses = {}));
-
-const SPLITTER_INSTANCE = new InjectionToken('SPLITTER_INSTANCE');
-/**
- * Splitter is utilized to separate and resize panels.
- * @group Components
- */
-class Splitter extends BaseComponent {
-    componentName = 'Splitter';
-    $pcSplitter = inject(SPLITTER_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    /**
-     * Style class of the component.
-     * @deprecated since v20. Use `class` instead.
-     * @group Props
-     */
-    styleClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Style class of the panel.
-     * @group Props
-     */
-    panelStyleClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "panelStyleClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Inline style of the panel.
-     * @group Props
-     */
-    panelStyle = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "panelStyle" }] : /* istanbul ignore next */ []));
-    /**
-     * Defines where a stateful splitter keeps its state, valid values are 'session' for sessionStorage and 'local' for localStorage.
-     * @group Props
-     */
-    stateStorage = input('session', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "stateStorage" }] : /* istanbul ignore next */ []));
-    /**
-     * Storage identifier of a stateful Splitter.
-     * @group Props
-     */
-    stateKey = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "stateKey" }] : /* istanbul ignore next */ []));
-    /**
-     * Orientation of the panels. Valid values are 'horizontal' and 'vertical'.
-     * @group Props
-     */
-    layout = input('horizontal', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-    /**
-     * Size of the divider in pixels.
-     * @group Props
-     */
-    gutterSize = input(4, { ...(ngDevMode ? { debugName: "gutterSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * Step factor to increment/decrement the size of the panels while pressing the arrow keys.
-     * @group Props
-     */
-    step = input(5, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * Minimum size of the elements relative to 100%.
-     * @group Props
-     */
-    minSizes = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "minSizes" }] : /* istanbul ignore next */ []));
-    /**
-     * Size of the elements relative to 100%.
-     * @group Props
-     */
-    panelSizes = model([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "panelSizes" }] : /* istanbul ignore next */ []));
-    _panelSizesEffect = effect(() => {
-        const sizes = this.panelSizes();
-        if (this.el && this.el.nativeElement && this.panels.length > 0) {
-            let children = [...this.el.nativeElement.children].filter((child) => child.getAttribute('data-pc-section') === 'panel');
-            this.panels.map((panel, i) => {
-                let panelInitialSize = sizes.length - 1 >= i ? sizes[i] : null;
-                let panelSize = panelInitialSize || 100 / this.panels.length;
-                children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (this.panels.length - 1) * this.gutterSize() + 'px)';
-            });
-        }
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelSizesEffect" }] : /* istanbul ignore next */ []));
-    /**
-     * Callback to invoke when resize ends.
-     * @param {SplitterResizeEndEvent} event - Custom panel resize end event
-     * @group Emits
-     */
-    onResizeEnd = output();
-    /**
-     * Callback to invoke when resize starts.
-     * @param {SplitterResizeStartEvent} event - Custom panel resize start event
-     * @group Emits
-     */
-    onResizeStart = output();
-    templates = contentChildren(HelixTemplate, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    panelChildren = contentChildren('panel', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "panelChildren" }] : /* istanbul ignore next */ []));
-    splitter = contentChild(forwardRef(() => Splitter), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "splitter" }] : /* istanbul ignore next */ []));
-    nestedState = computed(() => this.splitter(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "nestedState" }] : /* istanbul ignore next */ []));
-    panels = [];
-    dragging = false;
-    mouseMoveListener;
-    mouseUpListener;
-    touchMoveListener;
-    touchEndListener;
-    size;
-    gutterElement;
-    startPos;
-    prevPanelElement;
-    nextPanelElement;
-    nextPanelSize;
-    prevPanelSize;
-    prevPanelIndex;
-    timer;
-    prevSize;
-    _componentStyle = inject(SplitterStyle);
-    onAfterContentInit() {
-        const templates = this.templates();
-        if (templates && templates.length > 0) {
-            templates.forEach((item) => {
-                switch (item.getType()) {
-                    case 'panel':
-                        this.panels.push(item.template);
-                        break;
-                    default:
-                        this.panels.push(item.template);
-                        break;
-                }
-            });
-        }
-        const panelChildren = this.panelChildren();
-        if (panelChildren && panelChildren.length > 0) {
-            panelChildren.forEach((item) => {
-                this.panels.push(item);
-            });
-        }
-    }
-    onAfterViewInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            if (this.panels && this.panels.length) {
-                let initialized = false;
-                if (this.isStateful()) {
-                    initialized = this.restoreState();
-                }
-                if (!initialized) {
-                    let children = [...this.el.nativeElement.children].filter((child) => child.getAttribute('data-pc-section') === 'panel');
-                    let _panelSizes = [];
-                    this.panels.map((panel, i) => {
-                        let panelInitialSize = this.panelSizes().length - 1 >= i ? this.panelSizes()[i] : null;
-                        let panelSize = panelInitialSize || 100 / this.panels.length;
-                        _panelSizes[i] = panelSize;
-                        children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (this.panels.length - 1) * this.gutterSize() + 'px)';
-                    });
-                    this.panelSizes.set(_panelSizes);
-                    this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
-                }
-            }
-        }
-    }
-    resizeStart(event, index, isKeyDown) {
-        this.gutterElement = event.currentTarget || event.target.parentElement;
-        this.size = this.horizontal() ? getWidth(this.el.nativeElement) : getHeight(this.el.nativeElement);
-        if (!isKeyDown) {
-            this.dragging = true;
-            this.startPos = this.horizontal() ? (event instanceof MouseEvent ? event.pageX : event.changedTouches[0].pageX) : event instanceof MouseEvent ? event.pageY : event.changedTouches[0].pageY;
-        }
-        this.prevPanelElement = this.gutterElement.previousElementSibling;
-        this.nextPanelElement = this.gutterElement.nextElementSibling;
-        if (isKeyDown) {
-            this.prevPanelSize = this.horizontal() ? getOuterWidth(this.prevPanelElement, true) : getOuterHeight(this.prevPanelElement, true);
-            this.nextPanelSize = this.horizontal() ? getOuterWidth(this.nextPanelElement, true) : getOuterHeight(this.nextPanelElement, true);
-        }
-        else {
-            this.prevPanelSize = (100 * (this.horizontal() ? getOuterWidth(this.prevPanelElement, true) : getOuterHeight(this.prevPanelElement, true))) / this.size;
-            this.nextPanelSize = (100 * (this.horizontal() ? getOuterWidth(this.nextPanelElement, true) : getOuterHeight(this.nextPanelElement, true))) / this.size;
-        }
-        this.prevPanelIndex = index;
-        addClass(this.gutterElement, 'h-splitter-gutter-resizing');
-        this.gutterElement.setAttribute('data-h-gutter-resizing', 'true');
-        addClass(this.el.nativeElement, 'h-splitter-resizing');
-        this.el.nativeElement.setAttribute('data-h-resizing', 'true');
-        this.onResizeStart.emit({ originalEvent: event, sizes: this.panelSizes() });
-    }
-    onResize(event, step, isKeyDown) {
-        let newPos, newPrevPanelSize, newNextPanelSize;
-        if (isKeyDown) {
-            if (this.horizontal()) {
-                newPrevPanelSize = (100 * ((this.prevPanelSize ?? 0) + (step ?? 0))) / (this.size ?? 1);
-                newNextPanelSize = (100 * ((this.nextPanelSize ?? 0) - (step ?? 0))) / (this.size ?? 1);
-            }
-            else {
-                newPrevPanelSize = (100 * ((this.prevPanelSize ?? 0) - (step ?? 0))) / (this.size ?? 1);
-                newNextPanelSize = (100 * ((this.nextPanelSize ?? 0) + (step ?? 0))) / (this.size ?? 1);
-            }
-        }
-        else {
-            if (this.horizontal()) {
-                if (isRTL(this.el.nativeElement)) {
-                    newPos = (((this.startPos ?? 0) - event.pageX) * 100) / (this.size ?? 1);
-                }
-                else {
-                    newPos = ((event.pageX - (this.startPos ?? 0)) * 100) / (this.size ?? 1);
-                }
-            }
-            else {
-                newPos = ((event.pageY - (this.startPos ?? 0)) * 100) / (this.size ?? 1);
-            }
-            newPrevPanelSize = this.prevPanelSize + newPos;
-            newNextPanelSize = this.nextPanelSize - newPos;
-        }
-        this.prevSize = parseFloat(newPrevPanelSize).toFixed(4);
-        if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
-            this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + (this.panels.length - 1) * this.gutterSize() + 'px)';
-            this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + (this.panels.length - 1) * this.gutterSize() + 'px)';
-            const sizes = [...this.panelSizes()];
-            sizes[this.prevPanelIndex] = newPrevPanelSize;
-            sizes[this.prevPanelIndex + 1] = newNextPanelSize;
-            this.panelSizes.set(sizes);
-        }
-    }
-    resizeEnd(event) {
-        if (this.isStateful()) {
-            this.saveState();
-        }
-        this.onResizeEnd.emit({ originalEvent: event, sizes: this.panelSizes() });
-        removeClass(this.gutterElement, 'h-splitter-gutter-resizing');
-        removeClass(this.el.nativeElement, 'h-splitter-resizing');
-        this.clear();
-    }
-    onGutterMouseDown(event, index) {
-        this.resizeStart(event, index);
-        this.bindMouseListeners();
-    }
-    onGutterTouchStart(event, index) {
-        if (event.cancelable) {
-            this.resizeStart(event, index);
-            this.bindTouchListeners();
-            event.preventDefault();
-        }
-    }
-    onGutterTouchMove(event) {
-        this.onResize(event);
-        event.preventDefault();
-    }
-    onGutterTouchEnd(event) {
-        this.resizeEnd(event);
-        this.unbindTouchListeners();
-        if (event.cancelable)
-            event.preventDefault();
-    }
-    repeat(event, index, step) {
-        this.resizeStart(event, index, true);
-        this.onResize(event, step, true);
-    }
-    setTimer(event, index, step) {
-        this.clearTimer();
-        this.timer = setTimeout(() => {
-            this.repeat(event, index, step);
-        }, 40);
-    }
-    clearTimer() {
-        if (this.timer) {
-            clearTimeout(this.timer);
-        }
-    }
-    onGutterKeyUp(event) {
-        this.clearTimer();
-        this.resizeEnd(event);
-    }
-    onGutterKeyDown(event, index) {
-        switch (event.code) {
-            case 'ArrowLeft': {
-                if (this.layout() === 'horizontal') {
-                    this.setTimer(event, index, this.step() * -1);
-                }
-                event.preventDefault();
-                break;
-            }
-            case 'ArrowRight': {
-                if (this.layout() === 'horizontal') {
-                    this.setTimer(event, index, this.step());
-                }
-                event.preventDefault();
-                break;
-            }
-            case 'ArrowDown': {
-                if (this.layout() === 'vertical') {
-                    this.setTimer(event, index, this.step() * -1);
-                }
-                event.preventDefault();
-                break;
-            }
-            case 'ArrowUp': {
-                if (this.layout() === 'vertical') {
-                    this.setTimer(event, index, this.step());
-                }
-                event.preventDefault();
-                break;
-            }
-            default:
-                //no op
-                break;
-        }
-    }
-    validateResize(newPrevPanelSize, newNextPanelSize) {
-        const minSizes = this.minSizes();
-        if (this.minSizes().length >= 1 && minSizes[0] && minSizes[0] > newPrevPanelSize) {
-            return false;
-        }
-        const minSizesValue = this.minSizes();
-        if (this.minSizes().length > 1 && minSizesValue[1] && minSizesValue[1] > newNextPanelSize) {
-            return false;
-        }
-        return true;
-    }
-    bindMouseListeners() {
-        if (!this.mouseMoveListener) {
-            this.mouseMoveListener = this.renderer.listen(this.document, 'mousemove', (event) => {
-                this.onResize(event);
-            });
-        }
-        if (!this.mouseUpListener) {
-            this.mouseUpListener = this.renderer.listen(this.document, 'mouseup', (event) => {
-                this.resizeEnd(event);
-                this.unbindMouseListeners();
-            });
-        }
-    }
-    bindTouchListeners() {
-        if (!this.touchMoveListener) {
-            this.touchMoveListener = this.renderer.listen(this.document, 'touchmove', (event) => {
-                this.onResize(event.changedTouches[0]);
-            });
-        }
-        if (!this.touchEndListener) {
-            this.touchEndListener = this.renderer.listen(this.document, 'touchend', (event) => {
-                this.resizeEnd(event);
-                this.unbindTouchListeners();
-            });
-        }
-    }
-    unbindMouseListeners() {
-        if (this.mouseMoveListener) {
-            this.mouseMoveListener();
-            this.mouseMoveListener = null;
-        }
-        if (this.mouseUpListener) {
-            this.mouseUpListener();
-            this.mouseUpListener = null;
-        }
-    }
-    unbindTouchListeners() {
-        if (this.touchMoveListener) {
-            this.touchMoveListener();
-            this.touchMoveListener = null;
-        }
-        if (this.touchEndListener) {
-            this.touchEndListener();
-            this.touchEndListener = null;
-        }
-    }
-    clear() {
-        this.dragging = false;
-        this.size = null;
-        this.startPos = null;
-        this.prevPanelElement = null;
-        this.nextPanelElement = null;
-        this.prevPanelSize = null;
-        this.nextPanelSize = null;
-        this.gutterElement = null;
-        this.prevPanelIndex = null;
-    }
-    isStateful() {
-        return this.stateKey() != null;
-    }
-    getStorage() {
-        if (isPlatformBrowser(this.platformId)) {
-            const stateStorage = this.stateStorage();
-            switch (stateStorage) {
-                case 'local':
-                    return this.document.defaultView?.localStorage;
-                case 'session':
-                    return this.document.defaultView?.sessionStorage;
-                default:
-                    throw new Error(stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
-            }
-        }
-        else {
-            throw new Error('Storage is not a available by default on the server.');
-        }
-    }
-    saveState() {
-        this.getStorage()?.setItem(this.stateKey(), JSON.stringify(this.panelSizes()));
-    }
-    restoreState() {
-        const storage = this.getStorage();
-        const stateString = storage?.getItem(this.stateKey());
-        if (stateString) {
-            this.panelSizes.set(JSON.parse(stateString));
-            let children = [...this.el.nativeElement.children].filter((child) => child.getAttribute('data-pc-section') === 'panel');
-            children.forEach((child, i) => {
-                child.style.flexBasis = 'calc(' + this.panelSizes()[i] + '% - ' + (this.panels.length - 1) * this.gutterSize() + 'px)';
-            });
-            return true;
-        }
-        return false;
-    }
-    gutterStyle() {
-        if (this.horizontal())
-            return { width: this.gutterSize() + 'px' };
-        else
-            return { height: this.gutterSize() + 'px' };
-    }
-    horizontal() {
-        return this.layout() === 'horizontal';
-    }
-    get dataP() {
-        return this.cn({
-            [this.layout()]: this.layout(),
-            nested: this.nestedState() != null
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Splitter, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Splitter, isStandalone: true, selector: "h-splitter", inputs: { styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, stateStorage: { classPropertyName: "stateStorage", publicName: "stateStorage", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minSizes: { classPropertyName: "minSizes", publicName: "minSizes", isSignal: true, isRequired: false, transformFunction: null }, panelSizes: { classPropertyName: "panelSizes", publicName: "panelSizes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelSizes: "panelSizesChange", onResizeEnd: "onResizeEnd", onResizeStart: "onResizeStart" }, host: { properties: { "class": "cn(cx('root'), styleClass())", "attr.data-h-gutter-resizing": "false", "attr.data-h": "dataP" } }, providers: [SplitterStyle, { provide: SPLITTER_INSTANCE, useExisting: Splitter }, { provide: PARENT_INSTANCE, useExisting: Splitter }], queries: [{ propertyName: "templates", predicate: HelixTemplate, isSignal: true }, { propertyName: "panelChildren", predicate: ["panel"], isSignal: true }, { propertyName: "splitter", first: true, predicate: i0.forwardRef(() => Splitter), descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "@for (panel of panels; track panel; let i = $index) {\n  <div [hBind]=\"ptm('panel')\" [class]=\"cn(cx('panel'), panelStyleClass())\" [ngStyle]=\"panelStyle()\" tabindex=\"-1\">\n    <ng-container *ngTemplateOutlet=\"panel\"></ng-container>\n  </div>\n  @if (i !== panels.length - 1) {\n    <div\n      [hBind]=\"ptm('gutter')\"\n      [class]=\"cx('gutter')\"\n      role=\"separator\"\n      tabindex=\"-1\"\n      (mousedown)=\"onGutterMouseDown($event, i)\"\n      (touchstart)=\"onGutterTouchStart($event, i)\"\n      (touchmove)=\"onGutterTouchMove($event)\"\n      (touchend)=\"onGutterTouchEnd($event)\"\n      [attr.data-h-gutter-resizing]=\"false\"\n      [attr.data-h]=\"dataP\"\n      >\n      <div\n        [hBind]=\"ptm('gutterHandle')\"\n        [class]=\"cx('gutterHandle')\"\n        tabindex=\"0\"\n        [ngStyle]=\"gutterStyle()\"\n        [attr.aria-orientation]=\"layout()\"\n        [attr.aria-valuenow]=\"prevSize\"\n        (keyup)=\"onGutterKeyUp($event)\"\n        (keydown)=\"onGutterKeyDown($event, i)\"\n      ></div>\n    </div>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[hBind]", inputs: ["hBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Splitter, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-splitter', standalone: true, imports: [CommonModule, SharedModule, BindModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class]': "cn(cx('root'), styleClass())",
-                        '[attr.data-h-gutter-resizing]': 'false',
-                        '[attr.data-h]': 'dataP'
-                    }, providers: [SplitterStyle, { provide: SPLITTER_INSTANCE, useExisting: Splitter }, { provide: PARENT_INSTANCE, useExisting: Splitter }], hostDirectives: [Bind], template: "@for (panel of panels; track panel; let i = $index) {\n  <div [hBind]=\"ptm('panel')\" [class]=\"cn(cx('panel'), panelStyleClass())\" [ngStyle]=\"panelStyle()\" tabindex=\"-1\">\n    <ng-container *ngTemplateOutlet=\"panel\"></ng-container>\n  </div>\n  @if (i !== panels.length - 1) {\n    <div\n      [hBind]=\"ptm('gutter')\"\n      [class]=\"cx('gutter')\"\n      role=\"separator\"\n      tabindex=\"-1\"\n      (mousedown)=\"onGutterMouseDown($event, i)\"\n      (touchstart)=\"onGutterTouchStart($event, i)\"\n      (touchmove)=\"onGutterTouchMove($event)\"\n      (touchend)=\"onGutterTouchEnd($event)\"\n      [attr.data-h-gutter-resizing]=\"false\"\n      [attr.data-h]=\"dataP\"\n      >\n      <div\n        [hBind]=\"ptm('gutterHandle')\"\n        [class]=\"cx('gutterHandle')\"\n        tabindex=\"0\"\n        [ngStyle]=\"gutterStyle()\"\n        [attr.aria-orientation]=\"layout()\"\n        [attr.aria-valuenow]=\"prevSize\"\n        (keyup)=\"onGutterKeyUp($event)\"\n        (keydown)=\"onGutterKeyDown($event, i)\"\n      ></div>\n    </div>\n  }\n}\n" }]
-        }], propDecorators: { styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], panelStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyleClass", required: false }] }], panelStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyle", required: false }] }], stateStorage: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateStorage", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], minSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSizes", required: false }] }], panelSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelSizes", required: false }] }, { type: i0.Output, args: ["panelSizesChange"] }], onResizeEnd: [{ type: i0.Output, args: ["onResizeEnd"] }], onResizeStart: [{ type: i0.Output, args: ["onResizeStart"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }], panelChildren: [{ type: i0.ContentChildren, args: ['panel', { isSignal: true }] }], splitter: [{ type: i0.ContentChild, args: [forwardRef(() => Splitter), { isSignal: true }] }] } });
-class SplitterModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: SplitterModule, imports: [Splitter, SharedModule, BindModule], exports: [Splitter, SharedModule, BindModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitterModule, imports: [Splitter, SharedModule, BindModule, SharedModule, BindModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitterModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [Splitter, SharedModule, BindModule],
-                    exports: [Splitter, SharedModule, BindModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+const SPLITTER_INSTANCE = new InjectionToken("SPLITTER_INSTANCE");
+var Splitter = class Splitter extends BaseComponent {
+	componentName = "Splitter";
+	$pcSplitter = inject(SPLITTER_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	styleClass = input(...ngDevMode ? [void 0, { debugName: "styleClass" }] : 	/* istanbul ignore next */ []);
+	panelStyleClass = input(...ngDevMode ? [void 0, { debugName: "panelStyleClass" }] : 	/* istanbul ignore next */ []);
+	panelStyle = input(...ngDevMode ? [void 0, { debugName: "panelStyle" }] : 	/* istanbul ignore next */ []);
+	stateStorage = input("session", ...ngDevMode ? [{ debugName: "stateStorage" }] : 	/* istanbul ignore next */ []);
+	stateKey = input(null, ...ngDevMode ? [{ debugName: "stateKey" }] : 	/* istanbul ignore next */ []);
+	layout = input("horizontal", ...ngDevMode ? [{ debugName: "layout" }] : 	/* istanbul ignore next */ []);
+	gutterSize = input(4, {
+		...ngDevMode ? { debugName: "gutterSize" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	step = input(5, {
+		...ngDevMode ? { debugName: "step" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	minSizes = input([], ...ngDevMode ? [{ debugName: "minSizes" }] : 	/* istanbul ignore next */ []);
+	panelSizes = model([], ...ngDevMode ? [{ debugName: "panelSizes" }] : 	/* istanbul ignore next */ []);
+	_panelSizesEffect = effect(() => {
+		const sizes = this.panelSizes();
+		if (this.el && this.el.nativeElement && this.panels.length > 0) {
+			let children = [...this.el.nativeElement.children].filter((child) => child.getAttribute("data-pc-section") === "panel");
+			this.panels.map((panel, i) => {
+				let panelSize = (sizes.length - 1 >= i ? sizes[i] : null) || 100 / this.panels.length;
+				children[i].style.flexBasis = "calc(" + panelSize + "% - " + (this.panels.length - 1) * this.gutterSize() + "px)";
+			});
+		}
+	}, ...ngDevMode ? [{ debugName: "_panelSizesEffect" }] : 	/* istanbul ignore next */ []);
+	onResizeEnd = output();
+	onResizeStart = output();
+	templates = contentChildren(HelixTemplate, ...ngDevMode ? [{ debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	panelChildren = contentChildren("panel", ...ngDevMode ? [{ debugName: "panelChildren" }] : 	/* istanbul ignore next */ []);
+	splitter = contentChild(forwardRef(() => Splitter), ...ngDevMode ? [{ debugName: "splitter" }] : 	/* istanbul ignore next */ []);
+	nestedState = computed(() => this.splitter(), ...ngDevMode ? [{ debugName: "nestedState" }] : 	/* istanbul ignore next */ []);
+	panels = [];
+	dragging = false;
+	mouseMoveListener;
+	mouseUpListener;
+	touchMoveListener;
+	touchEndListener;
+	size;
+	gutterElement;
+	startPos;
+	prevPanelElement;
+	nextPanelElement;
+	nextPanelSize;
+	prevPanelSize;
+	prevPanelIndex;
+	timer;
+	prevSize;
+	_componentStyle = inject(SplitterStyle);
+	onAfterContentInit() {
+		const templates = this.templates();
+		if (templates && templates.length > 0) templates.forEach((item) => {
+			switch (item.getType()) {
+				case "panel":
+					this.panels.push(item.template);
+					break;
+				default:
+					this.panels.push(item.template);
+					break;
+			}
+		});
+		const panelChildren = this.panelChildren();
+		if (panelChildren && panelChildren.length > 0) panelChildren.forEach((item) => {
+			this.panels.push(item);
+		});
+	}
+	onAfterViewInit() {
+		if (isPlatformBrowser(this.platformId)) {
+			if (this.panels && this.panels.length) {
+				let initialized = false;
+				if (this.isStateful()) initialized = this.restoreState();
+				if (!initialized) {
+					let children = [...this.el.nativeElement.children].filter((child) => child.getAttribute("data-pc-section") === "panel");
+					let _panelSizes = [];
+					this.panels.map((panel, i) => {
+						let panelSize = (this.panelSizes().length - 1 >= i ? this.panelSizes()[i] : null) || 100 / this.panels.length;
+						_panelSizes[i] = panelSize;
+						children[i].style.flexBasis = "calc(" + panelSize + "% - " + (this.panels.length - 1) * this.gutterSize() + "px)";
+					});
+					this.panelSizes.set(_panelSizes);
+					this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
+				}
+			}
+		}
+	}
+	resizeStart(event, index, isKeyDown) {
+		this.gutterElement = event.currentTarget || event.target.parentElement;
+		this.size = this.horizontal() ? getWidth(this.el.nativeElement) : getHeight(this.el.nativeElement);
+		if (!isKeyDown) {
+			this.dragging = true;
+			this.startPos = this.horizontal() ? event instanceof MouseEvent ? event.pageX : event.changedTouches[0].pageX : event instanceof MouseEvent ? event.pageY : event.changedTouches[0].pageY;
+		}
+		this.prevPanelElement = this.gutterElement.previousElementSibling;
+		this.nextPanelElement = this.gutterElement.nextElementSibling;
+		if (isKeyDown) {
+			this.prevPanelSize = this.horizontal() ? getOuterWidth(this.prevPanelElement, true) : getOuterHeight(this.prevPanelElement, true);
+			this.nextPanelSize = this.horizontal() ? getOuterWidth(this.nextPanelElement, true) : getOuterHeight(this.nextPanelElement, true);
+		} else {
+			this.prevPanelSize = 100 * (this.horizontal() ? getOuterWidth(this.prevPanelElement, true) : getOuterHeight(this.prevPanelElement, true)) / this.size;
+			this.nextPanelSize = 100 * (this.horizontal() ? getOuterWidth(this.nextPanelElement, true) : getOuterHeight(this.nextPanelElement, true)) / this.size;
+		}
+		this.prevPanelIndex = index;
+		addClass(this.gutterElement, "h-splitter-gutter-resizing");
+		this.gutterElement.setAttribute("data-h-gutter-resizing", "true");
+		addClass(this.el.nativeElement, "h-splitter-resizing");
+		this.el.nativeElement.setAttribute("data-h-resizing", "true");
+		this.onResizeStart.emit({
+			originalEvent: event,
+			sizes: this.panelSizes()
+		});
+	}
+	onResize(event, step, isKeyDown) {
+		let newPos, newPrevPanelSize, newNextPanelSize;
+		if (isKeyDown) if (this.horizontal()) {
+			newPrevPanelSize = 100 * ((this.prevPanelSize ?? 0) + (step ?? 0)) / (this.size ?? 1);
+			newNextPanelSize = 100 * ((this.nextPanelSize ?? 0) - (step ?? 0)) / (this.size ?? 1);
+		} else {
+			newPrevPanelSize = 100 * ((this.prevPanelSize ?? 0) - (step ?? 0)) / (this.size ?? 1);
+			newNextPanelSize = 100 * ((this.nextPanelSize ?? 0) + (step ?? 0)) / (this.size ?? 1);
+		}
+		else {
+			if (this.horizontal()) if (isRTL(this.el.nativeElement)) newPos = ((this.startPos ?? 0) - event.pageX) * 100 / (this.size ?? 1);
+			else newPos = (event.pageX - (this.startPos ?? 0)) * 100 / (this.size ?? 1);
+			else newPos = (event.pageY - (this.startPos ?? 0)) * 100 / (this.size ?? 1);
+			newPrevPanelSize = this.prevPanelSize + newPos;
+			newNextPanelSize = this.nextPanelSize - newPos;
+		}
+		this.prevSize = parseFloat(newPrevPanelSize).toFixed(4);
+		if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
+			this.prevPanelElement.style.flexBasis = "calc(" + newPrevPanelSize + "% - " + (this.panels.length - 1) * this.gutterSize() + "px)";
+			this.nextPanelElement.style.flexBasis = "calc(" + newNextPanelSize + "% - " + (this.panels.length - 1) * this.gutterSize() + "px)";
+			const sizes = [...this.panelSizes()];
+			sizes[this.prevPanelIndex] = newPrevPanelSize;
+			sizes[this.prevPanelIndex + 1] = newNextPanelSize;
+			this.panelSizes.set(sizes);
+		}
+	}
+	resizeEnd(event) {
+		if (this.isStateful()) this.saveState();
+		this.onResizeEnd.emit({
+			originalEvent: event,
+			sizes: this.panelSizes()
+		});
+		removeClass(this.gutterElement, "h-splitter-gutter-resizing");
+		removeClass(this.el.nativeElement, "h-splitter-resizing");
+		this.clear();
+	}
+	onGutterMouseDown(event, index) {
+		this.resizeStart(event, index);
+		this.bindMouseListeners();
+	}
+	onGutterTouchStart(event, index) {
+		if (event.cancelable) {
+			this.resizeStart(event, index);
+			this.bindTouchListeners();
+			event.preventDefault();
+		}
+	}
+	onGutterTouchMove(event) {
+		this.onResize(event);
+		event.preventDefault();
+	}
+	onGutterTouchEnd(event) {
+		this.resizeEnd(event);
+		this.unbindTouchListeners();
+		if (event.cancelable) event.preventDefault();
+	}
+	repeat(event, index, step) {
+		this.resizeStart(event, index, true);
+		this.onResize(event, step, true);
+	}
+	setTimer(event, index, step) {
+		this.clearTimer();
+		this.timer = setTimeout(() => {
+			this.repeat(event, index, step);
+		}, 40);
+	}
+	clearTimer() {
+		if (this.timer) clearTimeout(this.timer);
+	}
+	onGutterKeyUp(event) {
+		this.clearTimer();
+		this.resizeEnd(event);
+	}
+	onGutterKeyDown(event, index) {
+		switch (event.code) {
+			case "ArrowLeft":
+				if (this.layout() === "horizontal") this.setTimer(event, index, this.step() * -1);
+				event.preventDefault();
+				break;
+			case "ArrowRight":
+				if (this.layout() === "horizontal") this.setTimer(event, index, this.step());
+				event.preventDefault();
+				break;
+			case "ArrowDown":
+				if (this.layout() === "vertical") this.setTimer(event, index, this.step() * -1);
+				event.preventDefault();
+				break;
+			case "ArrowUp":
+				if (this.layout() === "vertical") this.setTimer(event, index, this.step());
+				event.preventDefault();
+				break;
+			default: break;
+		}
+	}
+	validateResize(newPrevPanelSize, newNextPanelSize) {
+		const minSizes = this.minSizes();
+		if (this.minSizes().length >= 1 && minSizes[0] && minSizes[0] > newPrevPanelSize) return false;
+		const minSizesValue = this.minSizes();
+		if (this.minSizes().length > 1 && minSizesValue[1] && minSizesValue[1] > newNextPanelSize) return false;
+		return true;
+	}
+	bindMouseListeners() {
+		if (!this.mouseMoveListener) this.mouseMoveListener = this.renderer.listen(this.document, "mousemove", (event) => {
+			this.onResize(event);
+		});
+		if (!this.mouseUpListener) this.mouseUpListener = this.renderer.listen(this.document, "mouseup", (event) => {
+			this.resizeEnd(event);
+			this.unbindMouseListeners();
+		});
+	}
+	bindTouchListeners() {
+		if (!this.touchMoveListener) this.touchMoveListener = this.renderer.listen(this.document, "touchmove", (event) => {
+			this.onResize(event.changedTouches[0]);
+		});
+		if (!this.touchEndListener) this.touchEndListener = this.renderer.listen(this.document, "touchend", (event) => {
+			this.resizeEnd(event);
+			this.unbindTouchListeners();
+		});
+	}
+	unbindMouseListeners() {
+		if (this.mouseMoveListener) {
+			this.mouseMoveListener();
+			this.mouseMoveListener = null;
+		}
+		if (this.mouseUpListener) {
+			this.mouseUpListener();
+			this.mouseUpListener = null;
+		}
+	}
+	unbindTouchListeners() {
+		if (this.touchMoveListener) {
+			this.touchMoveListener();
+			this.touchMoveListener = null;
+		}
+		if (this.touchEndListener) {
+			this.touchEndListener();
+			this.touchEndListener = null;
+		}
+	}
+	clear() {
+		this.dragging = false;
+		this.size = null;
+		this.startPos = null;
+		this.prevPanelElement = null;
+		this.nextPanelElement = null;
+		this.prevPanelSize = null;
+		this.nextPanelSize = null;
+		this.gutterElement = null;
+		this.prevPanelIndex = null;
+	}
+	isStateful() {
+		return this.stateKey() != null;
+	}
+	getStorage() {
+		if (isPlatformBrowser(this.platformId)) {
+			const stateStorage = this.stateStorage();
+			switch (stateStorage) {
+				case "local": return this.document.defaultView?.localStorage;
+				case "session": return this.document.defaultView?.sessionStorage;
+				default: throw new Error(stateStorage + " is not a valid value for the state storage, supported values are \"local\" and \"session\".");
+			}
+		} else throw new Error("Storage is not a available by default on the server.");
+	}
+	saveState() {
+		this.getStorage()?.setItem(this.stateKey(), JSON.stringify(this.panelSizes()));
+	}
+	restoreState() {
+		const stateString = this.getStorage()?.getItem(this.stateKey());
+		if (stateString) {
+			this.panelSizes.set(JSON.parse(stateString));
+			[...this.el.nativeElement.children].filter((child) => child.getAttribute("data-pc-section") === "panel").forEach((child, i) => {
+				child.style.flexBasis = "calc(" + this.panelSizes()[i] + "% - " + (this.panels.length - 1) * this.gutterSize() + "px)";
+			});
+			return true;
+		}
+		return false;
+	}
+	gutterStyle() {
+		if (this.horizontal()) return { width: this.gutterSize() + "px" };
+		else return { height: this.gutterSize() + "px" };
+	}
+	horizontal() {
+		return this.layout() === "horizontal";
+	}
+	get dataP() {
+		return this.cn({
+			[this.layout()]: this.layout(),
+			nested: this.nestedState() != null
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: Splitter,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: Splitter,
+		isStandalone: true,
+		selector: "h-splitter",
+		inputs: {
+			styleClass: {
+				classPropertyName: "styleClass",
+				publicName: "styleClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			panelStyleClass: {
+				classPropertyName: "panelStyleClass",
+				publicName: "panelStyleClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			panelStyle: {
+				classPropertyName: "panelStyle",
+				publicName: "panelStyle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stateStorage: {
+				classPropertyName: "stateStorage",
+				publicName: "stateStorage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stateKey: {
+				classPropertyName: "stateKey",
+				publicName: "stateKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			layout: {
+				classPropertyName: "layout",
+				publicName: "layout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			gutterSize: {
+				classPropertyName: "gutterSize",
+				publicName: "gutterSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			step: {
+				classPropertyName: "step",
+				publicName: "step",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minSizes: {
+				classPropertyName: "minSizes",
+				publicName: "minSizes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			panelSizes: {
+				classPropertyName: "panelSizes",
+				publicName: "panelSizes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			panelSizes: "panelSizesChange",
+			onResizeEnd: "onResizeEnd",
+			onResizeStart: "onResizeStart"
+		},
+		host: { properties: {
+			"class": "cn(cx('root'), styleClass())",
+			"attr.data-h-gutter-resizing": "false",
+			"attr.data-h": "dataP"
+		} },
+		providers: [
+			SplitterStyle,
+			{
+				provide: SPLITTER_INSTANCE,
+				useExisting: Splitter
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: Splitter
+			}
+		],
+		queries: [
+			{
+				propertyName: "templates",
+				predicate: HelixTemplate,
+				isSignal: true
+			},
+			{
+				propertyName: "panelChildren",
+				predicate: ["panel"],
+				isSignal: true
+			},
+			{
+				propertyName: "splitter",
+				first: true,
+				predicate: i0.forwardRef(() => Splitter),
+				descendants: true,
+				isSignal: true
+			}
+		],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: "@for (panel of panels; track panel; let i = $index) {\n  <div [hBind]=\"ptm('panel')\" [class]=\"cn(cx('panel'), panelStyleClass())\" [ngStyle]=\"panelStyle()\" tabindex=\"-1\">\n    <ng-container *ngTemplateOutlet=\"panel\"></ng-container>\n  </div>\n  @if (i !== panels.length - 1) {\n    <div\n      [hBind]=\"ptm('gutter')\"\n      [class]=\"cx('gutter')\"\n      role=\"separator\"\n      tabindex=\"-1\"\n      (mousedown)=\"onGutterMouseDown($event, i)\"\n      (touchstart)=\"onGutterTouchStart($event, i)\"\n      (touchmove)=\"onGutterTouchMove($event)\"\n      (touchend)=\"onGutterTouchEnd($event)\"\n      [attr.data-h-gutter-resizing]=\"false\"\n      [attr.data-h]=\"dataP\"\n      >\n      <div\n        [hBind]=\"ptm('gutterHandle')\"\n        [class]=\"cx('gutterHandle')\"\n        tabindex=\"0\"\n        [ngStyle]=\"gutterStyle()\"\n        [attr.aria-orientation]=\"layout()\"\n        [attr.aria-valuenow]=\"prevSize\"\n        (keyup)=\"onGutterKeyUp($event)\"\n        (keydown)=\"onGutterKeyDown($event, i)\"\n      ></div>\n    </div>\n  }\n}\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i2.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: i2.NgStyle,
+				selector: "[ngStyle]",
+				inputs: ["ngStyle"]
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			},
+			{
+				kind: "directive",
+				type: i1.Bind,
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: Splitter,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-splitter",
+			standalone: true,
+			imports: [
+				CommonModule,
+				SharedModule,
+				BindModule
+			],
+			encapsulation: ViewEncapsulation.None,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[class]": "cn(cx('root'), styleClass())",
+				"[attr.data-h-gutter-resizing]": "false",
+				"[attr.data-h]": "dataP"
+			},
+			providers: [
+				SplitterStyle,
+				{
+					provide: SPLITTER_INSTANCE,
+					useExisting: Splitter
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: Splitter
+				}
+			],
+			hostDirectives: [Bind],
+			template: "@for (panel of panels; track panel; let i = $index) {\n  <div [hBind]=\"ptm('panel')\" [class]=\"cn(cx('panel'), panelStyleClass())\" [ngStyle]=\"panelStyle()\" tabindex=\"-1\">\n    <ng-container *ngTemplateOutlet=\"panel\"></ng-container>\n  </div>\n  @if (i !== panels.length - 1) {\n    <div\n      [hBind]=\"ptm('gutter')\"\n      [class]=\"cx('gutter')\"\n      role=\"separator\"\n      tabindex=\"-1\"\n      (mousedown)=\"onGutterMouseDown($event, i)\"\n      (touchstart)=\"onGutterTouchStart($event, i)\"\n      (touchmove)=\"onGutterTouchMove($event)\"\n      (touchend)=\"onGutterTouchEnd($event)\"\n      [attr.data-h-gutter-resizing]=\"false\"\n      [attr.data-h]=\"dataP\"\n      >\n      <div\n        [hBind]=\"ptm('gutterHandle')\"\n        [class]=\"cx('gutterHandle')\"\n        tabindex=\"0\"\n        [ngStyle]=\"gutterStyle()\"\n        [attr.aria-orientation]=\"layout()\"\n        [attr.aria-valuenow]=\"prevSize\"\n        (keyup)=\"onGutterKeyUp($event)\"\n        (keydown)=\"onGutterKeyDown($event, i)\"\n      ></div>\n    </div>\n  }\n}\n"
+		}]
+	}],
+	propDecorators: {
+		styleClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styleClass",
+				required: false
+			}]
+		}],
+		panelStyleClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "panelStyleClass",
+				required: false
+			}]
+		}],
+		panelStyle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "panelStyle",
+				required: false
+			}]
+		}],
+		stateStorage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stateStorage",
+				required: false
+			}]
+		}],
+		stateKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stateKey",
+				required: false
+			}]
+		}],
+		layout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout",
+				required: false
+			}]
+		}],
+		gutterSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "gutterSize",
+				required: false
+			}]
+		}],
+		step: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "step",
+				required: false
+			}]
+		}],
+		minSizes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minSizes",
+				required: false
+			}]
+		}],
+		panelSizes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "panelSizes",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["panelSizesChange"]
+		}],
+		onResizeEnd: [{
+			type: i0.Output,
+			args: ["onResizeEnd"]
+		}],
+		onResizeStart: [{
+			type: i0.Output,
+			args: ["onResizeStart"]
+		}],
+		templates: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }]
+		}],
+		panelChildren: [{
+			type: i0.ContentChildren,
+			args: ["panel", { isSignal: true }]
+		}],
+		splitter: [{
+			type: i0.ContentChild,
+			args: [forwardRef(() => Splitter), { isSignal: true }]
+		}]
+	}
+});
+var SplitterModule = class SplitterModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SplitterModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SplitterModule,
+		imports: [
+			Splitter,
+			SharedModule,
+			BindModule
+		],
+		exports: [
+			Splitter,
+			SharedModule,
+			BindModule
+		]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SplitterModule,
+		imports: [
+			Splitter,
+			SharedModule,
+			BindModule,
+			SharedModule,
+			BindModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SplitterModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				Splitter,
+				SharedModule,
+				BindModule
+			],
+			exports: [
+				Splitter,
+				SharedModule,
+				BindModule
+			]
+		}]
+	}]
+});
 export { Splitter, SplitterClasses, SplitterModule, SplitterStyle };
-//# sourceMappingURL=gravionlabs-helix-core-splitter.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-splitter.mjs.map