@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
230 lines (222 loc) • 12.5 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Injectable, Component, Input, EventEmitter, ChangeDetectionStrategy, Output, NgModule } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
import { DropDownModule } from '@duoduo-oba/ng-devui/dropdown';
import { SearchModule } from '@duoduo-oba/ng-devui/search';
/**
* @fileoverview added by tsickle
* Generated from: breadcrumb.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class BreadCrumbService {
/**
* @param {?} router
*/
constructor(router) {
this.router = router;
}
// 与原生routerLink表现形式一致，navigateByUrl()可直接传入字符串类型的链接，并将链接解析为routerLink的urlTree的形式
/**
* @param {?} $event
* @param {?} item
* @return {?}
*/
navigateTo($event, item) {
// 兼容a标签与不同键的交互形式
if ($event.button !== 0 || $event.ctrlKey || $event.metaKey || $event.shiftKey) {
return;
}
if (typeof item.target === 'string' && item.target !== '_self') {
return;
}
$event.preventDefault();
this.router.navigateByUrl(item.link);
}
}
BreadCrumbService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
BreadCrumbService.ctorParameters = () => [
{ type: Router }
];
if (false) {
/**
* @type {?}
* @private
*/
BreadCrumbService.prototype.router;
}
/**
* @fileoverview added by tsickle
* Generated from: breadcrumb.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class BreadCrumbComponent {
/**
* @param {?} breadCrumbService
*/
constructor(breadCrumbService) {
this.breadCrumbService = breadCrumbService;
this.source = [];
}
/**
* @param {?} $event
* @param {?} item
* @return {?}
*/
navigateTo($event, item) {
this.breadCrumbService.navigateTo($event, item);
}
}
BreadCrumbComponent.decorators = [
{ type: Component, args: [{
selector: 'd-breadcrumb',
exportAs: 'dBreadcrumb',
template: "<ng-container *ngIf=\"source && source.length\">\r\n <d-breadcrumb-item\r\n *ngFor=\"let item of source\"\r\n [showMenu]=\"item.showMenu\"\r\n [isSearch]=\"item.isSearch\"\r\n [menuList]=\"item.menuList\"\r\n [customMenuTemplate]=\"item.customMenuTemplate\"\r\n >\r\n <a\r\n *ngIf=\"!item.noNavigation && (!item.linkType || item.linkType === 'hrefLink')\"\r\n rel=\"noopener\"\r\n [href]=\"item.link\"\r\n [target]=\"item.target ? item.target : '_self'\"\r\n >{{ item.title }}</a\r\n >\r\n <a\r\n *ngIf=\"!item.noNavigation && item.linkType === 'routerLink'\"\r\n rel=\"noopener\"\r\n [target]=\"item.target\"\r\n [href]=\"item.link\"\r\n (click)=\"navigateTo($event, item)\"\r\n >{{ item.title }}</a\r\n >\r\n <span *ngIf=\"item.noNavigation\">{{ item.title }}</span>\r\n </d-breadcrumb-item>\r\n</ng-container>\r\n<ng-container *ngIf=\"!(source && source.length)\">\r\n <ng-content></ng-content>\r\n</ng-container>\r\n",
styles: [":host{display:block}:host ::ng-deep d-breadcrumb-item:last-child .devui-breadcrumb-separator{display:none}"]
}] }
];
/** @nocollapse */
BreadCrumbComponent.ctorParameters = () => [
{ type: BreadCrumbService }
];
BreadCrumbComponent.propDecorators = {
separatorIcon: [{ type: Input }],
source: [{ type: Input }]
};
if (false) {
/** @type {?} */
BreadCrumbComponent.prototype.separatorIcon;
/** @type {?} */
BreadCrumbComponent.prototype.source;
/**
* @type {?}
* @private
*/
BreadCrumbComponent.prototype.breadCrumbService;
}
/**
* @fileoverview added by tsickle
* Generated from: breadcrumb-item/breadcrumb-item.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class BreadCrumbItemComponent {
/**
* @param {?} breadCrumbComponent
* @param {?} breadCrumbService
*/
constructor(breadCrumbComponent, breadCrumbService) {
this.breadCrumbComponent = breadCrumbComponent;
this.breadCrumbService = breadCrumbService;
this.showMenu = false;
this.isSearch = false;
this.toggleEvent = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() {
this.menuListDisplay = this.menuList;
}
/**
* @param {?} $event
* @return {?}
*/
onToggle($event) {
this.isOpen = $event;
this.toggleEvent.emit($event);
}
/**
* @param {?} $event
* @return {?}
*/
searchEvent($event) {
if (this.menuList) {
this.menuListDisplay = this.menuList.filter((/**
* @param {?} item
* @return {?}
*/
item => item.name.toLowerCase().includes($event.toLowerCase())));
}
}
/**
* @param {?} $event
* @param {?} item
* @return {?}
*/
navigateTo($event, item) {
this.breadCrumbService.navigateTo($event, item);
}
}
BreadCrumbItemComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'd-breadcrumb-item',
exportAs: 'dBreadcrumbItem',
template: "<ng-container *ngIf=\"showMenu; else breadcrumbContentTpl\">\r\n <span [ngClass]=\"{ 'devui-breadcrumb-item-active': isOpen }\" #origin>\r\n <ng-template [ngTemplateOutlet]=\"breadcrumbContentTpl\"></ng-template>\r\n <i\r\n class=\"devui-breadcrumb-down-icon\"\r\n dDropDown\r\n dDropDownToggle\r\n appendToBody\r\n [alignOrigin]=\"origin\"\r\n [closeScope]=\"'blank'\"\r\n (toggleEvent)=\"onToggle($event)\"\r\n >\r\n <svg\r\n width=\"5px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 5 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 <polygon\r\n id=\"Triangle-Copy-2\"\r\n fill=\"#959EB2\"\r\n transform=\"translate(2.500000, 7.500000) scale(1, -1) translate(-2.500000, -7.500000) \"\r\n points=\"2.5 6 5 9 0 9\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n <div dDropDownMenu>\r\n <ng-template\r\n [ngTemplateOutlet]=\"customMenuTemplate ? customMenuTemplate : dropDownMenuTpl\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: this\r\n }\"\r\n >\r\n </ng-template>\r\n </div>\r\n </i>\r\n </span>\r\n</ng-container>\r\n\r\n<ng-template #breadcrumbContentTpl>\r\n <span class=\"devui-breadcrumb-item\">\r\n <ng-content></ng-content>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #dropDownMenuTpl>\r\n <div *ngIf=\"isSearch\" class=\"devui-search-container\">\r\n <d-search [size]=\"'sm'\" (searchFn)=\"searchEvent($event)\"></d-search>\r\n </div>\r\n <ul class=\"devui-breadcrumb-dropdown-menu\">\r\n <li *ngFor=\"let item of menuListDisplay\" title=\"{{ item.name }}\">\r\n <a\r\n *ngIf=\"!item.linkType || item.linkType === 'hrefLink'\"\r\n [href]=\"item.link\"\r\n rel=\"noopener\"\r\n [target]=\"item.target ? item.target : '_self'\"\r\n >{{ item.name }}</a\r\n >\r\n <a\r\n *ngIf=\"item.linkType === 'routerLink'\"\r\n rel=\"noopener\"\r\n [target]=\"item.target\"\r\n [href]=\"item.link\"\r\n (click)=\"navigateTo($event, item)\"\r\n >{{ item.name }}</a\r\n >\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<span class=\"devui-breadcrumb-separator\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"breadCrumbComponent.separatorIcon ? breadCrumbComponent.separatorIcon : defaultSeparator\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: this\r\n }\"\r\n >\r\n </ng-template>\r\n</span>\r\n\r\n<ng-template #defaultSeparator>\r\n <span class=\"devui-breadcrumb-separator\">\r\n /\r\n </span>\r\n</ng-template>\r\n",
styles: [".devui-breadcrumb-font-style,.devui-breadcrumb-item,.devui-breadcrumb-item ::ng-deep a,.devui-breadcrumb-separator{font-size:12px;color:#8a8e99;line-height:20px}.devui-breadcrumb-item{cursor:auto}.devui-breadcrumb-item ::ng-deep a:hover{color:#252b3a;text-decoration:none}.devui-breadcrumb-item ::ng-deep a{cursor:pointer}.devui-breadcrumb-item ::ng-deep a:focus{text-decoration:none}.devui-breadcrumb-down-icon{vertical-align:middle;display:inline-block;cursor:pointer;width:16px;height:16px;margin-right:-5px;text-align:center;outline:0}.devui-breadcrumb-down-icon:hover svg g polygon{fill:#252b3a}.devui-breadcrumb-item-active{color:#252b3a}.devui-breadcrumb-item-active ::ng-deep a{color:#252b3a;text-decoration:none}.devui-breadcrumb-item-active svg g polygon{fill:#252b3a}.devui-breadcrumb-item-active span{color:#252b3a}.devui-breadcrumb-separator{margin:0 3px}.devui-breadcrumb-dropdown-menu{padding:10px 0;max-width:200px}.devui-breadcrumb-dropdown-menu li{padding:0 15px;font-size:12px;line-height:36px;width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.devui-breadcrumb-dropdown-menu li a{color:#252b3a;line-height:36px;width:170px;display:inline-block}.devui-breadcrumb-dropdown-menu li a:focus{text-decoration:none}.devui-breadcrumb-dropdown-menu li:hover{background:#f2f5fc}.devui-breadcrumb-dropdown-menu li:hover a{text-decoration:none}.devui-search-container{padding:10px 15px;max-width:200px}"]
}] }
];
/** @nocollapse */
BreadCrumbItemComponent.ctorParameters = () => [
{ type: BreadCrumbComponent },
{ type: BreadCrumbService }
];
BreadCrumbItemComponent.propDecorators = {
showMenu: [{ type: Input }],
customMenuTemplate: [{ type: Input }],
menuList: [{ type: Input }],
isSearch: [{ type: Input }],
toggleEvent: [{ type: Output }]
};
if (false) {
/** @type {?} */
BreadCrumbItemComponent.prototype.showMenu;
/** @type {?} */
BreadCrumbItemComponent.prototype.customMenuTemplate;
/** @type {?} */
BreadCrumbItemComponent.prototype.menuList;
/** @type {?} */
BreadCrumbItemComponent.prototype.isSearch;
/** @type {?} */
BreadCrumbItemComponent.prototype.toggleEvent;
/** @type {?} */
BreadCrumbItemComponent.prototype.menuListDisplay;
/** @type {?} */
BreadCrumbItemComponent.prototype.isOpen;
/** @type {?} */
BreadCrumbItemComponent.prototype.breadCrumbComponent;
/**
* @type {?}
* @private
*/
BreadCrumbItemComponent.prototype.breadCrumbService;
}
/**
* @fileoverview added by tsickle
* Generated from: breadcrumb.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class BreadcrumbModule {
}
BreadcrumbModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, RouterModule, DropDownModule, SearchModule],
exports: [BreadCrumbComponent, BreadCrumbItemComponent],
declarations: [BreadCrumbComponent, BreadCrumbItemComponent],
providers: [BreadCrumbService],
},] }
];
/**
* @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-breadcrumb.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { BreadCrumbComponent, BreadCrumbItemComponent, BreadCrumbService, BreadcrumbModule };
//# sourceMappingURL=ng-devui-breadcrumb.js.map