@progress/kendo-angular-layout 6.6.0 → 7.0.0-dev.202204150742

package/{dist/es2015 → esm2015}/panelbar/panelbar-item.component.js

@@ -2,16 +2,16 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-var PanelBarItemComponent_1;
-import { Component, Input, ContentChildren, ViewChildren, Optional, Host, HostBinding, SkipSelf, isDevMode, TemplateRef, QueryList, ViewChild, ElementRef, Renderer2 } from '@angular/core';
+import { Component, Input, ContentChildren, ViewChildren, Optional, Host, HostBinding, SkipSelf, isDevMode, ViewChild } from '@angular/core';
 import { animate, trigger, style, state, transition, AUTO_STYLE } from '@angular/animations';
-import { PanelBarService } from "./panelbar.service";
 import { PanelBarContentDirective } from "./panelbar-content.directive";
 import { PanelBarItemTitleDirective } from "./panelbar-item-title.directive";
 import { isFocusable } from '../common/dom-queries';
 import { Subscription } from 'rxjs';
 import { PanelBarExpandMode } from './panelbar-expand-mode';
+import * as i0 from "@angular/core";
+import * as i1 from "./panelbar.service";
+import * as i2 from "@angular/common";
 /**
  * @hidden
  */
@@ -19,7 +19,7 @@ let nextId = 0;
 /**
  * Represents the items of the PanelBar.
  */
-let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponent {
+export class PanelBarItemComponent {
     constructor(parent, eventService, element, renderer) {
         this.parent = parent;
         this.eventService = eventService;
@@ -58,7 +58,7 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
         this.hasContent = false;
         this.state = "inactive";
         this.role = "treeitem";
-        this.titleAttribute = null; // tslint:disable-line
+        this.titleAttribute = null; // eslint-disable-line
         this.kItemClass = true;
         this.focused = false;
         this.wrapperFocused = false;
@@ -242,151 +242,150 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
     onWrapperFocusChange(focused) {
         this.wrapperFocused = focused;
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], PanelBarItemComponent.prototype, "title", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], PanelBarItemComponent.prototype, "id", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], PanelBarItemComponent.prototype, "icon", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], PanelBarItemComponent.prototype, "iconClass", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], PanelBarItemComponent.prototype, "imageUrl", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], PanelBarItemComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [Boolean])
-], PanelBarItemComponent.prototype, "expanded", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], PanelBarItemComponent.prototype, "selected", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], PanelBarItemComponent.prototype, "content", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array)
-], PanelBarItemComponent.prototype, "items", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", TemplateRef)
-], PanelBarItemComponent.prototype, "template", void 0);
-tslib_1.__decorate([
-    ViewChild('header', { static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], PanelBarItemComponent.prototype, "header", void 0);
-tslib_1.__decorate([
-    ViewChild('contentWrapper', { static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], PanelBarItemComponent.prototype, "contentWrapper", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.role'),
-    tslib_1.__metadata("design:type", String)
-], PanelBarItemComponent.prototype, "role", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.title'),
-    tslib_1.__metadata("design:type", String)
-], PanelBarItemComponent.prototype, "titleAttribute", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-item'),
-    tslib_1.__metadata("design:type", Boolean)
-], PanelBarItemComponent.prototype, "kItemClass", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-state-default'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], PanelBarItemComponent.prototype, "kStateDefaultClass", null);
-tslib_1.__decorate([
-    HostBinding('class.k-state-disabled'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], PanelBarItemComponent.prototype, "kStateDisabledClass", null);
-tslib_1.__decorate([
-    HostBinding('class.k-state-expanded'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], PanelBarItemComponent.prototype, "kStateExpandedClass", null);
-tslib_1.__decorate([
-    HostBinding('id'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], PanelBarItemComponent.prototype, "itemId", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-expanded'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], PanelBarItemComponent.prototype, "ariaExpanded", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-selected'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], PanelBarItemComponent.prototype, "ariaSelected", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-disabled'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], PanelBarItemComponent.prototype, "ariaDisabled", null);
-tslib_1.__decorate([
-    HostBinding('class.k-panelbar-header'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], PanelBarItemComponent.prototype, "headerClass", null);
-tslib_1.__decorate([
-    HostBinding('class.k-panelbar-item'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], PanelBarItemComponent.prototype, "childClass", null);
-tslib_1.__decorate([
-    ViewChildren(PanelBarItemComponent_1),
-    tslib_1.__metadata("design:type", QueryList)
-], PanelBarItemComponent.prototype, "viewChildItems", void 0);
-tslib_1.__decorate([
-    ContentChildren(PanelBarItemComponent_1),
-    tslib_1.__metadata("design:type", QueryList)
-], PanelBarItemComponent.prototype, "contentItems", void 0);
-tslib_1.__decorate([
-    ContentChildren(PanelBarContentDirective, { descendants: false }),
-    tslib_1.__metadata("design:type", QueryList)
-], PanelBarItemComponent.prototype, "contentTemplate", void 0);
-tslib_1.__decorate([
-    ContentChildren(PanelBarItemTitleDirective, { descendants: false }),
-    tslib_1.__metadata("design:type", QueryList)
-], PanelBarItemComponent.prototype, "titleTemplates", void 0);
-PanelBarItemComponent = PanelBarItemComponent_1 = tslib_1.__decorate([
-    Component({
-        animations: [
-            trigger('toggle', [
-                state('inactive', style({ display: 'none' })),
-                transition('* => active', [
-                    style({ overflow: 'hidden', display: 'block', height: 0 }),
-                    animate(200, style({ height: AUTO_STYLE }))
-                ]),
-                transition('active => *', [
-                    style({ overflow: 'hidden', height: AUTO_STYLE }),
-                    animate(200, style({ height: 0, display: 'none' }))
-                ])
+}
+PanelBarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PanelBarItemComponent, deps: [{ token: PanelBarItemComponent, host: true, optional: true, skipSelf: true }, { token: i1.PanelBarService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: { title: "title", id: "id", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", expanded: "expanded", selected: "selected", content: "content", items: "items", template: "template" }, host: { properties: { "attr.role": "this.role", "attr.title": "this.titleAttribute", "class.k-item": "this.kItemClass", "class.k-state-default": "this.kStateDefaultClass", "class.k-state-disabled": "this.kStateDisabledClass", "class.k-state-expanded": "this.kStateExpandedClass", "id": "this.itemId", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "class.k-panelbar-header": "this.headerClass", "class.k-panelbar-item": "this.childClass" } }, queries: [{ propertyName: "contentItems", predicate: PanelBarItemComponent }, { propertyName: "contentTemplate", predicate: PanelBarContentDirective }, { propertyName: "titleTemplates", predicate: PanelBarItemTitleDirective }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbarItem"], ngImport: i0, template: `
+            <span
+                #header
+                [class.k-link]="true"
+                [class.k-state-selected]="!disabled && selected"
+                [class.k-state-focused]="focused && wrapperFocused"
+                (click)="onItemClick($event)">
+                <span
+                    *ngIf="icon || iconClass"
+                    class="k-icon k-panelbar-item-icon"
+                    [ngClass]="iconClasses">
+                </span>
+                <img
+                    *ngIf="imageUrl"
+                    class="k-image k-panelbar-item-icon"
+                    [src]="imageUrl"
+                    alt="">
+                <ng-container *ngIf="!titleTemplate"><span class="k-panelbar-item-text">{{title}}</span></ng-container>
+                <ng-template *ngIf="titleTemplate"
+                [ngTemplateOutlet]="titleTemplate"
+                [ngTemplateOutletContext]="{
+                    item: {
+                        title: title,
+                        id: id,
+                        icon: icon,
+                        iconClass: iconClass,
+                        imageUrl: imageUrl,
+                        selected: selected,
+                        expanded: expanded,
+                        disabled: disabled,
+                        focused: focused,
+                        content: content
+                    }
+                }"></ng-template>
+                <span *ngIf="hasChildItems || hasContent"
+                    class="k-icon k-panelbar-toggle"
+                    [ngClass]="{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}">
+                </span>
+            </span>
+            <div #contentWrapper
+                *ngIf="keepContent || (!disabled && expanded && (hasChildItems || hasContent))"
+                [@toggle]="state"
+                [attr.role]="'group'"
+                [attr.aria-hidden]="!disabled && !expanded">
+                <div
+                    *ngIf="hasChildItems && !items?.length"
+                    [style.overflow]="contentOverflow"
+                    [style.height]="contentHeight"
+                    class="k-panel k-group k-panelbar-group">
+                        <ng-content select="kendo-panelbar-item"></ng-content>
+                </div>
+                <div
+                    *ngIf="hasContent && !content"
+                    [style.overflow]="contentOverflow"
+                    [style.height]="contentHeight"
+                    class="k-content k-panelbar-content">
+                    <ng-template
+                        [ngTemplateOutlet]="contentTemplate.first.templateRef"
+                        [ngTemplateOutletContext]="{
+                            $implicit: {
+                                title: title,
+                                id: id,
+                                icon: icon,
+                                imageUrl: imageUrl,
+                                disabled: disabled,
+                                content: content
+                            }
+                        }">
+                    </ng-template>
+                </div>
+                <div *ngIf="hasItems"
+                    [style.overflow]="contentOverflow"
+                    [style.height]="contentHeight"
+                    class="k-panel k-group k-panelbar-group">
+                    <ng-container *ngFor="let item of items">
+                        <kendo-panelbar-item *ngIf="!item.hidden"
+                            [title]="item.title"
+                            [id]="item.id"
+                            [icon]="item.icon"
+                            [iconClass]="item.iconClass"
+                            [imageUrl]="item.imageUrl"
+                            [selected]="!!item.selected"
+                            [expanded]="!!item.expanded"
+                            [disabled]="!!item.disabled"
+                            [template]="template"
+                            [items]="item.children"
+                            [content]="item.content">
+                        </kendo-panelbar-item>
+                    </ng-container>
+                </div>
+                <div
+                    *ngIf="content"
+                    [style.overflow]="contentOverflow"
+                    [style.height]="contentHeight"
+                    class="k-content k-panelbar-content">
+                    <ng-template
+                        [ngTemplateOutlet]="template"
+                        [ngTemplateOutletContext]="{
+                            $implicit: {
+                                title: title,
+                                id: id,
+                                icon: icon,
+                                imageUrl: imageUrl,
+                                disabled: disabled,
+                                content: content
+                            }
+                        }">
+                    </ng-template>
+                    <ng-template [ngIf]="!template">{{content}}</ng-template>
+                </div>
+            </div>`, isInline: true, components: [{ type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+        trigger('toggle', [
+            state('inactive', style({ display: 'none' })),
+            transition('* => active', [
+                style({ overflow: 'hidden', display: 'block', height: 0 }),
+                animate(200, style({ height: AUTO_STYLE }))
+            ]),
+            transition('active => *', [
+                style({ overflow: 'hidden', height: AUTO_STYLE }),
+                animate(200, style({ height: 0, display: 'none' }))
             ])
-        ],
-        exportAs: 'kendoPanelbarItem',
-        selector: "kendo-panelbar-item",
-        template: `
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PanelBarItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    animations: [
+                        trigger('toggle', [
+                            state('inactive', style({ display: 'none' })),
+                            transition('* => active', [
+                                style({ overflow: 'hidden', display: 'block', height: 0 }),
+                                animate(200, style({ height: AUTO_STYLE }))
+                            ]),
+                            transition('active => *', [
+                                style({ overflow: 'hidden', height: AUTO_STYLE }),
+                                animate(200, style({ height: 0, display: 'none' }))
+                            ])
+                        ])
+                    ],
+                    exportAs: 'kendoPanelbarItem',
+                    selector: "kendo-panelbar-item",
+                    template: `
             <span
                 #header
                 [class.k-link]="true"
@@ -497,11 +496,87 @@ PanelBarItemComponent = PanelBarItemComponent_1 = tslib_1.__decorate([
                     <ng-template [ngIf]="!template">{{content}}</ng-template>
                 </div>
             </div>`
-    }),
-    tslib_1.__param(0, SkipSelf()), tslib_1.__param(0, Host()), tslib_1.__param(0, Optional()),
-    tslib_1.__metadata("design:paramtypes", [PanelBarItemComponent,
-        PanelBarService,
-        ElementRef,
-        Renderer2])
-], PanelBarItemComponent);
-export { PanelBarItemComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: PanelBarItemComponent, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i1.PanelBarService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { title: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], header: [{
+                type: ViewChild,
+                args: ['header', { static: false }]
+            }], contentWrapper: [{
+                type: ViewChild,
+                args: ['contentWrapper', { static: false }]
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], titleAttribute: [{
+                type: HostBinding,
+                args: ['attr.title']
+            }], kItemClass: [{
+                type: HostBinding,
+                args: ['class.k-item']
+            }], kStateDefaultClass: [{
+                type: HostBinding,
+                args: ['class.k-state-default']
+            }], kStateDisabledClass: [{
+                type: HostBinding,
+                args: ['class.k-state-disabled']
+            }], kStateExpandedClass: [{
+                type: HostBinding,
+                args: ['class.k-state-expanded']
+            }], itemId: [{
+                type: HostBinding,
+                args: ['id']
+            }], ariaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], ariaSelected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], headerClass: [{
+                type: HostBinding,
+                args: ['class.k-panelbar-header']
+            }], childClass: [{
+                type: HostBinding,
+                args: ['class.k-panelbar-item']
+            }], viewChildItems: [{
+                type: ViewChildren,
+                args: [PanelBarItemComponent]
+            }], contentItems: [{
+                type: ContentChildren,
+                args: [PanelBarItemComponent]
+            }], contentTemplate: [{
+                type: ContentChildren,
+                args: [PanelBarContentDirective, { descendants: false }]
+            }], titleTemplates: [{
+                type: ContentChildren,
+                args: [PanelBarItemTitleDirective, { descendants: false }]
+            }] } });