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

package/esm2015/panelbar/panelbar-item.component.js

@@ -0,0 +1,582 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+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 { 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
+ */
+let nextId = 0;
+/**
+ * Represents the items of the PanelBar.
+ */
+export class PanelBarItemComponent {
+    constructor(parent, eventService, element, renderer) {
+        this.parent = parent;
+        this.eventService = eventService;
+        this.element = element;
+        this.renderer = renderer;
+        /**
+         * Allows the component to set the `"id"` property to each item.
+         * Used to set the `id` attributes of the nested elements and to enable the WAI-ARIA support.
+         */
+        this.id = `default-${nextId++}`;
+        /**
+         * Defines the icon that will be rendered next to the title ([see example]({% slug items_panelbar %}#toc-title-icons)).
+         */
+        this.icon = '';
+        /**
+         * Defines  the icon that will be rendered next to the title by using a custom CSS class
+         * ([see example]({% slug items_panelbar %}#toc-title-icons)).
+         */
+        this.iconClass = '';
+        /**
+         * Defines the location of the image that will be displayed next to the title
+         * ([see example]({% slug items_panelbar %}#toc-title-images)).
+         */
+        this.imageUrl = '';
+        /**
+         * When set to `true`, disables a PanelBar item ([see example]({% slug items_panelbar %}#toc-disabled-state)).
+         */
+        this.disabled = false;
+        /**
+         * Sets the selected state of a PanelBar item ([see example]({% slug items_panelbar %}#toc-selected-state)).
+         */
+        this.selected = false;
+        this.keepContent = false;
+        this.hasChildItems = false;
+        this.hasItems = false;
+        this.hasContent = false;
+        this.state = "inactive";
+        this.role = "treeitem";
+        this.titleAttribute = null; // eslint-disable-line
+        this.kItemClass = true;
+        this.focused = false;
+        this.wrapperFocused = false;
+        this.subscriptions = new Subscription(() => { });
+        this._expanded = false;
+        this.subscriptions.add(eventService.parent$.subscribe(focused => this.onWrapperFocusChange(focused)));
+        this.subscriptions.add(eventService.keepContent$.subscribe(keepContent => this.keepContent = keepContent));
+        this.wrapperFocused = parent ? parent.focused : false;
+        this.level = this.parent ? this.parent.level + 1 : 0;
+    }
+    /**
+     * When set to `true`, expands the PanelBar item ([see example]({% slug items_panelbar %}#toc-expanded-state)).
+     */
+    set expanded(value) {
+        const activeState = this.animate ? "active" : "activeWithoutAnimation";
+        this.state = value ? activeState : "inactive";
+        if (!this.keepContent) {
+            this.toggleExpandedChildAnimations(value);
+        }
+        this._expanded = value;
+    }
+    get expanded() {
+        return this._expanded;
+    }
+    get animate() {
+        return this.eventService.animate;
+    }
+    get kStateDefaultClass() {
+        return !this.disabled;
+    }
+    get kStateDisabledClass() {
+        return this.disabled;
+    }
+    get kStateExpandedClass() {
+        return !this.disabled && this.expanded && (this.hasChildItems || this.hasContent);
+    }
+    get itemId() {
+        return 'k-panelbar-' + this.eventService.pbId + '-item-' + this.id;
+    }
+    get ariaExpanded() {
+        return (this.hasChildItems || this.hasContent) ? !this.disabled && this.expanded : null;
+    }
+    get ariaSelected() {
+        return !this.disabled && this.selected;
+    }
+    get ariaDisabled() {
+        return this.disabled ? true : null;
+    }
+    get headerClass() {
+        return this.parent ? null : true;
+    }
+    get childClass() {
+        return this.parent ? true : null;
+    }
+    /**
+     * @hidden
+     */
+    get titleTemplate() {
+        return this.titleTemplates.length > 0 ? this.titleTemplates.toArray()[0].templateRef : undefined;
+    }
+    /**
+     * @hidden
+     */
+    headerHeight() {
+        return this.element.nativeElement.offsetHeight - (this.contentWrapper ? this.contentWrapper.nativeElement.offsetHeight : 0);
+    }
+    ngOnInit() {
+        this.addLevelClass();
+    }
+    ngAfterContentChecked() {
+        this.hasItems = this.items && this.items.filter(item => !item.hidden).length > 0;
+        this.hasChildItems = this.contentItems.filter(item => item !== this).length > 0 || this.hasItems;
+        this.hasContent = (this.contentTemplate !== undefined && this.contentTemplate.length > 0) ||
+            this.content !== undefined;
+        this.validateConfiguration();
+    }
+    ngAfterViewChecked() {
+        if (this.items) {
+            this.childrenItems = this.viewChildItems.toArray();
+        }
+        else {
+            this.childrenItems = this.contentItems.filter(item => item !== this);
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    onItemAction() {
+        if (!this.disabled) {
+            this.eventService.onSelect(this);
+        }
+    }
+    /**
+     * @hidden
+     */
+    onItemClick(e) {
+        if (!isFocusable(e.target)) {
+            this.onItemAction();
+        }
+    }
+    /**
+     * @hidden
+     */
+    get iconClasses() {
+        let icon = this.icon ? 'k-i-' + this.icon : null;
+        return {
+            [icon || this.iconClass]: true
+        };
+    }
+    /**
+     * @hidden
+     */
+    serialize() {
+        return {
+            content: this.content,
+            disabled: this.disabled,
+            expanded: this.expanded,
+            focused: this.focused,
+            icon: this.icon,
+            iconClass: this.iconClass,
+            id: this.id,
+            imageUrl: this.imageUrl,
+            selected: this.selected,
+            title: this.title
+        };
+    }
+    /**
+     * @hidden
+     */
+    subTreeViewItems() {
+        let subTree = [];
+        this.viewChildItems.forEach(item => {
+            subTree = subTree.concat(item.subTreeViewItems());
+            subTree.push(item);
+        });
+        return subTree;
+    }
+    /**
+     * @hidden
+     */
+    validateConfiguration() {
+        if (isDevMode()) {
+            if (this.content && (this.contentTemplate !== undefined && this.contentTemplate.length > 0)) {
+                throw new Error("Invalid configuration: mixed template components and component property.");
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    toggleAnimationState(value) {
+        if (!this.animate) {
+            return;
+        }
+        this.state = value && this.eventService.expandMode !== PanelBarExpandMode.Single ? 'active' : 'activeWithoutAnimation';
+    }
+    /**
+     * @hidden
+     */
+    toggleExpandedChildAnimations(value) {
+        if (this.childrenItems) {
+            this.childrenItems.forEach(child => {
+                if (child.expanded) {
+                    child.toggleAnimationState(value);
+                    child.toggleExpandedChildAnimations(value);
+                }
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    addLevelClass() {
+        if (this.level >= 0) {
+            this.renderer.addClass(this.element.nativeElement, `k-level-${this.level}`);
+        }
+    }
+    onWrapperFocusChange(focused) {
+        this.wrapperFocused = focused;
+    }
+}
+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' }))
+            ])
+        ])
+    ] });
+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"
+                [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>`
+                }]
+        }], 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 }]
+            }] } });