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

package/dist/es/panelbar/panelbar-item.component.js

@@ -1,455 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* 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";
-import { Component, Input, ContentChildren, ViewChildren, Optional, Host, HostBinding, SkipSelf, isDevMode, TemplateRef, QueryList, ViewChild, ElementRef, Renderer2 } 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';
-/**
- * @hidden
- */
-var nextId = 0;
-/**
- * Represents the items of the PanelBar.
- */
-var PanelBarItemComponent = /** @class */ (function () {
-    function PanelBarItemComponent(parent, eventService, element, renderer) {
-        var _this = this;
-        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; // tslint:disable-line
-        this.kItemClass = true;
-        this.focused = false;
-        this.wrapperFocused = false;
-        this.subscriptions = new Subscription(function () { });
-        this._expanded = false;
-        this.subscriptions.add(eventService.parent$.subscribe(function (focused) { return _this.onWrapperFocusChange(focused); }));
-        this.subscriptions.add(eventService.keepContent$.subscribe(function (keepContent) { return _this.keepContent = keepContent; }));
-        this.wrapperFocused = parent ? parent.focused : false;
-        this.level = this.parent ? this.parent.level + 1 : 0;
-    }
-    PanelBarItemComponent_1 = PanelBarItemComponent;
-    Object.defineProperty(PanelBarItemComponent.prototype, "expanded", {
-        get: function () {
-            return this._expanded;
-        },
-        /**
-         * When set to `true`, expands the PanelBar item ([see example]({% slug items_panelbar %}#toc-expanded-state)).
-         */
-        set: function (value) {
-            var activeState = this.animate ? "active" : "activeWithoutAnimation";
-            this.state = value ? activeState : "inactive";
-            if (!this.keepContent) {
-                this.toggleExpandedChildAnimations(value);
-            }
-            this._expanded = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PanelBarItemComponent.prototype, "animate", {
-        get: function () {
-            return this.eventService.animate;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PanelBarItemComponent.prototype, "kStateDefaultClass", {
-        get: function () {
-            return !this.disabled;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PanelBarItemComponent.prototype, "kStateDisabledClass", {
-        get: function () {
-            return this.disabled;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PanelBarItemComponent.prototype, "kStateExpandedClass", {
-        get: function () {
-            return !this.disabled && this.expanded && (this.hasChildItems || this.hasContent);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PanelBarItemComponent.prototype, "itemId", {
-        get: function () {
-            return 'k-panelbar-' + this.eventService.pbId + '-item-' + this.id;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PanelBarItemComponent.prototype, "ariaExpanded", {
-        get: function () {
-            return (this.hasChildItems || this.hasContent) ? !this.disabled && this.expanded : null;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PanelBarItemComponent.prototype, "ariaSelected", {
-        get: function () {
-            return !this.disabled && this.selected;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PanelBarItemComponent.prototype, "ariaDisabled", {
-        get: function () {
-            return this.disabled ? true : null;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PanelBarItemComponent.prototype, "headerClass", {
-        get: function () {
-            return this.parent ? null : true;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PanelBarItemComponent.prototype, "childClass", {
-        get: function () {
-            return this.parent ? true : null;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PanelBarItemComponent.prototype, "titleTemplate", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.titleTemplates.length > 0 ? this.titleTemplates.toArray()[0].templateRef : undefined;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    PanelBarItemComponent.prototype.headerHeight = function () {
-        return this.element.nativeElement.offsetHeight - (this.contentWrapper ? this.contentWrapper.nativeElement.offsetHeight : 0);
-    };
-    PanelBarItemComponent.prototype.ngOnInit = function () {
-        this.addLevelClass();
-    };
-    PanelBarItemComponent.prototype.ngAfterContentChecked = function () {
-        var _this = this;
-        this.hasItems = this.items && this.items.filter(function (item) { return !item.hidden; }).length > 0;
-        this.hasChildItems = this.contentItems.filter(function (item) { return item !== _this; }).length > 0 || this.hasItems;
-        this.hasContent = (this.contentTemplate !== undefined && this.contentTemplate.length > 0) ||
-            this.content !== undefined;
-        this.validateConfiguration();
-    };
-    PanelBarItemComponent.prototype.ngAfterViewChecked = function () {
-        var _this = this;
-        if (this.items) {
-            this.childrenItems = this.viewChildItems.toArray();
-        }
-        else {
-            this.childrenItems = this.contentItems.filter(function (item) { return item !== _this; });
-        }
-    };
-    PanelBarItemComponent.prototype.ngOnDestroy = function () {
-        this.subscriptions.unsubscribe();
-    };
-    /**
-     * @hidden
-     */
-    PanelBarItemComponent.prototype.onItemAction = function () {
-        if (!this.disabled) {
-            this.eventService.onSelect(this);
-        }
-    };
-    /**
-     * @hidden
-     */
-    PanelBarItemComponent.prototype.onItemClick = function (e) {
-        if (!isFocusable(e.target)) {
-            this.onItemAction();
-        }
-    };
-    Object.defineProperty(PanelBarItemComponent.prototype, "iconClasses", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            var _a;
-            var icon = this.icon ? 'k-i-' + this.icon : null;
-            return _a = {},
-                _a[icon || this.iconClass] = true,
-                _a;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    PanelBarItemComponent.prototype.serialize = function () {
-        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
-     */
-    PanelBarItemComponent.prototype.subTreeViewItems = function () {
-        var subTree = [];
-        this.viewChildItems.forEach(function (item) {
-            subTree = subTree.concat(item.subTreeViewItems());
-            subTree.push(item);
-        });
-        return subTree;
-    };
-    /**
-     * @hidden
-     */
-    PanelBarItemComponent.prototype.validateConfiguration = function () {
-        if (isDevMode()) {
-            if (this.content && (this.contentTemplate !== undefined && this.contentTemplate.length > 0)) {
-                throw new Error("Invalid configuration: mixed template components and component property.");
-            }
-        }
-    };
-    /**
-     * @hidden
-     */
-    PanelBarItemComponent.prototype.toggleAnimationState = function (value) {
-        if (!this.animate) {
-            return;
-        }
-        this.state = value && this.eventService.expandMode !== PanelBarExpandMode.Single ? 'active' : 'activeWithoutAnimation';
-    };
-    /**
-     * @hidden
-     */
-    PanelBarItemComponent.prototype.toggleExpandedChildAnimations = function (value) {
-        if (this.childrenItems) {
-            this.childrenItems.forEach(function (child) {
-                if (child.expanded) {
-                    child.toggleAnimationState(value);
-                    child.toggleExpandedChildAnimations(value);
-                }
-            });
-        }
-    };
-    /**
-     * @hidden
-     */
-    PanelBarItemComponent.prototype.addLevelClass = function () {
-        if (this.level >= 0) {
-            this.renderer.addClass(this.element.nativeElement, "k-level-" + this.level);
-        }
-    };
-    PanelBarItemComponent.prototype.onWrapperFocusChange = function (focused) {
-        this.wrapperFocused = focused;
-    };
-    var PanelBarItemComponent_1;
-    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' }))
-                    ])
-                ])
-            ],
-            exportAs: 'kendoPanelbarItem',
-            selector: "kendo-panelbar-item",
-            template: "\n            <span\n                #header\n                [class.k-link]=\"true\"\n                [class.k-state-selected]=\"!disabled && selected\"\n                [class.k-state-focused]=\"focused && wrapperFocused\"\n                (click)=\"onItemClick($event)\">\n                <span\n                    *ngIf=\"icon || iconClass\"\n                    class=\"k-icon k-panelbar-item-icon\"\n                    [ngClass]=\"iconClasses\">\n                </span>\n                <img\n                    *ngIf=\"imageUrl\"\n                    class=\"k-image k-panelbar-item-icon\"\n                    [src]=\"imageUrl\"\n                    alt=\"\">\n                <ng-container *ngIf=\"!titleTemplate\"><span class=\"k-panelbar-item-text\">{{title}}</span></ng-container>\n                <ng-template *ngIf=\"titleTemplate\" [ngTemplateOutlet]=\"titleTemplate\"></ng-template>\n                <span *ngIf=\"hasChildItems || hasContent\"\n                    class=\"k-icon k-panelbar-toggle\"\n                    [ngClass]=\"{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}\">\n                </span>\n            </span>\n            <div #contentWrapper\n                *ngIf=\"keepContent || (!disabled && expanded && (hasChildItems || hasContent))\"\n                [@toggle]=\"state\"\n                [attr.role]=\"'group'\"\n                [attr.aria-hidden]=\"!disabled && !expanded\">\n                <div\n                    *ngIf=\"hasChildItems && !items?.length\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\n                        <ng-content select=\"kendo-panelbar-item\"></ng-content>\n                </div>\n                <div\n                    *ngIf=\"hasContent && !content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"contentTemplate.first.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                </div>\n                <div *ngIf=\"hasItems\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\n                    <ng-container *ngFor=\"let item of items\">\n                        <kendo-panelbar-item *ngIf=\"!item.hidden\"\n                            [title]=\"item.title\"\n                            [id]=\"item.id\"\n                            [icon]=\"item.icon\"\n                            [iconClass]=\"item.iconClass\"\n                            [imageUrl]=\"item.imageUrl\"\n                            [selected]=\"!!item.selected\"\n                            [expanded]=\"!!item.expanded\"\n                            [disabled]=\"!!item.disabled\"\n                            [template]=\"template\"\n                            [items]=\"item.children\"\n                            [content]=\"item.content\">\n                        </kendo-panelbar-item>\n                    </ng-container>\n                </div>\n                <div\n                    *ngIf=\"content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"!template\">{{content}}</ng-template>\n                </div>\n            </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);
-    return PanelBarItemComponent;
-}());
-export { PanelBarItemComponent };