@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
268 lines (267 loc) • 9.63 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Renderer2, Input, Output } from '@angular/core';
import { NgIf } from '@angular/common';
import { SplitterService } from './splitter.service';
import { anyChanged } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
import * as i1 from "./splitter.service";
/**
* Represents the pane component of the Splitter.
*/
export class SplitterPaneComponent {
element;
renderer;
cdr;
splitterService;
/**
* @hidden
*/
set order(paneOrder) {
this._order = paneOrder;
this.setOrderStyles();
}
get order() {
return this._order;
}
/**
* Sets the initial size of the pane.
* Accepts units in pixel and percentage values.
* Has to be between the `min` and `max` properties.
*/
set size(newSize) {
this._size = newSize;
this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', newSize);
this.renderer.setStyle(this.nativeElement, 'flex-basis', newSize);
this.setStaticPaneClass();
}
get size() {
return this._size;
}
/**
* Sets the HTML attributes of the splitter bar.
* The property accepts string key-value based pairs.
* Attributes which are essential for certain functionalities cannot be changed.
*/
set splitterBarAttributes(attributes) {
this._splitterBarAttributes = attributes;
const splitterBar = this.splitterService.getPaneSplitterBar(this);
if (splitterBar) {
splitterBar.htmlAttributes = attributes;
}
}
get splitterBarAttributes() {
return this._splitterBarAttributes;
}
/**
* The CSS classes that will be rendered on the splitter bar.
* Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
*/
splitterBarClass;
/**
* Sets the minimum possible size of the pane.
* Accepts units in pixel and percentage values.
*/
min;
/**
* Sets the maximum possible size of the pane.
* Accepts units in pixel and percentage values.
*/
max;
/**
* Specifies if the user is allowed to resize the pane and provide space for other panes.
*/
resizable = true;
/**
* Specifies if the user is allowed to hide the pane and provide space for other panes.
*/
collapsible = false;
/**
* Specifies if overflowing content is scrollable or hidden.
*/
scrollable = true;
/**
* Specifies if the pane is initially collapsed.
*/
collapsed = false;
/**
* @hidden
*/
orientation = 'horizontal';
/**
* @hidden
*/
set containsSplitter(value) {
if (value) {
this.renderer.addClass(this.nativeElement, 'k-pane-flex');
}
else {
this.renderer.removeClass(this.nativeElement, 'k-pane-flex');
}
}
/**
* @hidden
*/
overlayContent = false;
/**
* Fires each time the user resizes the Splitter pane.
* The event data contains the new pane size.
* Allows a two-way binding of the pane `size` property.
*/
sizeChange = new EventEmitter();
/**
* Fires each time the `collapsed` property changes.
* The event data contains the new property state.
* Allows a two-way binding of the `collapsed` pane property.
*/
collapsedChange = new EventEmitter();
get isHidden() {
return this.collapsed;
}
ariaRole = 'group';
hostClass = true;
get scrollablePaneClass() {
return this.scrollable;
}
get fixedSize() {
return this.size && this.size.length > 0;
}
/**
* @hidden
*/
forceExpand = false;
/**
* @hidden
*/
isResized = false;
_size;
_order;
_splitterBarAttributes;
constructor(element, renderer, cdr, splitterService) {
this.element = element;
this.renderer = renderer;
this.cdr = cdr;
this.splitterService = splitterService;
}
ngAfterViewChecked() {
if (this.isHidden) {
this.renderer.addClass(this.nativeElement, 'k-hidden');
this.renderer.addClass(this.nativeElement, 'hidden');
}
else {
this.renderer.removeClass(this.nativeElement, 'k-hidden');
this.renderer.removeClass(this.nativeElement, 'hidden');
}
this.setStaticPaneClass();
}
ngOnChanges(changes) {
if (anyChanged(['resizable', 'collapsible'], changes)) {
this.setStaticPaneClass();
}
}
/**
* @hidden
*/
get computedSize() {
if (this.orientation === 'vertical') {
return this.nativeElement.offsetHeight;
}
else {
return this.nativeElement.offsetWidth;
}
}
/**
* @hidden
*/
get nativeElement() {
return this.element.nativeElement;
}
/**
* @hidden
*/
toggleOverlay(show) {
this.overlayContent = show;
this.cdr.detectChanges();
}
/**
* @hidden
*/
detectChanges() {
this.cdr.detectChanges();
}
setOrderStyles() {
this.renderer.setStyle(this.nativeElement, '-ms-flex-order', this.order);
this.renderer.setStyle(this.nativeElement, 'order', this.order);
}
setStaticPaneClass() {
if (this.forceExpand) {
this.renderer.removeClass(this.nativeElement, 'k-pane-static');
return;
}
if (!this.resizable && !this.collapsible || this.fixedSize) {
this.renderer.addClass(this.nativeElement, 'k-pane-static');
}
else {
this.renderer.removeClass(this.nativeElement, 'k-pane-static');
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.SplitterService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", splitterBarAttributes: "splitterBarAttributes", splitterBarClass: "splitterBarClass", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], usesOnChanges: true, ngImport: i0, template: `
<ng-container *ngIf="!collapsed"><ng-content></ng-content></ng-container>
<div *ngIf="overlayContent" class="k-splitter-overlay k-overlay"></div>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterPaneComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoSplitterPane',
selector: 'kendo-splitter-pane',
template: `
<ng-container *ngIf="!collapsed"><ng-content></ng-content></ng-container>
<div *ngIf="overlayContent" class="k-splitter-overlay k-overlay"></div>
`,
standalone: true,
imports: [NgIf]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.SplitterService }]; }, propDecorators: { order: [{
type: Input
}], size: [{
type: Input
}], splitterBarAttributes: [{
type: Input
}], splitterBarClass: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], resizable: [{
type: Input
}], collapsible: [{
type: Input
}], scrollable: [{
type: Input
}], collapsed: [{
type: Input
}], orientation: [{
type: Input
}], containsSplitter: [{
type: Input
}], overlayContent: [{
type: Input
}], sizeChange: [{
type: Output
}], collapsedChange: [{
type: Output
}], ariaRole: [{
type: HostBinding,
args: ['attr.role']
}], hostClass: [{
type: HostBinding,
args: ['class.k-pane']
}], scrollablePaneClass: [{
type: HostBinding,
args: ['class.k-scrollable']
}] } });