ng-devui
Version:
DevUI components based on Angular
325 lines (320 loc) • 31.9 kB
JavaScript
import * as i2 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, ElementRef, Component, Inject, Input, ViewChild, ViewChildren, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/router';
import { scrollAnimate } from 'ng-devui/utils';
import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
import * as i3 from '@angular/cdk/drag-drop';
import { DragDropModule } from '@angular/cdk/drag-drop';
import * as i4 from 'ng-devui/tooltip';
import { TooltipModule } from 'ng-devui/tooltip';
import * as i5 from 'ng-devui/icon';
import { IconModule } from 'ng-devui/icon';
import { ButtonModule } from 'ng-devui/button';
const DEFAULT_OPTIONS = {
top: '30%',
left: '80%',
zIndex: 1,
};
class NavSpriteComponent {
get baseUrl() {
if (typeof window === 'undefined') {
return '';
}
return window.location.href.replace(window.location.hash, '');
}
constructor(render, element, router, activeRout, render2, cdr, doc) {
this.render = render;
this.element = element;
this.router = router;
this.activeRout = activeRout;
this.render2 = render2;
this.cdr = cdr;
this.doc = doc;
this.view = { top: 0, bottom: 0 }; // 矫正参数
this.hashSupport = false; // 支持锚点
this.mode = 'default'; // 模式
this.maxLevel = 3; // 最大层级
this.indent = 2; // 缩进
this.width = 300; // 高度
this.height = 400; // 高度
this.isOpen = true; // sprite模式下的初始状态
this.afterNavInit = new EventEmitter(); // 组件初始化后返回组件实例
this.menus = [];
this.activeIndex = -1;
this.isToViewByNav = false; // 区分是页面滚动还是点击目录事件
this.itemsInit = false;
this.isDragging = false;
this.timeGap = 60;
this.throttleTimeGap = 300;
this.document = this.doc;
}
ngOnInit() {
this.currentTemp = this.mode === 'default' ? this.defaultTemp : this.spriteTemp; // 设置当前的模式
this.navItemTemplate = this.navItemTemplate || this.defaultNavItemTemplate; // 设置当前的目录模板
this.targetContainer = this.scrollTarget || this.target;
}
ngAfterViewInit() {
setTimeout(() => {
const container = this.targetContainer === this.document.documentElement ? window : this.targetContainer;
this.scrollSub = fromEvent(container, 'scroll')
.pipe(throttleTime(this.throttleTimeGap))
.subscribe(() => {
this.scrollEventHandler();
});
this.itemsSub = this.items.changes.subscribe((items) => {
if (!this.itemsInit) {
this.itemsInit = true;
this.setActiveMenu();
}
});
this.initStyles();
}, 0);
}
setActiveIndex() {
if (this.hashSupport && this.activeRout.snapshot.fragment) {
this.activeIndex = this.menus.findIndex((menu) => {
return menu.label === this.activeRout.snapshot.fragment;
});
this.isToViewByNav = true;
scrollAnimate(this.targetContainer, this.targetContainer.scrollTop, this.menus[this.activeIndex]?.scrollPosition?.startLine + 1, undefined, undefined, () => {
setTimeout(() => {
this.isToViewByNav = false;
}, 160);
});
}
else {
this.activeIndex = this.menus.findIndex((i) => {
const scrollTop = this.targetContainer.scrollTop;
return scrollTop < i?.scrollPosition.top;
});
}
this.cdr.detectChanges();
}
getNavData(setActive = true) {
const search = [];
for (let i = 0; i < this.maxLevel; i++) {
search.push(`h${i + 1}`);
}
this.contents = Array.from(this.target.querySelectorAll(search.join(',')));
this.menus = this.contents.map((i) => {
return {
originEle: i,
level: i.tagName.match(/\d+/)[0],
label: i.innerText,
href: this.baseUrl + '#' + i.innerText,
element: i,
scrollPosition: this.getScrollPosition(i),
};
});
if (setActive) {
this.setActiveIndex();
}
}
// 设定目录范围
getScrollPosition(ele) {
const containerTop = Math.max(this.targetContainer.getBoundingClientRect().top, 0);
const containerScrollTop = this.targetContainer.scrollTop;
const top = ele.getBoundingClientRect().bottom - containerTop + containerScrollTop - this.view.top + this.view.bottom;
const startLine = ele.getBoundingClientRect().top - containerTop + containerScrollTop - this.view.top + this.view.bottom;
return { top, startLine };
}
// 监听页面滚动
scrollEventHandler() {
if (!this.isToViewByNav) {
const scrollTop = this.targetContainer.scrollTop;
const index = this.menus.findIndex((ele, i) => {
if (this.menus[i + 1]) {
this.menus[i + 1].scrollPosition = this.getScrollPosition(this.menus[i + 1].element);
return scrollTop >= ele.scrollPosition.startLine && scrollTop < this.menus[i + 1]?.scrollPosition.startLine;
}
else {
return false;
}
});
if (index !== -1 && this.activeIndex !== index) {
this.activeIndex = index;
this.menuScrollToTarget();
}
}
}
menuScrollToTarget() {
const item = this.items.toArray()[this.activeIndex];
const menuContainer = this.element.nativeElement.querySelector('.devui-nav-sprite-menus');
const start = menuContainer?.scrollTop;
const end = item?.nativeElement?.getBoundingClientRect().top + start - menuContainer?.getBoundingClientRect().top;
scrollAnimate(menuContainer, start, end, undefined, undefined, () => {
if (this.hashSupport) {
this.setUrlHash();
}
});
}
setActiveMenu() {
const item = this.items.toArray()[this.activeIndex];
const menuContainer = this.element.nativeElement.querySelector('.devui-nav-sprite-menus');
const top = item?.nativeElement.getBoundingClientRect().top - menuContainer.getBoundingClientRect().top;
scrollAnimate(menuContainer, menuContainer.scrollTop, top, undefined, undefined);
}
initStyles() {
if (this.mode === 'sprite') {
const content = this.element.nativeElement.querySelector('.devui-nav-sprite-content');
const spriteOptions = { ...DEFAULT_OPTIONS, ...this.spriteOption };
this.render.addClass(content, 'devui-is-sprite');
this.render.setStyle(content, 'position', 'fixed');
this.render.setStyle(content, 'top', spriteOptions.top);
this.render.setStyle(content, 'left', spriteOptions.left);
this.render.setStyle(content, 'z-index', spriteOptions.zIndex);
this.render.setStyle(content, 'height', this.height + 'px');
this.render.setStyle(content, 'width', this.width + 'px');
}
this.render.setStyle(this.element.nativeElement, 'height', this.height + 'px');
this.render.setStyle(this.element.nativeElement, 'width', this.width + 'px');
this.afterNavInit.emit(this);
}
// 设置hash
setUrlHash() {
const activeMenu = this.menus[this.activeIndex];
this.router.navigate([], { fragment: activeMenu.label, replaceUrl: true });
}
// addClass
setTargetActive() {
const target = this.menus[this.activeIndex];
this.menus.forEach((i) => {
if (i.originEle) {
this.render2.removeClass(i.originEle, 'nav-active');
}
});
this.render2.addClass(target?.originEle, 'nav-active');
}
navTo(index) {
if (this.activeIndex !== index) {
this.activeIndex = index;
const target = this.menus[index];
target.scrollPosition = this.getScrollPosition(target.element);
scrollAnimate(this.targetContainer, this.targetContainer.scrollTop, target?.scrollPosition.startLine + 1, undefined, undefined, () => {
this.setUrlHash();
this.setTargetActive();
setTimeout(() => {
this.isToViewByNav = false;
}, this.timeGap);
});
this.isToViewByNav = true;
}
}
cdkDragStarted() {
this.isDragging = true;
}
cdkDragEnded() {
setTimeout(() => {
this.isDragging = false;
}, 100);
}
hide() {
this.isOpen = false;
}
open() {
if (this.isDragging) {
return;
}
this.isOpen = true;
}
constrainPosition(userPointerPosition, dragRef, dimensions, pickupPositionInElement) {
const point = {
x: userPointerPosition.x - pickupPositionInElement.x,
y: userPointerPosition.y - pickupPositionInElement.y,
};
if (point.y < 0) {
point.y = 0;
}
if (point.x < 0) {
point.x = 0;
}
if (point.x > window.innerWidth - dimensions.width) {
point.x = window.innerWidth - dimensions.width;
}
if (point.y > window.innerHeight - dimensions.height) {
point.y = window.innerHeight - dimensions.height;
}
return point;
}
ngOnDestroy() {
if (this.scrollSub) {
this.scrollSub.unsubscribe();
}
if (this.mouseenterSub) {
this.mouseenterSub.unsubscribe();
}
if (this.itemsSub) {
this.itemsSub.unsubscribe();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavSpriteComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavSpriteComponent, selector: "d-nav-sprite", inputs: { target: "target", scrollTarget: "scrollTarget", view: "view", hashSupport: "hashSupport", mode: "mode", maxLevel: "maxLevel", title: "title", indent: "indent", width: "width", height: "height", isOpen: "isOpen", spriteOption: "spriteOption", navItemTemplate: "navItemTemplate" }, outputs: { afterNavInit: "afterNavInit" }, viewQueries: [{ propertyName: "spriteTemp", first: true, predicate: ["spriteTemp"], descendants: true, static: true }, { propertyName: "defaultTemp", first: true, predicate: ["defaultTemp"], descendants: true, static: true }, { propertyName: "defaultNavItemTemplate", first: true, predicate: ["defaultNavItemTemplate"], descendants: true, static: true }, { propertyName: "items", predicate: ["items"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"currentTemp\"></ng-container>\r\n\r\n<!-- \u7CBE\u7075\u6A21\u5F0F\u6A21\u677F -->\r\n<ng-template #spriteTemp>\r\n <div\r\n class=\"devui-nav-sprite-content\"\r\n cdkDrag\r\n [ngClass]=\"{ 'is-min': !isOpen }\"\r\n (cdkDragStarted)=\"cdkDragStarted()\"\r\n (cdkDragEnded)=\"cdkDragEnded()\"\r\n [cdkDragConstrainPosition]=\"constrainPosition\"\r\n >\r\n <ng-container *ngIf=\"isOpen; else minTemp\">\r\n <div class=\"devui-nav-sprite-header\" *ngIf=\"title !== undefined\" [ngClass]=\"{ 'devui-nav-sprite-header-with-title': title }\">\r\n <div class=\"devui-nav-sprite-header-title\" title=\"{{ title }}\">{{ title }}</div>\r\n <d-icon [icon]=\"closeTemplate\" [operable]=\"true\" (click)=\"hide()\"></d-icon>\r\n <ng-template #closeTemplate>\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=\"M14.6887175,1.25368865 C15.0770801,1.64205125 15.0121881,2.34244569 14.544513,2.81012074 L9.383,7.971 L14.544513,13.1322854 C14.9787827,13.5665551 15.0657548,14.2014859 14.7650189,14.6009195 L14.6887175,14.6887175 C14.3003549,15.0770801 13.5999604,15.0121881 13.1322854,14.544513 L13.1322854,14.544513 L7.971,9.383 L2.81012075,14.544513 C2.3424457,15.0121881 1.64205125,15.0770801 1.25368865,14.6887175 C0.865326051,14.3003549 0.930218063,13.5999605 1.39789313,13.1322854 L6.558,7.971 L1.39789311,2.81012074 C0.963623424,2.37585105 0.876651354,1.74092026 1.17738727,1.34148668 L1.25368865,1.25368865 C1.64205125,0.865326051 2.34244569,0.930218063 2.81012074,1.39789311 L2.81012074,1.39789311 L7.971,6.558 L13.1322854,1.39789311 C13.5999605,0.930218063 14.3003549,0.865326051 14.6887175,1.25368865 Z\"\r\n id=\"close-icon\"\r\n fill=\"#8A8E99\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </ng-template>\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"defaultItemsTemp\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- \u9ED8\u8BA4\u6A21\u677F -->\r\n<ng-template #defaultTemp>\r\n <div class=\"devui-nav-sprite-content\">\r\n <div *ngIf=\"title !== undefined\" class=\"devui-nav-sprite-header\" [ngClass]=\"{ 'devui-nav-sprite-header-with-title': title }\">\r\n {{ title }}\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"defaultItemsTemp\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- \u76EE\u5F55\u5185\u5BB9\u6A21\u677F -->\r\n<ng-template #defaultItemsTemp let-data>\r\n <ul class=\"devui-nav-sprite-menus\" *ngIf=\"menus?.length\">\r\n <li\r\n #items\r\n *ngFor=\"let item of menus; let i = index\"\r\n [style]=\"'text-indent:' + indent * (item?.level - 1) + 'em;'\"\r\n [ngClass]=\"{ active: i === activeIndex }\"\r\n (click)=\"navTo(i)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"navItemTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<!-- \u7CBE\u7075\u6A21\u5F0F\u6700\u5C0F\u5316\u6A21\u677F -->\r\n<ng-template #minTemp>\r\n <div class=\"devui-sprite-min\" dTooltip [content]=\"title\" (click)=\"open()\">\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 id=\"frame_contract\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M10,6 L10,1 L12,1 L12,4 L15,4 L15,6 L10,6 Z M6,1 L6,6 L1,6 L1,4 L4,4 L4,1 L6,1 Z M10,15 L10,10 L15,10 L15,12 L12,12 L12,15 L10,15 Z M6,10 L6,15 L4,15 L4,12 L1,12 L1,10 L6,10 Z\"\r\n id=\"\u5F62\u72B6\"\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- \u5355\u4E2A\u76EE\u5F55\u6A21\u677F -->\r\n<ng-template #defaultNavItemTemplate let-item=\"item\">\r\n <div class=\"nav-item\" [title]=\"item?.label\">\r\n <a [href]=\"item.href\" *ngIf=\"hashSupport\">{{ item?.label }}</a>\r\n <span *ngIf=\"!hashSupport\">{{ item?.label }}</span>\r\n </div>\r\n</ng-template>\r\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-is-sprite{background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 12px 0) var(--devui-shadow, rgba(0, 0, 0, .16));cursor:move;padding:0 16px 16px;max-width:300px}.devui-is-sprite.is-min{display:flex;align-items:center;justify-content:center;width:40px!important;height:40px!important;border-radius:100%;padding:0}.devui-is-sprite.is-min:hover{background-color:var(--devui-brand, #0a59f7)}.devui-is-sprite.is-min:hover svg path{fill:var(--devui-light-text, #ffffff)}.devui-is-sprite.is-min svg{display:block;cursor:pointer}.devui-is-sprite.is-min svg path{fill:var(--devui-text, #191919)}.devui-is-sprite .devui-nav-sprite-menus{width:100%;height:100%;max-height:240px}.devui-nav-sprite-content{width:100%;height:100%;padding:0 12px 16px}.devui-nav-sprite-content .devui-nav-sprite-header{display:flex;align-items:center;justify-content:space-between;width:100%;color:var(--devui-text, #191919);height:32px;line-height:32px;font-weight:700;font-size:var(--devui-font-size-card-title, 14px)}.devui-nav-sprite-content .devui-nav-sprite-header.devui-nav-sprite-header-with-title{border-bottom:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-nav-sprite-content .devui-nav-sprite-header .devui-nav-sprite-header-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devui-nav-sprite-content .devui-nav-sprite-header .devui-nav-spiri-close{cursor:pointer}.devui-nav-sprite-menus{margin-top:10px;overflow-y:hidden;height:calc(100% - 80px)}.devui-nav-sprite-menus:hover{overflow-y:auto}.devui-nav-sprite-menus>li{list-style:none;cursor:pointer;height:30px;line-height:30px;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #191919);position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.devui-nav-sprite-menus>li a{color:var(--devui-text, #191919)}.devui-nav-sprite-menus>li.active{color:var(--devui-link, #0950de)}.devui-nav-sprite-menus>li.active a{color:var(--devui-link, #0950de)}.devui-nav-sprite-menus>li.active a:not(.open){font-weight:600}.devui-nav-sprite-menus>li.active:not(.open){font-weight:600}.devui-nav-sprite-menus>li:not(.disabled):hover{color:var(--devui-link, #0950de)}.devui-nav-sprite-menus>li .nav-item a:hover,.devui-nav-sprite-menus>li .nav-item span:hover{color:var(--devui-link, #0950de)}.devui-no-data{line-height:32px;color:var(--devui-text, #191919)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.TooltipDirective, selector: "[dTooltip]", inputs: ["content", "position", "showAnimation", "showAnimate", "mouseEnterDelay", "mouseLeaveDelay"], exportAs: ["dTooltip"] }, { kind: "component", type: i5.IconComponent, selector: "d-icon", inputs: ["icon", "operable", "disabled", "rotate", "color"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavSpriteComponent, decorators: [{
type: Component,
args: [{ selector: 'd-nav-sprite', template: "<ng-container [ngTemplateOutlet]=\"currentTemp\"></ng-container>\r\n\r\n<!-- \u7CBE\u7075\u6A21\u5F0F\u6A21\u677F -->\r\n<ng-template #spriteTemp>\r\n <div\r\n class=\"devui-nav-sprite-content\"\r\n cdkDrag\r\n [ngClass]=\"{ 'is-min': !isOpen }\"\r\n (cdkDragStarted)=\"cdkDragStarted()\"\r\n (cdkDragEnded)=\"cdkDragEnded()\"\r\n [cdkDragConstrainPosition]=\"constrainPosition\"\r\n >\r\n <ng-container *ngIf=\"isOpen; else minTemp\">\r\n <div class=\"devui-nav-sprite-header\" *ngIf=\"title !== undefined\" [ngClass]=\"{ 'devui-nav-sprite-header-with-title': title }\">\r\n <div class=\"devui-nav-sprite-header-title\" title=\"{{ title }}\">{{ title }}</div>\r\n <d-icon [icon]=\"closeTemplate\" [operable]=\"true\" (click)=\"hide()\"></d-icon>\r\n <ng-template #closeTemplate>\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=\"M14.6887175,1.25368865 C15.0770801,1.64205125 15.0121881,2.34244569 14.544513,2.81012074 L9.383,7.971 L14.544513,13.1322854 C14.9787827,13.5665551 15.0657548,14.2014859 14.7650189,14.6009195 L14.6887175,14.6887175 C14.3003549,15.0770801 13.5999604,15.0121881 13.1322854,14.544513 L13.1322854,14.544513 L7.971,9.383 L2.81012075,14.544513 C2.3424457,15.0121881 1.64205125,15.0770801 1.25368865,14.6887175 C0.865326051,14.3003549 0.930218063,13.5999605 1.39789313,13.1322854 L6.558,7.971 L1.39789311,2.81012074 C0.963623424,2.37585105 0.876651354,1.74092026 1.17738727,1.34148668 L1.25368865,1.25368865 C1.64205125,0.865326051 2.34244569,0.930218063 2.81012074,1.39789311 L2.81012074,1.39789311 L7.971,6.558 L13.1322854,1.39789311 C13.5999605,0.930218063 14.3003549,0.865326051 14.6887175,1.25368865 Z\"\r\n id=\"close-icon\"\r\n fill=\"#8A8E99\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </ng-template>\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"defaultItemsTemp\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- \u9ED8\u8BA4\u6A21\u677F -->\r\n<ng-template #defaultTemp>\r\n <div class=\"devui-nav-sprite-content\">\r\n <div *ngIf=\"title !== undefined\" class=\"devui-nav-sprite-header\" [ngClass]=\"{ 'devui-nav-sprite-header-with-title': title }\">\r\n {{ title }}\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"defaultItemsTemp\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- \u76EE\u5F55\u5185\u5BB9\u6A21\u677F -->\r\n<ng-template #defaultItemsTemp let-data>\r\n <ul class=\"devui-nav-sprite-menus\" *ngIf=\"menus?.length\">\r\n <li\r\n #items\r\n *ngFor=\"let item of menus; let i = index\"\r\n [style]=\"'text-indent:' + indent * (item?.level - 1) + 'em;'\"\r\n [ngClass]=\"{ active: i === activeIndex }\"\r\n (click)=\"navTo(i)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"navItemTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<!-- \u7CBE\u7075\u6A21\u5F0F\u6700\u5C0F\u5316\u6A21\u677F -->\r\n<ng-template #minTemp>\r\n <div class=\"devui-sprite-min\" dTooltip [content]=\"title\" (click)=\"open()\">\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 id=\"frame_contract\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M10,6 L10,1 L12,1 L12,4 L15,4 L15,6 L10,6 Z M6,1 L6,6 L1,6 L1,4 L4,4 L4,1 L6,1 Z M10,15 L10,10 L15,10 L15,12 L12,12 L12,15 L10,15 Z M6,10 L6,15 L4,15 L4,12 L1,12 L1,10 L6,10 Z\"\r\n id=\"\u5F62\u72B6\"\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- \u5355\u4E2A\u76EE\u5F55\u6A21\u677F -->\r\n<ng-template #defaultNavItemTemplate let-item=\"item\">\r\n <div class=\"nav-item\" [title]=\"item?.label\">\r\n <a [href]=\"item.href\" *ngIf=\"hashSupport\">{{ item?.label }}</a>\r\n <span *ngIf=\"!hashSupport\">{{ item?.label }}</span>\r\n </div>\r\n</ng-template>\r\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-is-sprite{background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 12px 0) var(--devui-shadow, rgba(0, 0, 0, .16));cursor:move;padding:0 16px 16px;max-width:300px}.devui-is-sprite.is-min{display:flex;align-items:center;justify-content:center;width:40px!important;height:40px!important;border-radius:100%;padding:0}.devui-is-sprite.is-min:hover{background-color:var(--devui-brand, #0a59f7)}.devui-is-sprite.is-min:hover svg path{fill:var(--devui-light-text, #ffffff)}.devui-is-sprite.is-min svg{display:block;cursor:pointer}.devui-is-sprite.is-min svg path{fill:var(--devui-text, #191919)}.devui-is-sprite .devui-nav-sprite-menus{width:100%;height:100%;max-height:240px}.devui-nav-sprite-content{width:100%;height:100%;padding:0 12px 16px}.devui-nav-sprite-content .devui-nav-sprite-header{display:flex;align-items:center;justify-content:space-between;width:100%;color:var(--devui-text, #191919);height:32px;line-height:32px;font-weight:700;font-size:var(--devui-font-size-card-title, 14px)}.devui-nav-sprite-content .devui-nav-sprite-header.devui-nav-sprite-header-with-title{border-bottom:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-nav-sprite-content .devui-nav-sprite-header .devui-nav-sprite-header-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devui-nav-sprite-content .devui-nav-sprite-header .devui-nav-spiri-close{cursor:pointer}.devui-nav-sprite-menus{margin-top:10px;overflow-y:hidden;height:calc(100% - 80px)}.devui-nav-sprite-menus:hover{overflow-y:auto}.devui-nav-sprite-menus>li{list-style:none;cursor:pointer;height:30px;line-height:30px;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #191919);position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.devui-nav-sprite-menus>li a{color:var(--devui-text, #191919)}.devui-nav-sprite-menus>li.active{color:var(--devui-link, #0950de)}.devui-nav-sprite-menus>li.active a{color:var(--devui-link, #0950de)}.devui-nav-sprite-menus>li.active a:not(.open){font-weight:600}.devui-nav-sprite-menus>li.active:not(.open){font-weight:600}.devui-nav-sprite-menus>li:not(.disabled):hover{color:var(--devui-link, #0950de)}.devui-nav-sprite-menus>li .nav-item a:hover,.devui-nav-sprite-menus>li .nav-item span:hover{color:var(--devui-link, #0950de)}.devui-no-data{line-height:32px;color:var(--devui-text, #191919)}\n"] }]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { target: [{
type: Input
}], scrollTarget: [{
type: Input
}], view: [{
type: Input
}], hashSupport: [{
type: Input
}], mode: [{
type: Input
}], maxLevel: [{
type: Input
}], title: [{
type: Input
}], indent: [{
type: Input
}], width: [{
type: Input
}], height: [{
type: Input
}], isOpen: [{
type: Input
}], spriteOption: [{
type: Input
}], navItemTemplate: [{
type: Input
}], spriteTemp: [{
type: ViewChild,
args: ['spriteTemp', { static: true }]
}], defaultTemp: [{
type: ViewChild,
args: ['defaultTemp', { static: true }]
}], defaultNavItemTemplate: [{
type: ViewChild,
args: ['defaultNavItemTemplate', { static: true }]
}], items: [{
type: ViewChildren,
args: ['items', { read: ElementRef }]
}], afterNavInit: [{
type: Output
}] } });
class NavSpriteModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavSpriteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NavSpriteModule, declarations: [NavSpriteComponent], imports: [CommonModule, DragDropModule, ButtonModule, TooltipModule, IconModule], exports: [NavSpriteComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavSpriteModule, imports: [CommonModule, DragDropModule, ButtonModule, TooltipModule, IconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavSpriteModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, DragDropModule, ButtonModule, TooltipModule, IconModule],
declarations: [NavSpriteComponent],
exports: [NavSpriteComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NavSpriteComponent, NavSpriteModule };
//# sourceMappingURL=ng-devui-nav-sprite.mjs.map