@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
101 lines • 11.6 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: breadcrumb-item/breadcrumb-item.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { ChangeDetectionStrategy, Component, Input, TemplateRef, Output, EventEmitter } from '@angular/core';
import { BreadCrumbComponent } from '../breadcrumb.component';
import { BreadCrumbService } from '../breadcrumb.service';
export 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;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25nLWRldnVpL2JyZWFkY3J1bWIvIiwic291cmNlcyI6WyJicmVhZGNydW1iLWl0ZW0vYnJlYWRjcnVtYi1pdGVtLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUVBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBVSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3JILE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRTlELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBVzFELE1BQU0sT0FBTyx1QkFBdUI7Ozs7O0lBWWhDLFlBQW1CLG1CQUF3QyxFQUFVLGlCQUFvQztRQUF0Rix3QkFBbUIsR0FBbkIsbUJBQW1CLENBQXFCO1FBQVUsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQVRoRyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR2pCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDaEIsZ0JBQVcsR0FBc0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQUsrQyxDQUFDOzs7O0lBQzlHLFFBQVE7UUFDSixJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDekMsQ0FBQzs7Ozs7SUFDRCxRQUFRLENBQUMsTUFBTTtRQUNYLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ2xDLENBQUM7Ozs7O0lBQ0QsV0FBVyxDQUFDLE1BQU07UUFDZCxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDZixJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTTs7OztZQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLFdBQVcsRUFBRSxDQUFDLEVBQUMsQ0FBQztTQUMvRztJQUNMLENBQUM7Ozs7OztJQUNELFVBQVUsQ0FBQyxNQUFNLEVBQUUsSUFBSTtRQUNuQixJQUFJLENBQUMsaUJBQWlCLENBQUMsVUFBVSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsQ0FBQztJQUNwRCxDQUFDOzs7WUFuQ0osU0FBUyxTQUFDO2dCQUNQLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2dCQUMvQyxRQUFRLEVBQUUsbUJBQW1CO2dCQUM3QixRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQiw2eUZBQStDOzthQUdsRDs7OztZQVpRLG1CQUFtQjtZQUVuQixpQkFBaUI7Ozt1QkFjckIsS0FBSztpQ0FDTCxLQUFLO3VCQUNMLEtBQUs7dUJBQ0wsS0FBSzswQkFDTCxNQUFNOzs7O0lBSlAsMkNBQTBCOztJQUMxQixxREFBOEM7O0lBQzlDLDJDQUFxQzs7SUFDckMsMkNBQTBCOztJQUMxQiw4Q0FBOEQ7O0lBRTlELGtEQUFtQzs7SUFDbkMseUNBQWdCOztJQUVKLHNEQUErQzs7Ozs7SUFBRSxvREFBNEMiLCJzb3VyY2VzQ29udGVudCI6WyJcclxuXHJcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0LCBUZW1wbGF0ZVJlZiwgT25Jbml0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBCcmVhZENydW1iQ29tcG9uZW50IH0gZnJvbSAnLi4vYnJlYWRjcnVtYi5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBNZW51Q29uZmlnIH0gZnJvbSAnLi4vYnJlYWRjcnVtYi50eXBlJztcclxuaW1wb3J0IHsgQnJlYWRDcnVtYlNlcnZpY2UgfSBmcm9tICcuLi9icmVhZGNydW1iLnNlcnZpY2UnO1xyXG5cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbiAgICBzZWxlY3RvcjogJ2QtYnJlYWRjcnVtYi1pdGVtJyxcclxuICAgIGV4cG9ydEFzOiAnZEJyZWFkY3J1bWJJdGVtJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9icmVhZGNydW1iLWl0ZW0uY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vYnJlYWRjcnVtYi1pdGVtLmNvbXBvbmVudC5zY3NzJ11cclxuXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBCcmVhZENydW1iSXRlbUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG5cclxuICAgIEBJbnB1dCgpIHNob3dNZW51ID0gZmFsc2U7XHJcbiAgICBASW5wdXQoKSBjdXN0b21NZW51VGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XHJcbiAgICBASW5wdXQoKSBtZW51TGlzdDogQXJyYXk8TWVudUNvbmZpZz47XHJcbiAgICBASW5wdXQoKSBpc1NlYXJjaCA9IGZhbHNlO1xyXG4gICAgQE91dHB1dCgpIHRvZ2dsZUV2ZW50OiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgICBtZW51TGlzdERpc3BsYXk6IEFycmF5PE1lbnVDb25maWc+O1xyXG4gICAgaXNPcGVuOiBib29sZWFuO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKHB1YmxpYyBicmVhZENydW1iQ29tcG9uZW50OiBCcmVhZENydW1iQ29tcG9uZW50LCBwcml2YXRlIGJyZWFkQ3J1bWJTZXJ2aWNlOiBCcmVhZENydW1iU2VydmljZSkgeyB9XHJcbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLm1lbnVMaXN0RGlzcGxheSA9IHRoaXMubWVudUxpc3Q7XHJcbiAgICB9XHJcbiAgICBvblRvZ2dsZSgkZXZlbnQpIHtcclxuICAgICAgICB0aGlzLmlzT3BlbiA9ICRldmVudDtcclxuICAgICAgICB0aGlzLnRvZ2dsZUV2ZW50LmVtaXQoJGV2ZW50KTtcclxuICAgIH1cclxuICAgIHNlYXJjaEV2ZW50KCRldmVudCkge1xyXG4gICAgICAgIGlmICh0aGlzLm1lbnVMaXN0KSB7XHJcbiAgICAgICAgICAgIHRoaXMubWVudUxpc3REaXNwbGF5ID0gdGhpcy5tZW51TGlzdC5maWx0ZXIoaXRlbSA9PiBpdGVtLm5hbWUudG9Mb3dlckNhc2UoKS5pbmNsdWRlcygkZXZlbnQudG9Mb3dlckNhc2UoKSkpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuICAgIG5hdmlnYXRlVG8oJGV2ZW50LCBpdGVtKSB7XHJcbiAgICAgICAgdGhpcy5icmVhZENydW1iU2VydmljZS5uYXZpZ2F0ZVRvKCRldmVudCwgaXRlbSk7XHJcbiAgICB9XHJcbn1cclxuIl19