@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1,252 lines (1,237 loc) • 47.5 kB
JavaScript
import { EventEmitter, Component, Input, Output, HostBinding, ViewEncapsulation, ViewChild, HostListener, Optional, Host, SkipSelf, ViewChildren, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router, RouterLinkActive, RouterModule } from '@angular/router';
import { I18nService } from '@duoduo-oba/ng-devui/i18n';
/**
* @fileoverview added by tsickle
* Generated from: accordion.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AccordionComponent {
/**
* @param {?} i18n
*/
constructor(i18n) {
this.i18n = i18n;
/* Key值定义, 用于自定义数据结构 */
this.titleKey = 'title'; // 标题的key，item[titleKey]类型为string，为标题显示内容
// 标题的key，item[titleKey]类型为string，为标题显示内容
this.loadingKey = 'loading'; // 子菜单动态加载item[loadingKey]类型为boolean
// 子菜单动态加载item[loadingKey]类型为boolean
this.childrenKey = 'children'; // 子菜单Key
// 子菜单Key
this.disabledKey = 'disabled'; // 是否禁用Key
// 是否禁用Key
this.activeKey = 'active'; // 菜单是否激活/选中
// 菜单是否激活/选中
this.openKey = 'open'; // 菜单是否打开
// 可点击菜单内容条模板
this.menuToggle = new EventEmitter(); // 可展开菜单展开事件
// 可展开菜单展开事件
this.itemClick = new EventEmitter(); // 可点击菜单点击事件
// 可点击菜单点击事件
this.activeItemChange = new EventEmitter();
/**
* 高级选项和模板
*/
this.restrictOneOpen = false; // 限制一级菜单同时只能打开一个
// 限制一级菜单同时只能打开一个
this.autoOpenActiveMenu = false; // 自动展开活跃菜单
// 自动展开活跃菜单
this.showNoContent = true; // 没有内容的时候是否显示没有数据
// 可折叠菜单内容完全自定义，用做折叠面板
/* 内置路由/链接/动态判断路由或链接类型 */
this.linkType = '';
this.linkTypeKey = 'linkType'; // linkType为'dependOnLinkTypeKey'时指定对象linkType定义区
// linkType为'dependOnLinkTypeKey'时指定对象linkType定义区
this.linkKey = 'link'; // 链接内容的key
// 链接内容的key
this.linkTargetKey = 'target'; // 链接目标窗口的key
// 链接目标窗口的key
this.linkDefaultTarget = '_self'; // 不设置target的时候target默认值
// 点击了可点击菜单
this.itemClickFn = (/**
* @param {?} itemEvent
* @return {?}
*/
(itemEvent) => {
/** @type {?} */
const prevActiveItem = this.activeItem;
this.activeItemFn(itemEvent.item);
this.itemClick.emit(Object.assign({}, itemEvent, { prevActiveItem: prevActiveItem }));
});
this.linkItemClickFn = (/**
* @param {?} itemEvent
* @return {?}
*/
(itemEvent) => {
/** @type {?} */
const prevActiveItem = this.activeItem;
this.activeItem = itemEvent.item;
this.itemClick.emit(Object.assign({}, itemEvent, { prevActiveItem: prevActiveItem }));
});
// 打开或关闭可折叠菜单
this.menuToggleFn = (/**
* @param {?} menuEvent
* @return {?}
*/
(menuEvent) => {
this.openMenuFn(menuEvent.item, menuEvent.open);
this.menuToggle.emit(menuEvent);
});
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes['data']) {
this.initActiveItem();
}
if (changes['autoOpenActiveMenu']) {
if (this.autoOpenActiveMenu && changes['autoOpenActiveMenu'].previousValue === false) {
this.cleanOpenData();
}
}
}
/**
* @return {?}
*/
ngOnInit() {
if (this.data) {
this.initActiveItem();
}
this.i18nCommonText = this.i18n.getI18nText().common;
this.i18nSubscription = this.i18n.langChange().subscribe((/**
* @param {?} data
* @return {?}
*/
data => {
this.i18nCommonText = data.common;
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
}
/**
* @private
* @param {?} arr
* @param {?=} childrenKey
* @param {?=} includeParent
* @param {?=} includeLeaf
* @return {?}
*/
flatten(arr, childrenKey = 'children', includeParent = false, includeLeaf = true) {
return arr.reduce((/**
* @param {?} acc
* @param {?} cur
* @return {?}
*/
(acc, cur) => {
/** @type {?} */
const children = cur[childrenKey];
if (children === undefined) {
if (includeLeaf) {
acc.push(cur);
}
}
else {
if (includeParent) {
acc.push(cur);
}
if (Array.isArray(children)) {
acc.push(...this.flatten(children, childrenKey, includeParent));
}
}
return acc;
}), []);
}
/**
* @private
* @return {?}
*/
cleanOpenData() {
this.flatten(this.data, this.childrenKey, true, false).forEach((/**
* @param {?} item
* @return {?}
*/
item => item[this.openKey] = undefined));
}
// 默认激活
/**
* @return {?}
*/
initActiveItem() {
/** @type {?} */
const activeItem = this.flatten(this.data, this.childrenKey)
.filter((/**
* @param {?} item
* @return {?}
*/
item => item[this.activeKey])).pop();
if (activeItem) {
if (!this.activeItem) {
this.activeItemFn(activeItem);
}
}
else {
this.activeItem = undefined;
}
}
// 激活子菜单项并去掉其他子菜单的激活
/**
* @param {?} item
* @return {?}
*/
activeItemFn(item) {
if (this.activeItem && this.activeItem[this.activeKey]) {
this.activeItem[this.activeKey] = false;
}
item[this.activeKey] = true;
this.activeItem = item;
this.activeItemChange.emit(this.activeItem);
}
// 打开或关闭一级菜单，如果有限制只能展开一项则关闭其他一级菜单
/**
* @param {?} item
* @param {?} open
* @return {?}
*/
openMenuFn(item, open) {
if (open && this.restrictOneOpen) {
((/** @type {?} */ ((this.data)))).forEach((/**
* @param {?} itemtemp
* @return {?}
*/
itemtemp => { itemtemp[this.openKey] = false; }));
}
item[this.openKey] = open;
}
}
AccordionComponent.decorators = [
{ type: Component, args: [{
selector: 'd-accordion',
template: "<d-accordion-list class=\"devui-accordion-menu devui-scrollbar\" [data]=\"data\" [deepth]=\"0\" [parent]=\"null\"> </d-accordion-list>\r\n",
styles: ["@charset \"UTF-8\";:host{display:block}:host ::ng-deep d-accordion-item,:host ::ng-deep d-accordion-item-hreflink,:host ::ng-deep d-accordion-item-routerlink,:host ::ng-deep d-accordion-list,:host ::ng-deep d-accordion-menu{display:block}:host ::ng-deep .devui-accordion-menu{display:block;background:#fff;box-shadow:0 1px 2px 0 rgba(41,48,64,.2);width:100%;overflow-y:auto}:host ::ng-deep .devui-accordion-menu>.devui-accordion-list>.devui-accordion-item>.devui-accordion-item-title,:host ::ng-deep .devui-accordion-menu>.devui-accordion-list>.devui-accordion-item>.devui-accordion-menu-item>.devui-accordion-item-title{font-weight:700}:host ::ng-deep .devui-accordion-menu .devui-over-flow-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .devui-accordion-submenu{background:#fff;width:100%}:host ::ng-deep .devui-accordion-item-title{display:block;height:40px;width:100%;padding:0 10px 0 20px;font-weight:400;line-height:40px;color:#252b3a;background:0 0;cursor:pointer}:host ::ng-deep .devui-accordion-item-title.disabled{opacity:.3;cursor:default}:host ::ng-deep .devui-accordion-item-title:not(.disabled):hover{background:#f2f5fc}:host ::ng-deep .devui-accordion-item-title:not(.disabled).active,:host ::ng-deep .devui-accordion-item-title:not(.disabled).devui-router-active{color:#5e7ce0;background:#f2f5fc}:host ::ng-deep .devui-accordion-item-title:not(.disabled).active>a,:host ::ng-deep .devui-accordion-item-title:not(.disabled).devui-router-active>a{color:#5e7ce0}:host ::ng-deep .devui-accordion-item-title>a{text-decoration:none;display:block;width:100%;color:#252b3a}:host ::ng-deep .devui-accordion-item-title>a:hover{color:inherit;text-decoration:none}:host ::ng-deep d-accordion-item-hreflink.devui-accordion-item-title,:host ::ng-deep d-accordion-item-routerlink.devui-accordion-item-title{padding:0}:host ::ng-deep d-accordion-item-hreflink.devui-accordion-item-title>a,:host ::ng-deep d-accordion-item-routerlink.devui-accordion-item-title>a{padding:0 10px 0 20px}:host ::ng-deep .devui-accordion-menu-item>.devui-accordion-item-title{position:relative;padding-right:30px}:host ::ng-deep .devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-open-icon{display:inline-block;text-indent:0;pointer-events:none;position:absolute;right:10px;top:12px;width:16px;height:16px;line-height:16px;-webkit-transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out}:host ::ng-deep .devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-open-icon>svg{width:16px;height:16px}:host ::ng-deep .devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-open-icon>svg polygon{fill:#252b3a}:host ::ng-deep .devui-accordion-menu-item>.devui-accordion-item-title:not(.open)>.devui-accordion-open-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:center;transform-origin:center}:host ::ng-deep .devui-accordion-menu-item>.devui-accordion-item-title.disabled>.devui-accordion-open-icon{opacity:.3}:host ::ng-deep .devui-accordion-menu-item>.devui-accordion-item-title.active{color:#5e7ce0;background:0 0}:host ::ng-deep d-accordion-list.devui-accordion-menu-hidden{display:none}"]
}] }
];
/** @nocollapse */
AccordionComponent.ctorParameters = () => [
{ type: I18nService }
];
AccordionComponent.propDecorators = {
data: [{ type: Input }],
titleKey: [{ type: Input }],
loadingKey: [{ type: Input }],
childrenKey: [{ type: Input }],
disabledKey: [{ type: Input }],
activeKey: [{ type: Input }],
openKey: [{ type: Input }],
menuItemTemplate: [{ type: Input }],
itemTemplate: [{ type: Input }],
menuToggle: [{ type: Output }],
itemClick: [{ type: Output }],
activeItemChange: [{ type: Output }],
restrictOneOpen: [{ type: Input }],
autoOpenActiveMenu: [{ type: Input }],
showNoContent: [{ type: Input }],
noContentTemplate: [{ type: Input }],
loadingTemplate: [{ type: Input }],
innerListTemplate: [{ type: Input }],
linkType: [{ type: Input }],
linkTypeKey: [{ type: Input }],
linkKey: [{ type: Input }],
linkTargetKey: [{ type: Input }],
linkDefaultTarget: [{ type: Input }]
};
if (false) {
/** @type {?} */
AccordionComponent.prototype.data;
/** @type {?} */
AccordionComponent.prototype.titleKey;
/** @type {?} */
AccordionComponent.prototype.loadingKey;
/** @type {?} */
AccordionComponent.prototype.childrenKey;
/** @type {?} */
AccordionComponent.prototype.disabledKey;
/** @type {?} */
AccordionComponent.prototype.activeKey;
/** @type {?} */
AccordionComponent.prototype.openKey;
/** @type {?} */
AccordionComponent.prototype.menuItemTemplate;
/** @type {?} */
AccordionComponent.prototype.itemTemplate;
/** @type {?} */
AccordionComponent.prototype.menuToggle;
/** @type {?} */
AccordionComponent.prototype.itemClick;
/** @type {?} */
AccordionComponent.prototype.activeItemChange;
/**
* 高级选项和模板
* @type {?}
*/
AccordionComponent.prototype.restrictOneOpen;
/** @type {?} */
AccordionComponent.prototype.autoOpenActiveMenu;
/** @type {?} */
AccordionComponent.prototype.showNoContent;
/** @type {?} */
AccordionComponent.prototype.noContentTemplate;
/** @type {?} */
AccordionComponent.prototype.loadingTemplate;
/** @type {?} */
AccordionComponent.prototype.innerListTemplate;
/** @type {?} */
AccordionComponent.prototype.linkType;
/** @type {?} */
AccordionComponent.prototype.linkTypeKey;
/** @type {?} */
AccordionComponent.prototype.linkKey;
/** @type {?} */
AccordionComponent.prototype.linkTargetKey;
/** @type {?} */
AccordionComponent.prototype.linkDefaultTarget;
/** @type {?} */
AccordionComponent.prototype.activeItem;
/** @type {?} */
AccordionComponent.prototype.i18nCommonText;
/** @type {?} */
AccordionComponent.prototype.i18nSubscription;
/** @type {?} */
AccordionComponent.prototype.itemClickFn;
/** @type {?} */
AccordionComponent.prototype.linkItemClickFn;
/** @type {?} */
AccordionComponent.prototype.menuToggleFn;
/**
* @type {?}
* @private
*/
AccordionComponent.prototype.i18n;
}
/**
* @fileoverview added by tsickle
* Generated from: accordion-base-component.class.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @abstract
* @template T
*/
class AccordionBaseComponent {
/**
* @param {?} accordion
*/
constructor(accordion) {
this.accordion = accordion;
this.deepth = 0;
}
/**
* @return {?}
*/
get disabled() {
return this.item && this.item[this.accordion.disabledKey];
}
/**
* @return {?}
*/
get title() {
return this.item && this.item[this.accordion.titleKey];
}
/**
* @return {?}
*/
get textIndent() {
return this.deepth * 20 + 'px';
}
}
AccordionBaseComponent.propDecorators = {
item: [{ type: Input }],
deepth: [{ type: Input }],
parent: [{ type: Input }],
disabled: [{ type: HostBinding, args: ['class.disabled',] }],
title: [{ type: HostBinding, args: ['attr.title',] }],
textIndent: [{ type: HostBinding, args: ['style.textIndent',] }]
};
if (false) {
/** @type {?} */
AccordionBaseComponent.prototype.item;
/** @type {?} */
AccordionBaseComponent.prototype.deepth;
/** @type {?} */
AccordionBaseComponent.prototype.parent;
/**
* @type {?}
* @protected
*/
AccordionBaseComponent.prototype.accordion;
}
/**
* @fileoverview added by tsickle
* Generated from: accordion-base-item-component.class.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @abstract
* @template T
*/
class AccordionBaseItemComponent extends AccordionBaseComponent {
/**
* @param {?} accordion
*/
constructor(accordion) {
super(accordion);
this.accordion = accordion;
this.defaultClasses = true;
}
/**
* @return {?}
*/
get itemTemplate() {
return this.accordion.itemTemplate;
}
/**
* @return {?}
*/
get active() {
return this.item && this.item[this.accordion.activeKey];
}
}
AccordionBaseItemComponent.propDecorators = {
active: [{ type: HostBinding, args: ['class.active',] }],
defaultClasses: [{ type: HostBinding, args: ['class.devui-accordion-item-title',] }, { type: HostBinding, args: ['class.devui-over-flow-ellipsis',] }]
};
if (false) {
/** @type {?} */
AccordionBaseItemComponent.prototype.defaultClasses;
/**
* @type {?}
* @protected
*/
AccordionBaseItemComponent.prototype.accordion;
}
/**
* @fileoverview added by tsickle
* Generated from: accordion-base-link-component.class.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @abstract
*/
class AccordionBaseLinkComponent extends AccordionBaseItemComponent {
/**
* @param {?} accordion
*/
constructor(accordion) {
super(accordion);
this.accordion = accordion;
}
/**
* @return {?}
*/
get link() {
return this.item && this.item[this.accordion.linkKey];
}
/**
* @return {?}
*/
get target() {
return this.item && this.item[this.accordion.linkTargetKey] || this.accordion.linkDefaultTarget;
}
/**
* @return {?}
*/
get linkType() {
return this.item && this.item[this.accordion.linkTypeKey] || '';
}
}
if (false) {
/**
* @type {?}
* @protected
*/
AccordionBaseLinkComponent.prototype.accordion;
}
/**
* @fileoverview added by tsickle
* Generated from: accordion-item-routerlink.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent {
/**
* @param {?} accordion
* @param {?} router
*/
constructor(accordion, router) {
super(accordion);
this.accordion = accordion;
this.router = router;
}
/**
* @return {?}
*/
get routerLinkActived() {
return !!(this.routerLinkActiveDirective && this.routerLinkActiveDirective.isActive);
}
/**
* @param {?} event
* @return {?}
*/
onClick(event) {
if (!this.disabled) {
this.accordion.linkItemClickFn({
item: this.item,
parent: this.parent,
event: event
});
}
}
}
AccordionItemRouterlinkComponent.decorators = [
{ type: Component, args: [{
selector: 'd-accordion-item-routerlink',
template: "<ng-container *ngIf=\"!disabled\">\r\n <a [routerLink]=\"link\" [routerLinkActive]=\"'devui-router-active'\" target=\"{{ target }}\" rel=\"noopener\" title=\"{{ title }}\">\r\n <ng-container *ngIf=\"!itemTemplate\">\r\n {{ title }}\r\n </ng-container>\r\n <ng-template\r\n *ngIf=\"itemTemplate\"\r\n [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n parent: parent,\r\n item: item,\r\n deepth: deepth\r\n }\"\r\n ></ng-template>\r\n </a>\r\n</ng-container>\r\n<ng-container *ngIf=\"disabled\">\r\n <a title=\"{{ title }}\">\r\n <ng-container *ngIf=\"!itemTemplate\">\r\n {{ title }}\r\n </ng-container>\r\n <ng-template\r\n *ngIf=\"itemTemplate\"\r\n [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n parent: parent,\r\n item: item,\r\n deepth: deepth\r\n }\"\r\n ></ng-template>\r\n </a>\r\n</ng-container>\r\n",
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
AccordionItemRouterlinkComponent.ctorParameters = () => [
{ type: AccordionComponent },
{ type: Router }
];
AccordionItemRouterlinkComponent.propDecorators = {
routerLinkActiveDirective: [{ type: ViewChild, args: [RouterLinkActive, { static: false },] }],
routerLinkActived: [{ type: HostBinding, args: ['class.devui-router-active',] }],
onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
};
if (false) {
/** @type {?} */
AccordionItemRouterlinkComponent.prototype.routerLinkActiveDirective;
/**
* @type {?}
* @protected
*/
AccordionItemRouterlinkComponent.prototype.accordion;
/**
* @type {?}
* @private
*/
AccordionItemRouterlinkComponent.prototype.router;
}
/**
* @fileoverview added by tsickle
* Generated from: accordion-menu.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AccordionMenuComponent extends AccordionBaseComponent {
/**
* @param {?} accordion
*/
constructor(accordion) {
super(accordion);
this.accordion = accordion;
this.defaultClasses = true;
}
/**
* @return {?}
*/
get menuItemTemplate() {
return this.accordion.menuItemTemplate;
}
/**
* @return {?}
*/
get open() {
return (this.keyOpen === undefined && this.accordion.autoOpenActiveMenu)
? this.childActived
: this.keyOpen;
}
/**
* @return {?}
*/
get keyOpen() {
return this.item && this.item[this.accordion.openKey];
}
/**
* @return {?}
*/
get children() {
return this.item && this.item[this.accordion.childrenKey];
}
/**
* @return {?}
*/
get childActived() {
return this.routerLinkActived || this.hasActiveChildren;
}
/**
* @return {?}
*/
get routerLinkActived() {
return this.accordionListFromView && this.accordionListFromView.routerLinkActived;
}
/**
* @return {?}
*/
get hasActiveChildren() {
return this.accordionListFromView && this.accordionListFromView.hasActiveChildren;
}
/**
* @param {?} event
* @return {?}
*/
toggle(event) {
this.accordion.menuToggleFn({
item: this.item,
open: !this.open,
parent: this.parent,
event: event
});
}
}
AccordionMenuComponent.decorators = [
{ type: Component, args: [{
selector: 'd-accordion-menu',
template: "<div\r\n class=\"devui-accordion-item-title devui-over-flow-ellipsis\"\r\n [ngClass]=\"{\r\n open: open,\r\n active: childActived,\r\n disabled: disabled\r\n }\"\r\n title=\"{{ title }}\"\r\n (click)=\"!disabled && toggle($event)\"\r\n>\r\n <ng-container *ngIf=\"!menuItemTemplate\">\r\n {{ title }}\r\n </ng-container>\r\n <ng-template\r\n *ngIf=\"menuItemTemplate\"\r\n [ngTemplateOutlet]=\"menuItemTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n parent: parent,\r\n item: item,\r\n deepth: deepth\r\n }\"\r\n ></ng-template>\r\n <span class=\"devui-accordion-open-icon\">\r\n <svg viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon points=\"4.5 5 8 8.76923077 11.5 5 13 6.61538462 8 12 3 6.61538462\"></polygon>\r\n </g>\r\n </svg>\r\n </span>\r\n</div>\r\n<d-accordion-list\r\n class=\"devui-accordion-submenu\"\r\n [ngClass]=\"{ 'devui-accordion-menu-hidden': !open }\"\r\n [deepth]=\"deepth + 1\"\r\n [data]=\"children\"\r\n [parent]=\"item\"\r\n>\r\n</d-accordion-list>\r\n",
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
AccordionMenuComponent.ctorParameters = () => [
{ type: AccordionComponent }
];
AccordionMenuComponent.propDecorators = {
defaultClasses: [{ type: HostBinding, args: ['class.devui-accordion-menu-item',] }],
open: [{ type: HostBinding, args: ['class.open',] }],
routerLinkActived: [{ type: HostBinding, args: ['class.devui-router-active',] }],
hasActiveChildren: [{ type: HostBinding, args: ['class.devui-has-active-item',] }]
};
if (false) {
/** @type {?} */
AccordionMenuComponent.prototype.defaultClasses;
/** @type {?} */
AccordionMenuComponent.prototype.accordionListFromView;
/** @type {?} */
AccordionMenuComponent.prototype.accordion;
}
/**
* @fileoverview added by tsickle
* Generated from: accordion-list.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AccordionListComponent {
/**
* @param {?} parentComponent
* @param {?} accordion
*/
constructor(parentComponent, accordion) {
this.parentComponent = parentComponent;
this.accordion = accordion;
this.deepth = 0;
this.menuToggleItemFn = (/**
* @param {?} item
* @param {?=} event
* @return {?}
*/
(item, event) => {
this.accordion.menuToggleFn({
item: item,
open: !item[this.accordion.openKey],
parent: this.parent.parent,
event: event
});
});
this.itemClickItemFn = (/**
* @param {?} item
* @param {?=} event
* @return {?}
*/
(item, event) => {
this.accordion.itemClickFn({
item: item,
parent: this.parent,
event: event
});
});
}
/**
* @return {?}
*/
ngOnInit() {
if (this.parentComponent) {
setTimeout((/**
* @return {?}
*/
() => { this.parentComponent.accordionListFromView = this; }));
}
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.parentComponent) {
this.parentComponent.accordionListFromView = undefined;
}
}
/**
* @return {?}
*/
get loading() {
return this.parent && this.parent[this.accordion.loadingKey];
}
/**
* @return {?}
*/
get noContent() {
return this.data === undefined || this.data === null || this.data.length === 0;
}
/**
* @return {?}
*/
get linkTypeKey() {
return this.accordion.linkTypeKey;
}
/**
* @return {?}
*/
get childrenKey() {
return this.accordion.childrenKey;
}
/**
* @return {?}
*/
get activeKey() {
return this.accordion.activeKey;
}
/**
* @return {?}
*/
get itemTemplate() {
return this.accordion.itemTemplate;
}
/**
* @return {?}
*/
get menuItemTemplate() {
return this.accordion.menuItemTemplate;
}
/**
* @return {?}
*/
get innerListTemplate() {
return this.accordion.innerListTemplate;
}
/**
* @return {?}
*/
get loadingTemplate() {
return this.accordion.loadingTemplate;
}
/**
* @return {?}
*/
get noContentTemplate() {
return this.accordion.noContentTemplate;
}
/**
* @return {?}
*/
get linkType() {
return this.accordion.linkType;
}
/**
* @return {?}
*/
get i18nCommonText() {
return this.accordion.i18nCommonText;
}
/**
* @return {?}
*/
get showNoContent() {
return this.accordion.showNoContent;
}
/**
* @return {?}
*/
get linkDefaultTarget() {
return this.accordion.linkDefaultTarget;
}
/**
* @private
* @param {?} airlc
* @return {?}
*/
isLinkRouterActive(airlc) {
return airlc.routerLinkActived;
}
/**
* @private
* @param {?} amc
* @return {?}
*/
isMenuRouterActive(amc) {
return amc.routerLinkActived;
}
/**
* @private
* @param {?} amc
* @return {?}
*/
isMenuDataActive(amc) {
return amc.hasActiveChildren;
}
/**
* @private
* @param {?} item
* @return {?}
*/
isItemDataActive(item) {
return !!item[this.activeKey];
}
/**
* @private
* @param {?} item
* @return {?}
*/
isItemData(item) {
return item[this.childrenKey] === undefined;
}
/**
* @return {?}
*/
get routerLinkActived() {
return (!!this.accordionItemRouterlinkQueryList
&& this.accordionItemRouterlinkQueryList.some((/**
* @param {?} airlc
* @return {?}
*/
airlc => this.isLinkRouterActive(airlc)))) || (!!this.accordionMenuQueryList
&& this.accordionMenuQueryList.some((/**
* @param {?} amc
* @return {?}
*/
amc => this.isMenuRouterActive(amc))));
}
/**
* @return {?}
*/
get hasActiveChildren() {
return (!!this.accordionMenuQueryList
&& this.accordionMenuQueryList.some((/**
* @param {?} amc
* @return {?}
*/
amc => this.isMenuDataActive(amc))))
|| (!!this.data && !!this.data.length
&& this.data.some((/**
* @param {?} item
* @return {?}
*/
item => this.isItemData(item) && this.isItemDataActive(item))));
}
}
AccordionListComponent.decorators = [
{ type: Component, args: [{
selector: 'd-accordion-list',
template: "<ul class=\"devui-accordion-list\" *ngIf=\"!innerListTemplate || deepth === 0\">\r\n <li class=\"devui-accordion-item\" *ngFor=\"let item of data\">\r\n <!--\u83DC\u5355\u7C7B\u578B-->\r\n <d-accordion-menu *ngIf=\"item[childrenKey] !== undefined\" [item]=\"item\" [deepth]=\"deepth\" [parent]=\"parent\"></d-accordion-menu>\r\n <!--\u975E\u83DC\u5355\u7C7B\u578B-->\r\n <ng-container *ngIf=\"item[childrenKey] === undefined\">\r\n <!--\u8DEF\u7531\u94FE\u63A5-->\r\n <d-accordion-item-routerlink\r\n *ngIf=\"linkType === 'routerLink'\"\r\n [item]=\"item\"\r\n [deepth]=\"deepth\"\r\n [parent]=\"parent\"\r\n ></d-accordion-item-routerlink>\r\n <!--\u666E\u901A\u94FE\u63A5-->\r\n <d-accordion-item-hreflink\r\n *ngIf=\"linkType === 'hrefLink'\"\r\n [item]=\"item\"\r\n [deepth]=\"deepth\"\r\n [parent]=\"parent\"\r\n ></d-accordion-item-hreflink>\r\n <!--\u52A8\u6001\u94FE\u63A5-->\r\n <ng-container *ngIf=\"linkType === 'dependOnLinkTypeKey'\">\r\n <d-accordion-item-routerlink\r\n *ngIf=\"item[linkTypeKey] === 'routerLink'\"\r\n [item]=\"item\"\r\n [deepth]=\"deepth\"\r\n [parent]=\"parent\"\r\n ></d-accordion-item-routerlink>\r\n <d-accordion-item-hreflink\r\n *ngIf=\"item[linkTypeKey] === 'hrefLink'\"\r\n [item]=\"item\"\r\n [deepth]=\"deepth\"\r\n [parent]=\"parent\"\r\n ></d-accordion-item-hreflink>\r\n <d-accordion-item\r\n *ngIf=\"item[linkTypeKey] !== 'hrefLink' && item[linkTypeKey] !== 'routerLink'\"\r\n [item]=\"item\"\r\n [deepth]=\"deepth\"\r\n [parent]=\"parent\"\r\n ></d-accordion-item>\r\n </ng-container>\r\n <!--\u666E\u901A\u7C7B\u578B-->\r\n <d-accordion-item *ngIf=\"!linkType || linkType === ''\" [item]=\"item\" [deepth]=\"deepth\" [parent]=\"parent\"></d-accordion-item>\r\n </ng-container>\r\n </li>\r\n</ul>\r\n<!--\u5217\u8868\u6A21\u677F-->\r\n<div *ngIf=\"innerListTemplate && deepth !== 0\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"innerListTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n item: parent,\r\n deepth: deepth,\r\n itemClickFn: itemClickItemFn,\r\n menuToggleFn: menuToggleItemFn\r\n }\"\r\n ></ng-template>\r\n</div>\r\n<!--\u65E0\u6570\u636E/\u52A0\u8F7D\u4E2D\u6A21\u677F-->\r\n<ul *ngIf=\"!innerListTemplate && (loading || (noContent && showNoContent))\">\r\n <!--\u52A0\u8F7D\u4E2D-->\r\n <li *ngIf=\"loading && !loadingTemplate\" class=\"devui-accordion-item\">\r\n <div class=\"devui-accordion-item-title devui-over-flow-ellipsis\" [style.textIndent]=\"deepth * 20 + 'px'\">\r\n {{ i18nCommonText?.loading }}\r\n </div>\r\n </li>\r\n <!--\u81EA\u5B9A\u4E49\u52A0\u8F7D\u4E2D-->\r\n <ng-template\r\n *ngIf=\"loading && loadingTemplate\"\r\n [ngTemplateOutlet]=\"loadingTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: parent, deepth: deepth }\"\r\n ></ng-template>\r\n <!--\u65E0\u6570\u636E-->\r\n <li *ngIf=\"showNoContent && !loading && noContent && !noContentTemplate\" class=\"devui-accordion-item\">\r\n <div class=\"devui-accordion-item-title devui-over-flow-ellipsis disabled\" [style.textIndent]=\"deepth * 20 + 'px'\">\r\n {{ i18nCommonText?.noData }}\r\n </div>\r\n </li>\r\n <!--\u81EA\u5B9A\u4E49\u65E0\u6570\u636E-->\r\n <ng-template\r\n *ngIf=\"showNoContent && !loading && noContent && noContentTemplate\"\r\n [ngTemplateOutlet]=\"noContentTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: parent, deepth: deepth }\"\r\n ></ng-template>\r\n</ul>\r\n",
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
AccordionListComponent.ctorParameters = () => [
{ type: AccordionMenuComponent, decorators: [{ type: Optional }, { type: Host }, { type: SkipSelf }] },
{ type: AccordionComponent }
];
AccordionListComponent.propDecorators = {
data: [{ type: Input }],
deepth: [{ type: Input }],
parent: [{ type: Input }],
accordionMenuQueryList: [{ type: ViewChildren, args: [AccordionMenuComponent,] }],
accordionItemRouterlinkQueryList: [{ type: ViewChildren, args: [AccordionItemRouterlinkComponent,] }]
};
if (false) {
/** @type {?} */
AccordionListComponent.prototype.data;
/** @type {?} */
AccordionListComponent.prototype.deepth;
/** @type {?} */
AccordionListComponent.prototype.parent;
/** @type {?} */
AccordionListComponent.prototype.accordionMenuQueryList;
/** @type {?} */
AccordionListComponent.prototype.accordionItemRouterlinkQueryList;
/** @type {?} */
AccordionListComponent.prototype.menuToggleItemFn;
/** @type {?} */
AccordionListComponent.prototype.itemClickItemFn;
/**
* @type {?}
* @private
*/
AccordionListComponent.prototype.parentComponent;
/**
* @type {?}
* @private
*/
AccordionListComponent.prototype.accordion;
}
/**
* @fileoverview added by tsickle
* Generated from: accordion-item-hreflink.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AccordionItemHreflinkComponent extends AccordionBaseLinkComponent {
/**
* @param {?} accordion
*/
constructor(accordion) {
super(accordion);
this.accordion = accordion;
}
/**
* @param {?} event
* @return {?}
*/
onClick(event) {
if (!this.disabled) {
this.accordion.linkItemClickFn({
item: this.item,
parent: this.parent,
event: event
});
}
}
}
AccordionItemHreflinkComponent.decorators = [
{ type: Component, args: [{
selector: 'd-accordion-item-hreflink',
template: "<ng-container *ngIf=\"!disabled\">\r\n <a href=\"{{ link }}\" target=\"{{ target }}\" rel=\"noopener\" title=\"{{ title }}\">\r\n <ng-container *ngIf=\"!itemTemplate\">\r\n {{ title }}\r\n </ng-container>\r\n <ng-template\r\n *ngIf=\"itemTemplate\"\r\n [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n parent: parent,\r\n item: item,\r\n deepth: deepth\r\n }\"\r\n ></ng-template>\r\n </a>\r\n</ng-container>\r\n<ng-container *ngIf=\"disabled\">\r\n <a title=\"{{ title }}\">\r\n <ng-container *ngIf=\"!itemTemplate\">\r\n {{ title }}\r\n </ng-container>\r\n <ng-template\r\n *ngIf=\"itemTemplate\"\r\n [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n parent: parent,\r\n item: item,\r\n deepth: deepth\r\n }\"\r\n ></ng-template>\r\n </a>\r\n</ng-container>\r\n",
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
AccordionItemHreflinkComponent.ctorParameters = () => [
{ type: AccordionComponent }
];
AccordionItemHreflinkComponent.propDecorators = {
onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
};
if (false) {
/**
* @type {?}
* @protected
*/
AccordionItemHreflinkComponent.prototype.accordion;
}
/**
* @fileoverview added by tsickle
* Generated from: accordion-item.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AccordionItemComponent extends AccordionBaseItemComponent {
/**
* @param {?} accordion
*/
constructor(accordion) {
super(accordion);
this.accordion = accordion;
}
/**
* @param {?} event
* @return {?}
*/
onClick(event) {
if (!this.disabled) {
this.accordion.itemClickFn({
item: this.item,
parent: this.parent,
event: event
});
}
}
}
AccordionItemComponent.decorators = [
{ type: Component, args: [{
selector: 'd-accordion-item',
template: "<ng-container *ngIf=\"!itemTemplate\">\r\n {{ title }}\r\n</ng-container>\r\n<ng-template\r\n *ngIf=\"itemTemplate\"\r\n [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n parent: parent,\r\n item: item,\r\n deepth: deepth\r\n }\"\r\n></ng-template>\r\n",
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
AccordionItemComponent.ctorParameters = () => [
{ type: AccordionComponent }
];
AccordionItemComponent.propDecorators = {
onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
};
if (false) {
/**
* @type {?}
* @protected
*/
AccordionItemComponent.prototype.accordion;
}
/**
* @fileoverview added by tsickle
* Generated from: accordion.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AccordionModule {
}
AccordionModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
RouterModule,
],
declarations: [
AccordionComponent,
AccordionListComponent,
AccordionMenuComponent,
AccordionItemComponent,
AccordionItemHreflinkComponent,
AccordionItemRouterlinkComponent,
],
exports: [
AccordionComponent,
AccordionListComponent,
AccordionMenuComponent,
AccordionItemComponent,
AccordionItemHreflinkComponent,
AccordionItemRouterlinkComponent,
],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: accordion.type.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function AccordionBase() { }
if (false) {
/** @type {?} */
AccordionBase.prototype.title;
/** @type {?|undefined} */
AccordionBase.prototype.disabled;
/* Skipping unhandled member: [prop: string]: any;*/
}
/**
* @record
*/
function IAccordionActiveable() { }
if (false) {
/** @type {?|undefined} */
IAccordionActiveable.prototype.active;
}
/**
* @record
* @template T
*/
function IAccordionFoldable() { }
if (false) {
/** @type {?|undefined} */
IAccordionFoldable.prototype.open;
/** @type {?|undefined} */
IAccordionFoldable.prototype.loading;
/** @type {?|undefined} */
IAccordionFoldable.prototype.children;
}
/**
* @record
*/
function IAccordionLinkable() { }
if (false) {
/** @type {?|undefined} */
IAccordionLinkable.prototype.link;
/** @type {?|undefined} */
IAccordionLinkable.prototype.target;
/** @type {?|undefined} */
IAccordionLinkable.prototype.linkType;
}
/**
* @record
*/
function AccordionBaseItem() { }
/**
* @record
* @template T
*/
function AccordionBaseMenu() { }
/**
* @record
*/
function AccordionLinkableItem() { }
/**
* @record
*/
function AccordionMenuItem() { }
/**
* @record
*/
function AccordionMenuToggleEvent() { }
if (false) {
/** @type {?} */
AccordionMenuToggleEvent.prototype.item;
/** @type {?} */
AccordionMenuToggleEvent.prototype.open;
/** @type {?} */
AccordionMenuToggleEvent.prototype.parent;
/** @type {?} */
AccordionMenuToggleEvent.prototype.event;
}
/**
* @record
*/
function AccordionItemClickEvent() { }
if (false) {
/** @type {?} */
AccordionItemClickEvent.prototype.item;
/** @type {?|undefined} */
AccordionItemClickEvent.prototype.prevActiveItem;
/** @type {?} */
AccordionItemClickEvent.prototype.parent;
/** @type {?} */
AccordionItemClickEvent.prototype.event;
}
/**
* @record
*/
function AccordionMenuKeyGroup() { }
if (false) {
/** @type {?|undefined} */
AccordionMenuKeyGroup.prototype.titleKey;
/** @type {?|undefined} */
AccordionMenuKeyGroup.prototype.activeKey;
/** @type {?|undefined} */
AccordionMenuKeyGroup.prototype.disabledKey;
/** @type {?|undefined} */
AccordionMenuKeyGroup.prototype.openKey;
/** @type {?|undefined} */
AccordionMenuKeyGroup.prototype.loadingKey;
/** @type {?|undefined} */
AccordionMenuKeyGroup.prototype.childrenKey;
/** @type {?|undefined} */
AccordionMenuKeyGroup.prototype.linkKey;
/** @type {?|undefined} */
AccordionMenuKeyGroup.prototype.linkTargetKey;
/** @type {?|undefined} */
AccordionMenuKeyGroup.prototype.linkTypeKey;
}
/**
* @record
*/
function AccordionConfigOptions() { }
if (false) {
/** @type {?|undefined} */
AccordionConfigOptions.prototype.restrictOneOpen;
/** @type {?|undefined} */
AccordionConfigOptions.prototype.autoOpenActiveMenu;
/** @type {?|undefined} */
AccordionConfigOptions.prototype.showNoContent;
/** @type {?|undefined} */
AccordionConfigOptions.prototype.linkDefaultTarget;
/** @type {?|undefined} */
AccordionConfigOptions.prototype.i18nCommonText;
/** @type {?|undefined} */
AccordionConfigOptions.prototype.i18nText;
/** @type {?} */
AccordionConfigOptions.prototype.linkType;
}
/**
* @record
*/
function AccordionOptions() { }
/**
* @deprecated merge into `AccordionMenuItem`
* @record
*/
function AccordionSubMenuItem() { }
if (false) {
/** @type {?} */
AccordionSubMenuItem.prototype.title;
/** @type {?|undefined} */
AccordionSubMenuItem.prototype.active;
/** @type {?|undefined} */
AccordionSubMenuItem.prototype.disabled;
/* Skipping unhandled member: [prop: string]: any;*/
}
/**
* @deprecated use `AccordionLinkableItem` instead
* @record
*/
function AccordionSubMenuItemHrefLink() { }
if (false) {
/** @type {?} */
AccordionSubMenuItemHrefLink.prototype.title;
/** @type {?} */
AccordionSubMenuItemHrefLink.prototype.link;
/** @type {?|undefined} */
AccordionSubMenuItemHrefLink.prototype.target;
/** @type {?|undefined} */
AccordionSubMenuItemHrefLink.prototype.active;
/** @type {?|undefined} */
AccordionSubMenuItemHrefLink.prototype.disabled;
/* Skipping unhandled member: [prop: string]: any;*/
}
/**
* @deprecated use `AccordionLinkableItem` instead
* @record
*/
function AccordionSubMenuItemRouterLink() { }
if (false) {
/** @type {?} */
AccordionSubMenuItemRouterLink.prototype.title;
/** @type {?} */
AccordionSubMenuItemRouterLink.prototype.link;
/** @type {?|undefined} */
AccordionSubMenuItemRouterLink.prototype.target;
/** @type {?|undefined} */
AccordionSubMenuItemRouterLink.prototype.active;
/** @type {?|undefined} */
AccordionSubMenuItemRouterLink.prototype.disabled;
/* Skipping unhandled member: [prop: string]: any;*/
}
/**
* @deprecated use `AccordionLinkableItem` instead
* @record
*/
function AccordionSubMenuItemDynamicLink() { }
if (false) {
/** @type {?} */
AccordionSubMenuItemDynamicLink.prototype.title;
/** @type {?} */
AccordionSubMenuItemDynamicLink.prototype.link;
/** @type {?} */
AccordionSubMenuItemDynamicLink.prototype.linkType;
/** @type {?|undefined} */
AccordionSubMenuItemDynamicLink.prototype.target;
/** @type {?|undefined} */
AccordionSubMenuItemDynamicLink.prototype.active;
/** @type {?|undefined} */
AccordionSubMenuItemDynamicLink.prototype.disabled;
/* Skipping unhandled member: [prop: string]: any;*/
}
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-devui-accordion.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { AccordionBaseComponent, AccordionBaseItemComponent, AccordionBaseLinkComponent, AccordionComponent, AccordionItemComponent, AccordionItemHreflinkComponent, AccordionItemRouterlinkComponent, AccordionListComponent, AccordionMenuComponent, AccordionModule };
//# sourceMappingURL=ng-devui-accordion.js.map