ng-dap
Version:
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8.
855 lines (839 loc) • 39.5 kB
JavaScript
import { Component, Input, Output, EventEmitter, NgModule, Directive, TemplateRef, ViewContainerRef, Injectable, HostBinding, Renderer2, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
class NgTreeComponent {
constructor() {
/**
* 用于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作,设置此项会覆盖treeSetting.callback.beforeClick，
* 参数为当前点击节点
*/
this.beforeClick = new EventEmitter();
/**
* 用于捕获 勾选 或 取消勾选 之前的事件回调函数，并且根据返回值确定是否允许 勾选 或 取消勾选,设置此项会覆盖treeSetting.callback.beforeCheck，
* 参数为当前勾选 或 取消勾选的节点
*/
this.beforeCheck = new EventEmitter();
/**
* 用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作,设置此项会覆盖treeSetting.callback.beforeRemove，
* 参数为当前要删除的节点
*/
this.beforeRemove = new EventEmitter();
/**
* 用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作,设置此项会覆盖treeSetting.callback.beforeRename，
* 参数为当前要更名的节点
*/
this.beforeRename = new EventEmitter();
/**
* 用于捕获节点被点击的事件回调函数，设置此项会覆盖treeSetting.callback.onClick
*/
this.onClick = new EventEmitter();
/**
* 用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数，设置此项会覆盖treeSetting.callback.onCheck
*/
this.onCheck = new EventEmitter();
/**
* 用于捕获删除节点之后的事件回调函数。设置此项会覆盖treeSetting.callback.onRemove
*/
this.onRemove = new EventEmitter();
/**
* 用于捕获节点编辑名称结束之后的事件回调函数，设置此项会覆盖treeSetting.callback.onRename
*/
this.onRename = new EventEmitter();
/**
* 用于当鼠标移动到节点上时，点击用户自定义控件时触发的事件，参数为addHoverDom内的元素{key: string, value: string}
*/
this.onHoverDomClick = new EventEmitter();
this.hoverDomFunction = (treeId, treeNode) => {
if ($('#diyBtn_' + treeNode.tId).length > 0) {
return;
}
const hoverButton = $('#' + treeNode.tId + '_a');
const editStr = '<span class="dropdown button" id="diyBtn_' + treeNode.tId + '" title="操作"></span>';
hoverButton.append(editStr);
const btn = $('#diyBtn_' + treeNode.tId);
let dropDom = '<ul class="copy-movelist">';
for (let i = 0; i < this.addHoverDom.length; i++) {
dropDom += '<li id="' + this.addHoverDom[i].key + '">' + this.addHoverDom[i].value + '</li>';
}
dropDom += '</ul>';
if (btn) {
btn.on('click', () => {
btn.html(dropDom);
$('body').off('click').on('click', (ev) => {
if (!($(ev.target).hasClass('dropdown') || $(ev.target).parents('.dropdown').length > 0)) {
btn.empty();
}
});
btn.find('ul').on('click', (ev) => {
this.onHoverDomClick.emit(ev);
});
return false;
});
}
};
this.removeHoverDomFunction = (treeId, treeNode) => {
$('#diyBtn_' + treeNode.tId).unbind().remove();
};
}
/**
* 树数据，结构同ztree
*/
set treeNodes(value) {
this._treeNodes = value;
this.initTree();
}
get treeNodes() {
return this._treeNodes;
}
ngOnInit() {
const treeSetting = {};
if (this.checkAble !== undefined) {
treeSetting.check = {
enable: this.checkAble,
chkStyle: this.checkStyle ? this.checkStyle : 'checkbox'
};
}
if (this.simpleData) {
treeSetting.data = {
simpleData: this.simpleData
};
}
if (this.selectedMulti !== undefined) {
treeSetting.view = {
selectedMulti: this.selectedMulti
};
}
if (this.showIcon !== undefined) {
treeSetting.view = treeSetting.view ? treeSetting.view : {};
treeSetting.view.showIcon = this.showIcon;
}
if (this.showLine !== undefined) {
treeSetting.view = treeSetting.view ? treeSetting.view : {};
treeSetting.view.showLine = this.showLine;
}
if (this.dblClickExpand !== undefined) {
treeSetting.view = treeSetting.view ? treeSetting.view : {};
treeSetting.view.dblClickExpand = this.dblClickExpand;
}
if (this.addDiyDom && this.addDiyDom.length > 1) {
treeSetting.view = treeSetting.view ? treeSetting.view : {};
}
if (this.addHoverDom) {
treeSetting.view = treeSetting.view ? treeSetting.view : {};
treeSetting.view.addHoverDom = this.hoverDomFunction;
treeSetting.view.removeHoverDom = this.removeHoverDomFunction;
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.beforeClick)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.beforeClick = (treeId, node) => {
this.beforeClick.emit(node);
return true;
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.beforeCheck)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.beforeCheck = (treeId, node) => {
this.beforeCheck.emit(node);
return true;
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.beforeRemove)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.beforeRemove = (treeId, node) => {
this.beforeRemove.emit(node);
return true;
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.beforeRename)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.beforeRename = (treeId, node) => {
this.beforeRename.emit(node);
return true;
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.onClick)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.onClick = (event, treeId, node) => {
this.onClick.emit(node);
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.onCheck)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.onCheck = (event, treeId, node) => {
this.onCheck.emit(node);
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.onRemove)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.onRemove = (event, treeId, node) => {
this.onRemove.emit(node);
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.onRename)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.onRename = (event, treeId, node) => {
this.onRename.emit(node);
};
}
this.treeSetting = Object.assign({}, this.treeSetting, treeSetting);
// this.treeObject = $.fn.zTree.init($('#' + this.id), treeSetting, this.treeNodes);
}
ngAfterViewInit() {
this.treeObject = $.fn.zTree.init($('#' + this.id), this.treeSetting, this._treeNodes);
}
ngOnDestroy() {
this.treeObject.destroy();
}
getTreeObj() {
return this.treeObject;
}
initTree() {
if (this.treeObject) {
this.treeObject.destroy();
}
this.treeObject = $.fn.zTree.init($('#' + this.id), this.treeSetting, this._treeNodes);
}
}
NgTreeComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-tree',
template: "<div [id]=\"id\" class=\"ztree\" [class.hoverBar]=\"!!addHoverDom\"></div> ",
styles: [".ztree * { padding: 0; margin: 0; font-size: 12px; font-family: inherit; } .ztree { margin: 0; padding: 0; color: #333; font-size: 12px; } :host ::ng-deep .ztree li { padding: 0; margin: 0; list-style: none; line-height: 14px; text-align: left; white-space: nowrap; outline: 0; } :host ::ng-deep .ztree li ul { margin: 0; padding: 0 0 0 18px; } :host ::ng-deep .ztree li a { padding: 0; margin: 0; cursor: pointer; width: 100%; height: 30px; color: #333; background-color: transparent; text-decoration: none; vertical-align: top; display: inline-block; line-height: 30px; } :host ::ng-deep .ztree li a:hover { color: #000; } :host ::ng-deep .ztree li a.curSelectedNode span { color: #4c7daa; } :host ::ng-deep .ztree.hoverBar li a:hover:before { width: 100%; height: 30px; left: 0; position: absolute; content: ''; z-index: -1; background: #e4e4e4; } :host ::ng-deep .ztree.hoverBar li a.curSelectedNode:before { width: 100%; height: 30px; left: 0; position: absolute; content: ''; z-index: -1; background: #e4e4e4; } :host ::ng-deep .ztree.hoverBar li a.curSelectedNode span { color: #000; } :host ::ng-deep .ztree.hoverBar li a .dropdown { position: absolute; right: 0; width: 14px; height: 14px; margin-top: 8px; margin-right: 2px; background: url(assets/ng-tree/img/dropdown-hover.svg) no-repeat; } :host ::ng-deep .ztree.hoverBar li a .copy-movelist { position: absolute; z-index: 99999; right: 0; top: 18px; background-color: #fff; border: 1px solid #e5e5e5; box-shadow: 0 0 5px rgba(165, 165, 165, 0.1); padding: 0; } :host ::ng-deep .ztree.hoverBar li a .copy-movelist li { display: block; padding: 0 12px; font-weight: 400; cursor: pointer; height: 30px; line-height: 30px; text-align: center; } :host ::ng-deep .ztree.hoverBar li a .copy-movelist li:hover { background: #f5f5f5; } :host ::ng-deep .ztree .switch + a { width: calc(100% - 30px); } :host ::ng-deep .ztree .switch.chk + a { width: calc(100% - 60px); } :host ::ng-deep .ztree li a.curSelectedNode_Edit { padding-top: 0; background-color: #ffe6b0; color: black; height: 14px; border: 1px #ffb951 solid; opacity: 0.8; } :host ::ng-deep .ztree li a.tmpTargetNode_inner { padding-top: 0px; background-color: #316ac5; color: white; height: 14px; border: 1px #316ac5 solid; opacity: 0.8; filter: alpha(opacity=80); } :host ::ng-deep .ztree li a input.rename { height: 14px; width: 80px; padding: 0; margin: 0; font-size: 12px; border: 1px #7ec4cc solid; *border: 0px; } :host ::ng-deep .ztree li span { line-height: 14px; margin-right: 2px; } :host ::ng-deep .ztree li span.button { line-height: 0; margin: 0; width: 14px; height: 14px; display: inline-block; vertical-align: middle; border: 0 none; cursor: pointer; outline: none; background-color: transparent; background-repeat: no-repeat; background-attachment: scroll; } :host ::ng-deep .ztree li span.button.chk { width: 14px; height: 14px; margin: 8px 12px 0 0; cursor: auto; } :host ::ng-deep .ztree li span.button.chk.checkbox_false_full { background: url(assets/ng-tree/img/check-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_false_full_focus { background: url(assets/ng-tree/img/check-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_false_part { background: url(assets/ng-tree/img/check-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_false_part_focus { background: url(assets/ng-tree/img/check-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_false_disable { background: url(assets/ng-tree/img/check-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_true_full { background: url(assets/ng-tree/img/check-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_true_full_focus { background: url(assets/ng-tree/img/check-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_true_part { background: url(assets/ng-tree/img/check-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_true_part_focus { background: url(assets/ng-tree/img/check-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_true_disable { background: url(assets/ng-tree/img/check-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_false_full { background: url(assets/ng-tree/img/radio-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_false_full_focus { background: url(assets/ng-tree/img/radio-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_false_part { background: url(assets/ng-tree/img/radio-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_false_part_focus { background: url(assets/ng-tree/img/radio-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_false_disable { background: url(assets/ng-tree/img/radio-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_true_full { background: url(assets/ng-tree/img/radio-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_true_full_focus { background: url(assets/ng-tree/img/radio-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_true_part { background: url(assets/ng-tree/img/radio-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_true_part_focus { background: url(assets/ng-tree/img/radio-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_true_disable { background: url(assets/ng-tree/img/radio-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.switch { width: 14px; height: 14px; margin-top: 8px; margin-right: 4px; } :host ::ng-deep .ztree li span.button.root_open { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.root_close { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.roots_open { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.roots_close { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.center_open { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.center_close { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.bottom_open { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.bottom_close { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.noline_open { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.noline_close { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.root_docu { background: none; } :host ::ng-deep .ztree li span.button.roots_docu { background: url(assets/ng-tree/img/table.svg) no-repeat; } :host ::ng-deep .ztree li span.button.center_docu { background: none; } :host ::ng-deep .ztree li span.button.bottom_docu { background: none; } :host ::ng-deep .ztree li span.button.noline_docu { background: none; } :host ::ng-deep .ztree li span.button.ico_open { margin-top: 8px; margin-right: 12px; background: url(assets/ng-tree/img/08-14-14.svg) no-repeat; vertical-align: top; *vertical-align: middle; } :host ::ng-deep .ztree li span.button.ico_close { margin-top: 8px; margin-right: 12px; background: url(assets/ng-tree/img/08-14-14.svg) no-repeat; vertical-align: top; *vertical-align: middle; } :host ::ng-deep .ztree li span.button.ico_docu { margin-top: 8px; margin-right: 12px; background: url(assets/ng-tree/img/table.svg) no-repeat; vertical-align: top; *vertical-align: middle; } :host ::ng-deep .ztree li span.button.edit { margin-right: 2px; background-position: -110px -48px; vertical-align: top; *vertical-align: middle; } :host ::ng-deep .ztree li span.button.remove { margin-right: 2px; background-position: -110px -64px; vertical-align: top; *vertical-align: middle; } :host ::ng-deep .ztree li span.button.ico_loading { margin-right: 2px; /*background: url(./img/loading.gif) no-repeat scroll 0 0 transparent;*/ vertical-align: top; *vertical-align: middle; } :host ::ng-deep ul.tmpTargetzTree { background-color: #ffe6b0; opacity: 0.8; filter: alpha(opacity=80); } :host ::ng-deep span.tmpzTreeMove_arrow { width: 14px; height: 14px; display: inline-block; padding: 0; margin: 2px 0 0 1px; border: 0 none; position: absolute; background-color: transparent; background-repeat: no-repeat; background-attachment: scroll; background-position: -110px -80px; /*background-image: url(\"./img/zTreeStandard.png\");*/ /**background-image: url(\"./img/zTreeStandard.gif\")*/ } :host ::ng-deep ul.ztree.zTreeDragUL { margin: 0; padding: 0; position: absolute; width: auto; height: auto; overflow: hidden; background-color: #cfcfcf; border: 1px #00b83f dotted; opacity: 0.8; filter: alpha(opacity=80); } :host ::ng-deep .zTreeMask { z-index: 10000; background-color: #cfcfcf; opacity: 0.0; filter: alpha(opacity=0); position: absolute; } "]
},] },
];
/** @nocollapse */
NgTreeComponent.ctorParameters = () => [];
NgTreeComponent.propDecorators = {
id: [{ type: Input }],
treeNodes: [{ type: Input }],
treeSetting: [{ type: Input }],
checkAble: [{ type: Input }],
checkStyle: [{ type: Input }],
simpleData: [{ type: Input }],
selectedMulti: [{ type: Input }],
showIcon: [{ type: Input }],
showLine: [{ type: Input }],
addDiyDom: [{ type: Input }],
addHoverDom: [{ type: Input }],
dblClickExpand: [{ type: Input }],
beforeClick: [{ type: Output }],
beforeCheck: [{ type: Output }],
beforeRemove: [{ type: Output }],
beforeRename: [{ type: Output }],
onClick: [{ type: Output }],
onCheck: [{ type: Output }],
onRemove: [{ type: Output }],
onRename: [{ type: Output }],
onHoverDomClick: [{ type: Output }]
};
class NgTreeModule {
}
NgTreeModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [NgTreeComponent],
exports: [NgTreeComponent]
},] },
];
/*tslint:disable:no-invalid-this */
function OnChange(defaultValue) {
const sufix = 'Change';
return function OnChangeHandler(target, propertyKey) {
const _key = ` __${propertyKey}Value`;
Object.defineProperty(target, propertyKey, {
get() {
return this[_key];
},
set(value) {
const prevValue = this[_key];
this[_key] = value;
if (prevValue !== value && this[propertyKey + sufix]) {
this[propertyKey + sufix].emit(value);
}
}
});
};
}
/* tslint:enable */
class LinkedList {
constructor() {
this.length = 0;
this.asArray = [];
// Array methods overriding END
}
get(position) {
if (this.length === 0 || position < 0 || position >= this.length) {
return void 0;
}
let current = this.head;
for (let index = 0; index < position; index++) {
current = current.next;
}
return current.value;
}
add(value, position = this.length) {
if (position < 0 || position > this.length) {
throw new Error('Position is out of the list');
}
const node = {
value: value,
next: undefined,
previous: undefined
};
if (this.length === 0) {
this.head = node;
this.tail = node;
this.current = node;
}
else {
if (position === 0) {
// first node
node.next = this.head;
this.head.previous = node;
this.head = node;
}
else if (position === this.length) {
// last node
this.tail.next = node;
node.previous = this.tail;
this.tail = node;
}
else {
// node in middle
const currentPreviousNode = this.getNode(position - 1);
const currentNextNode = currentPreviousNode.next;
currentPreviousNode.next = node;
currentNextNode.previous = node;
node.previous = currentPreviousNode;
node.next = currentNextNode;
}
}
this.length++;
this.createInternalArrayRepresentation();
}
remove(position = 0) {
if (this.length === 0 || position < 0 || position >= this.length) {
throw new Error('Position is out of the list');
}
if (position === 0) {
// first node
this.head = this.head.next;
if (this.head) {
// there is no second node
this.head.previous = undefined;
}
else {
// there is no second node
this.tail = undefined;
}
}
else if (position === this.length - 1) {
// last node
this.tail = this.tail.previous;
this.tail.next = undefined;
}
else {
// middle node
const removedNode = this.getNode(position);
removedNode.next.previous = removedNode.previous;
removedNode.previous.next = removedNode.next;
}
this.length--;
this.createInternalArrayRepresentation();
}
set(position, value) {
if (this.length === 0 || position < 0 || position >= this.length) {
throw new Error('Position is out of the list');
}
const node = this.getNode(position);
node.value = value;
this.createInternalArrayRepresentation();
}
toArray() {
return this.asArray;
}
findAll(fn) {
let current = this.head;
const result = [];
for (let index = 0; index < this.length; index++) {
if (fn(current.value, index)) {
result.push({ index, value: current.value });
}
current = current.next;
}
return result;
}
// Array methods overriding start
push(...args) {
args.forEach((arg) => {
this.add(arg);
});
return this.length;
}
pop() {
if (this.length === 0) {
return undefined;
}
const last = this.tail;
this.remove(this.length - 1);
return last.value;
}
unshift(...args) {
args.reverse();
args.forEach((arg) => {
this.add(arg, 0);
});
return this.length;
}
shift() {
if (this.length === 0) {
return undefined;
}
const lastItem = this.head.value;
this.remove();
return lastItem;
}
forEach(fn) {
let current = this.head;
for (let index = 0; index < this.length; index++) {
fn(current.value, index);
current = current.next;
}
}
indexOf(value) {
let current = this.head;
let position = 0;
for (let index = 0; index < this.length; index++) {
if (current.value === value) {
position = index;
break;
}
current = current.next;
}
return position;
}
some(fn) {
let current = this.head;
let result = false;
while (current && !result) {
if (fn(current.value)) {
result = true;
break;
}
current = current.next;
}
return result;
}
every(fn) {
let current = this.head;
let result = true;
while (current && result) {
if (!fn(current.value)) {
result = false;
}
current = current.next;
}
return result;
}
toString() {
return '[Linked List]';
}
find(fn) {
let current = this.head;
let result;
for (let index = 0; index < this.length; index++) {
if (fn(current.value, index)) {
result = current.value;
break;
}
current = current.next;
}
return result;
}
findIndex(fn) {
let current = this.head;
let result;
for (let index = 0; index < this.length; index++) {
if (fn(current.value, index)) {
result = index;
break;
}
current = current.next;
}
return result;
}
getNode(position) {
if (this.length === 0 || position < 0 || position >= this.length) {
throw new Error('Position is out of the list');
}
let current = this.head;
for (let index = 0; index < position; index++) {
current = current.next;
}
return current;
}
createInternalArrayRepresentation() {
const outArray = [];
let current = this.head;
while (current) {
outArray.push(current.value);
current = current.next;
}
this.asArray = outArray;
}
}
/*tslint:disable */
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* JS version of browser APIs. This library can only run in the browser.
*/
var win = (typeof window !== 'undefined' && window) || {};
var document$1 = win.document;
var location = win.location;
var gc = win['gc'] ? () => win['gc']() : () => null;
var performance = win['performance'] ? win['performance'] : null;
const Event = win['Event'];
const MouseEvent = win['MouseEvent'];
const KeyboardEvent = win['KeyboardEvent'];
const EventTarget = win['EventTarget'];
const History = win['History'];
const Location = win['Location'];
const EventListener = win['EventListener'];
let guessedVersion;
function _guessBsVersion() {
if (typeof document === 'undefined') {
return null;
}
const spanEl = document.createElement('span');
spanEl.innerText = 'test bs version';
document.body.appendChild(spanEl);
spanEl.classList.add('d-none');
const rect = spanEl.getBoundingClientRect();
document.body.removeChild(spanEl);
if (!rect) {
return 'bs3';
}
return rect.top === 0 ? 'bs4' : 'bs3';
}
// todo: in ngx-bootstrap, bs4 will became a default one
function isBs3() {
if (typeof win === 'undefined') {
return true;
}
if (typeof win.__theme === 'undefined') {
if (guessedVersion) {
return guessedVersion === 'bs3';
}
guessedVersion = _guessBsVersion();
return guessedVersion === 'bs3';
}
return win.__theme !== 'bs4';
}
/**
* @copyright Valor Software
* @copyright Angular ng-bootstrap team
*/
class Trigger {
constructor(open, close) {
this.open = open;
this.close = close || open;
}
isManual() {
return this.open === 'manual' || this.close === 'manual';
}
}
class Utils {
static reflow(element) {
((bs) => bs)(element.offsetHeight);
}
// source: https://github.com/jquery/jquery/blob/master/src/css/var/getStyles.js
static getStyles(elem) {
// Support: IE <=11 only, Firefox <=30 (#15098, #14150)
// IE throws on elements created in popups
// FF meanwhile throws on frame elements through "defaultView.getComputedStyle"
let view = elem.ownerDocument.defaultView;
if (!view || !view.opener) {
view = win;
}
return view.getComputedStyle(elem);
}
}
class NgTranscludeDirective {
constructor(viewRef) {
this.viewRef = viewRef;
}
set ngTransclude(templateRef) {
this._ngTransclude = templateRef;
if (templateRef) {
this.viewRef.createEmbeddedView(templateRef);
}
}
get ngTransclude() {
return this._ngTransclude;
}
}
NgTranscludeDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngTransclude]'
},] },
];
/** @nocollapse */
NgTranscludeDirective.ctorParameters = () => [
{ type: ViewContainerRef }
];
NgTranscludeDirective.propDecorators = {
ngTransclude: [{ type: Input }]
};
class TabsetConfig {
constructor() {
/** provides default navigation context class: 'tabs' or 'pills' */
this.type = 'tabs';
}
}
TabsetConfig.decorators = [
{ type: Injectable },
];
// todo: add active event to tab
// todo: fix? mixing static and dynamic tabs position tabs in order of creation
class TabsetComponent {
constructor(config, renderer) {
this.renderer = renderer;
this.clazz = true;
this.tabs = [];
this.classMap = {};
Object.assign(this, config);
}
/** if true tabs will be placed vertically */
get vertical() {
return this._vertical;
}
set vertical(value) {
this._vertical = value;
this.setClassMap();
}
/** if true tabs fill the container and have a consistent width */
get justified() {
return this._justified;
}
set justified(value) {
this._justified = value;
this.setClassMap();
}
/** navigation context class: 'tabs' or 'pills' */
get type() {
return this._type;
}
set type(value) {
this._type = value;
this.setClassMap();
}
ngOnDestroy() {
this.isDestroyed = true;
}
addTab(tab) {
this.tabs.push(tab);
tab.active = this.tabs.length === 1 && typeof tab.active === 'undefined';
}
removeTab(tab, options = { reselect: true, emit: true }) {
const index = this.tabs.indexOf(tab);
if (index === -1 || this.isDestroyed) {
return;
}
// Select a new tab if the tab to be removed is selected and not destroyed
if (options.reselect && tab.active && this.hasAvailableTabs(index)) {
const newActiveIndex = this.getClosestTabIndex(index);
this.tabs[newActiveIndex].active = true;
}
if (options.emit) {
tab.removed.emit(tab);
}
this.tabs.splice(index, 1);
if (tab.elementRef.nativeElement.parentNode) {
this.renderer.removeChild(tab.elementRef.nativeElement.parentNode, tab.elementRef.nativeElement);
}
}
getClosestTabIndex(index) {
const tabsLength = this.tabs.length;
if (!tabsLength) {
return -1;
}
for (let step = 1; step <= tabsLength; step += 1) {
const prevIndex = index - step;
const nextIndex = index + step;
if (this.tabs[prevIndex] && !this.tabs[prevIndex].disabled) {
return prevIndex;
}
if (this.tabs[nextIndex] && !this.tabs[nextIndex].disabled) {
return nextIndex;
}
}
return -1;
}
hasAvailableTabs(index) {
const tabsLength = this.tabs.length;
if (!tabsLength) {
return false;
}
for (let i = 0; i < tabsLength; i += 1) {
if (!this.tabs[i].disabled && i !== index) {
return true;
}
}
return false;
}
setClassMap() {
this.classMap = {
'nav-stacked': this.vertical,
'flex-column': this.vertical,
'nav-justified': this.justified,
[`nav-${this.type}`]: true
};
}
}
TabsetComponent.decorators = [
{ type: Component, args: [{
selector: 'tabset',
template: "<ul class=\"nav\" [ngClass]=\"classMap\" (click)=\"$event.preventDefault()\"> <li *ngFor=\"let tabz of tabs\" [ngClass]=\"['nav-item', tabz.customClass || '']\" [class.active]=\"tabz.active\" [class.disabled]=\"tabz.disabled\"> <a href=\"javascript:void(0);\" class=\"nav-link\" [attr.id]=\"tabz.id ? tabz.id + '-link' : ''\" [class.active]=\"tabz.active\" [class.disabled]=\"tabz.disabled\" (click)=\"tabz.active = true\"> <span [ngTransclude]=\"tabz.headingRef\">{{ tabz.heading }}</span> <span *ngIf=\"tabz.removable\" (click)=\"$event.preventDefault(); removeTab(tabz);\" class=\"bs-remove-tab\"> ❌</span> </a> </li> </ul> <div class=\"tab-content\"> <ng-content></ng-content> </div> "
},] },
];
/** @nocollapse */
TabsetComponent.ctorParameters = () => [
{ type: TabsetConfig },
{ type: Renderer2 }
];
TabsetComponent.propDecorators = {
vertical: [{ type: Input }],
justified: [{ type: Input }],
type: [{ type: Input }],
clazz: [{ type: HostBinding, args: ['class.tab-container',] }]
};
class TabDirective {
constructor(tabset, elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
/** fired when tab became active, $event:Tab equals to selected instance of Tab component */
this.select = new EventEmitter();
/** fired when tab became inactive, $event:Tab equals to deselected instance of Tab component */
this.deselect = new EventEmitter();
/** fired before tab will be removed, $event:Tab equals to instance of removed tab */
this.removed = new EventEmitter();
this.addClass = true;
this.tabset = tabset;
this.tabset.addTab(this);
}
/** if set, will be added to the tab's class attribute. Multiple classes are supported. */
get customClass() {
return this._customClass;
}
set customClass(customClass) {
if (this.customClass) {
this.customClass.split(' ').forEach((cssClass) => {
this.renderer.removeClass(this.elementRef.nativeElement, cssClass);
});
}
this._customClass = customClass ? customClass.trim() : null;
if (this.customClass) {
this.customClass.split(' ').forEach((cssClass) => {
this.renderer.addClass(this.elementRef.nativeElement, cssClass);
});
}
}
/** tab active state toggle */
get active() {
return this._active;
}
set active(active) {
if (this._active === active) {
return;
}
if ((this.disabled && active) || !active) {
if (this._active && !active) {
this.deselect.emit(this);
this._active = active;
}
return;
}
this._active = active;
this.select.emit(this);
this.tabset.tabs.forEach((tab) => {
if (tab !== this) {
tab.active = false;
}
});
}
ngOnInit() {
this.removable = this.removable;
}
ngOnDestroy() {
this.tabset.removeTab(this, { reselect: false, emit: false });
}
}
TabDirective.decorators = [
{ type: Directive, args: [{ selector: 'tab, [tab]' },] },
];
/** @nocollapse */
TabDirective.ctorParameters = () => [
{ type: TabsetComponent },
{ type: ElementRef },
{ type: Renderer2 }
];
TabDirective.propDecorators = {
heading: [{ type: Input }],
id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
disabled: [{ type: Input }],
removable: [{ type: Input }],
customClass: [{ type: Input }],
active: [{ type: HostBinding, args: ['class.active',] }, { type: Input }],
select: [{ type: Output }],
deselect: [{ type: Output }],
removed: [{ type: Output }],
addClass: [{ type: HostBinding, args: ['class.tab-pane',] }]
};
/** Should be used to mark <ng-template> element as a template for tab heading */
class TabHeadingDirective {
constructor(templateRef, tab) {
tab.headingRef = templateRef;
}
}
TabHeadingDirective.decorators = [
{ type: Directive, args: [{ selector: '[tabHeading]' },] },
];
/** @nocollapse */
TabHeadingDirective.ctorParameters = () => [
{ type: TemplateRef },
{ type: TabDirective }
];
class TabsModule {
static forRoot() {
return {
ngModule: TabsModule,
providers: [TabsetConfig]
};
}
}
TabsModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [
NgTranscludeDirective,
TabDirective,
TabsetComponent,
TabHeadingDirective
],
exports: [
TabDirective,
TabsetComponent,
TabHeadingDirective,
NgTranscludeDirective
]
},] },
];
export { NgTreeModule, OnChange, LinkedList, isBs3, Trigger, Utils, NgTranscludeDirective, TabDirective, TabHeadingDirective, TabsetComponent, TabsetConfig, TabsModule };
//# sourceMappingURL=ngx-bootstrap.es2015.js.map