igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
847 lines (840 loc) • 33.5 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, signal, EventEmitter, booleanAttribute, Input, HostBinding, Output, Component, DOCUMENT, NgZone, ContentChildren, forwardRef, HostListener, NgModule } from '@angular/core';
import { DragDirection, IgxDragDirective, IgxDragIgnoreDirective } from 'igniteui-angular/directives';
import { take } from 'rxjs';
/**
* Represents individual resizable/collapsible panes.
*
* @igxModule IgxSplitterModule
*
* @igxParent IgxSplitterComponent
*
* @igxKeywords pane
*
* @igxGroup presentation
*
* @remarks
* Users can control the resize behavior via the min and max size properties.
*/
class IgxSplitterPaneComponent {
constructor() {
this.el = inject(ElementRef);
this._order = signal(null, { ...(ngDevMode ? { debugName: "_order" } : {}) });
/**
* @hidden @internal
* Gets/Sets the 'display' property of the current pane.
*/
this.display = 'flex';
/**
* Gets/Sets whether pane is resizable.
*
* @example
* ```html
* <igx-splitter>
* <igx-splitter-pane [resizable]='false'>...</igx-splitter-pane>
* </igx-splitter>
* ```
* @remarks
* If pane is not resizable its related splitter bar cannot be dragged.
*/
this.resizable = true;
/**
* Event fired when collapsed state of pane is changed.
*
* @example
* ```html
* <igx-splitter>
* <igx-splitter-pane (collapsedChange)='paneCollapsedChange($event)'>...</igx-splitter-pane>
* </igx-splitter>
* ```
*/
this.collapsedChange = new EventEmitter();
/**
* @hidden @internal
* Gets/Sets the `overflow`.
*/
this.overflow = 'auto';
/**
* @hidden @internal
* Get/Sets the `minWidth` properties of the current pane.
*/
this.minWidth = '0';
/**
* @hidden @internal
* Get/Sets the `maxWidth` properties of the current pane.
*/
this.maxWidth = '100%';
/**
* @hidden @internal
* Gets/Sets the `minHeight` properties of the current pane.
*/
this.minHeight = '0';
/**
* @hidden @internal
* Gets/Sets the `maxHeight` properties of the current `IgxSplitterPaneComponent`.
*/
this.maxHeight = '100%';
this._size = 'auto';
this._collapsed = false;
}
/**
* Gets/Sets the minimum allowed size of the current pane.
*
* @example
* ```html
* <igx-splitter>
* <igx-splitter-pane [minSize]='minSize'>...</igx-splitter-pane>
* </igx-splitter>
* ```
*/
get minSize() {
return this._minSize;
}
set minSize(value) {
this._minSize = value;
if (this.owner) {
this.owner.panes.notifyOnChanges();
}
}
/**
* Gets/Set the maximum allowed size of the current pane.
*
* @example
* ```html
* <igx-splitter>
* <igx-splitter-pane [maxSize]='maxSize'>...</igx-splitter-pane>
* </igx-splitter>
* ```
*/
get maxSize() {
return this._maxSize;
}
set maxSize(value) {
this._maxSize = value;
if (this.owner) {
this.owner.panes.notifyOnChanges();
}
}
/** @hidden @internal */
get order() {
return this._order();
}
set order(val) {
this._order.set(val);
}
/**
* Gets/Sets the size of the current pane.
* * @example
* ```html
* <igx-splitter>
* <igx-splitter-pane [size]='size'>...</igx-splitter-pane>
* </igx-splitter>
* ```
*/
get size() {
return this._size;
}
set size(value) {
this._size = value;
this.el.nativeElement.style.flex = this.flex;
}
/** @hidden @internal */
get isPercentageSize() {
return this.size === 'auto' || this.size.indexOf('%') !== -1;
}
/** @hidden @internal */
get dragSize() {
return this._dragSize;
}
set dragSize(val) {
this._dragSize = val;
this.el.nativeElement.style.flex = this.flex;
}
/**
*
* @hidden @internal
* Gets the host native element.
*/
get element() {
return this.el.nativeElement;
}
/**
* @hidden @internal
* Gets the `flex` property of the current `IgxSplitterPaneComponent`.
*/
get flex() {
const size = this.dragSize || this.size;
const grow = this.isPercentageSize && !this.dragSize ? 1 : 0;
return `${grow} ${grow} ${size}`;
}
/**
* Gets/Sets whether current pane is collapsed.
*
* @example
* ```typescript
* const isCollapsed = pane.collapsed;
* ```
*/
set collapsed(value) {
if (this.owner) {
// reset sibling sizes when pane collapse state changes.
this._getSiblings().forEach(sibling => {
sibling.size = 'auto';
sibling.dragSize = null;
});
}
this._collapsed = value;
this.display = this._collapsed ? 'none' : 'flex';
this.collapsedChange.emit(this._collapsed);
}
get collapsed() {
return this._collapsed;
}
/**
* Toggles the collapsed state of the pane.
*
* @example
* ```typescript
* pane.toggle();
* ```
*/
toggle() {
this.collapsed = !this.collapsed;
}
/** @hidden @internal */
_getSiblings() {
const panes = this.owner.panes.toArray();
const index = panes.indexOf(this);
const siblings = [];
if (index !== 0) {
siblings.push(panes[index - 1]);
}
if (index !== panes.length - 1) {
siblings.push(panes[index + 1]);
}
return siblings;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSplitterPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.2", type: IgxSplitterPaneComponent, isStandalone: true, selector: "igx-splitter-pane", inputs: { minSize: "minSize", maxSize: "maxSize", resizable: ["resizable", "resizable", booleanAttribute], size: "size", collapsed: ["collapsed", "collapsed", booleanAttribute] }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "style.display": "this.display", "style.order": "this.order", "style.overflow": "this.overflow", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth", "style.min-height": "this.minHeight", "style.max-height": "this.maxHeight", "style.flex": "this.flex" } }, ngImport: i0, template: "<ng-content></ng-content>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSplitterPaneComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-splitter-pane', standalone: true, template: "<ng-content></ng-content>" }]
}], propDecorators: { display: [{
type: HostBinding,
args: ['style.display']
}], minSize: [{
type: Input
}], maxSize: [{
type: Input
}], resizable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], collapsedChange: [{
type: Output
}], order: [{
type: HostBinding,
args: ['style.order']
}], overflow: [{
type: HostBinding,
args: ['style.overflow']
}], minWidth: [{
type: HostBinding,
args: ['style.min-width']
}], maxWidth: [{
type: HostBinding,
args: ['style.max-width']
}], minHeight: [{
type: HostBinding,
args: ['style.min-height']
}], maxHeight: [{
type: HostBinding,
args: ['style.max-height']
}], size: [{
type: Input
}], flex: [{
type: HostBinding,
args: ['style.flex']
}], collapsed: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
/**
* An enumeration that defines the `SplitterComponent` panes orientation.
*/
var SplitterType;
(function (SplitterType) {
SplitterType[SplitterType["Horizontal"] = 0] = "Horizontal";
SplitterType[SplitterType["Vertical"] = 1] = "Vertical";
})(SplitterType || (SplitterType = {}));
/**
* Provides a framework for a simple layout, splitting the view horizontally or vertically
* into multiple smaller resizable and collapsible areas.
*
* @igxModule IgxSplitterModule
*
* @igxParent Layouts
*
* @igxTheme igx-splitter-theme
*
* @igxKeywords splitter panes layout
*
* @igxGroup presentation
*
* @example
* ```html
* <igx-splitter>
* <igx-splitter-pane>
* ...
* </igx-splitter-pane>
* <igx-splitter-pane>
* ...
* </igx-splitter-pane>
* </igx-splitter>
* ```
*/
class IgxSplitterComponent {
constructor() {
this.document = inject(DOCUMENT);
this.elementRef = inject(ElementRef);
this.zone = inject(NgZone);
/**
* @hidden
* @internal
*/
this.cssClass = 'igx-splitter';
/**
* @hidden @internal
* Gets/Sets the `overflow` property of the current splitter.
*/
this.overflow = 'hidden';
/**
* @hidden @internal
* Sets/Gets the `display` property of the current splitter.
*/
this.display = 'flex';
/**
* Event fired when resizing of panes starts.
*
* @example
* ```html
* <igx-splitter (resizeStart)='resizeStart($event)'>
* <igx-splitter-pane>...</igx-splitter-pane>
* </igx-splitter>
* ```
*/
this.resizeStart = new EventEmitter();
/**
* Event fired when resizing of panes is in progress.
*
* @example
* ```html
* <igx-splitter (resizing)='resizing($event)'>
* <igx-splitter-pane>...</igx-splitter-pane>
* </igx-splitter>
* ```
*/
this.resizing = new EventEmitter();
/**
* Event fired when resizing of panes ends.
*
* @example
* ```html
* <igx-splitter (resizeEnd)='resizeEnd($event)'>
* <igx-splitter-pane>...</igx-splitter-pane>
* </igx-splitter>
* ```
*/
this.resizeEnd = new EventEmitter();
this._type = SplitterType.Horizontal;
/**
* Sets the visibility of the handle and expanders in the splitter bar.
* False by default
*
* @example
* ```html
* <igx-splitter [nonCollapsible]='true'>
* </igx-splitter>
* ```
*/
this.nonCollapsible = false; // Input to toggle showing/hiding expanders
}
/**
* @hidden
* @internal
*/
get orientation() {
return this.type === SplitterType.Horizontal ? 'horizontal' : 'vertical';
}
/**
* Gets/Sets the splitter orientation.
*
* @example
* ```html
* <igx-splitter [type]="type">...</igx-splitter>
* ```
*/
get type() {
return this._type;
}
set type(value) {
this._type = value;
this.resetPaneSizes();
this.panes?.notifyOnChanges();
}
/**
* @hidden @internal
* Gets the `flex-direction` property of the current `SplitterComponent`.
*/
get direction() {
return this.type === SplitterType.Horizontal ? 'row' : 'column';
}
/** @hidden @internal */
ngAfterContentInit() {
this.zone.onStable.pipe(take(1)).subscribe(() => {
this.initPanes();
});
this.panes.changes.subscribe(() => {
this.initPanes();
});
}
/**
* @hidden @internal
* This method performs initialization logic when the user starts dragging the splitter bar between each pair of panes.
* @param pane - the main pane associated with the currently dragged bar.
*/
onMoveStart(pane) {
const panes = this.panes.toArray();
this.pane = pane;
this.sibling = panes[panes.indexOf(this.pane) + 1];
const paneRect = this.pane.element.getBoundingClientRect();
this.initialPaneSize = this.type === SplitterType.Horizontal ? paneRect.width : paneRect.height;
const siblingRect = this.sibling.element.getBoundingClientRect();
this.initialSiblingSize = this.type === SplitterType.Horizontal ? siblingRect.width : siblingRect.height;
const args = { pane: this.pane, sibling: this.sibling };
this.resizeStart.emit(args);
}
/**
* @hidden @internal
* This method performs calculations concerning the sizes of each pair of panes when the bar between them is dragged.
* @param delta - The difference along the X (or Y) axis between the initial and the current point when dragging the bar.
*/
onMoving(delta) {
const [paneSize, siblingSize] = this.calcNewSizes(delta);
this.pane.dragSize = paneSize + 'px';
this.sibling.dragSize = siblingSize + 'px';
const args = { pane: this.pane, sibling: this.sibling };
this.resizing.emit(args);
}
onMoveEnd(delta) {
let [paneSize, siblingSize] = this.calcNewSizes(delta);
if (paneSize + siblingSize > this.getTotalSize() && delta < 0) {
siblingSize = this.getTotalSize() - paneSize;
}
else if (paneSize + siblingSize > this.getTotalSize() && delta > 0) {
paneSize = this.getTotalSize() - siblingSize;
}
if (this.pane.isPercentageSize) {
// handle % resizes
const totalSize = this.getTotalSize();
const percentPaneSize = (paneSize / totalSize) * 100;
this.pane.size = percentPaneSize + '%';
}
else {
// px resize
this.pane.size = paneSize + 'px';
}
if (this.sibling.isPercentageSize) {
// handle % resizes
const totalSize = this.getTotalSize();
const percentSiblingPaneSize = (siblingSize / totalSize) * 100;
this.sibling.size = percentSiblingPaneSize + '%';
}
else {
// px resize
this.sibling.size = siblingSize + 'px';
}
this.pane.dragSize = null;
this.sibling.dragSize = null;
const args = { pane: this.pane, sibling: this.sibling };
this.resizeEnd.emit(args);
}
/** @hidden @internal */
getPaneSiblingsByOrder(order, barIndex) {
const panes = this.panes.toArray();
const prevPane = panes[order - barIndex - 1];
const nextPane = panes[order - barIndex];
const siblings = [prevPane, nextPane];
return siblings;
}
getTotalSize() {
const computed = this.document.defaultView.getComputedStyle(this.elementRef.nativeElement);
const totalSize = this.type === SplitterType.Horizontal ? computed.getPropertyValue('width') : computed.getPropertyValue('height');
return parseFloat(totalSize);
}
/**
* @hidden @internal
* This method inits panes with properties.
*/
initPanes() {
this.panes.forEach(pane => {
pane.owner = this;
if (this.type === SplitterType.Horizontal) {
pane.minWidth = pane.minSize ?? '0';
pane.maxWidth = pane.maxSize ?? '100%';
}
else {
pane.minHeight = pane.minSize ?? '0';
pane.maxHeight = pane.maxSize ?? '100%';
}
});
this.assignFlexOrder();
if (this.panes.filter(x => x.collapsed).length > 0) {
// if any panes are collapsed, reset sizes.
this.resetPaneSizes();
}
}
/**
* @hidden @internal
* This method reset pane sizes.
*/
resetPaneSizes() {
if (this.panes) {
// if type is changed runtime, should reset sizes.
this.panes.forEach(x => {
x.size = 'auto';
x.minWidth = '0';
x.maxWidth = '100%';
x.minHeight = '0';
x.maxHeight = '100%';
});
}
}
/**
* @hidden @internal
* This method assigns the order of each pane.
*/
assignFlexOrder() {
let k = 0;
this.panes.forEach((pane) => {
pane.order = k;
k += 2;
});
}
/**
* @hidden @internal
* Calculates new sizes for the panes based on move delta and initial sizes
*/
calcNewSizes(delta) {
const min = parseInt(this.pane.minSize, 10) || 0;
const minSibling = parseInt(this.sibling.minSize, 10) || 0;
const max = parseInt(this.pane.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize - minSibling;
const maxSibling = parseInt(this.sibling.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize - min;
if (delta < 0) {
const maxPossibleDelta = Math.min(max - this.initialPaneSize, this.initialSiblingSize - minSibling);
delta = Math.min(maxPossibleDelta, Math.abs(delta)) * -1;
}
else {
const maxPossibleDelta = Math.min(this.initialPaneSize - min, maxSibling - this.initialSiblingSize);
delta = Math.min(maxPossibleDelta, Math.abs(delta));
}
return [this.initialPaneSize - delta, this.initialSiblingSize + delta];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxSplitterComponent, isStandalone: true, selector: "igx-splitter", inputs: { type: "type", nonCollapsible: ["nonCollapsible", "nonCollapsible", booleanAttribute] }, outputs: { resizeStart: "resizeStart", resizing: "resizing", resizeEnd: "resizeEnd" }, host: { properties: { "class.igx-splitter": "this.cssClass", "style.overflow": "this.overflow", "style.display": "this.display", "attr.aria-orientation": "this.orientation", "style.flex-direction": "this.direction" } }, queries: [{ propertyName: "panes", predicate: IgxSplitterPaneComponent, read: IgxSplitterPaneComponent }], ngImport: i0, template: "<ng-content select=\"igx-splitter-pane\"></ng-content>\n@for (pane of panes; track pane; let last = $last; let index = $index) {\n @if (!last) {\n <igx-splitter-bar [order]=\"pane.order + 1\" role=\"separator\"\n [type]=\"type\"\n [pane]=\"pane\"\n [siblings]=\"getPaneSiblingsByOrder(pane.order + 1, index)\"\n (moveStart)=\"onMoveStart($event)\"\n (moving)=\"onMoving($event)\"\n (movingEnd)=\"onMoveEnd($event)\"\n [nonCollapsible]=\"nonCollapsible\">\n </igx-splitter-bar>\n }\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => IgxSplitBarComponent), selector: "igx-splitter-bar", inputs: ["nonCollapsible", "type", "order", "pane", "siblings"], outputs: ["moveStart", "moving", "movingEnd"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSplitterComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-splitter', imports: [forwardRef(() => IgxSplitBarComponent)], template: "<ng-content select=\"igx-splitter-pane\"></ng-content>\n@for (pane of panes; track pane; let last = $last; let index = $index) {\n @if (!last) {\n <igx-splitter-bar [order]=\"pane.order + 1\" role=\"separator\"\n [type]=\"type\"\n [pane]=\"pane\"\n [siblings]=\"getPaneSiblingsByOrder(pane.order + 1, index)\"\n (moveStart)=\"onMoveStart($event)\"\n (moving)=\"onMoving($event)\"\n (movingEnd)=\"onMoveEnd($event)\"\n [nonCollapsible]=\"nonCollapsible\">\n </igx-splitter-bar>\n }\n}\n" }]
}], propDecorators: { panes: [{
type: ContentChildren,
args: [IgxSplitterPaneComponent, { read: IgxSplitterPaneComponent }]
}], cssClass: [{
type: HostBinding,
args: ['class.igx-splitter']
}], overflow: [{
type: HostBinding,
args: ['style.overflow']
}], display: [{
type: HostBinding,
args: ['style.display']
}], orientation: [{
type: HostBinding,
args: ['attr.aria-orientation']
}], resizeStart: [{
type: Output
}], resizing: [{
type: Output
}], resizeEnd: [{
type: Output
}], type: [{
type: Input
}], nonCollapsible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], direction: [{
type: HostBinding,
args: ['style.flex-direction']
}] } });
/**
* @hidden @internal
* Represents the draggable bar that visually separates panes and allows for changing their sizes.
*/
class IgxSplitBarComponent {
constructor() {
/**
* Set css class to the host element.
*/
this.cssClass = 'igx-splitter-bar-host';
/**
* Gets/Sets the orientation.
*/
this.type = SplitterType.Horizontal;
/**
* An event that is emitted whenever we start dragging the current `SplitBarComponent`.
*/
this.moveStart = new EventEmitter();
/**
* An event that is emitted while we are dragging the current `SplitBarComponent`.
*/
this.moving = new EventEmitter();
this.movingEnd = new EventEmitter();
this.interactionKeys = new Set('right down left up arrowright arrowdown arrowleft arrowup'.split(' '));
}
/**
* @hidden
* @internal
*/
get tabindex() {
return this.resizeDisallowed ? null : 0;
}
/**
* @hidden
* @internal
*/
get orientation() {
return this.type === SplitterType.Horizontal ? 'horizontal' : 'vertical';
}
/**
* @hidden
* @internal
*/
get cursor() {
if (this.resizeDisallowed) {
return '';
}
return this.type === SplitterType.Horizontal ? 'col-resize' : 'row-resize';
}
/**
* @hidden @internal
*/
get prevButtonHidden() {
return this.siblings[0]?.collapsed && !this.siblings[1]?.collapsed;
}
/**
* @hidden @internal
*/
keyEvent(event) {
const key = event.key.toLowerCase();
const ctrl = event.ctrlKey;
event.stopPropagation();
if (this.interactionKeys.has(key)) {
event.preventDefault();
}
switch (key) {
case 'arrowup':
case 'up':
if (this.type === SplitterType.Vertical) {
if (ctrl) {
this.onCollapsing(false);
break;
}
if (!this.resizeDisallowed) {
event.preventDefault();
this.moveStart.emit(this.pane);
this.moving.emit(10);
}
}
break;
case 'arrowdown':
case 'down':
if (this.type === SplitterType.Vertical) {
if (ctrl) {
this.onCollapsing(true);
break;
}
if (!this.resizeDisallowed) {
event.preventDefault();
this.moveStart.emit(this.pane);
this.moving.emit(-10);
}
}
break;
case 'arrowleft':
case 'left':
if (this.type === SplitterType.Horizontal) {
if (ctrl) {
this.onCollapsing(false);
break;
}
if (!this.resizeDisallowed) {
event.preventDefault();
this.moveStart.emit(this.pane);
this.moving.emit(10);
}
}
break;
case 'arrowright':
case 'right':
if (this.type === SplitterType.Horizontal) {
if (ctrl) {
this.onCollapsing(true);
break;
}
if (!this.resizeDisallowed) {
event.preventDefault();
this.moveStart.emit(this.pane);
this.moving.emit(-10);
}
}
break;
default:
break;
}
}
/**
* @hidden @internal
*/
get dragDir() {
return this.type === SplitterType.Horizontal ? DragDirection.VERTICAL : DragDirection.HORIZONTAL;
}
/**
* @hidden @internal
*/
get nextButtonHidden() {
return this.siblings[1]?.collapsed && !this.siblings[0]?.collapsed;
}
/**
* @hidden @internal
*/
onDragStart(event) {
if (this.resizeDisallowed) {
event.cancel = true;
return;
}
this.startPoint = this.type === SplitterType.Horizontal ? event.startX : event.startY;
this.moveStart.emit(this.pane);
}
/**
* @hidden @internal
*/
onDragMove(event) {
const isHorizontal = this.type === SplitterType.Horizontal;
const curr = isHorizontal ? event.pageX : event.pageY;
const delta = this.startPoint - curr;
if (delta !== 0) {
this.moving.emit(delta);
event.cancel = true;
event.owner.element.nativeElement.style.transform = '';
}
}
onDragEnd(event) {
const isHorizontal = this.type === SplitterType.Horizontal;
const curr = isHorizontal ? event.pageX : event.pageY;
const delta = this.startPoint - curr;
if (delta !== 0) {
this.movingEnd.emit(delta);
}
}
get resizeDisallowed() {
const relatedTabs = this.siblings;
return !!relatedTabs.find(x => x?.resizable === false || x?.collapsed === true);
}
/**
* @hidden @internal
*/
onCollapsing(next) {
const prevSibling = this.siblings[0];
const nextSibling = this.siblings[1];
let target;
if (next) {
// if next is clicked when prev pane is hidden, show prev pane, else hide next pane.
target = prevSibling.collapsed ? prevSibling : nextSibling;
}
else {
// if prev is clicked when next pane is hidden, show next pane, else hide prev pane.
target = nextSibling.collapsed ? nextSibling : prevSibling;
}
target.toggle();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSplitBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.2", type: IgxSplitBarComponent, isStandalone: true, selector: "igx-splitter-bar", inputs: { nonCollapsible: ["nonCollapsible", "nonCollapsible", booleanAttribute], type: "type", order: "order", pane: "pane", siblings: "siblings" }, outputs: { moveStart: "moveStart", moving: "moving", movingEnd: "movingEnd" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "class.igx-splitter-bar-host": "this.cssClass", "style.order": "this.order", "attr.tabindex": "this.tabindex", "attr.aria-orientation": "this.orientation" } }, ngImport: i0, template: "<div class=\"igx-splitter-bar\"\n [class.igx-splitter-bar--vertical]=\"type === 0\"\n [style.cursor]=\"cursor\"\n igxDrag\n [ghost]=\"false\"\n [dragDirection]=\"dragDir\"\n (dragStart)=\"onDragStart($event)\"\n (dragMove)=\"onDragMove($event)\"\n (dragEnd)=\"onDragEnd($event)\"\n [class.igx-splitter-bar--collapsible]=\"!nonCollapsible\"\n>\n <div class=\"igx-splitter-bar__expander--start\" igxDragIgnore (click)=\"onCollapsing(false)\" [hidden]=\"prevButtonHidden\"></div>\n <div class=\"igx-splitter-bar__handle\"></div>\n <div class=\"igx-splitter-bar__expander--end\" igxDragIgnore (click)=\"onCollapsing(true)\" [hidden]=\"nextButtonHidden\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: IgxDragIgnoreDirective, selector: "[igxDragIgnore]" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSplitBarComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-splitter-bar', imports: [IgxDragDirective, IgxDragIgnoreDirective], template: "<div class=\"igx-splitter-bar\"\n [class.igx-splitter-bar--vertical]=\"type === 0\"\n [style.cursor]=\"cursor\"\n igxDrag\n [ghost]=\"false\"\n [dragDirection]=\"dragDir\"\n (dragStart)=\"onDragStart($event)\"\n (dragMove)=\"onDragMove($event)\"\n (dragEnd)=\"onDragEnd($event)\"\n [class.igx-splitter-bar--collapsible]=\"!nonCollapsible\"\n>\n <div class=\"igx-splitter-bar__expander--start\" igxDragIgnore (click)=\"onCollapsing(false)\" [hidden]=\"prevButtonHidden\"></div>\n <div class=\"igx-splitter-bar__handle\"></div>\n <div class=\"igx-splitter-bar__expander--end\" igxDragIgnore (click)=\"onCollapsing(true)\" [hidden]=\"nextButtonHidden\"></div>\n</div>\n" }]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-splitter-bar-host']
}], nonCollapsible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], type: [{
type: Input
}], order: [{
type: HostBinding,
args: ['style.order']
}, {
type: Input
}], tabindex: [{
type: HostBinding,
args: ['attr.tabindex']
}], orientation: [{
type: HostBinding,
args: ['attr.aria-orientation']
}], pane: [{
type: Input
}], siblings: [{
type: Input
}], moveStart: [{
type: Output
}], moving: [{
type: Output
}], movingEnd: [{
type: Output
}], keyEvent: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
/* NOTE: Splitter directives collection for ease-of-use import in standalone components scenario */
const IGX_SPLITTER_DIRECTIVES = [
IgxSplitterComponent,
IgxSplitterPaneComponent,
IgxSplitBarComponent
];
/**
* @hidden
* @deprecated
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxSplitterModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxSplitterModule, imports: [IgxSplitterComponent, IgxSplitterPaneComponent, IgxSplitBarComponent], exports: [IgxSplitterComponent, IgxSplitterPaneComponent, IgxSplitBarComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSplitterModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSplitterModule, decorators: [{
type: NgModule,
args: [{
imports: [
...IGX_SPLITTER_DIRECTIVES
],
exports: [
...IGX_SPLITTER_DIRECTIVES
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IGX_SPLITTER_DIRECTIVES, IgxSplitBarComponent, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, SplitterType };
//# sourceMappingURL=igniteui-angular-splitter.mjs.map