@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 7.96 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/common"),require("@angular/core"),require("@angular/router"),require("ng-devui/dropdown"),require("ng-devui/search")):"function"==typeof define&&define.amd?define("ng-devui/breadcrumb",["exports","@angular/common","@angular/core","@angular/router","ng-devui/dropdown","ng-devui/search"],n):n(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"].breadcrumb={}),e.ng.common,e.ng.core,e.ng.router,e["ng-devui"].dropdown,e["ng-devui"].search)}(this,(function(e,n,r,t,o,i){"use strict";var a=function(){function e(e){this.router=e}return e.prototype.navigateTo=function(e,n){0!==e.button||e.ctrlKey||e.metaKey||e.shiftKey||"string"==typeof n.target&&"_self"!==n.target||(e.preventDefault(),this.router.navigateByUrl(n.link))},e.decorators=[{type:r.Injectable}],e.ctorParameters=function(){return[{type:t.Router}]},e}();var u=function(){function e(e){this.breadCrumbService=e,this.source=[]}return e.prototype.navigateTo=function(e,n){this.breadCrumbService.navigateTo(e,n)},e.decorators=[{type:r.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}"]}]}],e.ctorParameters=function(){return[{type:a}]},e.propDecorators={separatorIcon:[{type:r.Input}],source:[{type:r.Input}]},e}();var d=function(){function e(e,n){this.breadCrumbComponent=e,this.breadCrumbService=n,this.showMenu=!1,this.isSearch=!1,this.toggleEvent=new r.EventEmitter}return e.prototype.ngOnInit=function(){this.menuListDisplay=this.menuList},e.prototype.onToggle=function(e){this.isOpen=e,this.toggleEvent.emit(e)},e.prototype.searchEvent=function(e){this.menuList&&(this.menuListDisplay=this.menuList.filter((function(n){return n.name.toLowerCase().includes(e.toLowerCase())})))},e.prototype.navigateTo=function(e,n){this.breadCrumbService.navigateTo(e,n)},e.decorators=[{type:r.Component,args:[{changeDetection:r.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}"]}]}],e.ctorParameters=function(){return[{type:u},{type:a}]},e.propDecorators={showMenu:[{type:r.Input}],customMenuTemplate:[{type:r.Input}],menuList:[{type:r.Input}],isSearch:[{type:r.Input}],toggleEvent:[{type:r.Output}]},e}();var p=function(){function e(){}return e.decorators=[{type:r.NgModule,args:[{imports:[n.CommonModule,t.RouterModule,o.DropDownModule,i.SearchModule],exports:[u,d],declarations:[u,d],providers:[a]}]}],e}();e.BreadCrumbComponent=u,e.BreadCrumbItemComponent=d,e.BreadCrumbService=a,e.BreadcrumbModule=p,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-breadcrumb.umd.min.js.map