@gravionlabs/helix-core 22.0.0

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

@@ -0,0 +1,597 @@
+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*/ `
+    .h-splitter {
+        display: flex;
+        flex-wrap: nowrap;
+        border: 1px solid dt('splitter.border.color');
+        background: dt('splitter.background');
+        border-radius: dt('border.radius.md');
+        color: dt('splitter.color');
+    }
+
+    .h-splitter-vertical {
+        flex-direction: column;
+    }
+
+    .h-splitter-gutter {
+        flex-grow: 0;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1;
+        background: dt('splitter.gutter.background');
+    }
+
+    .h-splitter-gutter-handle {
+        border-radius: dt('splitter.handle.border.radius');
+        background: dt('splitter.handle.background');
+        transition:
+            outline-color dt('splitter.transition.duration'),
+            box-shadow dt('splitter.transition.duration');
+        outline-color: transparent;
+    }
+
+    .h-splitter-gutter-handle:focus-visible {
+        box-shadow: dt('splitter.handle.focus.ring.shadow');
+        outline: dt('splitter.handle.focus.ring.width') dt('splitter.handle.focus.ring.style') dt('splitter.handle.focus.ring.color');
+        outline-offset: dt('splitter.handle.focus.ring.offset');
+    }
+
+    .h-splitter-horizontal.h-splitter-resizing {
+        cursor: col-resize;
+        user-select: none;
+    }
+
+    .h-splitter-vertical.h-splitter-resizing {
+        cursor: row-resize;
+        user-select: none;
+    }
+
+    .h-splitter-horizontal > .h-splitter-gutter > .h-splitter-gutter-handle {
+        height: dt('splitter.handle.size');
+        width: 100%;
+    }
+
+    .h-splitter-vertical > .h-splitter-gutter > .h-splitter-gutter-handle {
+        width: dt('splitter.handle.size');
+        height: 100%;
+    }
+
+    .h-splitter-horizontal > .h-splitter-gutter {
+        cursor: col-resize;
+    }
+
+    .h-splitter-vertical > .h-splitter-gutter {
+        cursor: row-resize;
+    }
+
+    .h-splitterpanel {
+        flex-grow: 1;
+        overflow: hidden;
+    }
+
+    .h-splitterpanel-nested {
+        display: flex;
+    }
+
+    .h-splitterpanel .h-splitter {
+        flex-grow: 1;
+        min-width: 0;
+        min-height: 0;
+        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'
+};
+const inlineStyles = {
+    root: ({ instance }) => [{ display: 'flex', 'flex-wrap': 'nowrap' }, instance.layout() === 'vertical' ? { 'flex-direction': 'column' } : '']
+};
+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
+ *
+ */
+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";
+})(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.
+ */
+
+export { Splitter, SplitterClasses, SplitterModule, SplitterStyle };
+//# sourceMappingURL=gravionlabs-helix-core-splitter.mjs.map