@progress/kendo-angular-layout 17.0.0-develop.4 → 17.0.0-develop.40

package/{esm2020 → esm2022}/splitter/splitter-bar.component.mjs

@@ -5,7 +5,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ChangeDetectorRef, Component, ElementRef, Host, HostBinding, Input, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { DraggableDirective, Keys } from '@progress/kendo-angular-common';
+import { DraggableDirective, Keys, isObjectPresent, parseAttributes, removeHTMLAttributes, setHTMLAttributes } from '@progress/kendo-angular-common';
 import { SplitterService } from './splitter.service';
 import { Subscription, of } from 'rxjs';
 import { delay, filter, map, switchMap, takeUntil, tap } from 'rxjs/operators';
@@ -34,19 +34,15 @@ const createMoveStream = (draggable) => mouseDown => draggable.kendoDrag
  * @hidden
  */
 export class SplitterBarComponent {
-    constructor(draggable, localization, splitterService, element, renderer, cdr) {
-        this.draggable = draggable;
-        this.localization = localization;
-        this.splitterService = splitterService;
-        this.element = element;
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.ariaRole = 'separator';
-        this.focused = false;
-        this.orientation = 'horizontal';
-        this.index = 0;
-        this.subscriptions = new Subscription();
-    }
+    draggable;
+    localization;
+    splitterService;
+    element;
+    renderer;
+    cdr;
+    ariaRole = 'separator';
+    ariaLabel = 'Splitter pane';
+    focused = false;
     get hostOrientation() {
         return this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
     }
@@ -72,6 +68,41 @@ export class SplitterBarComponent {
     get order() {
         return 2 * this.index + 1;
     }
+    orientation = 'horizontal';
+    index = 0;
+    set htmlAttributes(attributes) {
+        if (isObjectPresent(this.parsedAttributes)) {
+            removeHTMLAttributes(this.parsedAttributes, this.renderer, this.element.nativeElement);
+        }
+        this._htmlAttributes = attributes;
+        this.parsedAttributes = this.htmlAttributes ?
+            parseAttributes(this.htmlAttributes, this.defaultAttributes) :
+            this.htmlAttributes;
+        this.setHtmlAttributes();
+    }
+    get htmlAttributes() {
+        return this._htmlAttributes;
+    }
+    subscriptions = new Subscription();
+    _htmlAttributes;
+    parsedAttributes = {};
+    get defaultAttributes() {
+        return {
+            'aria-orientation': this.hostOrientation,
+            role: this.ariaRole
+        };
+    }
+    get mutableAttributes() {
+        return { 'tabindex': this.tabIndex };
+    }
+    constructor(draggable, localization, splitterService, element, renderer, cdr) {
+        this.draggable = draggable;
+        this.localization = localization;
+        this.splitterService = splitterService;
+        this.element = element;
+        this.renderer = renderer;
+        this.cdr = cdr;
+    }
     ngOnInit() {
         let state;
         const listener = this.draggable.kendoPress.pipe(tap(stopPropagation), filter(() => this.splitterService.isDraggable(this.index)), tap(() => state = this.splitterService.dragState(this.index)), tap(() => this.splitterService.toggleContentOverlay(this.index, true)), switchMap(preventOnDblClick(this.draggable.kendoRelease)), switchMap(createMoveStream(this.draggable))).subscribe(({ pageX, pageY, originalX, originalY }) => {
@@ -114,13 +145,13 @@ export class SplitterBarComponent {
         const relatedPaneIndex = iconName === 'prev' ? this.index + 1 : this.index;
         const pane = this.splitterService.pane(paneIndex);
         const relatedPane = this.splitterService.pane(relatedPaneIndex);
-        const isCollapsible = pane.collapsible;
-        return isCollapsible && !relatedPane.isHidden;
+        const isCollapsible = pane?.collapsible;
+        return isCollapsible && !relatedPane?.isHidden;
     }
     previousArrowClass() {
         const pane = this.splitterService.pane(this.index);
-        const isCollapsible = pane.collapsible;
-        const isCollapsed = pane.collapsed;
+        const isCollapsible = pane?.collapsible;
+        const isCollapsed = pane?.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         return classFromObject({
@@ -132,8 +163,8 @@ export class SplitterBarComponent {
     }
     previousSVGArrowClass() {
         const pane = this.splitterService.pane(this.index);
-        const isCollapsible = pane.collapsible;
-        const isCollapsed = pane.collapsed;
+        const isCollapsible = pane?.collapsible;
+        const isCollapsed = pane?.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
@@ -151,8 +182,8 @@ export class SplitterBarComponent {
     }
     nextArrowClass() {
         const pane = this.splitterService.pane(this.index + 1);
-        const isCollapsible = pane.collapsible;
-        const isCollapsed = pane.collapsed;
+        const isCollapsible = pane?.collapsible;
+        const isCollapsed = pane?.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         return classFromObject({
@@ -164,8 +195,8 @@ export class SplitterBarComponent {
     }
     nextSVGArrowClass() {
         const pane = this.splitterService.pane(this.index + 1);
-        const isCollapsible = pane.collapsible;
-        const isCollapsed = pane.collapsed;
+        const isCollapsible = pane?.collapsible;
+        const isCollapsed = pane?.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
@@ -218,9 +249,12 @@ export class SplitterBarComponent {
             this.splitterService.tryToggle(next);
         }
     }
-}
-SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1.DraggableDirective, host: true }, { token: i2.LocalizationService }, { token: i3.SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
+    setHtmlAttributes() {
+        const attributesToRender = { ...this.mutableAttributes, ...this.parsedAttributes };
+        setHTMLAttributes(attributesToRender, this.renderer, this.element.nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1.DraggableDirective, host: true }, { token: i2.LocalizationService }, { token: i3.SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
         <div *ngIf="shouldShowIcon('prev')" class="k-collapse-prev" (click)="togglePrevious()">
             <kendo-icon-wrapper
                 size="xsmall"
@@ -237,7 +271,8 @@ SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             ></kendo-icon-wrapper>
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterBarComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-splitter-bar',
@@ -266,6 +301,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }] }, { type: i2.LocalizationService }, { type: i3.SplitterService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ariaRole: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }], ariaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
             }], focused: [{
                 type: HostBinding,
                 args: ['class.k-focus']
@@ -288,4 +326,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], index: [{
                 type: Input
+            }], htmlAttributes: [{
+                type: Input
             }] } });

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

@@ -0,0 +1,267 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 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']
+            }] } });