ng-devui
Version:
DevUI components based on Angular
581 lines (570 loc) • 62.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, HostBinding, InjectionToken, Component, ViewEncapsulation, Inject, HostListener, ViewChild, Injectable, ViewChildren, EventEmitter, forwardRef, Output, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1 from '@angular/router';
import { RouterLinkActive, RouterModule } from '@angular/router';
import * as i2$1 from 'ng-devui/utils';
import { expandCollapse, expandCollapseForDomDestroy, WithConfig } from 'ng-devui/utils';
import { ReplaySubject } from 'rxjs';
import { __decorate, __metadata } from 'tslib';
import * as i1$1 from 'ng-devui/i18n';
class AccordionBaseComponent {
get disabled() {
return this.item && this.item[this.accordion.disabledKey];
}
get title() {
return this.item && this.item[this.accordion.titleKey];
}
get textIndent() {
return this.deepth * 20 + 'px';
}
constructor(accordion) {
this.accordion = accordion;
this.deepth = 0;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionBaseComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AccordionBaseComponent, inputs: { item: "item", deepth: "deepth", parent: "parent" }, host: { properties: { "class.disabled": "this.disabled", "attr.title": "this.title", "style.textIndent": "this.textIndent" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionBaseComponent, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: undefined }], 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']
}] } });
class AccordionBaseItemComponent extends AccordionBaseComponent {
get itemTemplate() {
return this.accordion.itemTemplate;
}
get active() {
return this.item && this.item[this.accordion.activeKey];
}
constructor(accordion) {
super(accordion);
this.accordion = accordion;
this.defaultClasses = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionBaseItemComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AccordionBaseItemComponent, host: { properties: { "class.active": "this.active", "class.devui-accordion-item-title": "this.defaultClasses", "class.devui-over-flow-ellipsis": "this.defaultClasses" } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionBaseItemComponent, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: undefined }], propDecorators: { active: [{
type: HostBinding,
args: ['class.active']
}], defaultClasses: [{
type: HostBinding,
args: ['class.devui-accordion-item-title']
}, {
type: HostBinding,
args: ['class.devui-over-flow-ellipsis']
}] } });
class AccordionBaseLinkComponent extends AccordionBaseItemComponent {
get link() {
return this.item && this.item[this.accordion.linkKey];
}
get target() {
return this.item && this.item[this.accordion.linkTargetKey] || this.accordion.linkDefaultTarget;
}
get linkType() {
return this.item && this.item[this.accordion.linkTypeKey] || '';
}
constructor(accordion) {
super(accordion);
this.accordion = accordion;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionBaseLinkComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AccordionBaseLinkComponent, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionBaseLinkComponent, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: undefined }] });
const ACCORDION = new InjectionToken('AccordionComponent');
class AccordionItemHreflinkComponent extends AccordionBaseLinkComponent {
constructor(accordion) {
super(accordion);
this.accordion = accordion;
}
onClick(event) {
if (!this.disabled) {
this.accordion.linkItemClickFn({
item: this.item,
parent: this.parent,
event: event
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionItemHreflinkComponent, deps: [{ token: ACCORDION }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AccordionItemHreflinkComponent, selector: "d-accordion-item-hreflink", host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!disabled\">\n <a class=\"devui-over-flow-ellipsis\" href=\"{{ link }}\" target=\"{{ target }}\" rel=\"noopener\" title=\"{{ title }}\">\n <div\n class=\"devui-accordion-splitter\"\n [ngClass]=\"{ 'devui-parent-list': deepth === 0 }\"\n [ngStyle]=\"{ left: deepth * 20 + 10 + 'px' }\"\n ></div>\n <ng-container *ngIf=\"!itemTemplate\">\n {{ title }}\n </ng-container>\n <ng-template\n *ngIf=\"itemTemplate\"\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n parent: parent,\n item: item,\n deepth: deepth\n }\"\n ></ng-template>\n </a>\n</ng-container>\n<ng-container *ngIf=\"disabled\">\n <a class=\"devui-over-flow-ellipsis\" title=\"{{ title }}\">\n <div\n class=\"devui-accordion-splitter\"\n [ngClass]=\"{ 'devui-parent-list': deepth === 0 }\"\n [ngStyle]=\"{ left: deepth * 20 + 10 + 'px' }\"\n ></div>\n <ng-container *ngIf=\"!itemTemplate\">\n {{ title }}\n </ng-container>\n <ng-template\n *ngIf=\"itemTemplate\"\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n parent: parent,\n item: item,\n deepth: deepth\n }\"\n ></ng-template>\n </a>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionItemHreflinkComponent, decorators: [{
type: Component,
args: [{ selector: 'd-accordion-item-hreflink', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, template: "<ng-container *ngIf=\"!disabled\">\n <a class=\"devui-over-flow-ellipsis\" href=\"{{ link }}\" target=\"{{ target }}\" rel=\"noopener\" title=\"{{ title }}\">\n <div\n class=\"devui-accordion-splitter\"\n [ngClass]=\"{ 'devui-parent-list': deepth === 0 }\"\n [ngStyle]=\"{ left: deepth * 20 + 10 + 'px' }\"\n ></div>\n <ng-container *ngIf=\"!itemTemplate\">\n {{ title }}\n </ng-container>\n <ng-template\n *ngIf=\"itemTemplate\"\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n parent: parent,\n item: item,\n deepth: deepth\n }\"\n ></ng-template>\n </a>\n</ng-container>\n<ng-container *ngIf=\"disabled\">\n <a class=\"devui-over-flow-ellipsis\" title=\"{{ title }}\">\n <div\n class=\"devui-accordion-splitter\"\n [ngClass]=\"{ 'devui-parent-list': deepth === 0 }\"\n [ngStyle]=\"{ left: deepth * 20 + 10 + 'px' }\"\n ></div>\n <ng-container *ngIf=\"!itemTemplate\">\n {{ title }}\n </ng-container>\n <ng-template\n *ngIf=\"itemTemplate\"\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n parent: parent,\n item: item,\n deepth: deepth\n }\"\n ></ng-template>\n </a>\n</ng-container>\n" }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [ACCORDION]
}] }], propDecorators: { onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent {
get routerLinkActivated() {
return !!(this.routerLinkActiveDirective && this.routerLinkActiveDirective.isActive);
}
set urlTree(urlTree) {
if (urlTree) {
this.queryParams = urlTree.queryParams;
this.fragment = urlTree.fragment;
}
else {
this.queryParams = undefined;
this.fragment = undefined;
}
}
onClick(event) {
if (!this.disabled) {
this.accordion.linkItemClickFn({
item: this.item,
parent: this.parent,
event: event,
});
}
}
constructor(accordion, router) {
super(accordion);
this.accordion = accordion;
this.router = router;
}
ngOnChanges(changes) {
if (changes.item) {
if (this.link) {
this.urlTree = this.router.parseUrl(this.link);
const handelPath = (url) => {
let path = url;
const index = url.indexOf('?');
if (index > -1) {
path = url.slice(0, index);
}
return path;
};
this.path = handelPath(this.link);
}
else {
this.urlTree = undefined;
this.path = undefined;
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionItemRouterlinkComponent, deps: [{ token: ACCORDION }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AccordionItemRouterlinkComponent, selector: "d-accordion-item-routerlink", host: { listeners: { "click": "onClick($event)" }, properties: { "class.devui-router-active": "this.routerLinkActivated" } }, viewQueries: [{ propertyName: "routerLinkActiveDirective", first: true, predicate: RouterLinkActive, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!disabled\">\n <a\n class=\"devui-over-flow-ellipsis\"\n [routerLink]=\"path\"\n [queryParams]=\"queryParams\"\n [fragment]=\"fragment\"\n [routerLinkActive]=\"'devui-router-active'\"\n target=\"{{ target }}\"\n rel=\"noopener\"\n title=\"{{ title }}\"\n >\n <div\n class=\"devui-accordion-splitter\"\n [ngClass]=\"{ 'devui-parent-list': deepth === 0 }\"\n [ngStyle]=\"{ left: deepth * 20 + 10 + 'px' }\"\n ></div>\n <ng-container *ngIf=\"!itemTemplate\">\n {{ title }}\n </ng-container>\n <ng-template\n *ngIf=\"itemTemplate\"\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n parent: parent,\n item: item,\n deepth: deepth\n }\"\n ></ng-template>\n </a>\n</ng-container>\n<ng-container *ngIf=\"disabled\">\n <a class=\"devui-over-flow-ellipsis\" title=\"{{ title }}\">\n <div\n class=\"devui-accordion-splitter\"\n [ngClass]=\"{ 'devui-parent-list': deepth === 0 }\"\n [ngStyle]=\"{ left: deepth * 20 + 10 + 'px' }\"\n ></div>\n <ng-container *ngIf=\"!itemTemplate\">\n {{ title }}\n </ng-container>\n <ng-template\n *ngIf=\"itemTemplate\"\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n parent: parent,\n item: item,\n deepth: deepth\n }\"\n ></ng-template>\n </a>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionItemRouterlinkComponent, decorators: [{
type: Component,
args: [{ selector: 'd-accordion-item-routerlink', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, template: "<ng-container *ngIf=\"!disabled\">\n <a\n class=\"devui-over-flow-ellipsis\"\n [routerLink]=\"path\"\n [queryParams]=\"queryParams\"\n [fragment]=\"fragment\"\n [routerLinkActive]=\"'devui-router-active'\"\n target=\"{{ target }}\"\n rel=\"noopener\"\n title=\"{{ title }}\"\n >\n <div\n class=\"devui-accordion-splitter\"\n [ngClass]=\"{ 'devui-parent-list': deepth === 0 }\"\n [ngStyle]=\"{ left: deepth * 20 + 10 + 'px' }\"\n ></div>\n <ng-container *ngIf=\"!itemTemplate\">\n {{ title }}\n </ng-container>\n <ng-template\n *ngIf=\"itemTemplate\"\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n parent: parent,\n item: item,\n deepth: deepth\n }\"\n ></ng-template>\n </a>\n</ng-container>\n<ng-container *ngIf=\"disabled\">\n <a class=\"devui-over-flow-ellipsis\" title=\"{{ title }}\">\n <div\n class=\"devui-accordion-splitter\"\n [ngClass]=\"{ 'devui-parent-list': deepth === 0 }\"\n [ngStyle]=\"{ left: deepth * 20 + 10 + 'px' }\"\n ></div>\n <ng-container *ngIf=\"!itemTemplate\">\n {{ title }}\n </ng-container>\n <ng-template\n *ngIf=\"itemTemplate\"\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n parent: parent,\n item: item,\n deepth: deepth\n }\"\n ></ng-template>\n </a>\n</ng-container>\n" }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [ACCORDION]
}] }, { type: i1.Router }], propDecorators: { routerLinkActiveDirective: [{
type: ViewChild,
args: [RouterLinkActive]
}], routerLinkActivated: [{
type: HostBinding,
args: ['class.devui-router-active']
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class AccordionItemComponent extends AccordionBaseItemComponent {
constructor(accordion) {
super(accordion);
this.accordion = accordion;
}
onClick(event) {
if (!this.disabled) {
this.accordion.itemClickFn({
item: this.item,
parent: this.parent,
event: event
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionItemComponent, deps: [{ token: ACCORDION }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AccordionItemComponent, selector: "d-accordion-item", host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionItemComponent, decorators: [{
type: Component,
args: [{ selector: 'd-accordion-item', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, 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" }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [ACCORDION]
}] }], propDecorators: { onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class AccordionService {
constructor() {
this.childListSubject = new ReplaySubject(1);
this.childListObs = this.childListSubject.asObservable();
}
setChildListInstance(listInstance, parent) {
this.childListSubject.next({ listInstance, parent });
}
getChildListInstance() {
return this.childListObs;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionService, decorators: [{
type: Injectable
}] });
class AccordionMenuComponent extends AccordionBaseComponent {
get open() {
return this.keyOpen === undefined && this.accordion.autoOpenActiveMenu ? this.childActivated : this.keyOpen;
}
get routerLinkActivated() {
return this.accordionListFromView && this.accordionListFromView.routerLinkActivated;
}
get hasActiveChildren() {
return this.accordionListFromView && this.accordionListFromView.hasActiveChildren;
}
get keyOpen() {
return this.item && this.item[this.accordion.openKey];
}
get children() {
return this.item && this.item[this.accordion.childrenKey];
}
get childActivated() {
return this.routerLinkActivated || this.hasActiveChildren;
}
get menuItemTemplate() {
return this.accordion.menuItemTemplate;
}
constructor(accordion, accordionService) {
super(accordion);
this.accordion = accordion;
this.accordionService = accordionService;
this.defaultClasses = true;
}
ngOnInit() {
this.childListSub = this.accordionService.getChildListInstance().subscribe(({ listInstance, parent }) => {
// list的parent与menu的item为同一数据，通过该属性匹配父子关系，避免互相嵌套导致循环依赖
if (parent === this.item) {
// 延时赋值规避脏检查后值改变报错
setTimeout(() => {
this.accordionListFromView = listInstance;
});
}
});
}
ngOnDestroy() {
if (this.childListSub) {
this.childListSub.unsubscribe();
}
}
toggle(event) {
this.accordion.menuToggleFn({
item: this.item,
open: !this.open,
parent: this.parent,
event: event,
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionMenuComponent, deps: [{ token: ACCORDION }, { token: AccordionService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AccordionMenuComponent, selector: "d-accordion-menu", host: { properties: { "class.devui-accordion-menu-item": "this.defaultClasses", "class.open": "this.open", "class.devui-router-active": "this.routerLinkActivated", "class.devui-has-active-item": "this.hasActiveChildren" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"devui-accordion-item-title devui-over-flow-ellipsis\"\r\n [ngClass]=\"{\r\n open: open,\r\n active: childActivated,\r\n disabled: disabled\r\n }\"\r\n title=\"{{ title }}\"\r\n (click)=\"!disabled && toggle($event)\"\r\n>\r\n <div\r\n class=\"devui-accordion-splitter\"\r\n [ngClass]=\"{\r\n 'devui-parent-list': deepth === 0\r\n }\"\r\n [ngStyle]=\"{ left: deepth * 20 + 10 + 'px' }\"\r\n ></div>\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\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionMenuComponent, decorators: [{
type: Component,
args: [{ selector: 'd-accordion-menu', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, template: "<div\r\n class=\"devui-accordion-item-title devui-over-flow-ellipsis\"\r\n [ngClass]=\"{\r\n open: open,\r\n active: childActivated,\r\n disabled: disabled\r\n }\"\r\n title=\"{{ title }}\"\r\n (click)=\"!disabled && toggle($event)\"\r\n>\r\n <div\r\n class=\"devui-accordion-splitter\"\r\n [ngClass]=\"{\r\n 'devui-parent-list': deepth === 0\r\n }\"\r\n [ngStyle]=\"{ left: deepth * 20 + 10 + 'px' }\"\r\n ></div>\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\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n</div>\r\n" }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [ACCORDION]
}] }, { type: AccordionService }], propDecorators: { defaultClasses: [{
type: HostBinding,
args: ['class.devui-accordion-menu-item']
}], open: [{
type: HostBinding,
args: ['class.open']
}], routerLinkActivated: [{
type: HostBinding,
args: ['class.devui-router-active']
}], hasActiveChildren: [{
type: HostBinding,
args: ['class.devui-has-active-item']
}] } });
class AccordionListComponent {
get animateState() {
return this.accordion.showAnimation;
}
get loading() {
return this.parent && this.parent[this.accordion.loadingKey];
}
get noContent() {
return this.data === undefined || this.data === null || this.data.length === 0;
}
get linkTypeKey() {
return this.accordion.linkTypeKey;
}
get childrenKey() {
return this.accordion.childrenKey;
}
get activeKey() {
return this.accordion.activeKey;
}
get itemTemplate() {
return this.accordion.itemTemplate;
}
get menuItemTemplate() {
return this.accordion.menuItemTemplate;
}
get innerListTemplate() {
return this.accordion.innerListTemplate;
}
get loadingTemplate() {
return this.accordion.loadingTemplate;
}
get noContentTemplate() {
return this.accordion.noContentTemplate;
}
get linkType() {
return this.accordion.linkType;
}
get i18nCommonText() {
return this.accordion.i18nCommonText;
}
get showNoContent() {
return this.accordion.showNoContent;
}
get linkDefaultTarget() {
return this.accordion.linkDefaultTarget;
}
get routerLinkActivated() {
return ((!!this.accordionItemRouterlinkQueryList && this.accordionItemRouterlinkQueryList.some((airlc) => this.isLinkRouterActive(airlc))) ||
(!!this.accordionMenuQueryList && this.accordionMenuQueryList.some((amc) => this.isMenuRouterActive(amc))));
}
get hasActiveChildren() {
return ((!!this.accordionMenuQueryList && this.accordionMenuQueryList.some((amc) => this.isMenuDataActive(amc))) ||
(!!this.data && !!this.data.length && this.data.some((item) => this.isItemData(item) && this.isItemDataActive(item))));
}
constructor(accordion, accordionService) {
this.accordion = accordion;
this.accordionService = accordionService;
this.deepth = 0;
this.menuToggleItemFn = (item, event) => {
this.accordion.menuToggleFn({
item: item,
open: !item[this.accordion.openKey],
parent: this.parent.parent,
event: event,
});
};
this.itemClickItemFn = (item, event) => {
this.accordion.itemClickFn({
item: item,
parent: this.parent,
event: event,
});
};
}
ngOnInit() {
if (this.parent) {
this.accordionService.setChildListInstance(this, this.parent);
}
}
ngOnDestroy() {
if (this.parent) {
this.accordionService.setChildListInstance(undefined, this.parent);
}
}
isLinkRouterActive(airlc) {
return airlc.routerLinkActivated;
}
isMenuRouterActive(amc) {
return amc.routerLinkActivated;
}
isMenuDataActive(amc) {
return amc.hasActiveChildren;
}
isItemDataActive(item) {
return !!item[this.activeKey];
}
isItemData(item) {
return item[this.childrenKey] === undefined;
}
getOpenState(item, list) {
let stateFlag = false;
if (item && list) {
const open = item[this.accordion.openKey];
const childActivated = list.routerLinkActivated || list.hasActiveChildren;
stateFlag = open === undefined && this.accordion.autoOpenActiveMenu ? childActivated : open;
}
return stateFlag ? 'expanded' : 'collapsed';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionListComponent, deps: [{ token: ACCORDION }, { token: AccordionService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AccordionListComponent, selector: "d-accordion-list", inputs: { data: "data", deepth: "deepth", parent: "parent" }, host: { properties: { "class.devui-accordion-show-animate": "this.animateState" } }, viewQueries: [{ propertyName: "accordionMenuQueryList", predicate: AccordionMenuComponent, descendants: true }, { propertyName: "accordionItemRouterlinkQueryList", predicate: AccordionItemRouterlinkComponent, descendants: true }], ngImport: i0, template: "<ul class=\"devui-accordion-list\" *ngIf=\"!innerListTemplate || deepth === 0\">\n <li class=\"devui-accordion-item\" *ngFor=\"let item of data\">\n <!--\u83DC\u5355\u7C7B\u578B-->\n <d-accordion-menu *ngIf=\"item[childrenKey] !== undefined\" [item]=\"item\" [deepth]=\"deepth\" [parent]=\"parent\"></d-accordion-menu>\n <!--\u975E\u83DC\u5355\u7C7B\u578B-->\n <d-accordion-list\n #listInstance\n *ngIf=\"item[childrenKey] !== undefined\"\n class=\"devui-accordion-submenu\"\n [deepth]=\"deepth + 1\"\n [data]=\"item[childrenKey]\"\n [parent]=\"item\"\n [@collapse]=\"getOpenState(item, listInstance)\"\n [@.disabled]=\"!animateState\"\n >\n </d-accordion-list>\n <ng-container *ngIf=\"item[childrenKey] === undefined\">\n <!--\u8DEF\u7531\u94FE\u63A5-->\n <d-accordion-item-routerlink\n *ngIf=\"linkType === 'routerLink'\"\n [item]=\"item\"\n [deepth]=\"deepth\"\n [parent]=\"parent\"\n ></d-accordion-item-routerlink>\n <!--\u666E\u901A\u94FE\u63A5-->\n <d-accordion-item-hreflink\n *ngIf=\"linkType === 'hrefLink'\"\n [item]=\"item\"\n [deepth]=\"deepth\"\n [parent]=\"parent\"\n ></d-accordion-item-hreflink>\n <!--\u52A8\u6001\u94FE\u63A5-->\n <ng-container *ngIf=\"linkType === 'dependOnLinkTypeKey'\">\n <d-accordion-item-routerlink\n *ngIf=\"item[linkTypeKey] === 'routerLink'\"\n [item]=\"item\"\n [deepth]=\"deepth\"\n [parent]=\"parent\"\n ></d-accordion-item-routerlink>\n <d-accordion-item-hreflink\n *ngIf=\"item[linkTypeKey] === 'hrefLink'\"\n [item]=\"item\"\n [deepth]=\"deepth\"\n [parent]=\"parent\"\n ></d-accordion-item-hreflink>\n <d-accordion-item\n *ngIf=\"item[linkTypeKey] !== 'hrefLink' && item[linkTypeKey] !== 'routerLink'\"\n [item]=\"item\"\n [deepth]=\"deepth\"\n [parent]=\"parent\"\n ></d-accordion-item>\n </ng-container>\n <!--\u666E\u901A\u7C7B\u578B-->\n <d-accordion-item *ngIf=\"!linkType || linkType === ''\" [item]=\"item\" [deepth]=\"deepth\" [parent]=\"parent\"></d-accordion-item>\n </ng-container>\n </li>\n</ul>\n<!--\u5217\u8868\u6A21\u677F-->\n<div *ngIf=\"innerListTemplate && deepth !== 0\">\n <ng-template\n [ngTemplateOutlet]=\"innerListTemplate\"\n [ngTemplateOutletContext]=\"{\n item: parent,\n deepth: deepth,\n itemClickFn: itemClickItemFn,\n menuToggleFn: menuToggleItemFn\n }\"\n ></ng-template>\n</div>\n<!--\u65E0\u6570\u636E/\u52A0\u8F7D\u4E2D\u6A21\u677F-->\n<ul *ngIf=\"!innerListTemplate && (loading || (noContent && showNoContent))\">\n <!--\u52A0\u8F7D\u4E2D-->\n <li *ngIf=\"loading && !loadingTemplate\" class=\"devui-accordion-item\">\n <div class=\"devui-accordion-item-title devui-over-flow-ellipsis\" [style.textIndent]=\"deepth * 20 + 'px'\">\n {{ i18nCommonText?.loading }}\n </div>\n </li>\n <!--\u81EA\u5B9A\u4E49\u52A0\u8F7D\u4E2D-->\n <ng-template\n *ngIf=\"loading && loadingTemplate\"\n [ngTemplateOutlet]=\"loadingTemplate\"\n [ngTemplateOutletContext]=\"{ item: parent, deepth: deepth }\"\n ></ng-template>\n <!--\u65E0\u6570\u636E-->\n <li *ngIf=\"showNoContent && !loading && noContent && !noContentTemplate\" class=\"devui-accordion-item\">\n <div class=\"devui-accordion-item-title devui-over-flow-ellipsis disabled\" [style.textIndent]=\"deepth * 20 + 'px'\">\n {{ i18nCommonText?.noData }}\n </div>\n </li>\n <!--\u81EA\u5B9A\u4E49\u65E0\u6570\u636E-->\n <ng-template\n *ngIf=\"showNoContent && !loading && noContent && noContentTemplate\"\n [ngTemplateOutlet]=\"noContentTemplate\"\n [ngTemplateOutletContext]=\"{ item: parent, deepth: deepth }\"\n ></ng-template>\n</ul>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccordionListComponent, selector: "d-accordion-list", inputs: ["data", "deepth", "parent"] }, { kind: "component", type: AccordionMenuComponent, selector: "d-accordion-menu" }, { kind: "component", type: AccordionItemComponent, selector: "d-accordion-item" }, { kind: "component", type: AccordionItemHreflinkComponent, selector: "d-accordion-item-hreflink" }, { kind: "component", type: AccordionItemRouterlinkComponent, selector: "d-accordion-item-routerlink" }], animations: [expandCollapse, expandCollapseForDomDestroy], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionListComponent, decorators: [{
type: Component,
args: [{ selector: 'd-accordion-list', encapsulation: ViewEncapsulation.None, animations: [expandCollapse, expandCollapseForDomDestroy], preserveWhitespaces: false, template: "<ul class=\"devui-accordion-list\" *ngIf=\"!innerListTemplate || deepth === 0\">\n <li class=\"devui-accordion-item\" *ngFor=\"let item of data\">\n <!--\u83DC\u5355\u7C7B\u578B-->\n <d-accordion-menu *ngIf=\"item[childrenKey] !== undefined\" [item]=\"item\" [deepth]=\"deepth\" [parent]=\"parent\"></d-accordion-menu>\n <!--\u975E\u83DC\u5355\u7C7B\u578B-->\n <d-accordion-list\n #listInstance\n *ngIf=\"item[childrenKey] !== undefined\"\n class=\"devui-accordion-submenu\"\n [deepth]=\"deepth + 1\"\n [data]=\"item[childrenKey]\"\n [parent]=\"item\"\n [@collapse]=\"getOpenState(item, listInstance)\"\n [@.disabled]=\"!animateState\"\n >\n </d-accordion-list>\n <ng-container *ngIf=\"item[childrenKey] === undefined\">\n <!--\u8DEF\u7531\u94FE\u63A5-->\n <d-accordion-item-routerlink\n *ngIf=\"linkType === 'routerLink'\"\n [item]=\"item\"\n [deepth]=\"deepth\"\n [parent]=\"parent\"\n ></d-accordion-item-routerlink>\n <!--\u666E\u901A\u94FE\u63A5-->\n <d-accordion-item-hreflink\n *ngIf=\"linkType === 'hrefLink'\"\n [item]=\"item\"\n [deepth]=\"deepth\"\n [parent]=\"parent\"\n ></d-accordion-item-hreflink>\n <!--\u52A8\u6001\u94FE\u63A5-->\n <ng-container *ngIf=\"linkType === 'dependOnLinkTypeKey'\">\n <d-accordion-item-routerlink\n *ngIf=\"item[linkTypeKey] === 'routerLink'\"\n [item]=\"item\"\n [deepth]=\"deepth\"\n [parent]=\"parent\"\n ></d-accordion-item-routerlink>\n <d-accordion-item-hreflink\n *ngIf=\"item[linkTypeKey] === 'hrefLink'\"\n [item]=\"item\"\n [deepth]=\"deepth\"\n [parent]=\"parent\"\n ></d-accordion-item-hreflink>\n <d-accordion-item\n *ngIf=\"item[linkTypeKey] !== 'hrefLink' && item[linkTypeKey] !== 'routerLink'\"\n [item]=\"item\"\n [deepth]=\"deepth\"\n [parent]=\"parent\"\n ></d-accordion-item>\n </ng-container>\n <!--\u666E\u901A\u7C7B\u578B-->\n <d-accordion-item *ngIf=\"!linkType || linkType === ''\" [item]=\"item\" [deepth]=\"deepth\" [parent]=\"parent\"></d-accordion-item>\n </ng-container>\n </li>\n</ul>\n<!--\u5217\u8868\u6A21\u677F-->\n<div *ngIf=\"innerListTemplate && deepth !== 0\">\n <ng-template\n [ngTemplateOutlet]=\"innerListTemplate\"\n [ngTemplateOutletContext]=\"{\n item: parent,\n deepth: deepth,\n itemClickFn: itemClickItemFn,\n menuToggleFn: menuToggleItemFn\n }\"\n ></ng-template>\n</div>\n<!--\u65E0\u6570\u636E/\u52A0\u8F7D\u4E2D\u6A21\u677F-->\n<ul *ngIf=\"!innerListTemplate && (loading || (noContent && showNoContent))\">\n <!--\u52A0\u8F7D\u4E2D-->\n <li *ngIf=\"loading && !loadingTemplate\" class=\"devui-accordion-item\">\n <div class=\"devui-accordion-item-title devui-over-flow-ellipsis\" [style.textIndent]=\"deepth * 20 + 'px'\">\n {{ i18nCommonText?.loading }}\n </div>\n </li>\n <!--\u81EA\u5B9A\u4E49\u52A0\u8F7D\u4E2D-->\n <ng-template\n *ngIf=\"loading && loadingTemplate\"\n [ngTemplateOutlet]=\"loadingTemplate\"\n [ngTemplateOutletContext]=\"{ item: parent, deepth: deepth }\"\n ></ng-template>\n <!--\u65E0\u6570\u636E-->\n <li *ngIf=\"showNoContent && !loading && noContent && !noContentTemplate\" class=\"devui-accordion-item\">\n <div class=\"devui-accordion-item-title devui-over-flow-ellipsis disabled\" [style.textIndent]=\"deepth * 20 + 'px'\">\n {{ i18nCommonText?.noData }}\n </div>\n </li>\n <!--\u81EA\u5B9A\u4E49\u65E0\u6570\u636E-->\n <ng-template\n *ngIf=\"showNoContent && !loading && noContent && noContentTemplate\"\n [ngTemplateOutlet]=\"noContentTemplate\"\n [ngTemplateOutletContext]=\"{ item: parent, deepth: deepth }\"\n ></ng-template>\n</ul>\n" }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [ACCORDION]
}] }, { type: AccordionService }], propDecorators: { data: [{
type: Input
}], deepth: [{
type: Input
}], parent: [{
type: Input
}], accordionMenuQueryList: [{
type: ViewChildren,
args: [AccordionMenuComponent]
}], accordionItemRouterlinkQueryList: [{
type: ViewChildren,
args: [AccordionItemRouterlinkComponent]
}], animateState: [{
type: HostBinding,
args: ['class.devui-accordion-show-animate']
}] } });
class AccordionComponent {
constructor(i18n, devConfigService) {
this.i18n = i18n;
this.devConfigService = devConfigService;
/* Key值定义, 用于自定义数据结构 */
this.titleKey = 'title'; // 标题的key，item[titleKey]类型为string，为标题显示内容
this.loadingKey = 'loading'; // 子菜单动态加载item[loadingKey]类型为boolean
this.childrenKey = 'children'; // 子菜单Key
this.disabledKey = 'disabled'; // 是否禁用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定义区
this.linkKey = 'link'; // 链接内容的key
this.linkTargetKey = 'target'; // 链接目标窗口的key
this.linkDefaultTarget = '_self'; // 不设置target的时候target默认值
this.accordionType = 'normal';
this.showAnimation = true;
// 点击了可点击菜单
this.itemClickFn = (itemEvent) => {
const prevActiveItem = this.activeItem;
this.activeItemFn(itemEvent.item);
this.itemClick.emit({ ...itemEvent, prevActiveItem: prevActiveItem });
};
this.linkItemClickFn = (itemEvent) => {
const prevActiveItem = this.activeItem;
this.activeItem = itemEvent.item;
this.itemClick.emit({ ...itemEvent, prevActiveItem: prevActiveItem });
};
// 打开或关闭可折叠菜单
this.menuToggleFn = (menuEvent) => {
this.openMenuFn(menuEvent.item, menuEvent.open);
this.menuToggle.emit(menuEvent);
};
}
ngOnChanges(changes) {
const { data, autoOpenActiveMenu } = changes;
if (data) {
this.initActiveItem();
}
if (autoOpenActiveMenu) {
if (this.autoOpenActiveMenu && autoOpenActiveMenu.previousValue === false) {
this.cleanOpenData();
}
}
}
ngOnInit() {
if (this.data) {
this.initActiveItem();
}
this.i18nCommonText = this.i18n.getI18nText().common;
this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
this.i18nCommonText = data.common;
});
}
ngOnDestroy() {
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
}
flatten(arr, childrenKey = 'children', includeParent = false, includeLeaf = true) {
return arr.reduce((acc, cur) => {
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;
}, []);
}
cleanOpenData() {
this.flatten(this.data, this.childrenKey, true, false).forEach((item) => {
item[this.openKey] = undefined;
});
}
// 默认激活
initActiveItem() {
const activeItem = this.flatten(this.data, this.childrenKey)
.filter((item) => item[this.activeKey])
.pop();
if (activeItem) {
if (!this.activeItem) {
this.activeItemFn(activeItem);
}
}
else {
this.activeItem = undefined;
}
}
// 激活子菜单项并去掉其他子菜单的激活
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);
}
// 打开或关闭一级菜单，如果有限制只能展开一项则关闭其他一级菜单
openMenuFn(item, open) {
if (open && this.restrictOneOpen) {
this.data.forEach((itemtemp) => {
itemtemp[this.openKey] = false;
});
}
item[this.openKey] = open;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionComponent, deps: [{ token: i1$1.I18nService }, { token: i2$1.DevConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AccordionComponent, selector: "d-accordion", inputs: { data: "data", titleKey: "titleKey", loadingKey: "loadingKey", childrenKey: "childrenKey", disabledKey: "disabledKey", activeKey: "activeKey", openKey: "openKey", menuItemTemplate: "menuItemTemplate", itemTemplate: "itemTemplate", restrictOneOpen: "restrictOneOpen", autoOpenActiveMenu: "autoOpenActiveMenu", showNoContent: "showNoContent", noContentTemplate: "noContentTemplate", loadingTemplate: "loadingTemplate", innerListTemplate: "innerListTemplate", linkType: "linkType", linkTypeKey: "linkTypeKey", linkKey: "linkKey", linkTargetKey: "linkTargetKey", linkDefaultTarget: "linkDefaultTarget", accordionType: "accordionType", showAnimation: "showAnimation" }, outputs: { menuToggle: "menuToggle", itemClick: "itemClick", activeItemChange: "activeItemChange" }, providers: [
{
provide: ACCORDION,
useExisting: forwardRef(() => AccordionComponent),
},
], usesOnChanges: true, ngImport: i0, template: "<d-accordion-list\n class=\"devui-accordion-menu devui-scrollbar\"\n [ngClass]=\"{ 'devui-accordion-menu-normal': accordionType === 'normal' }\"\n [data]=\"data\"\n [deepth]=\"0\"\n [parent]=\"null\"\n>\n</d-accordion-list>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host ::ng-deep d-accordion-menu,: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{display:block}:host ::ng-deep .devui-accordion-menu{display:block;background:var(--devui-base-bg, #ffffff);width:100%;overflow-y:auto;border-radius:var(--devui-border-radius, 2px);height:100%}:host ::ng-deep .devui-accordion-menu.devui-accordion-menu-normal{box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-shadow, rgba(0, 0, 0, .16))}:host ::ng-deep .devui-accordion-menu>.devui-accordion-list{padding:8px 0}: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:var(--devui-base-bg, #ffffff);width:100%}:host ::ng-deep .devui-accordion-item-title{display:block;height:40px;width:calc(100% - 24px);margin:0 12px;padding:0 8px;font-weight:400;line-height:40px;color:var(--devui-text-weak, #333333);border-radius:var(--devui-border-radius, 2px);background:transparent;cursor:pointer}:host ::ng-deep .devui-accordion-item-title.disabled{color:var(--devui-disabled-text, #c2c2c2);cursor:not-allowed}:host ::ng-deep .devui-accordion-item-title.disabled>a{color:var(--devui-disabled-text, #c2c2c2)}:host ::ng-deep .devui-accordion-item-title:not(.disabled):hover{background:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-list-item-hover-text, #000000)}:host ::ng-deep .devui-accordion-item-title:not(.disabled).devui-router-active,:host ::ng-deep .devui-accordion-item-title:not(.disabled).active:not(.open){color:var(--devui-brand-active, #0950de);font-weight:700}:host ::ng-deep .devui-accordion-item-title:not(.disabled).devui-router-active>a,:host ::ng-deep .devui-accordion-item-title:not(.disabled).active:not(.open)>a{color:var(--devui-brand-active, #0950de)}:host ::ng-deep .devui-accordion-item-title>a{text-decoration:none;display:block;width:100%;color:var(--devui-text-weak, #333333)}: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 12px 0 20px}:host ::ng-deep .devui-accordion-menu-item