@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-splitter.mjs

@@ -0,0 +1,585 @@
+export * from '@wawjs/ngx-prime/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, output, contentChildren, contentChild, forwardRef, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { getWidth, getHeight, getOuterWidth, getOuterHeight, addClass, isRTL, removeClass } from '@wawjs/css-prime-utils';
+import { PrimeTemplate, SharedModule } from '@wawjs/ngx-prime/api';
+import { BaseComponent, PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
+import * as i1 from '@wawjs/ngx-prime/bind';
+import { Bind, BindModule } from '@wawjs/ngx-prime/bind';
+import { style } from '@wawjs/css-prime-styles/splitter';
+import { BaseStyle } from '@wawjs/ngx-prime/base';
+
+const classes = {
+    root: ({ instance }) => ['p-splitter p-component', 'p-splitter-' + instance.layout()],
+    panel: ({ instance }) => ['p-splitterpanel', { 'p-splitterpanel-nested': instance.nestedState() }],
+    gutter: 'p-splitter-gutter',
+    gutterHandle: 'p-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.2", ngImport: i0, type: SplitterStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SplitterStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SplitterStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Splitter is utilized to separate and resize panels.
+ *
+ * [Live Demo](https://www.ngx-prime.org/splitter/)
+ *
+ * @module splitterstyle
+ *
+ */
+var SplitterClasses;
+(function (SplitterClasses) {
+    /**
+     * Class name of the root element
+     */
+    SplitterClasses["root"] = "p-splitter";
+    /**
+     * Class name of the gutter element
+     */
+    SplitterClasses["gutter"] = "p-splitter-gutter";
+    /**
+     * Class name of the gutter handle element
+     */
+    SplitterClasses["gutterHandle"] = "p-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 = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelSizes" }] : /* 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(PrimeTemplate, /* @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;
+    _panelSizes = [];
+    prevPanelIndex;
+    timer;
+    prevSize;
+    _componentStyle = inject(SplitterStyle);
+    constructor() {
+        super();
+        effect(() => {
+            const val = this.panelSizes();
+            this._panelSizes = val;
+            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 = val.length - 1 >= i ? val[i] : null;
+                    let panelSize = panelInitialSize || 100 / this.panels.length;
+                    children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (this.panels.length - 1) * this.gutterSize() + 'px)';
+                });
+            }
+        });
+    }
+    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 = _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, 'p-splitter-gutter-resizing');
+        this.gutterElement.setAttribute('data-p-gutter-resizing', 'true');
+        addClass(this.el.nativeElement, 'p-splitter-resizing');
+        this.el.nativeElement.setAttribute('data-p-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)';
+            this._panelSizes[this.prevPanelIndex] = newPrevPanelSize;
+            this._panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
+        }
+    }
+    resizeEnd(event) {
+        if (this.isStateful()) {
+            this.saveState();
+        }
+        this.onResizeEnd.emit({ originalEvent: event, sizes: this._panelSizes });
+        removeClass(this.gutterElement, 'p-splitter-gutter-resizing');
+        removeClass(this.el.nativeElement, 'p-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) {
+        if (this.minSizes().length >= 1 && this.minSizes()[0] && this.minSizes()[0] > newPrevPanelSize) {
+            return false;
+        }
+        if (this.minSizes().length > 1 && this.minSizes()[1] && this.minSizes()[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)) {
+            switch (this.stateStorage()) {
+                case 'local':
+                    return this.document.defaultView?.localStorage;
+                case 'session':
+                    return this.document.defaultView?.sessionStorage;
+                default:
+                    throw new Error(this.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 = 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.2", ngImport: i0, type: Splitter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Splitter, isStandalone: true, selector: "p-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: { onResizeEnd: "onResizeEnd", onResizeStart: "onResizeStart" }, host: { properties: { "class": "cn(cx('root'), styleClass())", "attr.data-p-gutter-resizing": "false", "attr.data-p": "dataP" } }, providers: [SplitterStyle, { provide: SPLITTER_INSTANCE, useExisting: Splitter }, { provide: PARENT_INSTANCE, useExisting: Splitter }], queries: [{ propertyName: "templates", predicate: PrimeTemplate, 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) {
+            <div [pBind]="ptm('panel')" [class]="cn(cx('panel'), panelStyleClass())" [ngStyle]="panelStyle()" tabindex="-1">
+                <ng-container *ngTemplateOutlet="panel"></ng-container>
+            </div>
+            @if (i !== panels.length - 1) {
+                <div
+                    [pBind]="ptm('gutter')"
+                    [class]="cx('gutter')"
+                    role="separator"
+                    tabindex="-1"
+                    (mousedown)="onGutterMouseDown($event, i)"
+                    (touchstart)="onGutterTouchStart($event, i)"
+                    (touchmove)="onGutterTouchMove($event)"
+                    (touchend)="onGutterTouchEnd($event)"
+                    [attr.data-p-gutter-resizing]="false"
+                    [attr.data-p]="dataP"
+                >
+                    <div
+                        [pBind]="ptm('gutterHandle')"
+                        [class]="cx('gutterHandle')"
+                        tabindex="0"
+                        [ngStyle]="gutterStyle()"
+                        [attr.aria-orientation]="layout()"
+                        [attr.aria-valuenow]="prevSize"
+                        (keyup)="onGutterKeyUp($event)"
+                        (keydown)="onGutterKeyDown($event, i)"
+                    ></div>
+                </div>
+            }
+        }
+    `, isInline: true, 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: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Splitter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-splitter',
+                    standalone: true,
+                    imports: [CommonModule, SharedModule, BindModule],
+                    template: `
+        @for (panel of panels; track panel; let i = $index) {
+            <div [pBind]="ptm('panel')" [class]="cn(cx('panel'), panelStyleClass())" [ngStyle]="panelStyle()" tabindex="-1">
+                <ng-container *ngTemplateOutlet="panel"></ng-container>
+            </div>
+            @if (i !== panels.length - 1) {
+                <div
+                    [pBind]="ptm('gutter')"
+                    [class]="cx('gutter')"
+                    role="separator"
+                    tabindex="-1"
+                    (mousedown)="onGutterMouseDown($event, i)"
+                    (touchstart)="onGutterTouchStart($event, i)"
+                    (touchmove)="onGutterTouchMove($event)"
+                    (touchend)="onGutterTouchEnd($event)"
+                    [attr.data-p-gutter-resizing]="false"
+                    [attr.data-p]="dataP"
+                >
+                    <div
+                        [pBind]="ptm('gutterHandle')"
+                        [class]="cx('gutterHandle')"
+                        tabindex="0"
+                        [ngStyle]="gutterStyle()"
+                        [attr.aria-orientation]="layout()"
+                        [attr.aria-valuenow]="prevSize"
+                        (keyup)="onGutterKeyUp($event)"
+                        (keydown)="onGutterKeyDown($event, i)"
+                    ></div>
+                </div>
+            }
+        }
+    `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass())",
+                        '[attr.data-p-gutter-resizing]': 'false',
+                        '[attr.data-p]': 'dataP'
+                    },
+                    providers: [SplitterStyle, { provide: SPLITTER_INSTANCE, useExisting: Splitter }, { provide: PARENT_INSTANCE, useExisting: Splitter }],
+                    hostDirectives: [Bind]
+                }]
+        }], ctorParameters: () => [], 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 }] }], onResizeEnd: [{ type: i0.Output, args: ["onResizeEnd"] }], onResizeStart: [{ type: i0.Output, args: ["onResizeStart"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { 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.2", ngImport: i0, type: SplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SplitterModule, imports: [Splitter, SharedModule, BindModule], exports: [Splitter, SharedModule, BindModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SplitterModule, imports: [Splitter, SharedModule, BindModule, SharedModule, BindModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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=wawjs-ngx-prime-splitter.mjs.map