@progress/kendo-angular-layout 21.4.1 → 22.0.0-develop.1

package/esm2022/splitter/splitter-pane.component.mjs

@@ -1,324 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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 { 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.
- *
- * @example
- * ```html
- * <kendo-splitter>
- *   <kendo-splitter-pane size="30%" [collapsible]="true">
- *     Left pane content
- *   </kendo-splitter-pane>
- *   <kendo-splitter-pane>
- *     Right pane content
- *   </kendo-splitter-pane>
- * </kendo-splitter>
- * ```
- */
-export class SplitterPaneComponent {
-    element;
-    renderer;
-    cdr;
-    splitterService;
-    /**
-     * @hidden
-     */
-    set order(paneOrder) {
-        this._order = paneOrder;
-        this.setOrderStyles();
-    }
-    get order() {
-        return this._order;
-    }
-    /**
-     * Defines the initial size of the pane.
-     * Accepts values in pixels and percentages.
-     * The value must be between the `min` and `max` properties.
-     */
-    set size(newSize) {
-        this._size = newSize;
-        // Only set flex-basis if the pane is not collapsed
-        if (!this._collapsed) {
-            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;
-    }
-    /**
-     * Defines the HTML attributes of the splitter bar.
-     * Accepts string key-value pairs.
-     * You cannot change attributes that are essential for certain functionalities.
-     */
-    set splitterBarAttributes(attributes) {
-        this._splitterBarAttributes = attributes;
-        const splitterBar = this.splitterService.getPaneSplitterBar(this);
-        if (splitterBar) {
-            splitterBar.htmlAttributes = attributes;
-        }
-    }
-    get splitterBarAttributes() {
-        return this._splitterBarAttributes;
-    }
-    /**
-     * Defines the CSS classes that are rendered on the splitter bar.
-     * Supports the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
-     */
-    splitterBarClass;
-    /**
-     * Defines the minimum possible size of the pane.
-     * Accepts values in pixels and percentages.
-     */
-    min;
-    /**
-     * Defines the maximum possible size of the pane.
-     * Accepts values in pixels and percentages.
-     */
-    max;
-    /**
-     * Determines if you can resize the pane and provide space for other panes.
-     *
-     * @default true
-     */
-    resizable = true;
-    /**
-     * Determines if you can hide the pane and provide space for other panes.
-     *
-     * @default false
-     */
-    collapsible = false;
-    /**
-     * Determines if overflowing content is scrollable or hidden.
-     *
-     * @default true
-     */
-    scrollable = true;
-    /**
-     * Determines if the pane is initially collapsed.
-     *
-     * @default false
-     */
-    set collapsed(value) {
-        const hasChanged = this._collapsed !== value;
-        this._collapsed = value;
-        if (hasChanged && this.nativeElement) {
-            if (this._collapsed) {
-                // When collapsing, clear the flex-basis to allow other panes to expand
-                this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', '0');
-                this.renderer.setStyle(this.nativeElement, 'flex-basis', '0');
-            }
-            else if (this._size) {
-                // When expanding, restore the size if it was set
-                this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', this._size);
-                this.renderer.setStyle(this.nativeElement, 'flex-basis', this._size);
-            }
-            // Trigger the same forceExpand logic that tryToggle does
-            // This ensures remaining panes expand when a pane is collapsed
-            if (this.splitterService?.panes) {
-                const notCollapsed = this.splitterService.panes.filter(p => !p.collapsed);
-                const allHaveFixedSize = notCollapsed.every(p => p.fixedSize);
-                notCollapsed.filter(p => p.fixedSize).forEach(pane => {
-                    pane.forceExpand = allHaveFixedSize;
-                });
-            }
-        }
-    }
-    get collapsed() {
-        return this._collapsed;
-    }
-    /**
-     * @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 when the Splitter pane size changes.
-     * The event data contains the new pane size.
-     * Enables two-way binding of the pane `size` property.
-     */
-    sizeChange = new EventEmitter();
-    /**
-     * Fires when the Splitter pane collapses or expands.
-     * The event data contains the new property state.
-     * Enables 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;
-    _collapsed = false;
-    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: "18.2.14", 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: "17.0.0", version: "18.2.14", 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: `
-        @if (!collapsed) {
-          <ng-content></ng-content>
-        }
-        @if (overlayContent) {
-          <div class="k-splitter-overlay k-overlay"></div>
-        }
-        `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterPaneComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoSplitterPane',
-                    selector: 'kendo-splitter-pane',
-                    template: `
-        @if (!collapsed) {
-          <ng-content></ng-content>
-        }
-        @if (overlayContent) {
-          <div class="k-splitter-overlay k-overlay"></div>
-        }
-        `,
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ 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']
-            }] } });

package/esm2022/splitter/splitter.component.mjs

@@ -1,301 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, EventEmitter, ContentChildren, Host, HostBinding, Inject, Input, Optional, Output, QueryList, ViewChildren, Renderer2, NgZone, isDevMode } from '@angular/core';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { validatePackage } from '@progress/kendo-licensing';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
-import { packageMetadata } from '../package-metadata';
-import { SplitterPaneComponent } from './splitter-pane.component';
-import { SplitterBarComponent } from './splitter-bar.component';
-import { SplitterService } from './splitter.service';
-import { isPresent } from '../common/util';
-import { DraggableDirective } from '@progress/kendo-angular-common';
-import { NgClass, NgStyle } from '@angular/common';
-import * as i0 from "@angular/core";
-import * as i1 from "./splitter.service";
-import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "./splitter-pane.component";
-const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#specifying-the-dimensions';
-/**
- * Represents the [Kendo UI Splitter component for Angular]({% slug overview_splitter %}).
- *
- * @example
- * ```html
- * <kendo-splitter [style.height.px]="280">
- *   <kendo-splitter-pane [collapsible]="true" size="30%">
- *     <h3>Left pane</h3>
- *   </kendo-splitter-pane>
- *   <kendo-splitter-pane>
- *     <h3>Right pane</h3>
- *   </kendo-splitter-pane>
- * </kendo-splitter>
- * ```
- * @remarks
- * Supported children components are: {@link SplitterPaneComponent}.
- */
-export class SplitterComponent {
-    element;
-    splitterService;
-    localization;
-    renderer;
-    ngZone;
-    enclosingPane;
-    /**
-     * Defines the orientation of the panes within the Splitter.
-     * Use `horizontal` to place panes horizontally or `vertical` to place them vertically.
-     *
-     * @default 'horizontal'
-     */
-    orientation = 'horizontal';
-    /**
-     * Defines the width or height of the Splitter splitbars in pixels.
-     * The dimension depends on the orientation of the Splitter.
-     */
-    splitbarWidth;
-    /**
-     * Defines the distance in pixels that you move the separator during keyboard navigation.
-     *
-     * @default 10
-     */
-    set resizeStep(value) {
-        this.splitterService.resizeStep = value;
-    }
-    get resizeStep() {
-        return this.splitterService.resizeStep;
-    }
-    /**
-     * Defines the CSS classes that are rendered on the splitter bars.
-     * Supports the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
-     */
-    splitterBarClass;
-    /**
-     * Fires when the layout of the Splitter changes.
-     * Use this event to trigger layout calculations on components that are positioned inside the panes.
-     */
-    layoutChange;
-    get hostClasses() {
-        return true;
-    }
-    get horizontalHostClasses() {
-        return this.orientation === 'horizontal';
-    }
-    get verticalHostClasses() {
-        return this.orientation === 'vertical';
-    }
-    get dir() {
-        return this.direction;
-    }
-    set splitbars(splitbars) {
-        this.splitterService.splitterBars = splitbars ? splitbars.toArray() : [];
-        if (!isPresent(splitbars) || !isPresent(this.panes)) {
-            return;
-        }
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        const panesArray = this.panes.toArray();
-        const splitBarsArray = splitbars.toArray();
-        const components = [...panesArray, ...splitBarsArray]
-            .sort((a, b) => a.order - b.order);
-        const elements = components.map(component => component.element.nativeElement);
-        panesArray.forEach((pane, i) => {
-            const splitbar = splitBarsArray[i];
-            if (splitbar && pane.splitterBarAttributes) {
-                splitbar.htmlAttributes = pane.splitterBarAttributes;
-            }
-        });
-        elements.forEach(element => this.renderer.appendChild(this.element.nativeElement, element));
-    }
-    /**
-     * @hidden
-     */
-    panes;
-    paneChangesSubscription;
-    _styleObserver;
-    constructor(element, splitterService, localization, renderer, ngZone, enclosingPane) {
-        this.element = element;
-        this.splitterService = splitterService;
-        this.localization = localization;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.enclosingPane = enclosingPane;
-        validatePackage(packageMetadata);
-        if (enclosingPane) {
-            enclosingPane.containsSplitter = true;
-        }
-        // the handler only runs in NgZone if there are bound handlers
-        // this line merges both streams
-        this.layoutChange = this.splitterService.layoutChange;
-        this.configure = this.configure.bind(this);
-    }
-    ngAfterContentInit() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.reconfigure();
-        this.setFixedHeight();
-        const allHaveFixedSize = this.panes.length && Array.from(this.panes).every(p => p.fixedSize);
-        if (allHaveFixedSize && isDevMode()) {
-            throw new Error(`
-                The Splitter should have at least one pane without a set size.
-                See ${SIZING_DOC_LINK} for more information.
-            `);
-        }
-        this._styleObserver = new MutationObserver(() => {
-            this.ngZone.runOutsideAngular(() => {
-                this.setFixedHeight();
-            });
-        });
-        this._styleObserver.observe(this.element.nativeElement, { attributeFilter: ['style'] });
-    }
-    ngOnChanges(changes) {
-        if (changes.orientation && !changes.orientation.isFirstChange()) {
-            this.reconfigure();
-        }
-    }
-    ngOnDestroy() {
-        if (this.enclosingPane) {
-            this.enclosingPane.containsSplitter = false;
-        }
-        if (this._styleObserver) {
-            this._styleObserver.disconnect();
-            this._styleObserver = null;
-        }
-        this.unsubscribeChanges();
-    }
-    reconfigure() {
-        this.unsubscribeChanges();
-        this.configure();
-        this.paneChangesSubscription = this.panes.changes.subscribe(this.configure);
-    }
-    unsubscribeChanges() {
-        if (this.paneChangesSubscription) {
-            this.paneChangesSubscription.unsubscribe();
-            this.paneChangesSubscription = null;
-        }
-    }
-    configure() {
-        this.splitterService.configure({
-            panes: this.panes.toArray(),
-            orientation: this.orientation,
-            containerSize: () => {
-                if (this.orientation === 'vertical') {
-                    return this.element.nativeElement.clientHeight;
-                }
-                else {
-                    return this.element.nativeElement.clientWidth;
-                }
-            },
-            direction: this.direction
-        });
-    }
-    get direction() {
-        return this.localization.rtl ? 'rtl' : 'ltr';
-    }
-    setFixedHeight() {
-        this.splitterService.fixedHeight = getComputedStyle(this.element.nativeElement).getPropertyValue('height') !== 'auto';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: i1.SplitterService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitterComponent, isStandalone: true, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep", splitterBarClass: "splitterBarClass" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
-            SplitterService,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.spliter'
-            }
-        ], queries: [{ propertyName: "panes", predicate: SplitterPaneComponent }], viewQueries: [{ propertyName: "splitbars", predicate: SplitterBarComponent, descendants: true }], exportAs: ["kendoSplitter"], usesOnChanges: true, ngImport: i0, template: `
-      <ng-content select="kendo-splitter-pane"></ng-content>
-      @for (
-        pane of panes; track
-        pane; let index = $index; let last = $last) {
-        @if (!last) {
-          <kendo-splitter-bar
-            kendoDraggable
-            [index]="index"
-            [orientation]="orientation"
-            [ngClass]="pane.splitterBarClass || splitterBarClass"
-          [ngStyle]="{
-            width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
-            height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
-          }">
-          </kendo-splitter-bar>
-        }
-      }
-      `, isInline: true, dependencies: [{ kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index", "htmlAttributes"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoSplitter',
-                    selector: 'kendo-splitter',
-                    providers: [
-                        SplitterService,
-                        LocalizationService,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.spliter'
-                        }
-                    ],
-                    template: `
-      <ng-content select="kendo-splitter-pane"></ng-content>
-      @for (
-        pane of panes; track
-        pane; let index = $index; let last = $last) {
-        @if (!last) {
-          <kendo-splitter-bar
-            kendoDraggable
-            [index]="index"
-            [orientation]="orientation"
-            [ngClass]="pane.splitterBarClass || splitterBarClass"
-          [ngStyle]="{
-            width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
-            height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
-          }">
-          </kendo-splitter-bar>
-        }
-      }
-      `,
-                    standalone: true,
-                    imports: [SplitterBarComponent, DraggableDirective, NgStyle, NgClass]
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.SplitterService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.SplitterPaneComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }, {
-                    type: Inject,
-                    args: [SplitterPaneComponent]
-                }] }], propDecorators: { orientation: [{
-                type: Input
-            }], splitbarWidth: [{
-                type: Input
-            }], resizeStep: [{
-                type: Input
-            }], splitterBarClass: [{
-                type: Input
-            }], layoutChange: [{
-                type: Output
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-splitter']
-            }, {
-                type: HostBinding,
-                args: ['class.k-splitter-flex']
-            }], horizontalHostClasses: [{
-                type: HostBinding,
-                args: ['class.k-splitter-horizontal']
-            }], verticalHostClasses: [{
-                type: HostBinding,
-                args: ['class.k-splitter-vertical']
-            }], dir: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }], splitbars: [{
-                type: ViewChildren,
-                args: [SplitterBarComponent]
-            }], panes: [{
-                type: ContentChildren,
-                args: [SplitterPaneComponent]
-            }] } });