@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
115 lines • 12.3 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';
var BreadCrumbItemComponent = /** @class */ (function () {
function BreadCrumbItemComponent(breadCrumbComponent, breadCrumbService) {
this.breadCrumbComponent = breadCrumbComponent;
this.breadCrumbService = breadCrumbService;
this.showMenu = false;
this.isSearch = false;
this.toggleEvent = new EventEmitter();
}
/**
* @return {?}
*/
BreadCrumbItemComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.menuListDisplay = this.menuList;
};
/**
* @param {?} $event
* @return {?}
*/
BreadCrumbItemComponent.prototype.onToggle = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.isOpen = $event;
this.toggleEvent.emit($event);
};
/**
* @param {?} $event
* @return {?}
*/
BreadCrumbItemComponent.prototype.searchEvent = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
if (this.menuList) {
this.menuListDisplay = this.menuList.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.name.toLowerCase().includes($event.toLowerCase()); }));
}
};
/**
* @param {?} $event
* @param {?} item
* @return {?}
*/
BreadCrumbItemComponent.prototype.navigateTo = /**
* @param {?} $event
* @param {?} item
* @return {?}
*/
function ($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 = function () { return [
{ type: BreadCrumbComponent },
{ type: BreadCrumbService }
]; };
BreadCrumbItemComponent.propDecorators = {
showMenu: [{ type: Input }],
customMenuTemplate: [{ type: Input }],
menuList: [{ type: Input }],
isSearch: [{ type: Input }],
toggleEvent: [{ type: Output }]
};
return BreadCrumbItemComponent;
}());
export { BreadCrumbItemComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25nLWRldnVpL2JyZWFkY3J1bWIvIiwic291cmNlcyI6WyJicmVhZGNydW1iLWl0ZW0vYnJlYWRjcnVtYi1pdGVtLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUVBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBVSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3JILE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRTlELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBRzFEO0lBb0JJLGlDQUFtQixtQkFBd0MsRUFBVSxpQkFBb0M7UUFBdEYsd0JBQW1CLEdBQW5CLG1CQUFtQixDQUFxQjtRQUFVLHNCQUFpQixHQUFqQixpQkFBaUIsQ0FBbUI7UUFUaEcsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUdqQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2hCLGdCQUFXLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7SUFLK0MsQ0FBQzs7OztJQUM5RywwQ0FBUTs7O0lBQVI7UUFDSSxJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDekMsQ0FBQzs7Ozs7SUFDRCwwQ0FBUTs7OztJQUFSLFVBQVMsTUFBTTtRQUNYLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ2xDLENBQUM7Ozs7O0lBQ0QsNkNBQVc7Ozs7SUFBWCxVQUFZLE1BQU07UUFDZCxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDZixJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTTs7OztZQUFDLFVBQUEsSUFBSSxJQUFJLE9BQUEsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLFdBQVcsRUFBRSxDQUFDLEVBQXRELENBQXNELEVBQUMsQ0FBQztTQUMvRztJQUNMLENBQUM7Ozs7OztJQUNELDRDQUFVOzs7OztJQUFWLFVBQVcsTUFBTSxFQUFFLElBQUk7UUFDbkIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLFVBQVUsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDcEQsQ0FBQzs7Z0JBbkNKLFNBQVMsU0FBQztvQkFDUCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsUUFBUSxFQUFFLG1CQUFtQjtvQkFDN0IsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsNnlGQUErQzs7aUJBR2xEOzs7O2dCQVpRLG1CQUFtQjtnQkFFbkIsaUJBQWlCOzs7MkJBY3JCLEtBQUs7cUNBQ0wsS0FBSzsyQkFDTCxLQUFLOzJCQUNMLEtBQUs7OEJBQ0wsTUFBTTs7SUFxQlgsOEJBQUM7Q0FBQSxBQXBDRCxJQW9DQztTQTVCWSx1QkFBdUI7OztJQUdoQywyQ0FBMEI7O0lBQzFCLHFEQUE4Qzs7SUFDOUMsMkNBQXFDOztJQUNyQywyQ0FBMEI7O0lBQzFCLDhDQUE4RDs7SUFFOUQsa0RBQW1DOztJQUNuQyx5Q0FBZ0I7O0lBRUosc0RBQStDOzs7OztJQUFFLG9EQUE0QyIsInNvdXJjZXNDb250ZW50IjpbIlxyXG5cclxuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQsIFRlbXBsYXRlUmVmLCBPbkluaXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEJyZWFkQ3J1bWJDb21wb25lbnQgfSBmcm9tICcuLi9icmVhZGNydW1iLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IE1lbnVDb25maWcgfSBmcm9tICcuLi9icmVhZGNydW1iLnR5cGUnO1xyXG5pbXBvcnQgeyBCcmVhZENydW1iU2VydmljZSB9IGZyb20gJy4uL2JyZWFkY3J1bWIuc2VydmljZSc7XHJcblxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxuICAgIHNlbGVjdG9yOiAnZC1icmVhZGNydW1iLWl0ZW0nLFxyXG4gICAgZXhwb3J0QXM6ICdkQnJlYWRjcnVtYkl0ZW0nLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2JyZWFkY3J1bWItaXRlbS5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9icmVhZGNydW1iLWl0ZW0uY29tcG9uZW50LnNjc3MnXVxyXG5cclxufSlcclxuZXhwb3J0IGNsYXNzIEJyZWFkQ3J1bWJJdGVtQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcblxyXG4gICAgQElucHV0KCkgc2hvd01lbnUgPSBmYWxzZTtcclxuICAgIEBJbnB1dCgpIGN1c3RvbU1lbnVUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcclxuICAgIEBJbnB1dCgpIG1lbnVMaXN0OiBBcnJheTxNZW51Q29uZmlnPjtcclxuICAgIEBJbnB1dCgpIGlzU2VhcmNoID0gZmFsc2U7XHJcbiAgICBAT3V0cHV0KCkgdG9nZ2xlRXZlbnQ6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG5cclxuICAgIG1lbnVMaXN0RGlzcGxheTogQXJyYXk8TWVudUNvbmZpZz47XHJcbiAgICBpc09wZW46IGJvb2xlYW47XHJcblxyXG4gICAgY29uc3RydWN0b3IocHVibGljIGJyZWFkQ3J1bWJDb21wb25lbnQ6IEJyZWFkQ3J1bWJDb21wb25lbnQsIHByaXZhdGUgYnJlYWRDcnVtYlNlcnZpY2U6IEJyZWFkQ3J1bWJTZXJ2aWNlKSB7IH1cclxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMubWVudUxpc3REaXNwbGF5ID0gdGhpcy5tZW51TGlzdDtcclxuICAgIH1cclxuICAgIG9uVG9nZ2xlKCRldmVudCkge1xyXG4gICAgICAgIHRoaXMuaXNPcGVuID0gJGV2ZW50O1xyXG4gICAgICAgIHRoaXMudG9nZ2xlRXZlbnQuZW1pdCgkZXZlbnQpO1xyXG4gICAgfVxyXG4gICAgc2VhcmNoRXZlbnQoJGV2ZW50KSB7XHJcbiAgICAgICAgaWYgKHRoaXMubWVudUxpc3QpIHtcclxuICAgICAgICAgICAgdGhpcy5tZW51TGlzdERpc3BsYXkgPSB0aGlzLm1lbnVMaXN0LmZpbHRlcihpdGVtID0+IGl0ZW0ubmFtZS50b0xvd2VyQ2FzZSgpLmluY2x1ZGVzKCRldmVudC50b0xvd2VyQ2FzZSgpKSk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG4gICAgbmF2aWdhdGVUbygkZXZlbnQsIGl0ZW0pIHtcclxuICAgICAgICB0aGlzLmJyZWFkQ3J1bWJTZXJ2aWNlLm5hdmlnYXRlVG8oJGV2ZW50LCBpdGVtKTtcclxuICAgIH1cclxufVxyXG4iXX0=