ngx-pluto
Version:
12,971 lines • 572 kB
JavaScript
import { createCustomElement } from '@angular/elements';
import 'jquery.fancytree/dist/modules/jquery.fancytree.filter';
import { Observable } from 'rxjs/internal/Observable';
import { isNumber } from 'util';
import { Directionality } from '@angular/cdk/bidi';
import { ScrollingModule, ViewportRuler as ViewportRuler$1 } from '@angular/cdk/scrolling';
import { coerceBooleanProperty, coerceArray } from '@angular/cdk/coercion';
import { DomSanitizer } from '@angular/platform-browser';
import Cropper from 'cropperjs';
import { Subject, fromEvent, Subscription, Observable as Observable$1, merge } from 'rxjs';
import { filter, take, startWith, map, takeUntil, switchMap, tap } from 'rxjs/operators';
import { Overlay, OverlayPositionBuilder, OverlayModule, OverlayContainer, OverlayConfig, ViewportRuler } from '@angular/cdk/overlay';
import { trigger, transition, style, animate, state } from '@angular/animations';
import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
import * as moment_ from 'moment';
import { Router } from '@angular/router';
import { Component, ChangeDetectionStrategy, Input, ViewChild, ElementRef, forwardRef, Output, EventEmitter, NgModule, ViewEncapsulation, ChangeDetectorRef, HostListener, TemplateRef, Directive, Renderer2, ViewContainerRef, Pipe, Injector, ComponentFactoryResolver, Injectable, ApplicationRef, InjectionToken, ContentChild, Inject, NgZone, Optional, ContentChildren, ViewChildren, defineInjectable, inject, INJECTOR, SkipSelf } from '@angular/core';
import { CommonModule, DOCUMENT } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 按钮组件 - 主色调按钮、副色调按钮、取消按钮、可设置宽度按钮、上传文件按钮等
*
* <example-url>https://stackblitz.com/edit/np-button-sample?embed=1&file=src/app/app.component.html</example-url>
*/
class NpButton {
constructor() {
// #region 上传文件相关
/**
* 按钮功能类型 - normal - 默认类型；upload - 即为上传文件类型按钮。
*/
this.funcType = 'normal';
/**
* 上传文件类型， 如：[uploadFileType]="'jpg|png|jpeg'"。
*
* 特别说明一下格式，因为采用正则匹配，所以传入格式为'xlsx|xls'，用|隔开。
*/
this.uploadFileType = '';
/**
* 文件改变触发事件， 即双向绑定。
*/
this.fileChange = new EventEmitter();
/**
* 上传文件出错消息事件。
*/
this.uploadErrorMessage = new EventEmitter();
}
// #endregion
/**
* @return {?}
*/
ngOnInit() {
this.buttonType = this.buttonType || 'primary';
this.buttonSize = this.buttonType === 'search' ? 'small' : this.buttonSize || 'default';
/** @type {?} */
const element = this.npButton.nativeElement;
if (this.buttonType === 'search' && this.buttonSize === 'default') {
this.buttonSize = 'small';
}
element.classList.add(`button-${this.buttonType}`);
if (['large', 'default', 'small'].indexOf(this.buttonSize) > -1) {
element.classList.add(`button-size-${this.buttonSize}`);
}
else {
element.style.width = this.buttonSize;
}
if (this.buttonBlock === '') {
/** @type {?} */
const parentWidth = element.parentElement.parentElement.offsetWidth;
element.style.width = `${parentWidth - 54}px`;
}
if (this.isDisabled) {
element.classList.add('button-disabled');
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const contentChange = changes['isDisabled'];
if (contentChange) {
/** @type {?} */
const value = contentChange.currentValue;
if (value) {
this.npButton.nativeElement.classList.add('button-disabled');
}
else {
this.npButton.nativeElement.classList.remove('button-disabled');
}
}
}
/**
* @return {?}
*/
upload() {
if (this.funcType === 'upload' && !this.isDisabled) {
this.inputDom = document.createElement('input');
this.inputDom.type = 'file';
this.inputDom.onchange = (/**
* @param {?} event
* @return {?}
*/
(event) => {
/** @type {?} */
const file = event.currentTarget.files[0];
/** @type {?} */
const fileName = file.name;
if (this.uploadFileType) {
/** @type {?} */
const reg = new RegExp(`\.(${this.uploadFileType.toLowerCase()})|.(${this.uploadFileType.toUpperCase()})$`);
if (!reg.test(fileName)) {
this.uploadErrorMessage.emit(`文件格式不对，支持${this.uploadFileType}`);
return;
}
}
if (this.onChange) {
this.onChange(file);
}
this.fileChange.emit(file);
});
this.inputDom.click();
}
}
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
// clear file input
if (this.inputDom) {
document.removeChild(this.inputDom);
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
}
}
NpButton.decorators = [
{ type: Component, args: [{
selector: `np-button`,
template: "<div (click)=\"upload()\" #npButton class=\"np-button-wrapper\">\r\n <ng-content></ng-content>\r\n</div>\r\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpButton)),
multi: true,
},
],
styles: [".flex-wrap{display:flex}.col-flex{flex-direction:column}.row-flex{flex-direction:row}.middle-flex{justify-content:center;align-items:center}.np-row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.np-column{display:flex;flex-direction:column;flex-basis:100%;flex:1}.backdrop-transparent{opacity:0}:host{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:block}.btn,.button-cancel,.button-default,.button-primary,.button-search,.button-secondary{border-radius:5px;border:none;font-size:14px;padding:6px 12px;margin:0 15px;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.button-cancel:focus,.button-default:focus,.button-primary:focus,.button-search:focus,.button-secondary:focus{outline:0!important}.button-size-large{width:300px}.button-size-default{width:180px}.button-size-small{width:80px}.button-disabled,.button-disabled.active,.button-disabled:active,.button-disabled:focus,.button-disabled:hover{text-shadow:none;box-shadow:none;cursor:not-allowed}.button-default{font-weight:500;letter-spacing:2px}.button-primary{font-weight:600;letter-spacing:2px}.button-secondary{font-weight:600;border:1px solid;letter-spacing:2px;padding:5px 12px}.button-cancel,.button-search{font-weight:600;letter-spacing:2px}"]
}] }
];
NpButton.propDecorators = {
npButton: [{ type: ViewChild, args: ['npButton',] }],
buttonType: [{ type: Input }],
buttonSize: [{ type: Input }],
buttonBlock: [{ type: Input }],
isDisabled: [{ type: Input }],
funcType: [{ type: Input }],
uploadFileType: [{ type: Input }],
file: [{ type: Input }],
fileChange: [{ type: Output }],
uploadErrorMessage: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpButtonModule {
}
NpButtonModule.decorators = [
{ type: NgModule, args: [{
imports: [],
declarations: [NpButton],
exports: [NpButton]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 复选框
*
* <example-url>https://stackblitz.com/edit/np-checkbox-sample?embed=1&file=src/app/app.component.html</example-url>
*/
class NpCheckbox {
/**
* @param {?} cdf
*/
constructor(cdf) {
this.cdf = cdf;
/**
* 是否禁用复选框
*/
this.isDisabled = false;
/**
* 当复选框选中状态改变时，触发此事件
*/
this.inputModelChange = new EventEmitter();
this.emitChange = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
}
/**
* @return {?}
*/
get ischecked() {
if (this.trueValue || this.falseValue) {
if (this.val === this.trueValue) {
return true;
}
if (this.val === this.falseValue) {
return false;
}
}
else {
return this.val ? true : false;
}
}
/**
* @return {?}
*/
ngOnInit() {
// 转换下传入的值
this.forbiddenColor = this.forbiddenColor !== undefined ? true : false;
}
/**
* @param {?} e
* @return {?}
*/
onChange(e) {
e.stopPropagation();
e.preventDefault();
if (this.forbiddenColor || this.isDisabled) {
return;
}
if (this.ischecked) {
this.val = this.falseValue || false;
this.emitChange(this.val);
this.inputModelChange.emit(this.val);
return;
}
if (!this.ischecked) {
this.val = this.trueValue || true;
this.emitChange(this.val);
this.inputModelChange.emit(this.val);
return;
}
}
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
if (obj !== undefined) {
this.val = obj;
this.emitChange(this.val);
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.emitChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
}
NpCheckbox.decorators = [
{ type: Component, args: [{
selector: `np-checkbox`,
template: "<div class=\"np-checkbox-button-wrapper\" ngDefaultControl [(ngModel)]=\"val\" (click)=\"onChange($event)\"\r\n [ngStyle]=\"{'cursor': (forbiddenColor || isDisabled)? 'not-allowed':'pointer'}\">\r\n <span class=\"checkbox\" [class.checkbox-checked]=\"ischecked\"\r\n [class.checkbox-forbiddenColor]=\"forbiddenColor || isDisabled\"></span>\r\n <span class=\"input-helper\" [class.checkbox-forbiddenColor]=\"forbiddenColor || isDisabled\"></span>\r\n <span style=\"line-height: 28px;\">\r\n <ng-content></ng-content>\r\n </span>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpCheckbox)),
multi: true,
}
],
styles: [".flex-wrap{display:flex}.col-flex{flex-direction:column}.row-flex{flex-direction:row}.middle-flex{justify-content:center;align-items:center}.np-row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.np-column{display:flex;flex-direction:column;flex-basis:100%;flex:1}.backdrop-transparent{opacity:0}.np-checkbox-button-wrapper{font-size:14px;padding-left:25px;position:relative;font-weight:400;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:baseline}.np-checkbox-button-wrapper .checkbox{opacity:0;z-index:1;left:1px;top:1px;position:absolute;width:14px;height:14px;margin:0;display:block}.np-checkbox-button-wrapper .checkbox.checkbox-checked+span::after{position:absolute;content:'';width:12px;height:12px;top:1px;left:1px;border-radius:4px}.np-checkbox-button-wrapper span.input-helper{position:absolute;left:2px;top:6px;width:16px;height:16px;box-sizing:border-box}.np-checkbox-button-wrapper .checkbox+span.input-helper{border-radius:4px}"]
}] }
];
/** @nocollapse */
NpCheckbox.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
NpCheckbox.propDecorators = {
trueValue: [{ type: Input }],
falseValue: [{ type: Input }],
forbiddenColor: [{ type: Input }],
isDisabled: [{ type: Input }],
inputModelChange: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpCheckboxModule {
}
NpCheckboxModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [NpCheckbox],
exports: [NpCheckbox]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class Utils {
/**
* @param {?} hex
* @return {?}
*/
static hexToRgb(hex) {
/** @type {?} */
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
/**
* @return {?}
*/
static ID() {
// Math.random should be unique because of its seeding algorithm.
// Convert it to base 36 (numbers + letters), and grab the first 9 characters
// after the decimal.
return '_' + Math.random().toString(36).substr(2, 9);
}
/**
* @param {?} a
* @param {?} b
* @return {?}
*/
static objEqual(a, b) {
// Create arrays of property names
/** @type {?} */
var aProps = Object.getOwnPropertyNames(a);
/** @type {?} */
var bProps = Object.getOwnPropertyNames(b);
// If number of properties is different,
// objects are not equivalent
if (aProps.length != bProps.length) {
return false;
}
for (var i = 0; i < aProps.length; i++) {
/** @type {?} */
var propName = aProps[i];
// If values of same property are not equal,
// objects are not equivalent
if (a[propName] !== b[propName]) {
return false;
}
}
// If we made it this far, objects
// are considered equivalent
return true;
}
/**
* @param {?} value
* @return {?}
*/
static toBoolean(value) {
return value != null && `${value}` !== 'false';
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 输入框
*
* <example-url>https://stackblitz.com/edit/np-input-sample?embed=1&file=src/app/app.component.html</example-url>
*/
class NpInput {
constructor() {
this.uuid = Utils.ID();
this.navigationKeys = [
'Backspace',
'Delete',
'Tab',
'Escape',
'Enter',
'Home',
'End',
'ArrowLeft',
'ArrowRight',
'Clear',
'Copy',
'Paste'
];
this.currentLen = 0;
this.chineseReg = /[^\x00-\xff]/g;
/**
* 占位符
*/
this.placeholder = '';
/**
* 最大长度
*
* Default -1 indicate that the length of input is not limited
*/
this.maxLen = -1;
/**
* 只允许填写数字
*/
this.numberOnly = false;
this.emitChange = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
this.onBlur = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
}
/**
* @param {?} event
* @return {?}
*/
onChange(event) {
this.emitChange(this.val);
}
/**
* @param {?} event
* @return {?}
*/
onInputBlur(event) {
this.emitChange(this.val);
this.onBlur.next({ value: this.val, event: event });
}
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
if (obj || obj === '') {
this.val = obj;
if (this.maxLen > -1) {
this.calculateCurrentLen();
}
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.emitChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
/**
* @param {?} control
* @return {?}
*/
validate(control) {
// TODO: customize validation
return null;
}
/**
* @return {?}
*/
focus() {
this.npInput.nativeElement.focus();
}
/**
* @param {?} e
* @return {?}
*/
onKeyup(e) {
if (this.maxLen === -1) {
return;
}
if (this.maxLen > -1) {
this.calculateCurrentLen();
this.val = this.val ? this.val.substring(0, this.maxLen) : '';
}
if (this.numberOnly) {
this.val = this.val ? this.val.replace(this.chineseReg, '') : '';
}
}
/**
* @param {?} e
* @return {?}
*/
onKeyDown(e) {
if (!this.isTriggerKeyEvents()) {
return;
}
if (this.navigationKeys.indexOf(e.key) > -1 || // Allow: navigation keys: backspace, delete, arrows etc.
(e.key === 'a' && e.ctrlKey === true) || // Allow: Ctrl+A
(e.key === 'c' && e.ctrlKey === true) || // Allow: Ctrl+C
(e.key === 'v' && e.ctrlKey === true) || // Allow: Ctrl+V
(e.key === 'x' && e.ctrlKey === true) || // Allow: Ctrl+X
(e.key === 'a' && e.metaKey === true) || // Allow: Cmd+A (Mac)
(e.key === 'c' && e.metaKey === true) || // Allow: Cmd+C (Mac)
(e.key === 'v' && e.metaKey === true) || // Allow: Cmd+V (Mac)
(e.key === 'x' && e.metaKey === true) // Allow: Cmd+X (Mac)
) {
return;
}
if (this.maxLen > -1) {
/** @type {?} */
let hightlightText = window.getSelection() + '';
if (this.val && this.val.length >= this.maxLen && hightlightText === '') {
e.preventDefault();
}
}
if (this.numberOnly) {
if (isNaN(Number(e.key))) {
e.preventDefault();
}
}
}
/**
* @private
* @return {?}
*/
calculateCurrentLen() {
this.currentLen = this.val ? this.val.toString().length : 0;
this.currentLen = this.currentLen > this.maxLen ? this.maxLen : this.currentLen;
}
/**
* @private
* @return {?}
*/
isTriggerKeyEvents() {
return this.maxLen !== -1 || this.numberOnly;
}
}
NpInput.decorators = [
{ type: Component, args: [{
selector: `np-input`,
template: "<div class=\"np-input-wrapper flex-wrap row-flex\">\r\n <div class=\"flex-wrap col-flex\" *ngIf=\"label\">\r\n <label for=\"np-input\" class=\"np-input-lbl\">\r\n <span class=\"form-required\" *ngIf=\"isRequired\">*</span>\r\n {{ label }}\r\n </label>\r\n </div>\r\n <div class=\"flex-wrap col-flex input-container\">\r\n <input #npInput [id]=\"'np-input' + uuid\" class=\"np-input\" type=\"text\" [(ngModel)]=\"val\" [placeholder]=\"placeholder\"\r\n (change)=\"onChange($event)\" (keyup)=\"onChange($event)\" (blur)=\"onInputBlur($event)\"\r\n [attr.disabled]=\"isDisabled ? '' : null\" [class.disabled]=\"isDisabled\"\r\n [style.padding-right.px]=\"(maxLen > -1 && maxLen < 1000) ? '65' : '10'\" autocomplete=\"off\">\r\n <span class=\"error-message\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n <div class=\"np-len\" *ngIf=\"maxLen > -1 && maxLen < 1000\">\r\n <span class=\"cur-length\">{{ currentLen }}</span> / <span>{{ maxLen }}</span>\r\n </div>\r\n </div>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpInput)),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpInput)),
multi: true,
}
],
styles: [".backdrop-transparent{opacity:0}.flex-wrap{display:flex}.wrap{flex-wrap:wrap}.col-flex{flex-direction:column}.row-flex{flex-direction:row}.middle-flex{justify-content:center;align-items:center}.space-between{justify-content:space-between;align-items:center}.align-center{align-items:center}.np-row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.np-column{display:flex;flex-direction:column;flex-basis:100%;flex:1}.np-input-wrapper{align-items:baseline;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.np-input-wrapper .np-input-lbl{width:80px;margin-right:20px;text-align:right;font-size:13px;font-weight:700;height:34px;line-height:34px}.np-input-wrapper .input-container{position:relative}.np-input-wrapper .input-container .np-len{position:absolute;right:5px;height:34px;line-height:34px;font-size:14px}.np-input-wrapper .np-input{box-sizing:border-box;background-image:none;border-radius:1px;display:inline-block;padding:5px 65px 5px 10px;margin:0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:220px;height:34px;line-height:20px}.np-input-wrapper .np-input:focus{outline:0!important;outline-offset:unset;border-width:1px}.np-input-wrapper .error-message{display:block;font-size:10px;margin:5px}"]
}] }
];
/** @nocollapse */
NpInput.ctorParameters = () => [];
NpInput.propDecorators = {
label: [{ type: Input }],
isRequired: [{ type: Input }],
placeholder: [{ type: Input }],
errorMessage: [{ type: Input }],
isDisabled: [{ type: Input }],
maxLen: [{ type: Input }],
numberOnly: [{ type: Input }],
npInput: [{ type: ViewChild, args: ['npInput',] }],
onBlur: [{ type: Output }],
onKeyup: [{ type: HostListener, args: ['keyup', ['$event'],] }],
onKeyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpInputModule {
}
NpInputModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [NpInput],
exports: [NpInput]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpTooltip {
constructor() {
this.text = '';
this.bgColor = '';
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
}
}
NpTooltip.decorators = [
{ type: Component, args: [{
selector: `np-tooltip`,
template: "<ng-container *ngIf=\"text\">\r\n <div @tooltip [ngStyle]=\"{'background-color': bgColor}\" [innerHtml]=\"text | safeHtml\" class=\"padding-div\"></div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"template\">\r\n <div @tooltip [ngStyle]=\"{'background-color': bgColor}\">\r\n <ng-container *ngTemplateOutlet=\"template\"></ng-container>\r\n </div>\r\n</ng-container>\r\n",
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'class': 'np-tooltip-wrapper'
},
animations: [
trigger('tooltip', [
transition(':enter', [
style({ opacity: 0 }),
animate(300, style({ opacity: 1 })),
]),
transition(':leave', [
animate(300, style({ opacity: 0 })),
]),
]),
],
styles: [":host{display:block;position:relative}:host div{border-radius:4px;position:relative}:host .padding-div{padding:8px 12px}:host.arrow-top::before{content:'';width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;position:absolute;top:-6px;left:calc(50% - 6px);-webkit-animation:.2s linear arrowEnter;animation:.2s linear arrowEnter}:host.arrow-right::before{content:'';width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;position:absolute;right:-6px;top:calc(50% - 6px);-webkit-animation:.2s linear arrowEnter;animation:.2s linear arrowEnter}:host.arrow-bottom::before{content:'';width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;position:absolute;bottom:-6px;left:calc(50% - 6px);-webkit-animation:.2s linear arrowEnter;animation:.2s linear arrowEnter}:host.arrow-left::before{content:'';width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;position:absolute;left:-6px;top:calc(50% - 6px);-webkit-animation:.2s linear arrowEnter;animation:.2s linear arrowEnter}:host.arrow-bottomRight::before{content:'';width:0;height:0;border-left:6px solid transparent;border-bottom:6px solid transparent;position:absolute;-webkit-animation:.2s linear arrowEnter;animation:.2s linear arrowEnter;right:3px;bottom:-6px}:host.arrow-bottomLeft::before{content:'';width:0;height:0;border-right:6px solid transparent;border-bottom:6px solid transparent;position:absolute;-webkit-animation:.2s linear arrowEnter;animation:.2s linear arrowEnter;left:3px;bottom:-6px}:host.arrow-topRight::before{content:'';width:0;height:0;border-top:6px solid transparent;border-left:6px solid transparent;position:absolute;-webkit-animation:.2s linear arrowEnter;animation:.2s linear arrowEnter;right:3px;top:-6px}:host.arrow-topLeft::before{content:'';width:0;height:0;border-top:6px solid transparent;border-right:6px solid transparent;position:absolute;-webkit-animation:.2s linear arrowEnter;animation:.2s linear arrowEnter;left:3px;top:-6px}@-webkit-keyframes arrowEnter{0%{opacity:0}100%{opacity:.7}}@keyframes arrowEnter{0%{opacity:0}100%{opacity:.7}}"]
}] }
];
/** @nocollapse */
NpTooltip.ctorParameters = () => [];
NpTooltip.propDecorators = {
text: [{ type: Input }],
template: [{ type: Input }],
bgColor: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const OFFSET = 4;
/**
* Tooltip提示文本
*
* <example-url>https://stackblitz.com/edit/np-tooltip-sample?embed=1&file=src/app/app.component.html</example-url>
*/
class NpTooltipDirective {
/**
* @param {?} overlay
* @param {?} overlayPositionBuilder
* @param {?} elementRef
* @param {?} renderer
*/
constructor(overlay, overlayPositionBuilder, elementRef, renderer) {
this.overlay = overlay;
this.overlayPositionBuilder = overlayPositionBuilder;
this.elementRef = elementRef;
this.renderer = renderer;
/**
* 显示提示文本
*/
this.text = '';
/**
* 支持上、右、下、左、上左、上右、下左、下右8个方向展示提示文本，默认展示上方提示文本
*/
this.position = 'top';
/**
* 提示文本背景色
*/
this.bgColor = 'rgba(73, 89, 106, .7)';
/**
* 提示文本水平方向X轴位移
*/
this.offsetX = null;
/**
* 提示文本垂直方向Y轴位移
*/
this.offsetY = null;
/**
* 是否展示提示文本指向箭头，默认展示
*/
this.showArrow = true;
/**
* 触发方式，默认为鼠标hover
*/
this.trigger = 'hover';
this.withPositions = {
originX: 'center',
originY: 'top',
overlayX: 'center',
overlayY: 'bottom',
offsetX: 0,
offsetY: -2 * OFFSET
};
}
/**
* @return {?}
*/
ngOnInit() {
this.initWithPositions();
/** @type {?} */
const positionStrategy = this.overlayPositionBuilder
.flexibleConnectedTo(this.elementRef)
.withPositions([this.withPositions]);
this.overlayRef = this.overlay.create({ positionStrategy, hasBackdrop: this.trigger === 'click' });
this.overlayRef.backdropClick().subscribe((/**
* @param {?} res
* @return {?}
*/
res => {
this.hide();
}));
}
/**
* @return {?}
*/
ngAfterViewInit() {
/** @type {?} */
let overlayElement;
if (this.trigger === 'hover') {
this.renderer.listen(this.elementRef.nativeElement, 'mouseenter', (/**
* @return {?}
*/
() => this.delayEnterLeave(true, true, 0.15)));
this.renderer.listen(this.elementRef.nativeElement, 'mouseleave', (/**
* @return {?}
*/
() => {
this.delayEnterLeave(true, false, 0.1);
if (this.overlayRef && !overlayElement) { // NOTE: we bind events under "mouseleave" due to the overlayRef is only created after the overlay was completely shown up
overlayElement = this.overlayRef.overlayElement;
this.renderer.listen(overlayElement, 'mouseenter', (/**
* @return {?}
*/
() => this.delayEnterLeave(false, true)));
this.renderer.listen(overlayElement, 'mouseleave', (/**
* @return {?}
*/
() => this.delayEnterLeave(false, false)));
}
}));
}
else if (this.trigger === 'click') {
this.renderer.listen(this.elementRef.nativeElement, 'click', (/**
* @param {?} e
* @return {?}
*/
(e) => {
e.preventDefault();
this.show();
}));
}
}
/**
* @private
* @return {?}
*/
initWithPositions() {
switch (this.position) {
case 'top':
this.withPositions = {
originX: 'center',
originY: 'top',
overlayX: 'center',
overlayY: 'bottom',
offsetX: this.offsetX === null ? 0 : this.offsetX,
offsetY: this.offsetY === null ? -2 * OFFSET : this.offsetY
};
break;
case 'right':
this.withPositions = {
originX: 'end',
originY: 'center',
overlayX: 'start',
overlayY: 'center',
offsetX: this.offsetX === null ? 2 * OFFSET : this.offsetX,
offsetY: this.offsetY === null ? 0 : this.offsetY
};
break;
case 'bottom':
this.withPositions = {
originX: 'center',
originY: 'bottom',
overlayX: 'center',
overlayY: 'top',
offsetX: this.offsetX === null ? 0 : this.offsetX,
offsetY: this.offsetY === null ? 2 * OFFSET : this.offsetY
};
break;
case 'left':
this.withPositions = {
originX: 'start',
originY: 'center',
overlayX: 'end',
overlayY: 'center',
offsetX: this.offsetX === null ? -2 * OFFSET : this.offsetX,
offsetY: this.offsetY === null ? 0 : this.offsetY
};
break;
case 'topLeft':
this.withPositions = {
originX: 'start',
originY: 'top',
overlayX: 'end',
overlayY: 'bottom',
offsetX: this.offsetX === null ? OFFSET : this.offsetX,
offsetY: this.offsetY === null ? -2 * OFFSET : this.offsetY
};
break;
case 'topRight':
this.withPositions = {
originX: 'end',
originY: 'top',
overlayX: 'start',
overlayY: 'bottom',
offsetX: this.offsetX === null ? -OFFSET : this.offsetX,
offsetY: this.offsetY === null ? -2 * OFFSET : this.offsetY
};
break;
case 'bottomLeft':
this.withPositions = {
originX: 'start',
originY: 'bottom',
overlayX: 'end',
overlayY: 'top',
offsetX: this.offsetX === null ? OFFSET : this.offsetX,
offsetY: this.offsetY === null ? 2 * OFFSET : this.offsetY
};
break;
case 'bottomRight':
this.withPositions = {
originX: 'end',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top',
offsetX: this.offsetX === null ? -OFFSET : this.offsetX,
offsetY: this.offsetY === null ? 2 * OFFSET : this.offsetY
};
break;
default:
break;
}
if (this.position === 'top') {
this.elementRef.nativeElement.classList.add('arrow-bottom');
}
}
/**
* @private
* @return {?}
*/
buildArrow() {
if (!this.overlayRef || !this.overlayRef.hostElement) {
return;
}
/** @type {?} */
let arrowPosition;
switch (this.position) {
case 'top':
arrowPosition = 'arrow-bottom';
break;
case 'right':
arrowPosition = 'arrow-left';
break;
case 'bottom':
arrowPosition = 'arrow-top';
break;
case 'left':
arrowPosition = 'arrow-right';
break;
case 'topLeft':
arrowPosition = 'arrow-bottomRight';
break;
case 'topRight':
arrowPosition = 'arrow-bottomLeft';
break;
case 'bottomLeft':
arrowPosition = 'arrow-topRight';
break;
case 'bottomRight':
arrowPosition = 'arrow-topLeft';
break;
default:
break;
}
/** @type {?} */
let tooltipTag = this.overlayRef.hostElement.getElementsByTagName('np-tooltip')[0];
if (tooltipTag) {
tooltipTag.classList.add(arrowPosition);
}
}
/**
* @private
* @param {?} isOrigin
* @param {?} isEnter
* @param {?=} delay
* @return {?}
*/
delayEnterLeave(isOrigin, isEnter, delay = -1) {
if (this.delayTimer) { // Clear timer during the delay time
window.clearTimeout(this.delayTimer);
this.delayTimer = null;
}
else if (delay > 0) {
this.delayTimer = window.setTimeout((/**
* @return {?}
*/
() => {
this.delayTimer = null;
isEnter ? this.show() : this.hide();
}), delay * 1000);
}
else {
isEnter && isOrigin ? this.show() : this.hide(); // [Compatible] The "isOrigin" is used due to the tooltip will not hide immediately (may caused by the fade-out animation)
}
}
/**
* @return {?}
*/
show() {
if (this.overlayRef.hasAttached()) {
return;
}
/** @type {?} */
const tooltipRef = this.overlayRef.attach(new ComponentPortal(NpTooltip));
if (this.text) {
tooltipRef.instance.text = this.text;
}
if (this.template) {
tooltipRef.instance.template = this.template;
}
tooltipRef.instance.bgColor = this.bgColor;
if (this.showArrow) {
this.buildArrow();
}
}
/**
* @return {?}
*/
hide() {
if (this.overlayRef.hasAttached) {
this.overlayRef.detach();
}
}
}
NpTooltipDirective.decorators = [
{ type: Directive, args: [{ selector: '[npTooltip]' },] }
];
/** @nocollapse */
NpTooltipDirective.ctorParameters = () => [
{ type: Overlay },
{ type: OverlayPositionBuilder },
{ type: ElementRef },
{ type: Renderer2 }
];
NpTooltipDirective.propDecorators = {
text: [{ type: Input, args: ['npTooltip',] }],
template: [{ type: Input }],
position: [{ type: Input }],
bgColor: [{ type: Input }],
offsetX: [{ type: Input }],
offsetY: [{ type: Input }],
showArrow: [{ type: Input }],
trigger: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class TooltipDirective {
/**
* @param {?} element
* @param {?} hostView
*/
constructor(element, hostView) {
this.element = element;
this.hostView = hostView;
this.npTooltip = '';
this.direction = 'right';
}
/**
* @return {?}
*/
ngOnInit() {
this.tooltipDom = document.createElement('div');
this.tooltipDom.id = 'tooltip-container';
/** @type {?} */
let width = this.npTooltip.length + 'em';
if (this.npTooltip.length > 20) {
width = '20em';
}
this.tooltipDom.innerHTML = `
<span style="width:${width}" class="tooltip tooltip-right">
${this.npTooltip}</span>
`;
}
/**
* @return {?}
*/
onMouseEnter() {
/** @type {?} */
const eleWidth = this.element.nativeElement.clientWidth;
/** @type {?} */
const eleheight = this.element.nativeElement.clientHeight;
/** @type {?} */
let tooltipLeft;
switch (this.direction) {
case 'right':
tooltipLeft = eleWidth + 'px';
this.tooltipDom.style.left = tooltipLeft;
break;
// case 'left':
// // 175是tooltip内容的宽度,10是修正宽度
// tooltipLeft = (-175 - 10) + 'px';
// this.tooltipDom.style.left = tooltipLeft;
// break;
default:
break;
}
this.element.nativeElement.parentNode.insertBefore(this.tooltipDom, this.element.nativeElement);
}
/**
* @return {?}
*/
onMouseLeave() {
this.element.nativeElement.parentNode.removeChild(this.tooltipDom);
}
}
TooltipDirective.decorators = [
{ type: Directive, args: [{
selector: '[npTooltipDeprecated]',
},] }
];
/** @nocollapse */
TooltipDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: ViewContainerRef }
];
TooltipDirective.propDecorators = {
npTooltip: [{ type: Input }],
direction: [{ type: Input }],
enterDelay: [{ type: Input }],
leaveDelay: [{ type: Input }],
onMouseEnter: [{ type: HostListener, args: ['mouseenter',] }],
onMouseLeave: [{ type: HostListener, args: ['mouseleave',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class SafeHtmlPipe {
/**
* @param {?} sanitized
*/
constructor(sanitized) {
this.sanitized = sanitized;
}
/**
* @param {?} value
* @param {...?} args
* @return {?}
*/
transform(value, ...args) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
SafeHtmlPipe.decorators = [
{ type: Pipe, args: [{
name: 'safeHtml'
},] }
];
/** @nocollapse */
SafeHtmlPipe.ctorParameters = () => [
{ type: DomSanitizer }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpSharedModule {
}
NpSharedModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
],
declarations: [
TooltipDirective,
SafeHtmlPipe
],
exports: [
TooltipDirective,
SafeHtmlPipe
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpTooltipModule {
}
NpTooltipModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule,
OverlayModule,
NpSharedModule
],
declarations: [NpTooltip, NpTooltipDirective],
exports: [NpTooltip, NpTooltipDirective],
entryComponents: [
NpTooltip
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* kebab组件
*
* <example-url>https://stackblitz.com/edit/angular-vc3q8h?embed=1&file=src/app/app.component.html</example-url>
*/
class NpKebab {
constructor() {
/**
* 布局格式，默认flex布局
*/
this.display = 'flex';
this.position = 'bottomRight';
/**
* 点击单个item接收符合KebabItem 格式的对象
*
*/
this.onItemClicked = new EventEmitter();
this.itemsInKebab = [];
this.itemsOutKebab = [];
this.isDropdownVisible = false;
}
/**
* @return {?}
*/
ngOnInit() {
this.buildKebabItems();
}
/**
* @param {?} $event
* @param {?} item
* @param {?=} itemInKebab
* @return {?}
*/
onKebabItemClicked($event, item, itemInKebab = false) {
this.onItemClicked.emit({ $event: $event, item: item });
if (itemInKebab && this.dropdownTooltip) {
this.dropdownTooltip.hide();
}
}
/**
* @private
* @return {?}
*/
buildKebabItems() {
if (!this.data || !this.data.items) {
throw new Error('Invalid data');
}
this.data.items.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
if (item.id === undefined || item.id === null) {
item.id = Utils.ID();
}
}));
if (!this.data.limit) {
this.itemsOutKebab = this.data.items || [];
this.itemsInKebab = [];
return;
}
if (this.data.limit > 0 && this.data.items.length > 0) {
this.data.limit = (this.data.limit > this.data.items.length) ? this.data.items.length : this.data.limit;
this.itemsOutKebab = this.data.items.slice(0, this.data.items.length - this.data.limit) || [];
this.itemsInKebab = this.data.items.slice(this.itemsOutKebab.length, this.data.items.length) || [];
return;
}
}
}
NpKebab.decorators = [
{ type: Component, args: [{
selector: `np-kebab`,
template: "<div class=\"np-kebab-wrapper flex-wrap row-flex\" [style.display]=\"display\">\r\n <!-- items out of kebab -->\r\n <span *ngFor=\"let item of itemsOutKebab\" [ngClass]=\"{'interact-expand': item.type !== 'separator'}\"\r\n [style.color]=\"item.color\" (click)=\"onKebabItemClicked($event, item)\">\r\n <ng-container *ngIf=\"!item.type || item.type === 'text'\">{{ item.value }}</ng-container>\r\n <ng-container *ngIf=\"item.type === 'icon'\"><i [ngClass]=\"item.value\"></i></ng-container>\r\n <ng-container *ngIf=\"item.type === 'separator'\">|</ng-container>\r\n </span>\r\n\r\n <!-- items in kebab -->\r\n <ng-container *ngIf=\"data.limit\">\r\n <span npTooltip [template]=\"dropdownTemplate\" trigger=\"click\" [position]=\"position\" bgColor=\"transparent\"\r\n [showArrow]=\"false\" style=\"cursor: pointer;\"><i class=\"fas fa-ellipsis-v\" style=\"font-size: 14px;\"></i></span>\r\n <ng-template #dropdownTemplate>\r\n <div class=\"flex-wrap col-flex kebab-dropdown-container\">\r\n <span *ngFor=\"let item of itemsInKebab\" [ngClass]=\"{'h-line': item.type === 'separator'}\"\r\n (click)=\"onKebabItemClicked($event, item, true)\">\r\n <ng-container *ngIf=\"!item.type || item.type === 'text'\">{{ item.value }}</ng-container>\r\n <ng-container *ngIf=\"item.type === 'icon'\"><i [ngClass]=\"item.value\"></i></ng-container>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [".cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:0}.kebab-dropdown-container{padding:5px 8px;border-radius:5px}.kebab-dropdown-container>span{padding:5px 8px;cursor:pointer}.kebab-dropdown-container .h-line{margin-bottom:4px;padding-top:0;height:0}.np-kebab-wrapper>span{padding:5px 8px}.np-kebab-wrapper .interact-expand{cursor:pointer;font-size:14px;font-weight:400;display:inline-block}.np-kebab-wrapper .interact-expand:hover{transform:scale(1.05);transition:transform ease-in-out}"]
}] }
];
/** @nocollapse */
NpKebab.ctorParameters = () => [];
NpKebab.propDecorators = {
data: [{ type: Input }],
display: [{ type: Input }],
position: [{ type: Input }],
onItemClicked: [{ type: Output }],
dropdownTooltip: [{ type: ViewChild, args: [NpTooltipDirective,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpKebabModule {
}
NpKebabModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
NpTooltipModule
],
declarations: [NpKebab],
exports: [NpKebab],
entryComponents: [NpKebab]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// import $ from 'jquery';
// import 'jquery.fancytree';
// import { createTree } from 'jquery.fancytree';
/** @type {?} */
const $ = require('jquery');
/** @type {?} */
const fancytree = require('jquery.fancytree');
/**
* @ignore
*/
class NpTree {
/**
* @param {?} injector
*/
constructor(injector) {
this.injector = injector;
this.onNpTreeInit = new EventEmitter();
this.onNpTreeNodeActivate = new EventEmitter();
this.onNpTreeNodeClick = new EventEmitter();
this.onNpTreeNodeSelect = new EventEmitter();
this.onNpTreeNodeRender = new EventEmitter();
this.onNpTreeNodeKebabClick = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() {
if (!customElements.get('np-tree-kebab') && this.options.kebabData) {
/** @type {?} */
const kebab = createCustomElement(NpKebab, { injector: this.injector });
customElements.define('np-tree-kebab', kebab);
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
$('#ft_' + this.name).fancytree({
// #region =============== properties ===============
source: this.options.source,
activeVisible: this.options.activeVisible || true,
aria: this.options.aria || true,
autoActivate: this.options.autoActivate || true,
autoCollapse: this.options.autoCollapse || true,
autoScroll: this.options.autoScroll || true,
clickFolderMode: this.options.clickFolderMode || 4,
checkbox: this.options.checkbox || false,
debugLevel: this.options.debugLevel || 0,
focusOnSelect: this.options.focusOnSelect || false,
icon: this.options.icon || false,
keyboard: this.options.keyboard || true,
quicksearch: this.options.quicksearch || true,
selectMode: this.options.selectMode || 1,
tooltip: this.options.tooltip || false,
// #endregion =============== properties ===============
extensions: ['filter'],
filter: {
autoApply: (this.options.filter && this.options.filter.autoApply !== undefined) ? this.options.filter.autoApply : true,
// Re-apply last filter if lazy data is loaded
autoExpand: (this.options.filter && this.options.filter.autoExpand !== undefined) ? this.options.filter.autoExpand : false,
// Expand all branches that contain matches while filtered
counter: (this.options.filter && this.options.filter.counter !== undefined) ? this.options.filter.counter : true,
// Show a badge with number of matching child nodes near parent icons
fuzzy: (this.options.filter && this.options.filter.fuzzy !== undefined) ? this.options.filter.fuzzy : false,
// Match single characters in order, e.g. 'fb' will match 'FooBar'
hideExpandedCounter: (this.options.filter && this.options.filter.hideExpandedCounter !== undefined) ? this.options.filter.hideExpandedCounter : true,
// Hide counter badge if parent is expanded
hideExpanders: (this.options.filter && this.options.filter.hideExpanders !== undefined) ? this.options.filter.hideExpanders : false,
// Hide expanders if all child nodes are hidden by filter
highlight: (this.options.filter && this.options.filter.highlight !== undefined) ? this.options.filter.highlight : true,
// Highlight matches by wrapping inside <mark> tags
leavesOnly: (this.options.filter && this.options.filter.leavesOnly !== undefined) ? this.options.filter.leavesOnly : false,
// Match end nodes only
nodata: (this.options.filter && this.options.filter.nodata !== undefined) ? this.options.filter.nodata : true,
// Display a 'no data' status node if result is empty
mode: (this.options.filter && this.options.filter.mode !== undefined) ? this.options.filter.mode : "dimm" // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
},
// #region =============== Tree events ===============
init: (/**
* @param {?} event
* @param {?} data
* @return {?}
*/
(event, data) => {
this.onNpTreeInit.next({ event: event, data: data });
}),
// #endregion
// #region =============== Node events ===============
activate: (/**
* @param {?} event
* @param {?} data
* @return {?}
*/
(event, data) => {
this.onNpTreeNodeActivate.next({ event: event, data: data });
if (this.options.kebabData && $(data.node.span).find('.np-kebab-wrapper') && $(data.node.span).find('.np-kebab-wrapper').length) {
$(data.node.span).find('.np-kebab-wrapper')[0].style.display = 'flex';
}
}),
click: (/**
* @param {?} event
* @param {?} data
* @return {?}
*/
(event, data) => {
this.onNpTreeNodeClick.next({ event: event, data: data });
return true;
}),
deactivate: (/**
* @param {?} event
* @param {?} data
* @return {?}
*/
(event, data) => {
if (this.options.kebabData && $(data.node.span).find('.np-kebab-wrapper') && $(data.node.span).find('.np-kebab-wrapper').length) {
$(data.node.span).find('.np-kebab-wrapper')[0].style.display = 'none';
}
}),
select: (/**
* @param {?} event
* @param {?} data
* @return {?}
*/
(event, data) => {
this.onNpTreeNodeSelect.next({ event: event, data: data });
}),
createNode: (/**
* @param {?} event
* @param {?} data
* @return {?}
*/
(event, data) => {
if (this.options.kebabData) {
/** @type {?} */
var node = data.node;
this.buildKebabToTreeNode($(node.span), data.node);
}
}),
renderNode: (/**
* @param {?} event
* @param {?} data
* @return {?}
*/
(event, data) => {
this.onNpTreeNodeRender.next({ event: event, data: data });
})
// #endregion
}).on('mouseenter mouseleave', '.fancytree-node', (/**
* @param {?} event
* @return {?}
*/
(event) => {
/** @type {?} */
var node = $.ui.fancytree.getNode(event);
if (this.options.kebabData && $(node.span).find('.np-kebab-wrapper') && $(node.span).find('.np-kebab-wrapper').length) {
if (event.type === 'mouseenter') {
node.setActive(true);
}
if (event.type === 'mouseleave' &&
(!$(event.target).hasClass('fas fa-ellipsis-v') ||
$(event.target).hasClass('x-tooltip-open') ||
$(event.target).hasClass('np-kebab-wrapper'))) {
node.setActive(false);
}
}
}));
this.fancyTree = fancytree.getTree('#ft_' + this.name);
}
/**
* @private
* @param {?} parentElement
* @param {?} node
* @return {?}
*/
buildKebabToTreeNode(parentElement, node) {
/** @type {?} */
let kebabData = this.options.kebabData;
if (this.options.buildKebabData) {
kebabData = this.options.buildKebabData(node.data, this.options.kebabData);
}
if (!kebabData || !kebabData.items || kebabData.items.length === 0) {
return;
}
/** @type {?} */
const element = (/** @type {?} */ (document.createElement('np-tree-kebab')));
element.addEventListener('onItemClicked', (/**
* @param {?} res
* @return {?}
*/
(res) => {
this.onNpTreeNodeKebabClick.next({ node: node.data, menuItem: res && res.detail && res.detail.item });
node.setActive(false);
}));
element.data = kebabData;
element.display = 'none';
parentElement.append(element);
}
}
NpTree.decorators = [
{ type: Component, args: [{
selector: `np-tree`,
template: "<div id=\"{{ 'ft_'+name }}\" class=\"np-tree-wrapper\"></div>\r\n",
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
styles: ["/*!\r\n * Fancytree \"win8\" skin (highlighting the node span instead of title-only).\r\n *\r\n * DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from\r\n * the LESS templates.\r\n */.fancytree-helper-hidden{display:none}.fancytree-helper-indeterminate-cb{color:#777}.fancytree-helper-disabled{color:silver}.fancytree-helper-spin{-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(359deg)}}ul.fancytree-container{font-family:tahoma,arial,helvetica;font-size:10pt;white-space:nowrap;padding:3px;margin:0;min-height:0;position:relative;outline:0!important}ul.fancytree-container ul{padding:0 0 0 16px;margin:0}ul.fancytree-container ul>li:before{content:none}ul.fancytree-container li{-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background-attachment:scroll;background-color:transparent;background-position:0 0;background-repeat:repeat-y;background-image:none;margin:0;list-style:none}.ui-fancytree-disabled ul.fancytree-container{opacity:.5;background-color:silver}ul.fancytree-connectors.fancytree-container li{background-image:url(data:image/gif;base64,R0lGODlhEAAQAPcAAAAAANPT0wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAQABAAAAgxAP8JHPgvAMGDCA0iXFiQ4UKFDglCjChwIkWLETE61MiQ40OKEkEO9JhQZEWTDRcGBAA7);background-position:0 0}ul.fancytree-container li.fancytree-lastsib,ul.fancytree-no-connector>li{background-image:none}li.fancytree-animating{position:relative}#fancytree-drop-marker,span.fancytree-checkbox,span.fancytree-drag-helper-img,span.fancytree-empty,span.fancytree-expander,span.fancytree-icon,span.fancytree-vline{width:16px;height:16px;display:inline-block;vertical-align:top;background-repeat:no-repeat;background-image:url(data:image/gif;base64,R0lGODlhYADIAPcAAAAAAAAQdAgZehUFaioxQkFIWllbWEpVbFFhfQAplx8wjQQ5pxtShQBCrg5ayABiyQBr2AB04EBznEl7klVxklV6mlZ6rXp7tRmVHBilGSatIzrDMHGtLX65N0W9RX+Bfmu9ZWm9a3K9bXi9dEzXU0LOYUzWaHDHZ3LGcwCFhACA5gCN+QCU+gCc/wSl/QD//yDO9kSElEyMlk+Zi1aZllSFr1+EpFWrgVi1g1+2i3mFhWyMp2iMrWuMtGuUrm6cr2+TtHWUo3aWsmG1mHS8mXGmq3CtpXmtpna+p3u1pk+U1l+93Xmi1nm17X7Gol/G/1zX/3rO/Xbe/Z8AAP8AAP8ACP8bFP8eHv8jJ/8+RP9ITP9RVP9ZV/9iYP9qaP95e43CQpbJScelPu+uMMalRcStQsisSsWtX8+tVM22S8+1X9W2Rt2+TdC0WdW9UtS9Wc+9bNW9dPHFH9fFWN/GU97GWt3GYdzGaN/OZ9fFetvPe+DGTObOYebPaeHGcOXPcOnNd+fWbu3Xd+7efIOFgouNioyUm4mdnJKUkZudmYWtu421tom1vJG1vaKfo6WlnKSmo6utqqytt6W1u7S2s7S1vru9uoiuyZW1xIa77qW1yK29xKK+1a690by9x7W02LW8343HhozHi5POk5vOlJnOmpjFs5LnpqjWoqvfo77BvbXvv5zA1YPf/5PC/5bL/57N+5TW/7bGzLbG2b3O1Lfdy6HL86jS+7Hf/7TY/Lfc/7/f/bLwxrvwx6Po/6zn/6/u/7Xn//+Chv+Pjv+cmf+kpP+8uunWg+7fhPDVhPLdi+7nkPbni/nmmffvrPnvpvn2q//3tP33usXHxM3Lz83Py8XG0MHN29PT09TW093f3NLX4NnW6M/318To/83v/9/g6tLq/dT44N/25973/OTe3f3KyP3a2uHd7+fn3eTw3fj2xebo5e/v5eLr8+Ds++7v+ej26u7w7ezx9Oj/8O7/+fD37Pf27fH3+vb2//D+8fb49P339v//9v7//AAAACH5BAEAAP8ALAAAAABgAMgAAAj/AP/9U0WwoEGBCAcaXJhQ4EKGDR8ejCiRYEOFFS+q4tfPn0d/HadZisjxI0h/Ikl2/BhyZMKNKz22VGly5suSLFG6RKhqH86P0/btHOgzpsegQ3v+PCr0ZVGTKJvyfGoSqdOlUYda2kfVoyVKlHZu7erva1iEY5eaFctVLVi2ZNeibWtUrsCxZNmVg5t371y6JvXyXSr4b9/BRgvf5QrYJCXDZP09XswY6+R/eCNfzmwZcmeBlBg39ng5tOilpUWTTX3aKOvKrhGahu1YtmquMV+Lzm37Nm/Qt/f9/jd790fdjIcX390RefLmvX1DBx6833TiwYVfX/5cMsJI2bVH//oe3vp4geCzmyevvt/5f+mru2cv/3384Pzsh/epP3x++vj1l91/6O1HIHz77SNgdgsG1+BtD6oWoWjvJZJgIghZuB+GAmkYHof/eJgdiCIGR+KFCCGSICIprtjifiwKpCKML4YX4z8z2ogQIQkSsmOPP+7no0A8ChlkeEP+UySSCH3g5JNQPtlklFR+MGWVUF6JpZNabtkllgkxw4wyyJCZTDKCHHORmGSaiaaaDbFZJjJnprnmmHPWCWeYeLppZ5x90vlmnND00wwyekijqDTR7PkPM4UemuiijYYZKaKLMuoopIZiSumml06qaKUIcSpppqQKxEw00XiERx7OjP/6R5isugqrrLS26s+rsTI6a6m17nqrr7na2ms0v6oaLK+4AlurHXEcE40zzuCRa6vQSkuttc5iG+201V7rT7bgcqvss99uKy656nbrzxxxAOLMM83cIS688tJrr7v4zlvvvfH6u++5rfarL8D5/utsoW/A8Uczyygz8KOsMuwwxBLnavHDEU+8ajQbY+xxxf00zHHGC5d8cccJIQOyM/24ocYdyiiTjLn/uAwNzDLTbDPOOvM8c803t/xyzEP/bPTOSPtcNEJBN0000Ds/s07PaAbShx1QV331zFlv3fW8X98RNtcCIeM11oJojXbOa4Pdtthpx2323G8jM+8yy6T/0YYdWvMhT9579/134INDXbjfgPchOOHP8M044pBLfrjjiae9+OWPIzRI5MsckwYab/DBRx2Z//M536KTbjrqb68e+uiln5667K3XDrvnoOf++u290/7724GwLroZbtRBBx3yvIFQ8aEfn/zyzT9vfBrIK8+88wJBf4z02lff/fXZU8/9P96Db7713+tRBhlu0LHHHkucX3z778c/f/3sH+M+/PKjn/2i9z/9CbB/BQwg/8aHPwDu73x9aN8dyiCGNczvgAKJoP8mWMELLvAfGtQDBy34QISEcIQehKAEKUhCDIJwhR0s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);background-position:0 0}span.fancytree-checkbox,span.fancytree-custom-icon,span.fancytree-expander,span.fancytree-icon{margin-top:0}span.fancytree-custom-icon{width:16px;height:16px;display:inline-block;margin-left:3px;background-position:0 0}img.fancytree-icon{width:16px;height:16px;margin-left:3px;margin-top:0;vertical-align:top;border-style:none}span.fancytree-expander{cursor:pointer}.fancytree-exp-n span.fancytree-expander,.fancytree-exp-nl span.fancytree-expander{background-image:none;cursor:default}.fancytree-connectors .fancytree-exp-n span.fancytree-expander,.fancytree-connectors .fancytree-exp-nl span.fancytree-expander{background-image:url(data:image/gif;base64,R0lGODlhYADIAPcAAAAAAAAQdAgZehUFaioxQkFIWllbWEpVbFFhfQAplx8wjQQ5pxtShQBCrg5ayABiyQBr2AB04EBznEl7klVxklV6mlZ6rXp7tRmVHBilGSatIzrDMHGtLX65N0W9RX+Bfmu9ZWm9a3K9bXi9dEzXU0LOYUzWaHDHZ3LGcwCFhACA5gCN+QCU+gCc/wSl/QD//yDO9kSElEyMlk+Zi1aZllSFr1+EpFWrgVi1g1+2i3mFhWyMp2iMrWuMtGuUrm6cr2+TtHWUo3aWsmG1mHS8mXGmq3CtpXmtpna+p3u1pk+U1l+93Xmi1nm17X7Gol/G/1zX/3rO/Xbe/Z8AAP8AAP8ACP8bFP8eHv8jJ/8+RP9ITP9RVP9ZV/9iYP9qaP95e43CQpbJScelPu+uMMalRcStQsisSsWtX8+tVM22S8+1X9W2Rt2+TdC0WdW9UtS9Wc+9bNW9dPHFH9fFWN/GU97GWt3GYdzGaN/OZ9fFetvPe+DGTObOYebPaeHGcOXPcOnNd+fWbu3Xd+7efIOFgouNioyUm4mdnJKUkZudmYWtu421tom1vJG1vaKfo6WlnKSmo6utqqytt6W1u7S2s7S1vru9uoiuyZW1xIa77qW1yK29xKK+1a690by9x7W02LW8343HhozHi5POk5vOlJnOmpjFs5LnpqjWoqvfo77BvbXvv5zA1YPf/5PC/5bL/57N+5TW/7bGzLbG2b3O1Lfdy6HL86jS+7Hf/7TY/Lfc/7/f/bLwxrvwx6Po/6zn/6/u/7Xn//+Chv+Pjv+cmf+kpP+8uunWg+7fhPDVhPLdi+7nkPbni/nmmffvrPnvpvn2q//3tP33usXHxM3Lz83Py8XG0MHN29PT09TW093f3NLX4NnW6M/318To/83v/9/g6tLq/dT44N/25973/OTe3f3KyP3a2uHd7+fn3eTw3fj2xebo5e/v5eLr8+Ds++7v+ej26u7w7ezx9Oj/8O7/+fD37Pf27fH3+vb2//D+8fb49P339v//9v7//AAAACH5BAEAAP8ALAAAAABgAMgAAAj/AP/9U0WwoEGBCAcaXJhQ4EKGDR8ejCiRYEOFFS+q4tfPn0d/HadZisjxI0h/Ikl2/BhyZMKNKz22VGly5suSLFG6RKhqH86P0/btHOgzpsegQ3v+PCr0ZVGTKJvyfGoSqdOlUYda2kfVoyVKlHZu7erva1iEY5eaFctVLVi2ZNeibWtUrsCxZNmVg5t371y6JvXyXSr4b9/BRgvf5QrYJCXDZP09XswY6+R/eCNfzmwZcmeBlBg39ng5tOilpUWTTX3aKOvKrhGahu1YtmquMV+Lzm37Nm/Qt/f9/jd790fdjIcX390RefLmvX1DBx6833TiwYVfX/5cMsJI2bVH//oe3vp4geCzmyevvt/5f+mru2cv/3384Pzsh/epP3x++vj1l91/6O1HIHz77SNgdgsG1+BtD6oWoWjvJZJgIghZuB+GAmkYHof/eJgdiCIGR+KFCCGSICIprtjifiwKpCKML4YX4z8z2ogQIQkSsmOPP+7no0A8ChlkeEP+UySSCH3g5JNQPtlklFR+MGWVUF6JpZNabtkllgkxw4wyyJCZTDKCHHORmGSaiaaaDbFZJjJnprnmmHPWCWeYeLppZ5x90vlmnND00wwyekijqDTR7PkPM4UemuiijYYZKaKLMuoopIZiSumml06qaKUIcSpppqQKxEw00XiERx7OjP/6R5isugqrrLS26s+rsTI6a6m17nqrr7na2ms0v6oaLK+4AlurHXEcE40zzuCRa6vQSkuttc5iG+201V7rT7bgcqvss99uKy656nbrzxxxAOLMM83cIS688tJrr7v4zlvvvfH6u++5rfarL8D5/utsoW/A8Uczyygz8KOsMuwwxBLnavHDEU+8ajQbY+xxxf00zHHGC5d8cccJIQOyM/24ocYdyiiTjLn/uAwNzDLTbDPOOvM8c803t/xyzEP/bPTOSPtcNEJBN0000Ds/s07PaAbShx1QV331zFlv3fW8X98RNtcCIeM11oJojXbOa4Pdtthpx2323G8jM+8yy6T/0YYdWvMhT9579/134INDXbjfgPchOOHP8M044pBLfrjjiae9+OWPIzRI5MsckwYab/DBRx2Z//M536KTbjrqb68e+uiln5667K3XDrvnoOf++u290/7724GwLroZbtRBBx3yvIFQ8aEfn/zyzT9vfBrIK8+88wJBf4z02lff/fXZU8/9P96Db7713+tRBhlu0LHHHkucX3z778c/f/3sH+M+/PKjn/2i9z/9CbB/BQwg/8aHPwDu73x9aN8dyiCGNczvgAKJoP8mWMELLvAfGtQDBy34QISEcIQehKAEKUhCDIJwhR0s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);margin-top:0}.fancytree-connectors .fancytree-exp-n span.fancytree-expander,.fancytree-connectors .fancytree-exp-n span.fancytree-expander:hover{background-position:0 -64px}.fancytree-connectors .fancytree-exp-nl span.fancytree-expander,.fancytree-connectors .fancytree-exp-nl span.fancytree-expander:hover{background-position:-16px -64px}.fancytree-exp-c span.fancytree-expander{background-position:0 -80px}.fancytree-exp-c span.fancytree-expander:hover{background-position:-16px -80px}.fancytree-exp-cl span.fancytree-expander{background-position:0 -96px}.fancytree-exp-cl span.fancytree-expander:hover{background-position:-16px -96px}.fancytree-exp-cd span.fancytree-expander{background-position:-64px -80px}.fancytree-exp-cd span.fancytree-expander:hover{background-position:-80px -80px}.fancytree-exp-cdl span.fancytree-expander{background-position:-64px -96px}.fancytree-exp-cdl span.fancytree-expander:hover{background-position:-80px -96px}.fancytree-exp-e span.fancytree-expander,.fancytree-exp-ed span.fancytree-expander{background-position:-32px -80px}.fancytree-exp-e span.fancytree-expander:hover,.fancytree-exp-ed span.fancytree-expander:hover{background-position:-48px -80px}.fancytree-exp-edl span.fancytree-expander,.fancytree-exp-el span.fancytree-expander{background-position:-32px -96px}.fancytree-exp-edl span.fancytree-expander:hover,.fancytree-exp-el span.fancytree-expander:hover{background-position:-48px -96px}.fancytree-fade-expander span.fancytree-expander{transition:opacity 1.5s;opacity:0}.fancytree-fade-expander .fancytree-treefocus span.fancytree-expander,.fancytree-fade-expander [class*=fancytree-statusnode-] span.fancytree-expander,.fancytree-fade-expander.fancytree-treefocus span.fancytree-expander,.fancytree-fade-expander:hover span.fancytree-expander{transition:opacity .6s;opacity:1}span.fancytree-checkbox:hover{background-position:-16px -32px}span.fancytree-checkbox.fancytree-radio{background-position:0 -48px}span.fancytree-checkbox.fancytree-radio:hover{background-position:-16px -48px}.fancytree-partsel span.fancytree-checkbox:hover{background-position:-80px -32px}.fancytree-partsel span.fancytree-checkbox.fancytree-radio{background-position:-64px -48px}.fancytree-partsel span.fancytree-checkbox.fancytree-radio:hover{background-position:-80px -48px}.fancytree-selected span.fancytree-checkbox{background-position:-32px -32px}.fancytree-selected span.fancytree-checkbox:hover{background-position:-48px -32px}.fancytree-selected span.fancytree-checkbox.fancytree-radio{background-position:-32px -48px}.fancytree-selected span.fancytree-checkbox.fancytree-radio:hover{background-position:-48px -48px}.fancytree-unselectable span.fancytree-checkbox{opacity:.4}.fancytree-unselectable span.fancytree-checkbox:hover{background-position:0 -32px}.fancytree-unselectable.fancytree-partsel span.fancytree-checkbox:hover{background-position:-64px -32px}.fancytree-unselectable.fancytree-selected span.fancytree-checkbox:hover{background-position:-32px -32px}span.fancytree-icon{margin-left:3px;background-position:0 0}.fancytree-ico-c span.fancytree-icon:hover{background-position:-16px 0}.fancytree-has-children.fancytree-ico-c span.fancytree-icon{background-position:-32px 0}.fancytree-has-children.fancytree-ico-c span.fancytree-icon:hover{background-position:-48px 0}.fancytree-ico-e span.fancytree-icon{background-position:-64px 0}.fancytree-ico-e span.fancytree-icon:hover{background-position:-80px 0}.fancytree-ico-cf span.fancytree-icon{background-position:0 -16px}.fancytree-ico-cf span.fancytree-icon:hover{background-position:-16px -16px}.fancytree-has-children.fancytree-ico-cf span.fancytree-icon{background-position:-32px -16px}.fancytree-has-children.fancytree-ico-cf span.fancytree-icon:hover{background-position:-48px -16px}.fancytree-ico-ef span.fancytree-icon{background-position:-64px -16px}.fancytree-ico-ef span.fancytree-icon:hover{background-position:-80px -16px}.fancytree-loading span.fancytree-expander,.fancytree-loading span.fancytree-expander:hover,.fancytree-statusnode-loading span.fancytree-icon,.fancytree-statusnode-loading span.fancytree-icon:hover,span.fancytree-icon.fancytree-icon-loading{background-image:url(data:image/gif;base64,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);background-position:0 0}.fancytree-statusnode-error span.fancytree-icon,.fancytree-statusnode-error span.fancytree-icon:hover{background-position:0 -112px}span.fancytree-node{display:inherit;width:100%;margin-top:1px;min-height:16px}span.fancytree-title{color:#000;cursor:pointer;display:inline-block;vertical-align:top;min-height:16px;padding:0 3px;margin:0 0 0 3px;border:1px solid transparent;border-radius:0}span.fancytree-node.fancytree-error span.fancytree-title{color:red}span.fancytree-childcounter{color:#fff;background:#f7f7f7;border:1px solid gray;border-radius:10px;padding:2px;text-align:center}div.fancytree-drag-helper span.fancytree-childcounter,div.fancytree-drag-helper span.fancytree-dnd-modifier{display:inline-block;color:#fff;background:#f7f7f7;border:1px solid gray;min-width:10px;height:10px;line-height:1;vertical-align:baseline;border-radius:10px;padding:2px;text-align:center;font-size:9px}div.fancytree-drag-helper span.fancytree-childcounter{position:absolute;top:-6px;right:-6px}div.fancytree-drag-helper span.fancytree-dnd-modifier{background:#5cb85c;border:none;font-weight:bolder}div.fancytree-drag-helper.fancytree-drop-accept span.fancytree-drag-helper-img{background-position:-32px -112px}div.fancytree-drag-helper.fancytree-drop-reject span.fancytree-drag-helper-img{background-position:-16px -112px}#fancytree-drop-marker{width:32px;position:absolute;background-position:0 -128px;margin:0}#fancytree-drop-marker.fancytree-drop-after,#fancytree-drop-marker.fancytree-drop-before{width:64px;background-position:0 -144px}#fancytree-drop-marker.fancytree-drop-copy{background-position:-64px -128px}#fancytree-drop-marker.fancytree-drop-move{background-position:-32px -128px}span.fancytree-drag-source.fancytree-drag-remove{opacity:.15}.fancytree-container.fancytree-rtl span.fancytree-connector,.fancytree-container.fancytree-rtl span.fancytree-drag-helper-img,.fancytree-container.fancytree-rtl span.fancytree-expander,.fancytree-container.fancytree-rtl span.fancytree-icon{background-image:url(data:image/gif;base64,R0lGODlhYADIAPcAAAAAAAAQdAgZehUFaioxQkFIWllbWEpVbFFhfQAplx8wjQQ5pxtShQBCrg5ayABiyQBr2AB04EBznEl7klVxklV6mlZ6rXp7tRmVHBilGSatIzrDMHGtLX65N0W9RX+Bfmu9ZWm9a3K9bXi9dEzXU0LOYUzWaHDHZ3LGcwCFhACA5gCN+QCU+gCc/wSl/QD//yDO9kSElEyMlk+Zi1aZllSFr1+EpFWrgVi1g1+2i3mFhWyMp2iMrWuMtGuUrm6cr2+TtHWUo3aWsmG1mHS8mXGmq3CtpXmtpna+p3u1pk+U1l+93Xmi1nm17X7Gol/G/1zX/3rO/Xbe/Z8AAP8AAP8ACP8bFP8eHv8jJ/8+RP9ITP9RVP9ZV/9iYP9qaP95e43CQpbJScelPu+uMMalRcStQsisSsWtX8+tVM22S8+1X9W2Rt2+TdC0WdW9UtS9Wc+9bNW9dPHFH9fFWN/GU97GWt3GYdzGaN/OZ9fFetvPe+DGTObOYebPaeHGcOXPcOnNd+fWbu3Xd+7efIOFgouNioyUm4mdnJKUkZudmYWtu421tom1vJG1vaKfo6WlnKSmo6utqqytt6W1u7S2s7S1vru9uoiuyZW1xIa77qW1yK29xKK+1a690by9x7W02LW8343HhozHi5POk5vOlJnOmpjFs5LnpqjWoqvfo77BvbXvv5zA1YPf/5PC/5bL/57N+5TW/7bGzLbG2b3O1Lfdy6HL86jS+7Hf/7TY/Lfc/7/f/bLwxrvwx6Po/6zn/6/u/7Xn//+Chv+Pjv+cmf+kpP+8uunWg+7fhPDVhPLdi+7nkPbni/nmmffvrPnvpvn2q//3tP33usXHxM3Lz83Py8XG0MHN29PT09TW093f3NLX4NnW6M/318To/83v/9/g6tLq/dT44N/25973/OTe3f3KyP3a2uHd7+fn3eTw3fj2xebo5e/v5eLr8+Ds++7v+ej26u7w7ezx9Oj/8O7/+fD37Pf27fH3+vb2//D+8fb49P339v//9v7//AAAACH5BAEAAP8ALAAAAABgAMgAAAj/AP/9U0WwoEGBCAcaXJhQ4EKGDR8ejCiRYEOFFS+q4tfPn0d/HadZisjxI0h/Ikl2/BhyZMKNKz22VGly5suSLFG6RKhqH86P0/btHOgzpsegQ3v+PCr0ZVGTKJvyfGoSqdOlUYda2kfVoyVKlHZu7erva1iEY5eaFctVLVi2ZNeibWtUrsCxZNmVg5t371y6JvXyXSr4b9/BRgvf5QrYJCXDZP09XswY6+R/eCNfzmwZcmeBlBg39ng5tOilpUWTTX3aKOvKrhGahu1YtmquMV+Lzm37Nm/Qt/f9/jd790fdjIcX390RefLmvX1DBx6833TiwYVfX/5cMsJI2bVH//oe3vp4geCzmyevvt/5f+mru2cv/3384Pzsh/epP3x++vj1l91/6O1HIHz77SNgdgsG1+BtD6oWoWjvJZJgIghZuB+GAmkYHof/eJgdiCIGR+KFCCGSICIprtjifiwKpCKML4YX4z8z2ogQIQkSsmOPP+7no0A8ChlkeEP+UySSCH3g5JNQPtlklFR+MGWVUF6JpZNabtkllgkxw4wyyJCZTDKCHHORmGSaiaaaDbFZJjJnprnmmHPWCWeYeLppZ5x90vlmnND00wwyekijqDTR7PkPM4UemuiijYYZKaKLMuoopIZiSumml06qaKUIcSpppqQKxEw00XiERx7OjP/6R5isugqrrLS26s+rsTI6a6m17nqrr7na2ms0v6oaLK+4AlurHXEcE40zzuCRa6vQSkuttc5iG+201V7rT7bgcqvss99uKy656nbrzxxxAOLMM83cIS688tJrr7v4zlvvvfH6u++5rfarL8D5/utsoW/A8Uczyygz8KOsMuwwxBLnavHDEU+8ajQbY+xxxf00zHHGC5d8cccJIQOyM/24ocYdyiiTjLn/uAwNzDLTbDPOOvM8c803t/xyzEP/bPTOSPtcNEJBN0000Ds/s07PaAbShx1QV331zFlv3fW8X98RNtcCIeM11oJojXbOa4Pdtthpx2323G8jM+8yy6T/0YYdWvMhT9579/134INDXbjfgPchOOHP8M044pBLfrjjiae9+OWPIzRI5MsckwYab/DBRx2Z//M536KTbjrqb68e+uiln5667K3XDrvnoOf++u290/7724GwLroZbtRBBx3yvIFQ8aEfn/zyzT9vfBrIK8+88wJBf4z02lff/fXZU8/9P96Db7713+tRBhlu0LHHHkucX3z778c/f/3sH+M+/PKjn/2i9z/9CbB/BQwg/8aHPwDu73x9aN8dyiCGNczvgAKJoP8mWMELLvAfGtQDBy34QISEcIQehKAEKUhCDIJwhR0s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)}.fancytree-container.fancytree-rtl .fancytree-exp-n span.fancytree-expander,.fancytree-container.fancytree-rtl .fancytree-exp-nl span.fancytree-expander{background-image:none}.fancytree-container.fancytree-rtl.fancytree-connectors .fancytree-exp-n span.fancytree-expander,.fancytree-container.fancytree-rtl.fancytree-connectors .fancytree-exp-nl span.fancytree-expander{background-image:url(data:image/gif;base64,R0lGODlhYADIAPcAAAAAAAAQdAgZehUFaioxQkFIWllbWEpVbFFhfQAplx8wjQQ5pxtShQBCrg5ayABiyQBr2AB04EBznEl7klVxklV6mlZ6rXp7tRmVHBilGSatIzrDMHGtLX65N0W9RX+Bfmu9ZWm9a3K9bXi9dEzXU0LOYUzWaHDHZ3LGcwCFhACA5gCN+QCU+gCc/wSl/QD//yDO9kSElEyMlk+Zi1aZllSFr1+EpFWrgVi1g1+2i3mFhWyMp2iMrWuMtGuUrm6cr2+TtHWUo3aWsmG1mHS8mXGmq3CtpXmtpna+p3u1pk+U1l+93Xmi1nm17X7Gol/G/1zX/3rO/Xbe/Z8AAP8AAP8ACP8bFP8eHv8jJ/8+RP9ITP9RVP9ZV/9iYP9qaP95e43CQpbJScelPu+uMMalRcStQsisSsWtX8+tVM22S8+1X9W2Rt2+TdC0WdW9UtS9Wc+9bNW9dPHFH9fFWN/GU97GWt3GYdzGaN/OZ9fFetvPe+DGTObOYebPaeHGcOXPcOnNd+fWbu3Xd+7efIOFgouNioyUm4mdnJKUkZudmYWtu421tom1vJG1vaKfo6WlnKSmo6utqqytt6W1u7S2s7S1vru9uoiuyZW1xIa77qW1yK29xKK+1a690by9x7W02LW8343HhozHi5POk5vOlJnOmpjFs5LnpqjWoqvfo77BvbXvv5zA1YPf/5PC/5bL/57N+5TW/7bGzLbG2b3O1Lfdy6HL86jS+7Hf/7TY/Lfc/7/f/bLwxrvwx6Po/6zn/6/u/7Xn//+Chv+Pjv+cmf+kpP+8uunWg+7fhPDVhPLdi+7nkPbni/nmmffvrPnvpvn2q//3tP33usXHxM3Lz83Py8XG0MHN29PT09TW093f3NLX4NnW6M/318To/83v/9/g6tLq/dT44N/25973/OTe3f3KyP3a2uHd7+fn3eTw3fj2xebo5e/v5eLr8+Ds++7v+ej26u7w7ezx9Oj/8O7/+fD37Pf27fH3+vb2//D+8fb49P339v//9v7//AAAACH5BAEAAP8ALAAAAABgAMgAAAj/AP/9U0WwoEGBCAcaXJhQ4EKGDR8ejCiRYEOFFS+q4tfPn0d/HadZisjxI0h/Ikl2/BhyZMKNKz22VGly5suSLFG6RKhqH86P0/btHOgzpsegQ3v+PCr0ZVGTKJvyfGoSqdOlUYda2kfVoyVKlHZu7erva1iEY5eaFctVLVi2ZNeibWtUrsCxZNmVg5t371y6JvXyXSr4b9/BRgvf5QrYJCXDZP09XswY6+R/eCNfzmwZcmeBlBg39ng5tOilpUWTTX3aKOvKrhGahu1YtmquMV+Lzm37Nm/Qt/f9/jd790fdjIcX390RefLmvX1DBx6833TiwYVfX/5cMsJI2bVH//oe3vp4geCzmyevvt/5f+mru2cv/3384Pzsh/epP3x++vj1l91/6O1HIHz77SNgdgsG1+BtD6oWoWjvJZJgIghZuB+GAmkYHof/eJgdiCIGR+KFCCGSICIprtjifiwKpCKML4YX4z8z2ogQIQkSsmOPP+7no0A8ChlkeEP+UySSCH3g5JNQPtlklFR+MGWVUF6JpZNabtkllgkxw4wyyJCZTDKCHHORmGSaiaaaDbFZJjJnprnmmHPWCWeYeLppZ5x90vlmnND00wwyekijqDTR7PkPM4UemuiijYYZKaKLMuoopIZiSumml06qaKUIcSpppqQKxEw00XiERx7OjP/6R5isugqrrLS26s+rsTI6a6m17nqrr7na2ms0v6oaLK+4AlurHXEcE40zzuCRa6vQSkuttc5iG+201V7rT7bgcqvss99uKy656nbrzxxxAOLMM83cIS688tJrr7v4zlvvvfH6u++5rfarL8D5/utsoW/A8Uczyygz8KOsMuwwxBLnavHDEU+8ajQbY+xxxf00zHHGC5d8cccJIQOyM/24ocYdyiiTjLn/uAwNzDLTbDPOOvM8c803t/xyzEP/bPTOSPtcNEJBN0000Ds/s07PaAbShx1QV331zFlv3fW8X98RNtcCIeM11oJojXbOa4Pdtthpx2323G8jM+8yy6T/0YYdWvMhT9579/134INDXbjfgPchOOHP8M044pBLfrjjiae9+OWPIzRI5MsckwYab/DBRx2Z//M536KTbjrqb68e+uiln5667K3XDrvnoOf++u290/7724GwLroZbtRBBx3yvIFQ8aEfn/zyzT9vfBrIK8+88wJBf4z02lff/fXZU8/9P96Db7713+tRBhlu0LHHHkucX3z778c/f/3sH+M+/PKjn/2i9z/9CbB/BQwg/8aHPwDu73x9aN8dyiCGNczvgAKJoP8mWMELLvAfGtQDBy34QISEcIQehKAEKUhCDIJwhR0s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)}ul.fancytree-container.fancytree-rtl ul{padding:0 16px 0 0}ul.fancytree-container.fancytree-rtl.fancytree-connectors li{background-position:right 0;background-image:url(data:image/gif;base64,R0lGODlhEAAQAPcAAAAAANPT0wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAQABAAAAgxAP8JHPgvAMGDCA0iXFiQ4UKFDglCjChwIkWLETE61MiQ40OKEkEO9JhQZEWTDRcGBAA7)}ul.fancytree-container.fancytree-rtl li.fancytree-lastsib,ul.fancytree-container.fancytree-rtl.fancytree-no-connector>li{background-image:none}#fancytree-drop-marker.fancytree-rtl{background-image:url(data:image/gif;base64,R0lGODlhYADIAPcAAAAAAAAQdAgZehUFaioxQkFIWllbWEpVbFFhfQAplx8wjQQ5pxtShQBCrg5ayABiyQBr2AB04EBznEl7klVxklV6mlZ6rXp7tRmVHBilGSatIzrDMHGtLX65N0W9RX+Bfmu9ZWm9a3K9bXi9dEzXU0LOYUzWaHDHZ3LGcwCFhACA5gCN+QCU+gCc/wSl/QD//yDO9kSElEyMlk+Zi1aZllSFr1+EpFWrgVi1g1+2i3mFhWyMp2iMrWuMtGuUrm6cr2+TtHWUo3aWsmG1mHS8mXGmq3CtpXmtpna+p3u1pk+U1l+93Xmi1nm17X7Gol/G/1zX/3rO/Xbe/Z8AAP8AAP8ACP8bFP8eHv8jJ/8+RP9ITP9RVP9ZV/9iYP9qaP95e43CQpbJScelPu+uMMalRcStQsisSsWtX8+tVM22S8+1X9W2Rt2+TdC0WdW9UtS9Wc+9bNW9dPHFH9fFWN/GU97GWt3GYdzGaN/OZ9fFetvPe+DGTObOYebPaeHGcOXPcOnNd+fWbu3Xd+7efIOFgouNioyUm4mdnJKUkZudmYWtu421tom1vJG1vaKfo6WlnKSmo6utqqytt6W1u7S2s7S1vru9uoiuyZW1xIa77qW1yK29xKK+1a690by9x7W02LW8343HhozHi5POk5vOlJnOmpjFs5LnpqjWoqvfo77BvbXvv5zA1YPf/5PC/5bL/57N+5TW/7bGzLbG2b3O1Lfdy6HL86jS+7Hf/7TY/Lfc/7/f/bLwxrvwx6Po/6zn/6/u/7Xn//+Chv+Pjv+cmf+kpP+8uunWg+7fhPDVhPLdi+7nkPbni/nmmffvrPnvpvn2q//3tP33usXHxM3Lz83Py8XG0MHN29PT09TW093f3NLX4NnW6M/318To/83v/9/g6tLq/dT44N/25973/OTe3f3KyP3a2uHd7+fn3eTw3fj2xebo5e/v5eLr8+Ds++7v+ej26u7w7ezx9Oj/8O7/+fD37Pf27fH3+vb2//D+8fb49P339v//9v7//AAAACH5BAEAAP8ALAAAAABgAMgAAAj/AP/9U0WwoEGBCAcaXJhQ4EKGDR8ejCiRYEOFFS+q4tfPn0d/HadZisjxI0h/Ikl2/BhyZMKNKz22VGly5suSLFG6RKhqH86P0/btHOgzpsegQ3v+PCr0ZVGTKJvyfGoSqdOlUYda2kfVoyVKlHZu7erva1iEY5eaFctVLVi2ZNeibWtUrsCxZNmVg5t371y6JvXyXSr4b9/BRgvf5QrYJCXDZP09XswY6+R/eCNfzmwZcmeBlBg39ng5tOilpUWTTX3aKOvKrhGahu1YtmquMV+Lzm37Nm/Qt/f9/jd790fdjIcX390RefLmvX1DBx6833TiwYVfX/5cMsJI2bVH//oe3vp4geCzmyevvt/5f+mru2cv/3384Pzsh/epP3x++vj1l91/6O1HIHz77SNgdgsG1+BtD6oWoWjvJZJgIghZuB+GAmkYHof/eJgdiCIGR+KFCCGSICIprtjifiwKpCKML4YX4z8z2ogQIQkSsmOPP+7no0A8ChlkeEP+UySSCH3g5JNQPtlklFR+MGWVUF6JpZNabtkllgkxw4wyyJCZTDKCHHORmGSaiaaaDbFZJjJnprnmmHPWCWeYeLppZ5x90vlmnND00wwyekijqDTR7PkPM4UemuiijYYZKaKLMuoopIZiSumml06qaKUIcSpppqQKxEw00XiERx7OjP/6R5isugqrrLS26s+rsTI6a6m17nqrr7na2ms0v6oaLK+4AlurHXEcE40zzuCRa6vQSkuttc5iG+201V7rT7bgcqvss99uKy656nbrzxxxAOLMM83cIS688tJrr7v4zlvvvfH6u++5rfarL8D5/utsoW/A8Uczyygz8KOsMuwwxBLnavHDEU+8ajQbY+xxxf00zHHGC5d8cccJIQOyM/24ocYdyiiTjLn/uAwNzDLTbDPOOvM8c803t/xyzEP/bPTOSPtcNEJBN0000Ds/s07PaAbShx1QV331zFlv3fW8X98RNtcCIeM11oJojXbOa4Pdtthpx2323G8jM+8yy6T/0YYdWvMhT9579/134INDXbjfgPchOOHP8M044pBLfrjjiae9+OWPIzRI5MsckwYab/DBRx2Z//M536KTbjrqb68e+uiln5667K3XDrvnoOf++u290/7724GwLroZbtRBBx3yvIFQ8aEfn/zyzT9vfBrIK8+88wJBf4z02lff/fXZU8/9P96Db7713+tRBhlu0LHHHkucX3z778c/f/3sH+M+/PKjn/2i9z/9CbB/BQwg/8aHPwDu73x9aN8dyiCGNczvgAKJoP8mWMELLvAfGtQDBy34QISEcIQehKAEKUhCDIJwhR0s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)}table.fancytree-ext-table{font-family:tahoma,arial,helvetica;font-size:10pt;border-collapse:collapse}table.fancytree-ext-table span.fancytree-node{display:inline-block;box-sizing:border-box}table.fancytree-ext-table td.fancytree-status-merged{text-align:center;font-style:italic;color:silver}table.fancytree-ext-table tr.fancytree-statusnode-error td.fancytree-status-merged{color:red}table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode>tbody>tr.fancytree-active>td{background-color:#eee}table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode.fancytree-cell-nav-mode>tbody>tr>td.fancytree-active-cell,table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode>tbody>tr>td.fancytree-active-cell{background-color:#f7f7f7}table.fancytree-ext-columnview tbody tr td{position:relative;border:1px solid gray;vertical-align:top;overflow:auto}table.fancytree-ext-columnview tbody tr td>ul{padding:0}table.fancytree-ext-columnview tbody tr td>ul li{-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background-attachment:scroll;background-color:transparent;background-position:0 0;background-repeat:repeat-y;background-image:none;margin:0;list-style:none}table.fancytree-ext-columnview span.fancytree-node{position:relative;display:inline-block}table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded{background-color:#e0e0e0}table.fancytree-ext-columnview span.fancytree-node.fancytree-active{background-color:#f7f7f7}table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right{position:absolute;right:3px;background-position:0 -80px}table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right:hover{background-position:-16px -80px}.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title{color:silver;font-weight:lighter}.fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title,.fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title{color:#000;font-weight:400}.fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title,.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title{color:#000;font-weight:700}.fancytree-ext-filter-hide span.fancytree-node.fancytree-hide,.fancytree-ext-filter-hide tr.fancytree-hide{display:none}.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title,.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title{color:silver;font-weight:lighter}.fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title,.fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title{color:#000;font-weight:400}.fancytree-ext-filter-hide-expanders span.fancytree-node.fancytree-match span.fancytree-expander,.fancytree-ext-filter-hide-expanders tr.fancytree-match span.fancytree-expander{visibility:hidden}.fancytree-ext-filter-hide-expanders span.fancytree-node.fancytree-submatch span.fancytree-expander,.fancytree-ext-filter-hide-expanders tr.fancytree-submatch span.fancytree-expander{visibility:visible}.fancytree-ext-childcounter span.fancytree-custom-icon,.fancytree-ext-childcounter span.fancytree-icon,.fancytree-ext-filter span.fancytree-custom-icon,.fancytree-ext-filter span.fancytree-icon{position:relative}.fancytree-ext-childcounter span.fancytree-childcounter,.fancytree-ext-filter span.fancytree-childcounter{color:#fff;background:#777;border:1px solid gray;position:absolute;top:-6px;right:-6px;min-width:10px;height:10px;line-height:1;vertical-align:baseline;border-radius:10px;padding:2px;text-align:center;font-size:9px}ul.fancytree-ext-wide{position:relative;min-width:100%;z-index:2;box-sizing:border-box}ul.fancytree-ext-wide span.fancytree-node>span{position:relative;z-index:2}ul.fancytree-ext-wide span.fancytree-node span.fancytree-title{position:absolute;z-index:1;left:0;min-width:100%;margin-left:0;margin-right:0;box-sizing:border-box}.fancytree-ext-fixed-wrapper .fancytree-ext-fixed-hidden{display:none}.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-scroll-border-bottom{border-bottom:3px solid rgba(0,0,0,.75)}.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-scroll-border-right{border-right:3px solid rgba(0,0,0,.75)}.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-tl{position:absolute;overflow:hidden;z-index:3;top:0;left:0}.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-tr{position:absolute;overflow:hidden;z-index:2;top:0}.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-bl{position:absolute;overflow:hidden;z-index:2;left:0}.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-br{position:absolute;overflow:scroll;z-index:1}.fancytree-plain span.fancytree-node{border:1px solid transparent}.fancytree-plain span.fancytree-node:hover{background-color:#f7f7f7;border-color:#dedede}.fancytree-plain .fancytree-node.fancytree-selected{font-style:italic}table.fancytree-ext-table tbody tr td{border:1px solid #ededed}table.fancytree-ext-table tbody span.fancytree-node,table.fancytree-ext-table tbody span.fancytree-node:hover{border:none;background:0 0}table.fancytree-ext-table tbody tr:hover{background-color:#f7f7f7;outline:#dedede solid 1px}table.fancytree-ext-table tbody tr.fancytree-focused span.fancytree-title{outline:#000 dotted 1px}table.fancytree-ext-table tbody tr.fancytree-active,table.fancytree-ext-table tbody tr.fancytree-active:hover,table.fancytree-ext-table tbody tr.fancytree-selected:hover{background-color:#f7f7f7;outline:#dedede solid 1px}table.fancytree-ext-table tbody tr.fancytree-selected{background-color:#f7f7f7}table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-active{background-color:#f7f7f7;outline:#dedede solid 1px}table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-selected{background-color:#f7f7f7}span.fancytree-checkbox{background-position:0 -30px!important;width:14px!important;height:14px!important;margin:2px 5px 0!important;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAABLCAYAAABA3bYOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAG0mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDQtMThUMTE6MzE6NTQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA0LTE4VDE2OjQwOjExKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA0LTE4VDE2OjQwOjExKzA4OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjc4MTA5YTExLTFiZTctNDQ3Ni04YjkwLTRlZDE2ODU0MWFlOCIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjZjNTgwNzNkLWJmOWItMjg0My05OTY2LTY0MWNjYjZmYjYwNSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjk4MEM2NjY0NDRGNzExRTZBRTkwQzRFQTk5Q0EyQ0E5IiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDUzNDQ5QjQ0NEY3MTFFNkFFOTBDNEVBOTlDQTJDQTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTgwQzY2NjI0NEY3MTFFNkFFOTBDNEVBOTlDQTJDQTkiLz4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjcwNjVmMTYtNTk5YS00ODJiLTgyNzEtM2I5NTcwYTNhZjNmIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTE4VDE0OjI4OjM2KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NzgxMDlhMTEtMWJlNy00NDc2LThiOTAtNGVkMTY4NTQxYWU4IiBzdEV2dDp3aGVuPSIyMDE5LTA0LTE4VDE2OjQwOjExKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ocz3nAAAEFklEQVRYhe1WS27jRhSs/pAiZYkciRrZBryfU8wilwgw+ayyn10OkWSTC2STIHeYVTbJJWZHA4YA2RBpiSElNvuTBd1tyZZJJx4gmylAgCR2qV/Xq3otkqapD+AnAN8AmKIbOYDfAHzPAfwYhuH7JEnAGOtkKaUmq9Xq/Xa73ZI0TVcXFxdTQyl+v77GX+s1/lbqgHDCGN7GMb6ez0G0xtXVVcYBTBlj+HW5xIcsO7pTqRQ+ZBl8QvBuPgeAKbUP/1yve44H/HF769474sPyjmF/De1Y14n/kTjq6eHDNY74No57iV+8euXecwCZUmr61XwOg7Yt5RMG+PL1a6j2WYY0TX9eLpdGSmn6IKU0y+XSpGn6A9kz+bcAJj3VOpMTY0zv2Y6BX15efo7VHj5JrPjDh7+8eYMhPfR+pTW++/jx4Lv/nI5HOz785afwOVaP8Qli1TSNKYoCm82mcyEhBJxzcM4xnU5BVquVEUJg3pr3SWitUdc16rpud6yqCpPJBJR2m4hSCsYYKKW4ubkBb5oGw+EQfWclhIAQAt/30TRNazkpJTzP6yQ+qoAQYpvaC601AMD3/ZbI+SOvH4UxBlpraK3/fawopVBKgRtjIKXsnXBWPMYYPM9riZxzEEI6ifa5EAJN07SlPueMTdO4H6CUgnqeh7Ise4m2XVJKDAYD8DAMsdlsEARBJ9EYg+12i6qq4Ps+iBDCFEWBdc9cpZTC8zwEQYAoivCyWFVVhTzPOxdaUYbDIaIoatOR5zkmk+7wM8ZQliXqukZVVeCr1QpJkoBzDmMMCCEwxkAp1cp+5xRCCMbjMZqmQZZl95YzxjgC0MpPKYU1SFmWrpfGmEOiVQ1oG27dUhQFFosF1us1pJSglN5fAYQQbLdbl3JbclmWWCwWqOsaUkoXaEdkjGGxWGC32+H09BRRFOH29hY3NzcQQuD8/Bzj8Rie57XlH1Pu+voadV0jz3PsdjvM53NMp1N4ngcpZRsrS1JKYTabAQCyLGsl5xxJkiBJErfGincgzmAwwGw2w2g0gjEGcRzj7OwMjDEnlG0ZN8Y4MWy/ZrMZkiRpzXxH0FqDc37fIt/3UVUVTk5O3LS2iu6ra88nhGgnwGg0QlVVB1Lv76KUgjEGjDEIISClRBiGLdEYgzzP3VzZP4/9bB0UBAHiOH5BrACYPM9RliWklL2EOI4xGo3Abc88z0MURW5aP4WyLFuFm6ZBEAQIggCEkN75GoYhiqIAraoKjDEwxtx473qFYXh/W7n74K65XbC2o1prDAaDZ99Y1gyUUgqttZsAzyHeDS7aq+QxULtL338AR7jbiNoS7ZTrw14AqKv7ObDqc865GwcAencVQrS55JwfxKcPQoh2ItR1bYqicAO3r+TxePyy2+of/TgdBK4XCv8AAAAASUVORK5CYII=)!important}span.fancytree-selected span.fancytree-checkbox{background-position:0 0!important;width:14px!important;height:14px!important;margin:2px 5px 0!important;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAABLCAYAAABA3bYOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAG0mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDQtMThUMTE6MzE6NTQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA0LTE4VDE2OjQwOjExKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA0LTE4VDE2OjQwOjExKzA4OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjc4MTA5YTExLTFiZTctNDQ3Ni04YjkwLTRlZDE2ODU0MWFlOCIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjZjNTgwNzNkLWJmOWItMjg0My05OTY2LTY0MWNjYjZmYjYwNSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjk4MEM2NjY0NDRGNzExRTZBRTkwQzRFQTk5Q0EyQ0E5IiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDUzNDQ5QjQ0NEY3MTFFNkFFOTBDNEVBOTlDQTJDQTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTgwQzY2NjI0NEY3MTFFNkFFOTBDNEVBOTlDQTJDQTkiLz4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjcwNjVmMTYtNTk5YS00ODJiLTgyNzEtM2I5NTcwYTNhZjNmIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTE4VDE0OjI4OjM2KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NzgxMDlhMTEtMWJlNy00NDc2LThiOTAtNGVkMTY4NTQxYWU4IiBzdEV2dDp3aGVuPSIyMDE5LTA0LTE4VDE2OjQwOjExKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ocz3nAAAEFklEQVRYhe1WS27jRhSs/pAiZYkciRrZBryfU8wilwgw+ayyn10OkWSTC2STIHeYVTbJJWZHA4YA2RBpiSElNvuTBd1tyZZJJx4gmylAgCR2qV/Xq3otkqapD+AnAN8AmKIbOYDfAHzPAfwYhuH7JEnAGOtkKaUmq9Xq/Xa73ZI0TVcXFxdTQyl+v77GX+s1/lbqgHDCGN7GMb6ez0G0xtXVVcYBTBlj+HW5xIcsO7pTqRQ+ZBl8QvBuPgeAKbUP/1yve44H/HF769474sPyjmF/De1Y14n/kTjq6eHDNY74No57iV+8euXecwCZUmr61XwOg7Yt5RMG+PL1a6j2WYY0TX9eLpdGSmn6IKU0y+XSpGn6A9kz+bcAJj3VOpMTY0zv2Y6BX15efo7VHj5JrPjDh7+8eYMhPfR+pTW++/jx4Lv/nI5HOz785afwOVaP8Qli1TSNKYoCm82mcyEhBJxzcM4xnU5BVquVEUJg3pr3SWitUdc16rpud6yqCpPJBJR2m4hSCsYYKKW4ubkBb5oGw+EQfWclhIAQAt/30TRNazkpJTzP6yQ+qoAQYpvaC601AMD3/ZbI+SOvH4UxBlpraK3/fawopVBKgRtjIKXsnXBWPMYYPM9riZxzEEI6ifa5EAJN07SlPueMTdO4H6CUgnqeh7Ise4m2XVJKDAYD8DAMsdlsEARBJ9EYg+12i6qq4Ps+iBDCFEWBdc9cpZTC8zwEQYAoivCyWFVVhTzPOxdaUYbDIaIoatOR5zkmk+7wM8ZQliXqukZVVeCr1QpJkoBzDmMMCCEwxkAp1cp+5xRCCMbjMZqmQZZl95YzxjgC0MpPKYU1SFmWrpfGmEOiVQ1oG27dUhQFFosF1us1pJSglN5fAYQQbLdbl3JbclmWWCwWqOsaUkoXaEdkjGGxWGC32+H09BRRFOH29hY3NzcQQuD8/Bzj8Rie57XlH1Pu+voadV0jz3PsdjvM53NMp1N4ngcpZRsrS1JKYTabAQCyLGsl5xxJkiBJErfGincgzmAwwGw2w2g0gjEGcRzj7OwMjDEnlG0ZN8Y4MWy/ZrMZkiRpzXxH0FqDc37fIt/3UVUVTk5O3LS2iu6ra88nhGgnwGg0QlVVB1Lv76KUgjEGjDEIISClRBiGLdEYgzzP3VzZP4/9bB0UBAHiOH5BrACYPM9RliWklL2EOI4xGo3Abc88z0MURW5aP4WyLFuFm6ZBEAQIggCEkN75GoYhiqIAraoKjDEwxtx473qFYXh/W7n74K65XbC2o1prDAaDZ99Y1gyUUgqttZsAzyHeDS7aq+QxULtL338AR7jbiNoS7ZTrw14AqKv7ObDqc865GwcAencVQrS55JwfxKcPQoh2ItR1bYqicAO3r+TxePyy2+of/TgdBK4XCv8AAAAASUVORK5CYII=)!important}.fancytree-partsel span.fancytree-checkbox{background-position:0 -15px!important;width:14px!important;height:14px!important;margin:2px 5px 0!important;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAABLCAYAAABA3bYOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAG0mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDQtMThUMTE6MzE6NTQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA0LTE4VDE2OjQwOjExKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA0LTE4VDE2OjQwOjExKzA4OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjc4MTA5YTExLTFiZTctNDQ3Ni04YjkwLTRlZDE2ODU0MWFlOCIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjZjNTgwNzNkLWJmOWItMjg0My05OTY2LTY0MWNjYjZmYjYwNSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjk4MEM2NjY0NDRGNzExRTZBRTkwQzRFQTk5Q0EyQ0E5IiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDUzNDQ5QjQ0NEY3MTFFNkFFOTBDNEVBOTlDQTJDQTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTgwQzY2NjI0NEY3MTFFNkFFOTBDNEVBOTlDQTJDQTkiLz4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjcwNjVmMTYtNTk5YS00ODJiLTgyNzEtM2I5NTcwYTNhZjNmIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTE4VDE0OjI4OjM2KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NzgxMDlhMTEtMWJlNy00NDc2LThiOTAtNGVkMTY4NTQxYWU4IiBzdEV2dDp3aGVuPSIyMDE5LTA0LTE4VDE2OjQwOjExKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ocz3nAAAEFklEQVRYhe1WS27jRhSs/pAiZYkciRrZBryfU8wilwgw+ayyn10OkWSTC2STIHeYVTbJJWZHA4YA2RBpiSElNvuTBd1tyZZJJx4gmylAgCR2qV/Xq3otkqapD+AnAN8AmKIbOYDfAHzPAfwYhuH7JEnAGOtkKaUmq9Xq/Xa73ZI0TVcXFxdTQyl+v77GX+s1/lbqgHDCGN7GMb6ez0G0xtXVVcYBTBlj+HW5xIcsO7pTqRQ+ZBl8QvBuPgeAKbUP/1yve44H/HF769474sPyjmF/De1Y14n/kTjq6eHDNY74No57iV+8euXecwCZUmr61XwOg7Yt5RMG+PL1a6j2WYY0TX9eLpdGSmn6IKU0y+XSpGn6A9kz+bcAJj3VOpMTY0zv2Y6BX15efo7VHj5JrPjDh7+8eYMhPfR+pTW++/jx4Lv/nI5HOz785afwOVaP8Qli1TSNKYoCm82mcyEhBJxzcM4xnU5BVquVEUJg3pr3SWitUdc16rpud6yqCpPJBJR2m4hSCsYYKKW4ubkBb5oGw+EQfWclhIAQAt/30TRNazkpJTzP6yQ+qoAQYpvaC601AMD3/ZbI+SOvH4UxBlpraK3/fawopVBKgRtjIKXsnXBWPMYYPM9riZxzEEI6ifa5EAJN07SlPueMTdO4H6CUgnqeh7Ise4m2XVJKDAYD8DAMsdlsEARBJ9EYg+12i6qq4Ps+iBDCFEWBdc9cpZTC8zwEQYAoivCyWFVVhTzPOxdaUYbDIaIoatOR5zkmk+7wM8ZQliXqukZVVeCr1QpJkoBzDmMMCCEwxkAp1cp+5xRCCMbjMZqmQZZl95YzxjgC0MpPKYU1SFmWrpfGmEOiVQ1oG27dUhQFFosF1us1pJSglN5fAYQQbLdbl3JbclmWWCwWqOsaUkoXaEdkjGGxWGC32+H09BRRFOH29hY3NzcQQuD8/Bzj8Rie57XlH1Pu+voadV0jz3PsdjvM53NMp1N4ngcpZRsrS1JKYTabAQCyLGsl5xxJkiBJErfGincgzmAwwGw2w2g0gjEGcRzj7OwMjDEnlG0ZN8Y4MWy/ZrMZkiRpzXxH0FqDc37fIt/3UVUVTk5O3LS2iu6ra88nhGgnwGg0QlVVB1Lv76KUgjEGjDEIISClRBiGLdEYgzzP3VzZP4/9bB0UBAHiOH5BrACYPM9RliWklL2EOI4xGo3Abc88z0MURW5aP4WyLFuFm6ZBEAQIggCEkN75GoYhiqIAraoKjDEwxtx473qFYXh/W7n74K65XbC2o1prDAaDZ99Y1gyUUgqttZsAzyHeDS7aq+QxULtL338AR7jbiNoS7ZTrw14AqKv7ObDqc865GwcAencVQrS55JwfxKcPQoh2ItR1bYqicAO3r+TxePyy2+of/TgdBK4XCv8AAAAASUVORK5CYII=)!important}span.fancytree-node{padding:5px 0!important}ul.fancytree-container .fancytree-node.fancytree-selected{font-style:normal}np-tree span.fancytree-node{border-radius:5px}"]
}] }
];
/** @nocollapse */
NpTree.ctorParameters = () => [
{ type: Injector }
];
NpTree.propDecorators = {
name: [{ type: Input }],
options: [{ type: Input }],
onNpTreeInit: [{ type: Output }],
onNpTreeNodeActivate: [{ type: Output }],
onNpTreeNodeClick: [{ type: Output }],
onNpTreeNodeSelect: [{ type: Output }],
onNpTreeNodeRender: [{ type: Output }],
onNpTreeNodeKebabClick: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpTreeModule {
}
NpTreeModule.decorators = [
{ type: NgModule, args: [{
imports: [
NpKebabModule
],
declarations: [NpTree],
exports: [NpTree]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
* @template D
*/
class DialogConfig {
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class DialogRef {
constructor() {
this._afterClosed = new Subject();
this.afterClosed = this._afterClosed.asObservable();
}
/**
* @param {?=} result
* @return {?}
*/
close(result) {
this._afterClosed.next(result);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class InsertionDirective {
/**
* @param {?} viewContainerRef
*/
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
}
InsertionDirective.decorators = [
{ type: Directive, args: [{
selector: '[npInsertion]'
},] }
];
/** @nocollapse */
InsertionDirective.ctorParameters = () => [
{ type: ViewContainerRef }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpDialog {
/**
* @param {?} componentFactoryResolver
* @param {?} cd
* @param {?} dialogRef
* @param {?} config
*/
constructor(componentFactoryResolver, cd, dialogRef, config) {
this.componentFactoryResolver = componentFactoryResolver;
this.cd = cd;
this.dialogRef = dialogRef;
this.config = config;
this._onClose = new Subject();
this.onClose = this._onClose.asObservable();
console.log(config.userClass);
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.loadChildComponent(this.childComponentType);
this.cd.detectChanges(); // Avoid ExpressionChangedAfterItHasBeenCheckedError
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.componentRef) {
this.componentRef.destroy();
}
}
/**
* @param {?} evt
* @return {?}
*/
onOverlayClicked(evt) {
if (this.config.backdrop === false) {
return;
}
this.dialogRef.close();
}
/**
* @param {?} evt
* @return {?}
*/
onDialogClicked(evt) {
evt.stopPropagation();
}
/**
* @param {?} componentType
* @return {?}
*/
loadChildComponent(componentType) {
/** @type {?} */
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
/** @type {?} */
let viewContainerRef = this.insertionPoint.viewContainerRef;
viewContainerRef.clear();
this.componentRef = viewContainerRef.createComponent(componentFactory);
}
}
NpDialog.decorators = [
{ type: Component, args: [{
selector: 'np-dialog',
template: "<div class=\"overlay\" (click)=\"onOverlayClicked($event)\">\r\n <div class=\"dialog\" [ngClass]=\"config?.userClass\" (click)=\"onDialogClicked($event)\">\r\n <ng-template npInsertion></ng-template>\r\n </div>\r\n</div>\r\n",
styles: [".overlay{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);align-items:center;z-index:99;overflow-x:hidden;overflow-y:auto}.dialog{margin-top:8vh;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);background-color:#fff;width:50%;height:50%;display:flex;flex-direction:column;padding:5px 20px}"]
}] }
];
/** @nocollapse */
NpDialog.ctorParameters = () => [
{ type: ComponentFactoryResolver },
{ type: ChangeDetectorRef },
{ type: DialogRef },
{ type: DialogConfig }
];
NpDialog.propDecorators = {
insertionPoint: [{ type: ViewChild, args: [InsertionDirective,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpDialogModule {
}
NpDialogModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
exports: [
NpDialog,
InsertionDirective
],
declarations: [NpDialog, InsertionDirective],
entryComponents: [
NpDialog
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class DialogInjector {
/**
* @param {?} _parentInjector
* @param {?} _additionalTokens
*/
constructor(_parentInjector, _additionalTokens) {
this._parentInjector = _parentInjector;
this._additionalTokens = _additionalTokens;
}
/**
* @param {?} token
* @param {?=} notFoundValue
* @param {?=} flags
* @return {?}
*/
get(token, notFoundValue, flags) {
/** @type {?} */
const value = this._additionalTokens.get(token);
if (value) {
return value;
}
return this._parentInjector.get(token, notFoundValue);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class DialogService {
/**
* @param {?} componentFactoryResolver
* @param {?} appRef
* @param {?} injector
*/
constructor(componentFactoryResolver, appRef, injector) {
this.componentFactoryResolver = componentFactoryResolver;
this.appRef = appRef;
this.injector = injector;
}
/**
* @param {?} componentType
* @param {?} config
* @return {?}
*/
open(componentType, config) {
/** @type {?} */
const dialogRef = this.appendDialogComponentToBody(config);
this.dialogComponentRef.instance.childComponentType = componentType;
return dialogRef;
}
/**
* @private
* @param {?} config
* @return {?}
*/
appendDialogComponentToBody(config) {
/** @type {?} */
const map$$1 = new WeakMap();
map$$1.set(DialogConfig, config);
/** @type {?} */
const dialogRef = new DialogRef();
map$$1.set(DialogRef, dialogRef);
/** @type {?} */
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(NpDialog);
/** @type {?} */
const componentRef = componentFactory.create(new DialogInjector(this.injector, map$$1));
this.appRef.attachView(componentRef.hostView);
/** @type {?} */
const domElem = (/** @type {?} */ (((/** @type {?} */ (componentRef.hostView))).rootNodes[0]));
document.body.appendChild(domElem);
/** @type {?} */
const sub = dialogRef.afterClosed.subscribe((/**
* @return {?}
*/
() => {
this.removeDialogComponentFromBody(componentRef);
sub.unsubscribe();
}));
this.dialogComponentRef = componentRef;
return dialogRef;
}
// [KevinZhang]: Need to pass dialogComponentRef as parameter, because this service is providedIn DialogModule,
// so only one instance in this module, thus we need to pass dialogComponentRef once we open a new dialog,
// this will deal with a scenario for nested dialog close event
/**
* @private
* @param {?} dialogComponentRef
* @return {?}
*/
removeDialogComponentFromBody(dialogComponentRef) {
this.appRef.detachView(dialogComponentRef.hostView);
dialogComponentRef.destroy();
}
}
DialogService.decorators = [
{ type: Injectable, args: [{
providedIn: NpDialogModule
},] }
];
/** @nocollapse */
DialogService.ctorParameters = () => [
{ type: ComponentFactoryResolver },
{ type: ApplicationRef },
{ type: Injector }
];
/** @nocollapse */ DialogService.ngInjectableDef = defineInjectable({ factory: function DialogService_Factory() { return new DialogService(inject(ComponentFactoryResolver), inject(ApplicationRef), inject(INJECTOR)); }, token: DialogService, providedIn: NpDialogModule });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpPaginator {
constructor() {
this.pageCounts = [10, 20, 50, 100];
this.size = 20; // Default is 20 rows per page
// Default is 20 rows per page
this.firstBtnText = '首页';
this.preBtnText = '上一页';
this.nextBtnText = '下一页';
this.lastBtnText = '尾页';
this.totalText = '共';
this.itemsPerPageText = '条，每页显示条数';
this.onPageChanged = new EventEmitter();
this.onPageSizeChanged = new EventEmitter();
this.pagerLength = 5;
this.pageNumber = 1;
this.pageCountsDropdownsettings = { single: true, isShowSearchBox: false, isRequired: true, width: 60, placeHolder: '' };
this.bindingPagerList = [];
this.bindingPageCounts = [];
}
/**
* @return {?}
*/
ngOnInit() {
this.refreshPaginatorInfo();
}
/**
* @return {?}
*/
refreshPaginatorInfo() {
if (this.total <= 0) {
this.pageNumber = 1;
this.totalPagerLength = 0;
return;
}
this.bindingRowsPerPage = { id: this.size, label: this.size + '' };
this.calculatePagerLength(this.size);
this.initBindingData();
this.buildBindingPagerList();
}
/**
* @return {?}
*/
initBindingData() {
this.bindingPagerList = Array(this.pagerLength).fill(null).map((/**
* @param {?} x
* @param {?} i
* @return {?}
*/
(x, i) => (i + 1)));
this.bindingPageCounts = this.pageCounts.map((/**
* @param {?} m
* @return {?}
*/
m => { return (/** @type {?} */ ({ id: m, label: m + '' })); }));
}
// We already pass in the input params 'pagerLength', but we still
// need to calculate the real pagerLength according to 'total' and 'size',
// since if the total counts is smaller enough we do not need those more pager length
/**
* @param {?} size
* @return {?}
*/
calculatePagerLength(size) {
this.totalPagerLength = this.total % size === 0 ? this.total / size : Math.floor(this.total / size) + 1;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes) {
if (changes.size && changes.size.currentValue) {
this.bindingRowsPerPage = { id: changes.size.currentValue, label: changes.size.currentValue };
}
if (changes.total && changes.total.currentValue && !changes.total.firstChange) {
this.refreshPaginatorInfo();
}
if (changes.pageNumber && !changes.pageNumber.firstChange && changes.pageNumber.currentValue) {
// this.onNumberPagerClicked(+changes.pageNumber.currentValue);
this.pageNumber = +changes.pageNumber.currentValue;
this.buildBindingPagerList();
}
}
}
/**
* @param {?} selectedItem
* @return {?}
*/
onPageCountsDropdownSelect(selectedItem) {
this.pageNumber = 1;
this.size = +selectedItem.id;
this.calculatePagerLength(+selectedItem.id);
this.buildBindingPagerList();
this.onPageSizeChanged.next(selectedItem.id);
}
// Build the pager list ,
// eg: 1, 2, 3, 4, 5 2, 3, 4, 5, 6
/**
* @return {?}
*/
buildBindingPagerList() {
/** @type {?} */
let middleLen = Math.floor(this.pagerLength / 2);
/** @type {?} */
let leftListIdx = this.pagerLength % 2 === 0 ? (this.pagerLength / 2 - 1) : middleLen;
/** @type {?} */
let rightListIdx = this.pagerLength % 2 === 0 ? (this.pagerLength / 2) : middleLen;
this.bindingPagerList = [];
for (let i = this.pageNumber - leftListIdx; i < this.pageNumber + rightListIdx + 1; i++) {
this.bindingPagerList.push(i);
}
// #region Fill in the invalid data for bindingPagerList
/** @type {?} */
let leftInvalidIdx = this.bindingPagerList.filter((/**
* @param {?} f
* @return {?}
*/
f => f <= 0)).length;
/** @type {?} */
let rightInvalidIdx = this.bindingPagerList.filter((/**
* @param {?} f
* @return {?}
*/
f => f > this.totalPagerLength)).length;
this.bindingPagerList = this.bindingPagerList.filter((/**
* @param {?} f
* @return {?}
*/
f => f > 0 && f <= this.totalPagerLength));
if (leftInvalidIdx > 0) {
/** @type {?} */
let start = this.bindingPagerList[this.bindingPagerList.length - 1] + 1;
/** @type {?} */
let end = start + leftInvalidIdx;
for (let i = start; i < end; i++) {
if (i <= this.totalPagerLength) {
this.bindingPagerList.push(i);
}
}
}
if (rightInvalidIdx > 0) {
/** @type {?} */
let start = this.bindingPagerList[0] - 1;
/** @type {?} */
let end = start - rightInvalidIdx;
for (let i = start; i > end; i--) {
if (i >= 1) {
this.bindingPagerList.unshift(i);
}
}
}
// #endregion
}
/**
* @param {?} pageIndex
* @return {?}
*/
onNumberPagerClicked(pageIndex) {
this.pageNumber = pageIndex;
this.onPageChanged.next(this.pageNumber);
this.buildBindingPagerList();
}
/**
* @return {?}
*/
onFirstBtnClicked() {
if (this.pageNumber === 1) {
return;
}
this.pageNumber = 1;
this.onPageChanged.next(this.pageNumber);
this.buildBindingPagerList();
}
/**
* @return {?}
*/
onPreBtnClicked() {
if (this.pageNumber === 1) {
return;
}
this.pageNumber--;
this.onPageChanged.next(this.pageNumber);
this.buildBindingPagerList();
}
/**
* @return {?}
*/
onNextBtnClicked() {
if (this.pageNumber === this.totalPagerLength) {
return;
}
this.pageNumber++;
this.onPageChanged.next(this.pageNumber);
this.buildBindingPagerList();
}
/**
* @return {?}
*/
onLastBtnClicked() {
if (this.pageNumber === this.totalPagerLength) {
return;
}
this.pageNumber = this.totalPagerLength;
this.onPageChanged.next(this.pageNumber);
this.buildBindingPagerList();
}
}
NpPaginator.decorators = [
{ type: Component, args: [{
selector: `np-paginator`,
template: "<div class=\"np-paginator-wrapper flex-wrap row-flex\">\r\n <span>{{ totalText + ' ' + total + ' ' + itemsPerPageText }} </span>\r\n <span>\r\n <np-dropdown [(ngModel)]=\"bindingRowsPerPage\" [items]=\"bindingPageCounts\" [settings]=\"pageCountsDropdownsettings\"\r\n (onSelected)=\"onPageCountsDropdownSelect($event)\">\r\n </np-dropdown>\r\n </span>\r\n <span class=\"pager-btn first-btn\" [ngClass]=\"{ 'disabled-btn' : pageNumber === 1 }\"\r\n (click)=\"onFirstBtnClicked()\">{{ firstBtnText }}</span>\r\n <span class=\"pager-btn pre-btn\" [ngClass]=\"{ 'disabled-btn' : pageNumber === 1 }\"\r\n (click)=\"onPreBtnClicked()\">{{ preBtnText }}</span>\r\n\r\n <span *ngFor=\"let pageIndex of bindingPagerList\" class=\"number-pager\"\r\n [ngClass]=\"{ 'selected-btn' : pageIndex === pageNumber }\" (click)=\"onNumberPagerClicked(pageIndex)\">\r\n {{ pageIndex }}\r\n </span>\r\n\r\n <span class=\"pager-btn next-btn\" [ngClass]=\"{ 'disabled-btn' : pageNumber === totalPagerLength }\"\r\n (click)=\"onNextBtnClicked()\">{{ nextBtnText }}</span>\r\n <span class=\"pager-btn last-btn\" [ngClass]=\"{ 'disabled-btn' : pageNumber === totalPagerLength }\"\r\n (click)=\"onLastBtnClicked()\">{{ lastBtnText }}</span>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [".backdrop-transparent{opacity:0}.flex-wrap{display:flex}.wrap{flex-wrap:wrap}.col-flex{flex-direction:column}.row-flex{flex-direction:row}.middle-flex{justify-content:center;align-items:center}.space-between{justify-content:space-between;align-items:center}.align-center{align-items:center}.np-row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.np-column{display:flex;flex-direction:column;flex-basis:100%;flex:1}.np-paginator-wrapper{height:27px;line-height:27px}.np-paginator-wrapper>span{display:inline-block}.np-paginator-wrapper>span:nth-child(2){width:60px;margin:0 10px}.np-paginator-wrapper>span:nth-child(2) np-dropdown .selected-item-wrapper{width:60px!important;min-width:60px!important;padding:0!important}.np-paginator-wrapper>span:nth-child(2) np-dropdown .selected-item-wrapper>span{padding:8px}.np-paginator-wrapper>span:nth-child(2) np-dropdown .selected-item-wrapper .fas.fa-caret-down,.np-paginator-wrapper>span:nth-child(2) np-dropdown .selected-item-wrapper .fas.fa-caret-up{line-height:28px!important}.np-paginator-wrapper .pager-btn{text-align:center;vertical-align:middle;line-height:25px;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.np-paginator-wrapper .number-pager{min-width:27px;text-align:center;vertical-align:middle;line-height:25px;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.np-paginator-wrapper .first-btn{border-top-left-radius:4px;border-bottom-left-radius:4px;width:48px}.np-paginator-wrapper .last-btn{width:48px;border-top-right-radius:4px;border-bottom-right-radius:4px}.np-paginator-wrapper .next-btn,.np-paginator-wrapper .pre-btn{width:68px}.np-paginator-wrapper .disabled-btn{cursor:not-allowed}"]
}] }
];
/** @nocollapse */
NpPaginator.ctorParameters = () => [];
NpPaginator.propDecorators = {
total: [{ type: Input }],
pageCounts: [{ type: Input }],
size: [{ type: Input }],
firstBtnText: [{ type: Input }],
preBtnText: [{ type: Input }],
nextBtnText: [{ type: Input }],
lastBtnText: [{ type: Input }],
totalText: [{ type: Input }],
itemsPerPageText: [{ type: Input }],
onPageChanged: [{ type: Output }],
onPageSizeChanged: [{ type: Output }],
pageNumber: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Dropdown items directive - used for customize each items in the dropdown
*/
class NpDropdownItemDirective {
constructor() { }
}
NpDropdownItemDirective.decorators = [
{ type: Directive, args: [{ selector: 'np-dropdown-item' },] }
];
/** @nocollapse */
NpDropdownItemDirective.ctorParameters = () => [];
NpDropdownItemDirective.propDecorators = {
template: [{ type: ContentChild, args: [TemplateRef,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class OverlayService {
/**
* @param {?} overlay
* @param {?} overlayPositionBuilder
* @param {?} overlayContainer
*/
constructor(overlay, overlayPositionBuilder, overlayContainer) {
this.overlay = overlay;
this.overlayPositionBuilder = overlayPositionBuilder;
this.overlayContainer = overlayContainer;
this.afterClosed = new Subject();
this.onClosed = this.afterClosed.asObservable();
this.close = (/**
* @param {?} data
* @return {?}
*/
(data) => {
this.sub && this.sub.unsubscribe();
if (this.overlayRef) {
this.overlayRef.dispose();
this.overlayRef = null;
this.afterClosed.next(data);
}
});
}
/**
* @param {?} type
* @param {?} origin
* @param {?} tpl
* @param {?} viewContainerRef
* @param {?} data
* @return {?}
*/
open(type, origin, tpl, viewContainerRef, data) {
this.close(null);
this.overlayRef = this.overlay.create(this.getOverlayConfig({ origin: origin }, type, true));
this.overlayRef.attach(new TemplatePortal(tpl, viewContainerRef, {
$implicit: data, close: this.close
}));
this.sub = fromEvent(document, "click")
.pipe(filter((/**
* @param {?} event
* @return {?}
*/
event => {
/** @type {?} */
const clickTarget = (/** @type {?} */ (event.target));
return (clickTarget != origin && (!!this.overlayRef && !this.overlayRef.overlayElement.contains(clickTarget)));
})), take(1))
.subscribe((/**
* @return {?}
*/
() => {
this.close(null);
}));
return this.onClosed.pipe(take(1));
}
/**
* @param {?} origin
* @param {?} tpl
* @param {?} viewContainerRef
* @param {?} data
* @return {?}
*/
openDropdown(origin, tpl, viewContainerRef, data) {
return this.open(PopupType.DROPDOWN, origin, tpl, viewContainerRef, data);
}
/**
* @return {?}
*/
isAttached() {
if (this.overlayRef) {
return this.overlayRef.hasAttached();
}
return false;
}
/**
* @private
* @param {?} origin
* @return {?}
*/
getOverlayPosition(origin) {
/** @type {?} */
const positionStrategy = this.overlayPositionBuilder
.flexibleConnectedTo(origin)
.withPositions(this.getDropdownPositions());
return positionStrategy;
}
/**
* @private
* @param {?} __0
* @param {?} type
* @param {?=} hasBackdrop
* @return {?}
*/
getOverlayConfig({ origin }, type, hasBackdrop = false) {
return new OverlayConfig({
hasBackdrop: hasBackdrop,
backdropClass: 'backdrop-transparent',
positionStrategy: type === PopupType.DROPDOWN ? this.getOverlayPosition(origin) : this.getOverlayPosition(origin),
// TODO
scrollStrategy: this.overlay.scrollStrategies.block()
});
}
/**
* @private
* @return {?}
*/
getDropdownPositions() {
return [
{
originX: "start",
originY: "bottom",
overlayX: "start",
overlayY: "top",
offsetX: 0,
offsetY: 0
},
{
originX: "start",
originY: "top",
overlayX: "start",
overlayY: "bottom",
offsetX: 0,
offsetY: 0
}
];
}
}
OverlayService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
OverlayService.ctorParameters = () => [
{ type: Overlay },
{ type: OverlayPositionBuilder },
{ type: OverlayContainer }
];
/** @nocollapse */ OverlayService.ngInjectableDef = defineInjectable({ factory: function OverlayService_Factory() { return new OverlayService(inject(Overlay), inject(OverlayPositionBuilder), inject(OverlayContainer)); }, token: OverlayService, providedIn: "root" });
/** @enum {number} */
const PopupType = {
DROPDOWN: 0,
MENU: 1,
};
PopupType[PopupType.DROPDOWN] = 'DROPDOWN';
PopupType[PopupType.MENU] = 'MENU';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 下拉选择组件 - 支持单选和多选功能
*
* <example-url>https://stackblitz.com/edit/np-dropdown-sample?embed=1&file=src/app/app.component.html</example-url>
*
*/
class NpDropdown {
//#endregion
/**
* @param {?} viewContainerRef
* @param {?} overlayService
* @param {?} cdf
* @param {?} renderer2
*/
constructor(viewContainerRef, overlayService, cdf, renderer2) {
this.viewContainerRef = viewContainerRef;
this.overlayService = overlayService;
this.cdf = cdf;
this.renderer2 = renderer2;
this.emitChange = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
/**
* 是否禁用状态
*/
this.disabled = false;
/**
* 全部下拉选项
*/
this.items = [];
/**
* 选择时触发
*/
this.onSelected = new EventEmitter();
/**
* 取消选择时触发
*/
this.onDeselected = new EventEmitter();
/**
* 全选时触发
*/
this.onSelectedAll = new EventEmitter();
/**
* 取消全选时触发
*/
this.onDeselectedAll = new EventEmitter();
this.originItems = [];
/**
* 多选下拉框
*/
this.selectedItems = [];
this.selectedBadgeItems = [];
this.noneBadgeCount = 0;
this._isCheckedAll = false;
}
//#region Getter
/**
* 单选下拉框
* @return {?}
*/
get selectedLabel() {
this.checkItemExists();
if (this.settings.single) {
return this.selectedItem ? ((/** @type {?} */ (this.selectedItem))).label : this.settings.placeHolder;
}
return this.settings.placeHolder;
}
/**
* @private
* @return {?}
*/
buildMultipleSelect() {
if (this.settings.single) {
return;
}
//#region selectedItems
this.checkItemExists();
/** @type {?} */
let selectedItems = (/** @type {?} */ (this.selectedItem));
if (selectedItems && selectedItems.length > 0) {
this.selectedItems = [...selectedItems];
}
else {
this.selectedItems = [{ id: -1, label: this.settings.placeHolder }];
}
//#endregion
//#region selectedBadgeItems
/** @type {?} */
let items = [...this.selectedItems];
items.splice(this.settings.badge);
this.selectedBadgeItems = items;
//#endregion
this.noneBadgeCount = this.selectedItems.length - this.settings.badge;
this.cdf.detectChanges();
}
/**
* @return {?}
*/
get isDropdownOpen() {
return this.overlayService.isAttached();
}
/**
* @return {?}
*/
get isItemSelected() {
if (this.settings.single) {
return this.selectedLabel !== this.settings.placeHolder;
}
// Multiple dropdown
if (this.selectedItems && this.selectedItems.length > 0) {
return this.selectedItems[0].label !== this.settings.placeHolder;
}
return false;
}
/**
* @return {?}
*/
get isCheckedAll() {
return this.items.length === this.selectedItem.length;
}
/**
* @param {?} val
* @return {?}
*/
set isCheckedAll(val) {
this._isCheckedAll = val;
}
/**
* @return {?}
*/
ngOnInit() {
this.init();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
let items = changes['items'];
if (items && items.currentValue && items.currentValue.length >= 0) {
this.originItems = [...items.currentValue];
}
}
/**
* @param {?} checked
* @return {?}
*/
onSelectAll(checked) {
this.items.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
item.checked = checked;
}));
this.selectedItem = checked ? [...this.items] : [];
this.buildMultipleSelect();
this.onSelectedAll.emit(this.selectedItem);
this.emitChange(this.selectedItem);
}
/**
* @param {?} item
* @return {?}
*/
onSelect(item) {
if (this.settings.single) {
this.selectedItem = item;
this.onSelected.emit(item);
this.emitChange(item);
this.cdf.detectChanges();
this.overlayService.close({ item: item });
return;
}
//#region Multiple dropdown
if (!this.selectedItem || !this.selectedItem.length) {
this.selectedItem = [];
}
if (item.checked) {
this.selectedItem.push(item);
}
else {
this.selectedItem = this.selectedItem.filter((/**
* @param {?} f
* @return {?}
*/
(f) => f.id !== item.id));
}
this.buildMultipleSelect();
this.onSelected.emit(item);
this.emitChange(this.selectedItem);
//#endregion
}
/**
* @param {?} val
* @return {?}
*/
onSearch(val) {
if (!val) {
this.clearSearch();
return;
}
this.items = this.originItems.filter((/**
* @param {?} f
* @return {?}
*/
f => f.label.indexOf(val) > -1));
}
/**
* @param {?} item
* @return {?}
*/
isActive(item) {
if (!this.selectedItem) {
return false;
}
if (this.settings.single) {
return item.id === ((/** @type {?} */ (this.selectedItem))).id;
}
// Multiple dropdown
return this.selectedItem.find((/**
* @param {?} f
* @return {?}
*/
f => f.id === item.id));
}
/**
* @param {?} $event
* @param {?} dropdownTpl
* @param {?} origin
* @return {?}
*/
onOpenDropdown($event, dropdownTpl, origin) {
$event.stopPropagation();
if (this.disabled) {
return;
}
if (this.isDropdownOpen) {
this.overlayService.close(null);
return;
}
this.overlayService.openDropdown(origin, dropdownTpl, this.viewContainerRef, null).subscribe((/**
* @return {?}
*/
() => {
// close
}));
this.buildItemsCheckedStatus();
setTimeout((/**
* @return {?}
*/
() => {
this.scrollToSelectedItem();
}), 100);
// Tricky... Can't get inner element in np-input control, so we need set
// style async after open dropdown
setTimeout((/**
* @return {?}
*/
() => {
if (!this.overlayService.overlayRef || !this.overlayService.overlayRef.overlayElement) {
return;
}
/** @type {?} */
let npInputWrapper = this.overlayService.overlayRef.overlayElement.getElementsByClassName('np-input-wrapper');
/** @type {?} */
let inputContainer = this.overlayService.overlayRef.overlayElement.getElementsByClassName('input-container');
/** @type {?} */
let npInput = this.overlayService.overlayRef.overlayElement.getElementsByClassName('np-input');
if (npInputWrapper && npInputWrapper.length > 0) {
this.renderer2.setStyle(npInputWrapper[0], 'width', '100%');
}
if (inputContainer && inputContainer.length > 0) {
this.renderer2.setStyle(inputContainer[0], 'width', '100%');
}
if (npInput && npInput.length > 0) {
this.renderer2.setStyle(npInput[0], 'width', this.settings.width + 'px');
this.renderer2.setStyle(npInput[0], 'padding-left', '30px');
this.renderer2.setStyle(npInput[0], 'border-top', 'none');
this.renderer2.setStyle(npInput[0], 'border-left', 'none');
this.renderer2.setStyle(npInput[0], 'border-right', 'none');
this.renderer2.setStyle(npInput[0], 'box-shadow', 'none');
}
}), 0);
}
/**
* @param {?} $event
* @return {?}
*/
onRemoveItems($event) {
if (this.disabled) {
return;
}
this.selectedItem = this.settings.single ? null : [];
this.clearSearch();
this.items.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
item.checked = false;
}));
this.buildMultipleSelect();
this.onDeselectedAll.emit(this.items);
this.emitChange(this.selectedItem);
$event.stopPropagation();
}
/**
* @param {?} $event
* @param {?} item
* @return {?}
*/
onRemoveItem($event, item) {
if (this.disabled) {
return;
}
this.selectedItem = this.selectedItem.filter((/**
* @param {?} f
* @return {?}
*/
(f) => f.id !== item.id));
this.clearSearch();
item.checked = false;
this.buildMultipleSelect();
this.onDeselected.emit(item);
this.emitChange(this.selectedItem);
$event.stopPropagation();
}
//#region Implementation for ControlValueAccessor
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
// 如果是多选下拉框，传入的selectedItem是null，为了防止报错直接return，必须传入空数组[]
if (obj === null && !this.settings.single) {
return;
}
this.selectedItem = obj;
if (this.settings.single) {
this.cdf.detectChanges();
}
else {
this.selectedItem.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
if (item.checked === undefined) {
item.checked = true;
}
}));
this.buildMultipleSelect();
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.emitChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
//#endregion
//#region Private methods
/**
* @private
* @return {?}
*/
init() {
this.originItems = [...this.items];
/** @type {?} */
let initSettings = {
single: true,
placeHolder: '请选择',
width: 220,
badge: 99999,
isShowSearchBox: true,
noData: '没有数据！',
autoScrollTo: true
};
this.settings = Object.assign(initSettings, this.settings);
}
/**
* @private
* @return {?}
*/
checkItemExists() {
if (this.settings.single) {
if (this.selectedItem && !this.originItems.find((/**
* @param {?} f
* @return {?}
*/
f => f.id === ((/** @type {?} */ (this.selectedItem))).id))) {
this.selectedItem = null;
}
}
else {
// Multiple dropdown
if (this.selectedItem && this.selectedItem.length > 0) {
/** @type {?} */
let selectedItems = [];
this.selectedItem.forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
if (this.originItems.find((/**
* @param {?} f
* @return {?}
*/
f => f.id === item.id))) {
selectedItems.push(item);
}
}));
this.selectedItem = [];
this.selectedItem = selectedItems;
}
}
}
/**
* 清除查询并展示所有符合条件的items
* @private
* @return {?}
*/
clearSearch() {
this.searchToken = '';
this.items = [...this.originItems];
this.buildItemsCheckedStatus();
}
/**
* @private
* @return {?}
*/
buildItemsCheckedStatus() {
if (this.settings.single) {
return;
}
this.items.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
/** @type {?} */
let selectedItem = this.selectedItem.find((/**
* @param {?} f
* @return {?}
*/
f => f.id === item.id));
item.checked = selectedItem ? true : false;
}));
}
/**
* @private
* @return {?}
*/
scrollToSelectedItem() {
if (!this.settings.autoScrollTo) {
return;
}
/** @type {?} */
let item = this.settings.single ? ((/** @type {?} */ (this.selectedItem))) : (this.selectedItem && this.selectedItem[0]);
if (item) {
/** @type {?} */
const selectedIndex = this.originItems.findIndex((/**
* @param {?} f
* @return {?}
*/
f => f.id === item.id));
this.viewPort.scrollToIndex(selectedIndex, 'smooth');
}
}
}
NpDropdown.decorators = [
{ type: Component, args: [{
selector: `np-dropdown`,
template: "<div class=\"np-dropdown-wrapper flex-wrap row-flex\">\r\n <label class=\"select-lbl\" *ngIf=\"settings.lblName\">{{ settings.lblName }}</label>\r\n <div class=\"selected-item-wrapper\" [style.width.px]=\"settings.width\" [ngClass]=\"{'disabled': disabled}\"\r\n (click)=\"onOpenDropdown($event, dropdown, origin)\" #origin tabindex=\"-1\">\r\n <!-- Single select -->\r\n <ng-container *ngIf=\"settings.single\">\r\n <span [ngClass]=\"{'placeholder': !isItemSelected}\">{{ selectedLabel }}</span>\r\n </ng-container>\r\n\r\n <!-- Multiple select -->\r\n <ng-container *ngIf=\"!settings.single\">\r\n <div class=\"mul-item-container\">\r\n <ng-container *ngIf=\"!isItemSelected && selectedItems[0]\"><span\r\n class=\"placeholder\">{{ selectedItems[0].label }}</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"isItemSelected\">\r\n <span class=\"mul-item\" *ngFor=\"let selectedItem of selectedBadgeItems; let i=index;\">\r\n <ng-container>\r\n <span>{{ selectedItem.label }}</span> \r\n <i class=\"fas fa-times\" *ngIf=\"isItemSelected\" (click)=\"onRemoveItem($event, selectedItem)\"></i>\r\n </ng-container>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <span class=\"none-badge-count\" *ngIf=\"noneBadgeCount > 0\">{{ '+' + noneBadgeCount }}</span>\r\n <i class=\"fas fa-times\" *ngIf=\"!settings.isRequired && isItemSelected\" (click)=\"onRemoveItems($event)\"></i>\r\n <i class=\"fas fa-caret-down\" *ngIf=\"!isDropdownOpen\"></i>\r\n <i class=\"fas fa-caret-up\" *ngIf=\"isDropdownOpen\"></i>\r\n </div>\r\n\r\n <ng-template #dropdown>\r\n <div class=\"np-dropdown-viewport flex-wrap col-flex\">\r\n <div class=\"search-container\" *ngIf=\"settings.isShowSearchBox\">\r\n <np-input class=\"search-input\" placeholder=\"\u67E5\u8BE2\" [(ngModel)]=\"searchToken\" (ngModelChange)=\"onSearch($event)\">\r\n </np-input>\r\n <i class=\"fas fa-search\"></i>\r\n </div>\r\n <np-checkbox class=\"select-all\" *ngIf=\"settings.isShowCheckedAll && !settings.single\" [(ngModel)]=\"isCheckedAll\"\r\n (inputModelChange)=\"onSelectAll($event)\">\u5168\u9009\r\n </np-checkbox>\r\n <cdk-virtual-scroll-viewport itemSize=\"35\" [style.width.px]=\"settings.width\" #virtualScrollViewport>\r\n <div *ngIf=\"!items || !items.length || items.length === 0\">{{ settings.noData }}</div>\r\n\r\n <!-- Single select -->\r\n <ng-container *ngIf=\"settings.single\">\r\n <div *cdkVirtualFor=\"let item of items\" [class.active]=\"isActive(item)\" class=\"select-item\"\r\n (click)=\"onSelect(item)\">\r\n <ng-container *ngIf=\"!selectItemRef || !selectItemRef.template\">{{ item.label }}</ng-container>\r\n <ng-container *ngIf=\"selectItemRef && selectItemRef.template\">\r\n <ng-container *ngTemplateOutlet=\"selectItemRef.template; context: { item: item }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Multiple select -->\r\n <ng-container *ngIf=\"!settings.single\">\r\n <div *cdkVirtualFor=\"let item of items\" [class.active]=\"isActive(item)\"\r\n class=\"select-item flex-wrap row-flex\">\r\n <np-checkbox [(ngModel)]=\"item.checked\" (inputModelChange)=\"onSelect(item)\">\r\n <div style=\"width: 100%;\">\r\n <ng-container *ngIf=\"!selectItemRef || !selectItemRef.template\">\r\n {{ item.label }}\r\n </ng-container>\r\n <ng-container *ngIf=\"selectItemRef && selectItemRef.template\">\r\n <ng-container *ngTemplateOutlet=\"selectItemRef.template; context: { item: item }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </np-checkbox>\r\n </div>\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n </div>\r\n </ng-template>\r\n</div>\r\n",
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class.disabled]': 'disabled === "true" || disabled === true'
},
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpDropdown)),
multi: true,
}
],
styles: [".np-dropdown-wrapper{position:relative;align-items:baseline;display:inline-block}.np-dropdown-wrapper .select-lbl{margin-right:20px;font-size:13px;font-weight:700}.np-dropdown-wrapper .selected-item-wrapper{box-sizing:content-box;display:inline-block;min-width:80px;padding:7.5px 6px;cursor:pointer;border-radius:3px;border-width:1px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0;font-size:13px}.np-dropdown-wrapper .selected-item-wrapper>.fas.fa-caret-down,.np-dropdown-wrapper .selected-item-wrapper>.fas.fa-caret-up{position:absolute;right:8px;line-height:20px}.np-dropdown-wrapper .selected-item-wrapper>.fas.fa-times{position:absolute;right:23px;line-height:20px;font-size:13px;padding:0 5px}.np-dropdown-wrapper .selected-item-wrapper>.none-badge-count{position:absolute;right:38px;line-height:20px;padding:0 5px}.np-dropdown-wrapper .selected-item-wrapper .mul-item-container{display:inline-block}.np-dropdown-wrapper .selected-item-wrapper .mul-item-container .mul-item{padding:2px 5px;margin-right:2px}.np-dropdown-wrapper .selected-item-wrapper .mul-item-container .mul-item .fas.fa-times{font-size:10px}.np-dropdown-viewport{min-width:80px;padding:0 6px;height:300px;border-radius:3px}.np-dropdown-viewport .search-container{display:flex;position:relative}.np-dropdown-viewport .search-container .fas.fa-search{position:absolute;left:12px;top:0;line-height:50px;font-size:14px}.np-dropdown-viewport .search-input{width:100%;margin-bottom:5px;margin-top:8px}.np-dropdown-viewport .search-input .input-container,.np-dropdown-viewport .search-input .np-input-wrapper,.np-dropdown-viewport .search-input input{width:100%!important}.np-dropdown-viewport .select-all{margin:6px}.np-dropdown-viewport>cdk-virtual-scroll-viewport{height:100%;margin-top:8px}.np-dropdown-viewport>cdk-virtual-scroll-viewport .select-item{height:28px;line-height:28px;padding:3px 6px;font-size:13px;cursor:pointer;align-items:center;margin-bottom:1px;box-sizing:content-box;white-space:nowrap}.np-dropdown-viewport>cdk-virtual-scroll-viewport .select-item>np-checkbox{margin-right:3px}.np-dropdown-viewport>cdk-virtual-scroll-viewport .select-item .np-checkbox-button-wrapper{margin:0!important}.np-dropdown-viewport>cdk-virtual-scroll-viewport .select-item .np-checkbox-button-wrapper span.input-helper{top:6px}"]
}] }
];
/** @nocollapse */
NpDropdown.ctorParameters = () => [
{ type: ViewContainerRef },
{ type: OverlayService },
{ type: ChangeDetectorRef },
{ type: Renderer2 }
];
NpDropdown.propDecorators = {
disabled: [{ type: Input }],
settings: [{ type: Input }],
items: [{ type: Input }],
selectedItem: [{ type: Input }],
onSelected: [{ type: Output }],
onDeselected: [{ type: Output }],
onSelectedAll: [{ type: Output }],
onDeselectedAll: [{ type: Output }],
selectItemRef: [{ type: ContentChild, args: [NpDropdownItemDirective,] }],
viewPort: [{ type: ViewChild, args: ['virtualScrollViewport',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpDropdownModule {
}
NpDropdownModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule,
ScrollingModule,
NpInputModule,
NpCheckboxModule
],
declarations: [NpDropdown, NpDropdownItemDirective],
exports: [NpDropdown, NpDropdownItemDirective]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpPaginatorModule {
}
NpPaginatorModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule,
NpDropdownModule
],
declarations: [NpPaginator],
exports: [NpPaginator]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class LoadingService {
constructor() { }
// 生成加载条
/**
* @param {?} contain
* @param {?=} times
* @return {?}
*/
renderDOM(contain, times = 0) {
// 遮罩层
// 加载条
/** @type {?} */
let oDiv = document.createElement('div');
oDiv.id = 'loading-container';
oDiv.className = 'loading-container';
oDiv.innerHTML = `
<div class="loading-mark"></div>
<div class="loading">
<div class="sk-circle">
<div class="sk-circle1 sk-child"></div>
<div class="sk-circle2 sk-child"></div>
<div class="sk-circle3 sk-child"></div>
<div class="sk-circle4 sk-child"></div>
<div class="sk-circle5 sk-child"></div>
<div class="sk-circle6 sk-child"></div>
<div class="sk-circle7 sk-child"></div>
<div class="sk-circle8 sk-child"></div>
<div class="sk-circle9 sk-child"></div>
<div class="sk-circle10 sk-child"></div>
<div class="sk-circle11 sk-child"></div>
<div class="sk-circle12 sk-child"></div>
</div>
<div class="loading-text">${contain}</div>
</div>
`;
/** @type {?} */
const parentNode = document.body;
parentNode.appendChild(oDiv);
// 超时自动取消 默认10s
if (times > 10000) {
setTimeout((/**
* @return {?}
*/
() => {
if (oDiv) {
parentNode.removeChild(oDiv);
}
}), times);
}
}
/**
* @return {?}
*/
deleteDOM() {
/** @type {?} */
const parentNode = document.body;
/** @type {?} */
const oDiv = document.getElementById('loading-container');
if (oDiv) {
parentNode.removeChild(oDiv);
}
}
/**
* @return {?}
*/
begin() {
if (document.getElementById('loading-container')) {
return;
}
this.renderDOM('处理中');
this.prevTime = Date.now();
}
/**
* @return {?}
*/
end() {
this.afterTime = Date.now();
/** @type {?} */
let times = this.afterTime - this.prevTime;
if (times < 500) {
setTimeout((/**
* @return {?}
*/
() => { this.deleteDOM(); }), 500 - times);
}
else {
this.deleteDOM();
}
}
}
LoadingService.decorators = [
{ type: Injectable, args: [{
providedIn: NpSharedModule
},] }
];
/** @nocollapse */
LoadingService.ctorParameters = () => [];
/** @nocollapse */ LoadingService.ngInjectableDef = defineInjectable({ factory: function LoadingService_Factory() { return new LoadingService(); }, token: LoadingService, providedIn: NpSharedModule });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpTabHeaderDirective {
/**
* @param {?} template
*/
constructor(template) {
this.template = template;
}
}
NpTabHeaderDirective.decorators = [
{ type: Directive, args: [{ selector: '[np-tab-header]' },] }
];
/** @nocollapse */
NpTabHeaderDirective.ctorParameters = () => [
{ type: TemplateRef }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpTab {
/**
* @param {?} cdf
*/
constructor(cdf) {
this.cdf = cdf;
this._active = false;
this.disabled = false;
}
/**
* @return {?}
*/
get active() {
return this._active;
}
/**
* @param {?} val
* @return {?}
*/
set active(val) {
this._active = val;
this.cdf.detectChanges();
}
}
NpTab.decorators = [
{ type: Component, args: [{
selector: 'np-tab',
template: `<ng-container *ngIf="active">
<div><ng-content></ng-content></div>
</ng-container>
`,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
NpTab.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
NpTab.propDecorators = {
tabTitle: [{ type: Input }],
disabled: [{ type: Input }],
headerTemplate: [{ type: ContentChild, args: [NpTabHeaderDirective,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpTabGroup {
constructor() {
this.selectedIndex = 0;
this.type = 'default';
this.selectedIndexChange = new EventEmitter();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.selectedIndex && !changes.selectedIndex.firstChange) {
/** @type {?} */
const selectedTabComp = this.tabs.find((/**
* @param {?} v
* @param {?} i
* @return {?}
*/
(v, i) => i === changes.selectedIndex.currentValue));
this.selectTab(selectedTabComp);
}
}
/**
* @return {?}
*/
ngAfterContentInit() {
/** @type {?} */
const selectedTabComp = this.tabs.find((/**
* @param {?} v
* @param {?} i
* @return {?}
*/
(v, i) => i === this.selectedIndex));
this.selectTab(selectedTabComp);
}
/**
*
* @param {?} tab 当前选中的tab
* @param {?=} index 当前选中的tab的index，注：index目前只有在单击tab标签页的时候需要传入，其他情况下不需要
* @return {?}
*/
selectTab(tab, index = -1) {
if (tab.disabled) {
return;
}
if (index !== -1) {
this.selectedIndex = index;
}
// deactivate all tabs
this.tabs.toArray().forEach((/**
* @param {?} tabComponent
* @return {?}
*/
tabComponent => {
tabComponent.active = false;
}));
// activate the tab the user has clicked on.
tab.active = true;
// emit changeEvent && selectedIndex
// fix bug，会把初始化时候selectedIndex为undefined传出去
if (this.selectedIndex !== undefined && index > -1) {
this.selectedIndexChange.emit(this.selectedIndex);
}
}
/**
* @param {?} tabs
* @param {?} tab
* @param {?} index
* @return {?}
*/
isShowDivider(tabs, tab, index) {
/** @type {?} */
let tabArray = tabs.toArray();
if (tab.active) {
return false;
}
if (tabArray.length - 1 === index) {
return false;
}
if (!tab.active && tabArray[index + 1] && tabArray[index + 1].active) {
return false;
}
return true;
}
/**
* @return {?}
*/
ngOnDestroy() {
}
}
NpTabGroup.decorators = [
{ type: Component, args: [{
selector: 'np-tab-group',
template: "<div class=\"tab-title-container\" [ngClass]=\"{'chrome-like-tabs': type === 'chrome-like'}\">\r\n <div class=\"tab-title\" *ngFor=\"let tab of tabs;let $index=index\" (click)=\"selectTab(tab, $index)\"\r\n [class.active]=\"tab.active\" [class.disabled]=\"tab.disabled\">\r\n <span *ngIf=\"type === 'chrome-like'\" class=\"square-block-before\"></span>\r\n <ng-container *ngIf=\"tab.headerTemplate\">\r\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate.template; context: { title: tab.tabTitle }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!tab.headerTemplate\">\r\n {{tab.tabTitle }}\r\n </ng-container>\r\n <span *ngIf=\"type === 'chrome-like'\" class=\"square-block-after\"></span>\r\n <span *ngIf=\"type === 'chrome-like' && isShowDivider(tabs, tab, $index) \" class=\"tab-divider\"></span>\r\n </div>\r\n</div>\r\n<ng-content></ng-content>\r\n",
host: { "[class.chrome-like-wrapper]": "type === 'chrome-like'", },
encapsulation: ViewEncapsulation.None,
styles: [".tab-title-container{margin-bottom:40px;height:34px;width:100%;display:flex;padding-bottom:2px}.tab-title-container .tab-title{font-size:16px;font-weight:500;padding-left:18px;padding-right:18px;height:35px;cursor:pointer;padding-bottom:2px;line-height:35px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tab-title-container .tab-title.active{padding-bottom:0}.tab-title-container.chrome-like-tabs{border-top-left-radius:10px;border-top-right-radius:10px}.tab-title-container.chrome-like-tabs .tab-title:first-child{margin-left:15px}.tab-title-container.chrome-like-tabs .tab-title{position:relative;border-radius:10px 10px 0 0}.tab-title-container.chrome-like-tabs .tab-title.active::before{content:'';width:0;height:0;position:absolute;bottom:0;left:-10px;border-width:0 0 10px 10px;border-style:solid;border-bottom-right-radius:20px;transform:rotate(0);z-index:2}.tab-title-container.chrome-like-tabs .tab-title.active::after{content:'';width:0;height:0;position:absolute;bottom:0;right:-10px;border-width:0 0 10px 10px;border-style:solid;border-bottom-right-radius:20px;transform:rotate(90deg);z-index:2}.tab-title-container.chrome-like-tabs .tab-title .square-block-before{position:absolute;content:'';width:10px;height:10px;left:-10px;background-color:inherit;bottom:0}.tab-title-container.chrome-like-tabs .tab-title .square-block-after{position:absolute;content:'';width:10px;height:10px;right:-10px;background-color:inherit;bottom:0}.tab-title-container.chrome-like-tabs .tab-title .tab-divider{width:0;height:20px;position:absolute;right:0;top:9px}.chrome-like-wrapper{border-top-left-radius:10px;border-top-right-radius:10px}"]
}] }
];
/** @nocollapse */
NpTabGroup.ctorParameters = () => [];
NpTabGroup.propDecorators = {
selectedIndex: [{ type: Input }],
type: [{ type: Input }],
selectedIndexChange: [{ type: Output }],
tabs: [{ type: ContentChildren, args: [NpTab,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpTabModule {
}
NpTabModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
exports: [NpTabGroup, NpTab, NpTabHeaderDirective],
declarations: [NpTabGroup, NpTab, NpTabHeaderDirective]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 多行文本输入框
*
* <example-url>https://stackblitz.com/edit/np-textarea-example?embed=1&file=src/app/app.component.html</example-url>
*/
class NpTextarea {
constructor() {
this.navigationKeys = [
'Backspace',
'Delete',
'Tab',
'Escape',
'Enter',
'Home',
'End',
'ArrowLeft',
'ArrowRight',
'Clear',
'Copy',
'Paste'
];
this.currentLen = 0;
this.chineseReg = /[^\x00-\xff]/g;
/**
* 占位符
*/
this.placeholder = '';
/**
* 最大长度
*
* Default -1 indicate that the length of input is not limited
* The max of maxLen is 999
*/
this.maxLen = -1;
/**
* 只允许填写数字
*/
this.numberOnly = false;
this.emitChange = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
ngAfterViewInit() {
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
}
/**
* @param {?} event
* @return {?}
*/
onChange(event) {
/** @type {?} */
let newValue = event.target.value;
this.emitChange(newValue);
}
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
if (obj || obj === '') {
this.val = obj;
if (this.maxLen > -1) {
this.calculateCurrentLen();
}
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.emitChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
/**
* @param {?} control
* @return {?}
*/
validate(control) {
// TODO: customize validation
return null;
}
/**
* @param {?} e
* @return {?}
*/
onKeyup(e) {
if (this.maxLen === -1) {
return;
}
if (this.maxLen > -1) {
this.calculateCurrentLen();
// Hack: when typing chinese character, input control will not prevent the character typing
/** @type {?} */
let chineseCharLen = this.val ? (this.val.match(this.chineseReg) || []) : [];
if (chineseCharLen.length > 0) {
this.val = this.val.substring(0, this.maxLen);
}
}
if (this.numberOnly) {
this.val = this.val ? this.val.replace(this.chineseReg, '') : '';
}
}
/**
* @private
* @return {?}
*/
isTriggerKeyEvents() {
return this.maxLen !== -1 || this.numberOnly;
}
/**
* @param {?} e
* @return {?}
*/
onKeyDown(e) {
if (!this.isTriggerKeyEvents()) {
return;
}
if (this.navigationKeys.indexOf(e.key) > -1 || // Allow: navigation keys: backspace, delete, arrows etc.
(e.key === 'a' && e.ctrlKey === true) || // Allow: Ctrl+A
(e.key === 'c' && e.ctrlKey === true) || // Allow: Ctrl+C
(e.key === 'v' && e.ctrlKey === true) || // Allow: Ctrl+V
(e.key === 'x' && e.ctrlKey === true) || // Allow: Ctrl+X
(e.key === 'a' && e.metaKey === true) || // Allow: Cmd+A (Mac)
(e.key === 'c' && e.metaKey === true) || // Allow: Cmd+C (Mac)
(e.key === 'v' && e.metaKey === true) || // Allow: Cmd+V (Mac)
(e.key === 'x' && e.metaKey === true) // Allow: Cmd+X (Mac)
) {
return;
}
if (this.maxLen > -1) {
/** @type {?} */
let hightlightText = window.getSelection() + '';
if (this.val && this.val.length >= this.maxLen && hightlightText === '') {
e.preventDefault();
}
}
if (this.numberOnly) {
if (isNaN(Number(e.key))) {
e.preventDefault();
}
}
}
/**
* @param {?} event
* @return {?}
*/
onPaste(event) {
if (!this.isTriggerKeyEvents()) {
return;
}
event.preventDefault();
/** @type {?} */
let currentVal = this.val;
if (this.maxLen > -1 || this.numberOnly) {
/** @type {?} */
let clipboardData = event.clipboardData.getData('text/plain');
if (this.numberOnly) {
/** @type {?} */
let pastedInput = clipboardData.replace(/\D/g, '');
this.val = currentVal + pastedInput;
}
if (this.maxLen > -1) {
/** @type {?} */
let pastedInput = clipboardData.substring(0, this.maxLen);
this.val = currentVal + pastedInput;
}
}
}
/**
* @private
* @return {?}
*/
calculateCurrentLen() {
this.currentLen = this.val ? this.val.length : 0;
this.currentLen = this.currentLen > this.maxLen ? this.maxLen : this.currentLen;
}
}
NpTextarea.decorators = [
{ type: Component, args: [{
selector: `np-textarea`,
template: "<div id=\"np-textarea-wrapper\" class=\"np-textarea-wrapper np-row\">\r\n <div class=\"np-column np-lbl-container\" *ngIf=\"label\">\r\n <label for=\"np-textarea\" class=\"np-textarea-lbl\">\r\n <span class=\"form-required\" *ngIf=\"isRequired\">*</span>\r\n {{ label }}\r\n </label>\r\n </div>\r\n <div class=\"np-column np-textarea-container\">\r\n <textarea class=\"np-textarea\" id=\"np-textarea\" [(ngModel)]=\"val\" [placeholder]=\"placeholder\" [attr.disabled]=\"isDisabled ? '' : null\"\r\n [class.disabled]=\"isDisabled\" (change)=\"onChange($event)\" (keyup)=\"onChange($event)\" cols=\"30\" rows=\"10\" >\r\n </textarea>\r\n <span class=\"error-message\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n <div class=\"np-len\" *ngIf=\"maxLen > -1 && maxLen < 1000\">\r\n <span class=\"cur-length\">{{ currentLen }}</span> / <span>{{ maxLen }}</span>\r\n </div>\r\n </div>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpTextarea)),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpTextarea)),
multi: true,
}
],
styles: [".flex-wrap{display:flex}.col-flex{flex-direction:column}.row-flex{flex-direction:row}.middle-flex{justify-content:center;align-items:center}.np-row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.np-column{display:flex;flex-direction:column;flex-basis:100%;flex:1}.backdrop-transparent{opacity:0}#np-textarea-wrapper{align-items:baseline}#np-textarea-wrapper .np-lbl-container{flex:0}#np-textarea-wrapper .np-lbl-container .np-textarea-lbl{width:80px;margin-right:20px;text-align:right;font-size:13px;font-weight:700}#np-textarea-wrapper .np-textarea-container{position:relative}#np-textarea-wrapper .np-textarea-container .np-textarea{box-sizing:border-box;background-image:none;border-radius:1px;display:inline-block;padding:5px 10px;margin:0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%;height:83px;line-height:20px}#np-textarea-wrapper .np-textarea-container .np-textarea:focus{outline:0!important;outline-offset:unset;border-width:1px}#np-textarea-wrapper .np-textarea-container .error-message{display:block;font-size:10px;margin:5px}#np-textarea-wrapper .np-textarea-container .np-len{position:absolute;right:5px;height:34px;line-height:34px;font-size:14px;z-index:1000}"]
}] }
];
/** @nocollapse */
NpTextarea.ctorParameters = () => [];
NpTextarea.propDecorators = {
label: [{ type: Input }],
isRequired: [{ type: Input }],
placeholder: [{ type: Input }],
errorMessage: [{ type: Input }],
isDisabled: [{ type: Input }],
maxLen: [{ type: Input }],
numberOnly: [{ type: Input }],
onKeyup: [{ type: HostListener, args: ['keyup', ['$event'],] }],
onKeyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }],
onPaste: [{ type: HostListener, args: ['paste', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpTextareaModule {
}
NpTextareaModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [NpTextarea],
exports: [NpTextarea]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpColumnDirective {
constructor() { }
}
NpColumnDirective.decorators = [
{ type: Directive, args: [{ selector: 'np-column' },] }
];
/** @nocollapse */
NpColumnDirective.ctorParameters = () => [];
NpColumnDirective.propDecorators = {
name: [{ type: Input }],
cellTemplate: [{ type: ContentChild, args: [TemplateRef,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpEmptyDirective {
constructor() { }
}
NpEmptyDirective.decorators = [
{ type: Directive, args: [{ selector: 'np-empty' },] }
];
/** @nocollapse */
NpEmptyDirective.ctorParameters = () => [];
NpEmptyDirective.propDecorators = {
name: [{ type: Input }],
template: [{ type: ContentChild, args: [TemplateRef,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpHeaderDirective {
constructor() { }
}
NpHeaderDirective.decorators = [
{ type: Directive, args: [{ selector: 'np-header' },] }
];
/** @nocollapse */
NpHeaderDirective.ctorParameters = () => [];
NpHeaderDirective.propDecorators = {
name: [{ type: Input }],
headerTemplate: [{ type: ContentChild, args: [TemplateRef,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
// @dynamic
class Utils$1 {
/**
* @param {?} hex
* @return {?}
*/
static hexToRgb(hex) {
/** @type {?} */
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
/**
* @return {?}
*/
static ID() {
// Math.random should be unique because of its seeding algorithm.
// Convert it to base 36 (numbers + letters), and grab the first 9 characters
// after the decimal.
return '_' + Math.random().toString(36).substr(2, 9);
}
/**
* @param {?} a
* @param {?} b
* @return {?}
*/
static objEqual(a, b) {
// Create arrays of property names
/** @type {?} */
var aProps = Object.getOwnPropertyNames(a);
/** @type {?} */
var bProps = Object.getOwnPropertyNames(b);
// If number of properties is different,
// objects are not equivalent
if (aProps.length != bProps.length) {
return false;
}
for (var i = 0; i < aProps.length; i++) {
/** @type {?} */
var propName = aProps[i];
// If values of same property are not equal,
// objects are not equivalent
if (a[propName] !== b[propName]) {
return false;
}
}
// If we made it this far, objects
// are considered equivalent
return true;
}
/**
* @param {?} value
* @return {?}
*/
static toBoolean(value) {
return value != null && `${value}` !== 'false';
}
/**
* @param {?} file
* @param {?} maxWidth
* @param {?} maxHeight
* @return {?}
*/
static checkImgWidthAndHeight(file, maxWidth, maxHeight) {
return Observable.create((/**
* @param {?} observer
* @return {?}
*/
(observer) => {
/** @type {?} */
let isAllow = false;
if (file) {
/** @type {?} */
let reader = new FileReader();
reader.onload = (/**
* @param {?} e
* @return {?}
*/
(e) => {
/** @type {?} */
let data = e.target.result;
/** @type {?} */
let image = new Image();
image.onload = (/**
* @return {?}
*/
() => {
/** @type {?} */
let width = image.width;
/** @type {?} */
let height = image.height;
isAllow = width === maxWidth && height === maxHeight;
observer.next(isAllow);
observer.complete();
});
image.src = data;
});
reader.readAsDataURL(file);
}
}));
}
/**
* @param {?} key
* @param {?=} order
* @return {?}
*/
static compareValues(key, order = 'asc') {
return (/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function innerSort(a, b) {
if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
// property doesn't exist on either object
return 0;
}
/** @type {?} */
const varA = (typeof a[key] === 'string')
? a[key].toUpperCase() : a[key];
/** @type {?} */
const varB = (typeof b[key] === 'string')
? b[key].toUpperCase() : b[key];
/** @type {?} */
let comparison = 0;
if (varA > varB) {
comparison = 1;
}
else if (varA < varB) {
comparison = -1;
}
return ((order === 'desc') ? (comparison * -1) : comparison);
});
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 可分页表格组件 - 支持分页、自定义列名、自定义列内容等。对于多语言，支持通过·\@Input·属性自定义。
*
* <example-url>https://stackblitz.com/edit/np-table-sample?embed=1&file=src/app/app.component.html</example-url>
*/
class NpTable {
constructor() {
/**
* 数据总条数
*/
this.total = 0;
/**
* 每页显示条数，默认20条
*/
this.pageSize = 20; // Default is 20 rows per page
// Default is 20 rows per page
/**
* 是否在表头第一列展示多选框，默认不展示
*/
this.showCheckbox = false; // Indicate whether show checkbox or not, default is not
// Indicate whether show checkbox or not, default is not
/**
* 是否显示分页组件，默认显示
*/
this.showPager = true;
/**
* 是否服务器端排序，默认false，即客户端排序
*/
this.serverSideSort = false;
/**
* 首页按钮文字
*/
this.firstBtnText = '首页';
/**
* 上一页按钮文字
*/
this.preBtnText = '上一页';
/**
* 下一页按钮文字
*/
this.nextBtnText = '下一页';
/**
* 尾页按钮文字
*/
this.lastBtnText = '尾页';
/**
* 共
*/
this.totalText = '共';
/**
* 条，每页显示条数
*/
this.itemsPerPageText = '条，每页显示条数';
/**
* 没有数据按钮文字
*/
this.noDataLabel = "没有数据";
/**
* 当前页码
*/
this.pageNumber = 1;
/**
* 页码改变事件，即翻页事件 （双向绑定）
*/
this.pageNumberChange = new EventEmitter();
/**
* 页码改变事件，即翻页事件
*/
this.onPageChanged = new EventEmitter();
/**
* 每页显示条数改变事件
*/
this.onPageSizeChanged = new EventEmitter();
/**
* Will be deprecated, use onRows instead
*/
this.onRowsChecked = new EventEmitter();
/**
* Will be deprecated, use onRows instead
*
* 为了向后兼容，故没有修改onRowsChecked逻辑，增加此output事件
*
* 当前行uncheck时触发此事件
*/
this.onRowsUnchecked = new EventEmitter();
/**
* 当选择服务器端排序（即serverSideSort = true）时，根据当前点击列内容及排序，传给backend api返回服务器端排序数据赋值给datasource及total字段即可
*/
this.onServerSideSorted = new EventEmitter();
/**
* 当前处理的行row/rows，选中/非选中状态
*
* 如点击全选按钮，则处理的是当前页的所有行rows
*/
this.onRows = new EventEmitter();
this.projectedTemplates = [];
this.headerTemplates = [];
this.internalColumns = [];
/**
* 此字段后续会废弃 will be deprecated
*/
this.selectedRows = [];
this.datasourceSortedByDefault = [];
}
/**
* @return {?}
*/
ngOnInit() {
this.datasourceSortedByDefault = [...this.datasource];
if (this.showCheckbox) {
this.internalColumns = [];
this.internalColumns.push({
headerName: 'chk',
headerDisplayName: '',
width: '50px',
isCheckbox: true
});
}
this.mergeToInternalColumns();
this.onServerSideSorted.subscribe((/**
* @param {?} res
* @return {?}
*/
res => {
console.log('onServerSideSorted: ', res);
this.buildServerSideSort(res.col);
}));
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.columns && changes.columns.currentValue &&
changes.columns.currentValue.length > 0 &&
changes.columns.previousValue &&
changes.columns.previousValue.length > 0 &&
changes.columns.currentValue !== changes.columns.previousValue) {
this.mergeToInternalColumns();
this.projectTemplate();
}
if (changes.datasource && changes.datasource.currentValue && changes.datasource.currentValue.length > 0) {
this.datasourceSortedByDefault = [...changes.datasource.currentValue];
this.initUniqueIdForDatasource();
}
if (changes.total && changes.total.currentValue) {
this.total = +changes.total.currentValue;
}
if (changes.pageNumber && !changes.pageNumber.firstChange && changes.pageNumber.currentValue) {
/** @type {?} */
const pageNumber = +changes.pageNumber.currentValue;
this.pageNumber = pageNumber;
this.pageNumberChange.emit(pageNumber);
this.selectAll(false);
}
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.projectTemplate();
}
/**
* @param {?} currentPageNumber
* @return {?}
*/
onTablePageChanged(currentPageNumber) {
this.pageNumber = currentPageNumber;
this.pageNumberChange.emit(this.pageNumber);
this.onPageChanged.next(currentPageNumber);
this.selectAll(false);
}
/**
* @param {?} currentPageSize
* @return {?}
*/
onTablePageSizeChanged(currentPageSize) {
this.pageSize = currentPageSize;
this.onPageSizeChanged.next(currentPageSize);
this.selectAll(false);
}
/**
* @param {?} isChecked
* @return {?}
*/
onSelectAllChecked(isChecked) {
this.selectAll(isChecked);
/** @type {?} */
let rows = [];
if (this.datasource && this.datasource.length > 0) {
this.datasource.forEach((/**
* @param {?} row
* @return {?}
*/
row => {
rows.push(row);
}));
}
this.onRows.emit(rows);
}
/**
* @param {?} row
* @return {?}
*/
onRowSelectChecked(row) {
/** @type {?} */
const colChk = this.internalColumns.find((/**
* @param {?} f
* @return {?}
*/
f => f.headerName === 'chk'));
if (row.checked) {
if (!this.selectedRows.find((/**
* @param {?} f
* @return {?}
*/
f => f.dt_id === row.dt_id))) {
this.selectedRows.push(row);
}
}
else {
this.selectedRows = this.selectedRows.filter((/**
* @param {?} f
* @return {?}
*/
f => f.dt_id !== row.dt_id));
this.onRowsUnchecked.next(row);
}
if (colChk) {
colChk.checked = this.selectedRows.length === this.pageSize;
}
if (this.selectedRows.length === 0) {
this.selectAll(false);
}
this.onRowsChecked.next(this.selectedRows);
this.onRows.emit(row);
}
/**
* @param {?} item
* @return {?}
*/
onSort(item) {
if (!item.sort) {
return;
}
if (this.serverSideSort) {
this.onServerSideSorted.emit({ col: item, sortedBy: item.sortedBy });
return;
}
this.buildClientSideSort(item);
}
//#region Private methods
/**
* @private
* @param {?} item
* @return {?}
*/
buildServerSideSort(item) {
this.setNextSortedBy(item);
this.resetOtherSortedColumns(item);
}
/**
* @private
* @param {?} item
* @return {?}
*/
buildClientSideSort(item) {
this.setNextSortedBy(item);
if (item.sortedBy === 'default') {
this.datasource = [...this.datasourceSortedByDefault];
}
else {
this.datasource.sort(Utils$1.compareValues(item.headerName, item.sortedBy));
}
this.resetOtherSortedColumns(item);
}
/**
* @private
* @param {?} item
* @return {?}
*/
setNextSortedBy(item) {
switch (item.sortedBy) {
case 'default':
item.sortedBy = 'asc';
break;
case 'asc':
item.sortedBy = 'desc';
break;
case 'desc':
item.sortedBy = 'default';
break;
default:
break;
}
}
/**
* @private
* @return {?}
*/
initUniqueIdForDatasource() {
this.datasource.forEach((/**
* @param {?} row
* @return {?}
*/
row => {
row['dt_id'] = this.ID();
}));
}
/**
* @private
* @return {?}
*/
projectTemplate() {
if (this.columnComponents) {
this.columnComponents.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
if (!this.projectedTemplates.find((/**
* @param {?} f
* @return {?}
*/
f => f.name === item.name))) {
this.projectedTemplates.push({ name: item.name, template: item.cellTemplate });
}
}));
this.internalColumns.forEach((/**
* @param {?} column
* @return {?}
*/
column => {
/** @type {?} */
const projectTemplate = this.projectedTemplates.find((/**
* @param {?} f
* @return {?}
*/
f => f.name === column.headerName));
if (projectTemplate) {
column['template'] = projectTemplate.template;
}
}));
}
if (this.headerComponents) {
this.headerComponents.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
if (!this.headerTemplates.find((/**
* @param {?} f
* @return {?}
*/
f => f.name === item.name))) {
this.headerTemplates.push({ name: item.name, template: item.headerTemplate });
}
}));
this.internalColumns.forEach((/**
* @param {?} column
* @return {?}
*/
column => {
/** @type {?} */
const projectTemplate = this.headerTemplates.find((/**
* @param {?} f
* @return {?}
*/
f => f.name === column.headerName));
if (projectTemplate) {
column['headerTemplate'] = projectTemplate.template;
}
}));
}
}
/**
* @private
* @return {?}
*/
mergeToInternalColumns() {
if (this.internalColumns.length === 0) {
this.internalColumns = [...this.columns];
this.setSortedByToDefault();
return;
}
this.columns.forEach((/**
* @param {?} replaceColumn
* @return {?}
*/
replaceColumn => {
/** @type {?} */
let existColumn = this.internalColumns.find((/**
* @param {?} f
* @return {?}
*/
f => f.headerName === replaceColumn.headerName));
if (existColumn) {
existColumn = Object.assign({}, replaceColumn);
}
else {
this.internalColumns.push(Object.assign({}, replaceColumn));
}
}));
this.setSortedByToDefault();
}
/**
* @private
* @return {?}
*/
setSortedByToDefault() {
for (let i = 0; i < this.internalColumns.length; i++) {
if (this.internalColumns[i].sort) {
this.internalColumns[i].sortedBy = 'default';
}
}
}
/**
* @private
* @return {?}
*/
ID() {
// Math.random should be unique because of its seeding algorithm.
// Convert it to base 36 (numbers + letters), and grab the first 9 characters
// after the decimal.
return '_' + Math.random().toString(36).substr(2, 9);
}
/**
* @private
* @param {?} isSelect
* @return {?}
*/
selectAll(isSelect) {
/** @type {?} */
const colChk = this.internalColumns.find((/**
* @param {?} f
* @return {?}
*/
f => f.headerName === 'chk'));
if (colChk) {
colChk.checked = isSelect;
this.selectedRows = [];
if (this.datasource && this.datasource.length > 0) {
this.datasource.forEach((/**
* @param {?} row
* @return {?}
*/
row => {
row.checked = isSelect;
if (isSelect) {
this.selectedRows.push(row);
}
}));
}
this.onRowsChecked.next(this.selectedRows);
}
}
/**
* @private
* @param {?} item
* @return {?}
*/
resetOtherSortedColumns(item) {
this.internalColumns.forEach((/**
* @param {?} col
* @return {?}
*/
col => {
if (col.headerName !== item.headerName && col.sort) {
col.sortedBy = 'default';
}
}));
}
}
NpTable.decorators = [
{ type: Component, args: [{
selector: `np-table`,
template: "<div class=\"np-table-wrapper\">\r\n <div class=\"table-header flex-wrap row-flex\">\r\n <span *ngFor=\"let item of internalColumns\" [style.flex]=\"'0 1 ' + item.width\">\r\n <ng-container *ngIf=\"item.isCheckbox\">\r\n <!-- We need to re-style or re-design the checkbox control, its ugly and not easy to use -->\r\n <span style=\"width: 100%; height: 34px; display: flex; justify-content: center;\">\r\n <np-checkbox style=\"width: 5px;\" [(ngModel)]=\"item.checked\"\r\n (inputModelChange)=\"onSelectAllChecked(item.checked)\"></np-checkbox>\r\n </span>\r\n </ng-container>\r\n <span *ngIf=\"!item.isCheckbox\">\r\n <ng-container *ngIf=\"!item.headerTemplate\">\r\n <div class=\"flex-wrap row-flex table-header-text\" [ngStyle]=\"{'cursor': item.sort ? 'pointer': 'inherit'}\"\r\n (click)=\"onSort(item)\">\r\n <span>{{ item.headerDisplayName }}</span>\r\n <i *ngIf=\"['default', 'asc', 'desc'].indexOf(item.sortedBy) > -1\" class=\"fas fa-arrow-up\" [ngClass]=\"{\r\n 'table-header-arrow-default': item.sortedBy === 'default', \r\n 'table-header-arrow-up': item.sortedBy === 'asc', \r\n 'table-header-arrow-down': item.sortedBy === 'desc'}\"></i>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"item.headerTemplate\">\r\n <div class=\"flex-wrap row-flex table-header-text\" [ngStyle]=\"{'cursor': item.sort ? 'pointer': 'inherit'}\"\r\n (click)=\"onSort(item)\">\r\n <ng-container *ngTemplateOutlet=\"item.headerTemplate; context: { row: item }\">\r\n </ng-container>\r\n <i *ngIf=\"['default', 'asc', 'desc'].indexOf(item.sortedBy) > -1\" class=\"fas fa-arrow-up\" [ngClass]=\"{\r\n 'table-header-arrow-default': item.sortedBy === 'default', \r\n 'table-header-arrow-up': item.sortedBy === 'asc', \r\n 'table-header-arrow-down': item.sortedBy === 'desc'}\"></i>\r\n </div>\r\n </ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"table-body flex-wrap col-flex\">\r\n <div class=\"table-body-row flex-wrap row-flex\" *ngFor=\"let row of datasource\">\r\n <ng-container *ngFor=\"let column of internalColumns\">\r\n <ng-container *ngIf=\"column.isCheckbox\">\r\n <!-- We need to re-style or re-design the checkbox control, its ugly and not easy to use -->\r\n <span [style.flex]=\"'0 1 ' + column.width\"\r\n style=\"width: 100%; height: 34px; display: flex; justify-content: center;\">\r\n <np-checkbox style=\"width: 5px;\" [(ngModel)]=\"row.checked\" (inputModelChange)=\"onRowSelectChecked(row)\">\r\n </np-checkbox>\r\n </span>\r\n </ng-container>\r\n <span *ngIf=\"!column.isCheckbox\" [style.flex]=\"'0 1 ' + column.width\">\r\n <ng-container *ngIf=\"!column.template\">{{ row[column.headerName] }}</ng-container>\r\n <ng-container *ngIf=\"column.template\">\r\n <ng-container *ngTemplateOutlet=\"column.template; context: { row: row }\">\r\n </ng-container>\r\n </ng-container>\r\n </span>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!datasource || datasource.length === 0\" class=\"table-body-row flex-wrap row-flex middle-flex\">\r\n <ng-container *ngIf=\"!emptyContent || !emptyContent.template\">\r\n <span class=\"no-data\">{{ noDataLabel }}</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"emptyContent && emptyContent.template\">\r\n <ng-container *ngTemplateOutlet=\"emptyContent.template;\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"table-footer flex-wrap row-flex\" *ngIf=\"showPager && datasource && datasource.length > 0\">\r\n <np-paginator [size]=\"pageSize\" [total]=\"total\" [pageNumber]=\"pageNumber\" [firstBtnText]=\"firstBtnText\"\r\n [preBtnText]=\"preBtnText\" [nextBtnText]=\"nextBtnText\" [lastBtnText]=\"lastBtnText\" [totalText]=\"totalText\"\r\n [itemsPerPageText]=\"itemsPerPageText\" (onPageChanged)=\"onTablePageChanged($event)\"\r\n (onPageSizeChanged)=\"onTablePageSizeChanged($event)\"></np-paginator>\r\n </div>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [".backdrop-transparent{opacity:0}.flex-wrap{display:flex}.wrap{flex-wrap:wrap}.col-flex{flex-direction:column}.row-flex{flex-direction:row}.middle-flex{justify-content:center;align-items:center}.space-between{justify-content:space-between;align-items:center}.align-center{align-items:center}.np-row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.np-column{display:flex;flex-direction:column;flex-basis:100%;flex:1}.np-table-wrapper{width:100%;display:block}.np-table-wrapper .table-header{height:34px;line-height:34px;font-weight:700}.np-table-wrapper .table-header>span{flex:1 1 0;text-align:center;-ms-grid-row-align:center;align-self:center}.np-table-wrapper .table-header .table-header-text{align-items:center;justify-content:center}.np-table-wrapper .table-header .table-header-text>.fas.fa-arrow-down,.np-table-wrapper .table-header .table-header-text>.fas.fa-arrow-up{margin-left:6px;transition:.2s ease-in}.np-table-wrapper .table-header .table-header-text>.table-header-arrow-default{opacity:.54}.np-table-wrapper .table-header .table-header-text>.table-header-arrow-down{transform:rotateZ(180deg)}.np-table-wrapper .table-body>.table-body-row{padding:5px 0}.np-table-wrapper .table-body>.table-body-row>span{flex:1 1 0;text-align:center;-ms-grid-row-align:center;align-self:center}.np-table-wrapper .table-footer{justify-content:flex-end;padding:20px 5px 20px 0}"]
}] }
];
/** @nocollapse */
NpTable.ctorParameters = () => [];
NpTable.propDecorators = {
columns: [{ type: Input }],
datasource: [{ type: Input }],
total: [{ type: Input }],
pageSize: [{ type: Input }],
showCheckbox: [{ type: Input }],
showPager: [{ type: Input }],
serverSideSort: [{ type: Input }],
firstBtnText: [{ type: Input }],
preBtnText: [{ type: Input }],
nextBtnText: [{ type: Input }],
lastBtnText: [{ type: Input }],
totalText: [{ type: Input }],
itemsPerPageText: [{ type: Input }],
noDataLabel: [{ type: Input }],
pageNumber: [{ type: Input }],
pageNumberChange: [{ type: Output }],
onPageChanged: [{ type: Output }],
onPageSizeChanged: [{ type: Output }],
onRowsChecked: [{ type: Output }],
onRowsUnchecked: [{ type: Output }],
onServerSideSorted: [{ type: Output }],
onRows: [{ type: Output }],
columnComponents: [{ type: ContentChildren, args: [NpColumnDirective,] }],
headerComponents: [{ type: ContentChildren, args: [NpHeaderDirective,] }],
emptyContent: [{ type: ContentChild, args: [NpEmptyDirective,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpTableModule {
}
NpTableModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule,
NpPaginatorModule,
NpCheckboxModule
],
declarations: [NpTable, NpColumnDirective, NpEmptyDirective, NpHeaderDirective],
exports: [NpTable, NpColumnDirective, NpEmptyDirective, NpHeaderDirective]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 单选按钮组件 - 作为单选按钮组{\@link NpRadioGroup|RadioGroup}中的一个单选按钮使用
*/
class NpRadioButton {
constructor() {
/**
* 默认为圆形单选按钮
*
* 'radio' - 若为此值，则单选按钮为圆形单选按钮
*
* 'rectangle' - 若为此值，则单选按钮为长方形单选按钮
*/
this.radioShape = 'radio';
this.checked = false;
/**
* 是否禁用
*/
this.isDisabled = false;
/**
* 当单选按钮选中状态改变时触发此事件，并emit当前选中的单选按钮的值
*/
this.onSelectChanged = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
onChange() {
if (!this.isDisabled) {
this.onSelectChanged.next(this.value);
}
}
}
NpRadioButton.decorators = [
{ type: Component, args: [{
selector: `np-radio-button`,
template: "<div class=\"np-radio-button-wrapper\" [class.rectangle]=\"radioShape === 'rectangle'\" (click)=\"onChange()\"\r\n [ngStyle]=\"{'cursor': isDisabled? 'not-allowed':'pointer'}\">\r\n <ng-container>\r\n <div [class.rectangle-radio]=\"radioShape === 'rectangle'\" [class.radio-checked]=\"checked\"\r\n [class.radio-forbidden]=\"isDisabled && radioShape === 'rectangle'\">\r\n <span *ngIf=\"radioShape === 'radio'\" class=\"radio\" [class.radio-checked]=\"checked\"\r\n [class.radio-forbidden]=\"isDisabled\"></span>\r\n <span *ngIf=\"radioShape === 'radio'\" class=\"input-helper\" [class.radio-forbidden]=\"isDisabled\"></span>\r\n <ng-content></ng-content>\r\n </div>\r\n </ng-container>\r\n</div>\r\n<!-- <span class=\"input-helper\"></span> -->\r\n",
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpRadioButton)),
multi: true,
}
]
}] }
];
NpRadioButton.propDecorators = {
value: [{ type: Input }],
radioShape: [{ type: Input }],
isDisabled: [{ type: Input }],
onSelectChanged: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 单选按钮组 - 此标签作为一个单选按钮分组使用，内部可包含多个单选按钮组件{\@link NpRadioButton|RadioButton}。
*
* <example-url>https://stackblitz.com/edit/np-radio-button-sample?embed=1&file=src/app/app.component.html</example-url>
*/
class NpRadioGroup {
/**
* @param {?} _changeDetector
*/
constructor(_changeDetector) {
this._changeDetector = _changeDetector;
this._selected = null;
/**
* 单选框分组标签
*/
this.label = '';
/**
* 单选框分组是否必填，如为true，则标签前有红色星号，false则没有。注：此属性不作为校验属性，仅展示星号与否。
*/
this.isRequired = false;
this._controlValueAccessorChangeFn = (/**
* @return {?}
*/
() => { });
this.onTouched = (/**
* @return {?}
*/
() => { });
}
/**
* Value for the radio-group. Should equal the value of the selected radio button if there is
* a corresponding radio button with a matching value. If there is not such a corresponding
* radio button, this value persists to be applied in case a new radio button is added with a
* matching value.
* @return {?}
*/
get value() { return this._value; }
/**
* @param {?} newValue
* @return {?}
*/
set value(newValue) {
if (this._value !== newValue) {
// Set this before proceeding to ensure no circular loop occurs with selection.
this._value = newValue;
this._updateSelectedRadioFromValue();
this._checkSelectedRadioButton();
}
}
/**
* @return {?}
*/
ngAfterContentInit() {
this._radios.toArray().forEach((/**
* @param {?} cp
* @param {?} index
* @return {?}
*/
(cp, index) => {
cp.onSelectChanged.subscribe((/**
* @param {?} result
* @return {?}
*/
result => {
this.value = result;
console.log('<<<>>>', result);
this._controlValueAccessorChangeFn(result);
this._updateSelectedRadioFromValue();
// this._changeDetector.detectChanges();
}));
}));
//TODO: 第一次reactive form 赋值问题
setTimeout((/**
* @return {?}
*/
() => {
this._updateSelectedRadioFromValue();
this._checkSelectedRadioButton();
}), 0);
// this._selected = this._radios.find((cp, index) => cp.value === this.value);
// this._selected.checked=true
// this._selected.onChange();
}
/**
* Sets the model value. Implemented as part of ControlValueAccessor.
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.value = value;
this._changeDetector.markForCheck();
}
/**
* Registers a callback to be triggered when the model value changes.
* Implemented as part of ControlValueAccessor.
* @param {?} fn Callback to be registered.
* @return {?}
*/
registerOnChange(fn) {
this._controlValueAccessorChangeFn = fn;
}
/**
* Registers a callback to be triggered when the control is touched.
* Implemented as part of ControlValueAccessor.
* @param {?} fn Callback to be registered.
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @return {?}
*/
_checkSelectedRadioButton() {
if (this._selected && !this._selected.checked) {
this._selected.checked = true;
}
}
/**
* Updates the `selected` radio button from the internal _value state.
* @private
* @return {?}
*/
_updateSelectedRadioFromValue() {
// If the value already matches the selected radio, do nothing.
/** @type {?} */
const isAlreadySelected = this._selected !== null && this._selected.value === this._value;
if (this._radios && !isAlreadySelected) {
this._selected = null;
this._radios.forEach((/**
* @param {?} radio
* @return {?}
*/
radio => {
radio.checked = this.value === radio.value;
if (radio.checked) {
this._selected = radio;
}
}));
}
}
}
NpRadioGroup.decorators = [
{ type: Component, args: [{
selector: `np-radio-group`,
template: "<div class=\"np-radio-group-wrapper flex-wrap row-flex\">\r\n <div class=\"flex-wrap col-flex\" *ngIf=\"label\">\r\n <label for=\"np-input\" class=\"np-lbl\">\r\n <span class=\"form-required\" *ngIf=\"isRequired\">*</span>\r\n {{ label }}\r\n </label>\r\n </div>\r\n <div class=\"flex-wrap row-flex\" style=\"width: auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpRadioGroup)),
multi: true,
}
],
styles: [".backdrop-transparent{opacity:0}.flex-wrap{display:flex}.wrap{flex-wrap:wrap}.col-flex{flex-direction:column}.row-flex{flex-direction:row}.middle-flex{justify-content:center;align-items:center}.space-between{justify-content:space-between;align-items:center}.align-center{align-items:center}.np-row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.np-column{display:flex;flex-direction:column;flex-basis:100%;flex:1}.np-radio-group-wrapper{align-items:baseline;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.np-radio-group-wrapper .np-lbl{width:80px;margin-right:20px;text-align:right;font-size:13px;font-weight:700}.np-radio-button-wrapper{margin:.5em 1.428571em 0 0;padding-left:1.785714em;position:relative;font-weight:400;font-size:14px;line-height:1.5em;cursor:pointer;display:inline-block}.np-radio-button-wrapper.rectangle{padding-left:0}.np-radio-button-wrapper .radio{opacity:0;z-index:1;left:.214286em;top:0;position:absolute;width:1em;height:1em;margin:0;display:block}.np-radio-button-wrapper .radio.radio-checked+span::after{position:absolute;content:'';width:.857142em;height:.857142em;top:.071429em;left:.071429em;border-radius:1em}.np-radio-button-wrapper .rectangle-radio{text-align:center;padding:6px 10px}.np-radio-button-wrapper span.input-helper{position:absolute;left:.142857em;top:.142857em;width:1.142857em;height:1.142857em;box-sizing:border-box}.np-radio-button-wrapper .radio+span.input-helper{border-radius:1em}.np-radio-button-wrapper input[type=radio]::before,.np-radio-button-wrapper input[type=radio]:checked::before{content:none}"]
}] }
];
/** @nocollapse */
NpRadioGroup.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
NpRadioGroup.propDecorators = {
value: [{ type: Input }],
label: [{ type: Input }],
isRequired: [{ type: Input }],
_radios: [{ type: ContentChildren, args: [forwardRef((/**
* @return {?}
*/
() => NpRadioButton)), { descendants: true },] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpRadioButtonModule {
}
NpRadioButtonModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [NpRadioButton, NpRadioGroup],
exports: [NpRadioButton, NpRadioGroup]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpStepHeaderDirective {
/**
* @param {?} template
*/
constructor(template) {
this.template = template;
}
}
NpStepHeaderDirective.decorators = [
{ type: Directive, args: [{ selector: '[npStepHeader]' },] }
];
/** @nocollapse */
NpStepHeaderDirective.ctorParameters = () => [
{ type: TemplateRef }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpStepProcessDirective {
/**
* @param {?} template
*/
constructor(template) {
this.template = template;
}
}
NpStepProcessDirective.decorators = [
{ type: Directive, args: [{ selector: '[npStepProcess]' },] }
];
/** @nocollapse */
NpStepProcessDirective.ctorParameters = () => [
{ type: TemplateRef }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpStepFinishDirective {
/**
* @param {?} template
*/
constructor(template) {
this.template = template;
}
}
NpStepFinishDirective.decorators = [
{ type: Directive, args: [{ selector: '[npStepFinish]' },] }
];
/** @nocollapse */
NpStepFinishDirective.ctorParameters = () => [
{ type: TemplateRef }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpStep {
constructor() {
this.title = '';
this.status = 'wait';
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
ngAfterContentInit() {
/** @type {?} */
let x = this.headerContent;
}
}
NpStep.decorators = [
{ type: Component, args: [{
selector: `np-step`,
template: "<ng-template><ng-content></ng-content></ng-template>",
encapsulation: ViewEncapsulation.None,
styles: [".backdrop-transparent{opacity:0}.flex-wrap{display:flex}.wrap{flex-wrap:wrap}.col-flex{flex-direction:column}.row-flex{flex-direction:row}.middle-flex{justify-content:center;align-items:center}.space-between{justify-content:space-between;align-items:center}.align-center{align-items:center}.np-row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.np-column{display:flex;flex-direction:column;flex-basis:100%;flex:1}"]
}] }
];
/** @nocollapse */
NpStep.ctorParameters = () => [];
NpStep.propDecorators = {
headerContent: [{ type: ContentChild, args: [NpStepHeaderDirective,] }],
processContent: [{ type: ContentChild, args: [NpStepProcessDirective,] }],
finishContent: [{ type: ContentChild, args: [NpStepFinishDirective,] }],
content: [{ type: ViewChild, args: [TemplateRef,] }],
title: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpStepperComponent {
/**
* @param {?} elemRef
*/
constructor(elemRef) {
this.elemRef = elemRef;
this._selectedIndex = 0;
}
/**
* @return {?}
*/
get selectedIndex() { return this._selectedIndex; }
/**
* @param {?} index
* @return {?}
*/
set selectedIndex(index) {
/** @type {?} */
let idx = +index;
if (idx < 0) {
this._selectedIndex = 0;
this.setStatus(idx);
return;
}
if (this.steps && this.steps.length > 0 && idx > this.steps.length - 1) {
this._selectedIndex = this.steps.length - 1;
this.setStatus(idx);
return;
}
this._selectedIndex = idx;
this.setStatus(idx);
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.selectedIndex = this._selectedIndex;
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.adjustStepHeaderTitlePosition();
}
// Adjust first and last step header title position
/**
* @private
* @return {?}
*/
adjustStepHeaderTitlePosition() {
/** @type {?} */
let progressContainer = (/** @type {?} */ (this.elemRef.nativeElement.querySelector('.progress-container')));
/** @type {?} */
let headerIcon = (/** @type {?} */ (this.elemRef.nativeElement.querySelector('.progress-circle-template')));
/** @type {?} */
let headerCircle = (/** @type {?} */ (this.elemRef.nativeElement.querySelector('.progress-circle')));
/** @type {?} */
let headerTitleFirst = (/** @type {?} */ (this.elemRef.nativeElement.querySelector('.step-title-first')));
/** @type {?} */
let headerTitleLast = (/** @type {?} */ (this.elemRef.nativeElement.querySelector('.step-title-last')));
if (progressContainer && (headerIcon || headerCircle) && headerTitleFirst && headerTitleLast) {
/** @type {?} */
let progressContainerWidth = progressContainer.offsetWidth;
/** @type {?} */
let headerWidth = headerIcon ? headerIcon.offsetWidth : headerCircle.offsetWidth;
headerTitleFirst.style.marginLeft = '-' + Math.abs(progressContainerWidth - headerWidth) + 'px';
headerTitleLast.style.marginRight = '-' + Math.abs(progressContainerWidth - headerWidth) + 'px';
}
}
/**
* @return {?}
*/
next() {
this.selectedIndex = Math.min(this._selectedIndex + 1, this.steps.length - 1);
}
/**
* @return {?}
*/
previous() {
this.selectedIndex = Math.max(this._selectedIndex - 1, 0);
}
/**
* @return {?}
*/
reset() {
this.selectedIndex = 0;
}
/**
* @param {?} idx
* @return {?}
*/
setStatus(idx) {
if (this.steps) {
this.steps.toArray().forEach((/**
* @param {?} v
* @param {?} i
* @return {?}
*/
(v, i) => {
if (i < idx) {
v.status = 'finish';
}
if (i === idx) {
v.status = 'process';
}
if (i > idx) {
v.status = 'wait';
}
}));
}
}
}
NpStepperComponent.decorators = [
{ type: Component, args: [{
selector: `np-stepper`,
template: "<div class=\"np-stepper-wrapper\">\r\n <!-- Step header -->\r\n <div class=\"flex-wrap row-flex\" style=\"align-items: center;\">\r\n <ng-container *ngFor=\"let step of steps; let i = index; let isFirst = first; let isLast = last;\">\r\n <div class=\"flex-wrap col-flex\" style=\"align-items: center;\">\r\n <div class=\"progress-container flex-wrap row-flex\">\r\n <!-- \u7B2C\u4E00\u6B65\u4E0D\u663E\u793A\u5DE6\u4FA7\u8FDE\u63A5\u7EBF -->\r\n <span class=\"progress-line\" *ngIf=\"!isFirst\"\r\n [ngClass]=\"{'progress-line-unselected': selectedIndex < i}\"></span>\r\n\r\n <!-- \u6839\u636Estep\u72B6\u6001\u548C\u662F\u5426\u6709\u81EA\u5B9A\u4E49\u5185\u5BB9\u663E\u793A -->\r\n\r\n <!-- wait\u7B49\u5F85\u4E2D -->\r\n <span *ngIf=\"step.status ==='wait'\" class=\"progress-circle\"\r\n [ngClass]=\"{'progress-circle-unselected': selectedIndex < i}\">\r\n </span>\r\n\r\n <!-- \u8FDB\u884C\u4E2D -->\r\n <ng-container *ngIf=\"step.status ==='process'\">\r\n <ng-container *ngIf=\"step.processContent\">\r\n <span class=\"progress-circle-template\" [ngClass]=\"{'progress-circle-unselected': selectedIndex < i}\">\r\n <ng-container *ngTemplateOutlet=\"step.processContent.template\"></ng-container>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!step.processContent\">\r\n <span class=\"progress-circle\" [ngClass]=\"{'progress-circle-unselected': selectedIndex < i}\">\r\n </span>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- \u5DF2\u5B8C\u6210 -->\r\n <ng-container *ngIf=\"step.status ==='finish'\">\r\n <ng-container *ngIf=\"step.finishContent\">\r\n <span class=\"progress-circle-template\" [ngClass]=\"{'progress-circle-unselected': selectedIndex < i}\">\r\n <ng-container *ngTemplateOutlet=\"step.finishContent.template\"></ng-container>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!step.finishContent\">\r\n <span class=\"progress-circle\" [ngClass]=\"{'progress-circle-unselected': selectedIndex < i}\">\r\n </span>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- \u6700\u540E\u4E00\u6B65\u4E0D\u663E\u793A\u53F3\u4FA7\u8FDE\u63A5\u7EBF -->\r\n <span class=\"progress-line\" *ngIf=\"!isLast\"\r\n [ngClass]=\"{'progress-line-unselected': selectedIndex < i}\"></span>\r\n </div>\r\n <div class=\"step-title\" *ngIf=\"!step.headerContent\"\r\n [ngClass]=\"{'step-title-first': isFirst, 'step-title-last': isLast, 'step-title-unselected': selectedIndex < i}\">\r\n {{ step.title }}\r\n </div>\r\n <div class=\"step-title\" *ngIf=\"step.headerContent\"\r\n [ngClass]=\"{'step-title-first': isFirst, 'step-title-last': isLast, 'step-title-unselected': selectedIndex < i}\">\r\n <ng-container *ngTemplateOutlet=\"step.headerContent.template\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Step content -->\r\n <ng-container *ngFor=\"let step of steps; let i = index; let isFirst = first; let isLast = last;\">\r\n <div class=\"flex-wrap row-flex\" *ngIf=\"step.content && selectedIndex === i\">\r\n <ng-container *ngTemplateOutlet=\"step.content\"></ng-container>\r\n </div>\r\n </ng-container>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [".backdrop-transparent{opacity:0}.flex-wrap{display:flex}.wrap{flex-wrap:wrap}.col-flex{flex-direction:column}.row-flex{flex-direction:row}.middle-flex{justify-content:center;align-items:center}.space-between{justify-content:space-between;align-items:center}.align-center{align-items:center}.np-row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.np-column{display:flex;flex-direction:column;flex-basis:100%;flex:1}.np-stepper-wrapper .progress-container{width:100%;min-width:100px;align-items:center;margin-bottom:5px}.np-stepper-wrapper .progress-container .progress-circle,.np-stepper-wrapper .progress-container .progress-circle-template{min-width:20px;min-height:20px;border-radius:50%;display:inline-block}.np-stepper-wrapper .progress-container .progress-circle img,.np-stepper-wrapper .progress-container .progress-circle-template img{width:40px;height:40px;display:block}.np-stepper-wrapper .progress-container .progress-line{width:auto;margin:auto;min-width:80px;height:3px}.np-stepper-wrapper .step-title-first,.np-stepper-wrapper .step-title-last{width:100%;max-width:100px;text-align:center}"]
}] }
];
/** @nocollapse */
NpStepperComponent.ctorParameters = () => [
{ type: ElementRef }
];
NpStepperComponent.propDecorators = {
steps: [{ type: ContentChildren, args: [NpStep,] }],
selectedIndex: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpStepperModule {
}
NpStepperModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [NpStepperComponent,
NpStep,
NpStepHeaderDirective,
NpStepFinishDirective,
NpStepProcessDirective],
exports: [NpStepperComponent,
NpStep,
NpStepHeaderDirective,
NpStepProcessDirective,
NpStepFinishDirective]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 标题组件 - 常用于展示panel标题、数据分组标题及公告标题等。
*
* <example-url>https://stackblitz.com/edit/np-title-sample?embed=1&file=src/app/app.component.html</example-url>
*/
class NpTitle {
constructor() {
/**
* 默认标题 - 默认此标题带有下划线及左侧Pluto色加粗border
*/
this.text = '';
/**
* 当标题类型为text或notice时的描述 - 以小字展示与标题右侧
*/
this.description = '';
/**
* 是否显示标题类型为text的左侧Pluto色加粗border
*/
this.vBar = true;
/**
* 是否加粗标题类型为text的标题
*/
this.bold = false;
/**
* 标题类型
*
* title - 常用于panel的标题，默认带有左侧加粗border和下划线
*
* caption - 常用于分组展示数据标题，默认带有左侧加粗border
*
* notice - 类似小喇叭公告，默认左侧有小喇叭图标，接着标题及描述
*/
this.type = 'title';
}
/**
* @return {?}
*/
ngOnInit() {
}
}
NpTitle.decorators = [
{ type: Component, args: [{
selector: `np-title`,
template: "<div class=\"np-title-wrapper flex-wrap row-flex\" [ngClass]=\"{'np-title-underline': type === 'title'}\">\r\n <ng-container *ngIf=\"type === 'title'\">\r\n <span class=\"title-text\" [ngClass]=\"{ vBar: vBar, bold: bold }\">{{ text }}</span>\r\n <span *ngIf=\"description\" class=\"title-description\">{{ description }}</span>\r\n <ng-container *ngIf=\"!description\">\r\n <ng-content select=\"title-template\"></ng-content>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"type === 'caption'\">\r\n <span class=\"caption-text\">{{ text }}</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"type === 'notice'\">\r\n <i class=\"fas fa-volume-up notice-icon\"></i>\r\n <span class=\"notice-text\">{{ text ? text : '\u6700\u65B0\u516C\u544A | ' }}</span>\r\n <span class=\"notice-description\">{{ description }}</span>\r\n </ng-container>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [".np-title-wrapper{min-height:45px;width:96%;margin:0 auto;position:relative;padding:0;align-items:baseline}.np-title-wrapper .title-text{position:relative;margin:0 15px 0 0;font-size:18px;line-height:45px;font-weight:500}.np-title-wrapper .vBar{padding-left:10px}.np-title-wrapper .vBar:before{content:'';display:block;width:5px;height:15px;position:absolute;left:0;top:15px}.np-title-wrapper .bold{font-weight:700}.np-title-wrapper .title-description{font-size:14px;font-weight:400;line-height:45px}.np-title-wrapper .caption-text{position:relative;margin:0;font-size:16px;line-height:45px;font-weight:600;padding-left:10px}.np-title-wrapper .caption-text:before{content:'';display:block;width:5px;height:15px;position:absolute;left:0;top:15px}.np-title-wrapper .notice-icon{font-size:16px;margin-right:10px}.np-title-wrapper .notice-text{font-size:16px}.np-title-wrapper .notice-description{cursor:pointer;font-size:14px;font-weight:400}"]
}] }
];
/** @nocollapse */
NpTitle.ctorParameters = () => [];
NpTitle.propDecorators = {
text: [{ type: Input }],
description: [{ type: Input }],
vBar: [{ type: Input }],
bold: [{ type: Input }],
type: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class TitleTemplateDirective {
constructor() { }
}
TitleTemplateDirective.decorators = [
{ type: Directive, args: [{ selector: 'title-template' },] }
];
/** @nocollapse */
TitleTemplateDirective.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpTitleModule {
}
NpTitleModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [NpTitle, TitleTemplateDirective],
exports: [NpTitle, TitleTemplateDirective]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 开关
*
* <example-url>https://stackblitz.com/edit/np-switch-sample?embed=1&file=src/app/app.component.html</example-url>
*/
class NpSwitch {
/**
* @param {?} cdf
*/
constructor(cdf) {
this.cdf = cdf;
/**
* 是否禁用
*/
this.isDisabled = false;
/**
* 是否必填 - 必填则有红色*号在标签前面；否则没有
*/
this.isRequired = false;
/**
* 标签的方向，left在开关左方，right在开关右方
*/
this.direction = "left";
/**
* 开关状态发生改变时触发事件
*/
this.inputModelChange = new EventEmitter();
this.emitChange = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
}
/**
* @return {?}
*/
get ischecked() {
if (this.trueValue || this.falseValue) {
if (this.val === this.trueValue) {
return true;
}
if (this.val === this.falseValue) {
return false;
}
}
else {
return this.val ? true : false;
}
}
/**
* @return {?}
*/
ngOnInit() {
// 转换下传入的值
}
/**
* @param {?} e
* @return {?}
*/
onChange(e) {
if (this.isDisabled) {
return;
}
e.stopPropagation();
e.preventDefault();
if (this.ischecked) {
this.val = this.falseValue || false;
this.emitChange(this.val);
this.inputModelChange.emit(this.val);
return;
}
if (!this.ischecked) {
this.val = this.trueValue || true;
this.emitChange(this.val);
this.inputModelChange.emit(this.val);
return;
}
}
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
if (obj !== undefined) {
this.val = obj;
this.emitChange(this.val);
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.emitChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
}
NpSwitch.decorators = [
{ type: Component, args: [{
selector: `np-switch`,
template: "<div ngDefaultControl [(ngModel)]=\"val\" class=\"np-switch-wrapper flex-wrap row-flex\" (click)=\"onChange($event)\"\r\n [ngStyle]=\"{'flex-direction': direction==='right'?'row-reverse':'row', 'cursor': isDisabled ? 'not-allowed' : 'pointer'}\">\r\n <div class=\"flex-wrap col-flex\" *ngIf=\"label\">\r\n <label for=\"np-switch\" class=\"np-switch-lbl\">\r\n <span class=\"form-required\" *ngIf=\"isRequired\">*</span>\r\n {{ label }}\r\n </label>\r\n </div>\r\n <div class=\"flex-wrap col-flex switch-container\">\r\n <span class=\"switch switch-anim\" [ngClass]=\"{'checked': ischecked, 'disabled': isDisabled}\">\r\n </span>\r\n </div>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpSwitch)),
multi: true,
}
],
styles: [".backdrop-transparent{opacity:0}.flex-wrap{display:flex}.wrap{flex-wrap:wrap}.col-flex{flex-direction:column}.row-flex{flex-direction:row}.middle-flex{justify-content:center;align-items:center}.space-between{justify-content:space-between;align-items:center}.align-center{align-items:center}.np-row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.np-column{display:flex;flex-direction:column;flex-basis:100%;flex:1}.np-switch-wrapper{align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.np-switch-wrapper .np-switch-lbl{width:80px;margin-right:20px;text-align:right;font-size:13px;font-weight:700;height:34px;line-height:34px}.np-switch-wrapper .switch-container{position:relative}.np-switch-wrapper .switch-container .switch{box-sizing:content-box;width:55px;height:25px;position:relative;border-radius:15px;background-clip:content-box;display:inline-block;-webkit-appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0}.np-switch-wrapper .switch-container .switch:before{content:'';width:25px!important;height:25px!important;position:absolute;top:0!important;left:0!important;border-radius:15px}.np-switch-wrapper .switch-container .switch.checked:before{left:30.4px!important;position:absolute;top:0;content:''}.np-switch-wrapper .switch-container .switch.switch-animbg{transition:background-color .4s}.np-switch-wrapper .switch-container .switch.switch-animbg:before{transition:left .3s}.np-switch-wrapper .switch-container .switch.switch-animbg:checked{transition:border-color .4s,background-color .4s}.np-switch-wrapper .switch-container .switch.switch-animbg:checked:before{transition:left .3s}.np-switch-wrapper .switch-container .switch.switch-anim{transition:border .4s cubic-bezier(0,0,0,1),box-shadow .4s cubic-bezier(0,0,0,1)}.np-switch-wrapper .switch-container .switch.switch-anim:before{transition:left .3s}.np-switch-wrapper .switch-container .switch.switch-anim.checked{transition:border .4s,box-shadow .4s,background-color 1.2s}.np-switch-wrapper .switch-container .switch.switch-anim.checked:before{transition:left .3s}"]
}] }
];
/** @nocollapse */
NpSwitch.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
NpSwitch.propDecorators = {
label: [{ type: Input }],
trueValue: [{ type: Input }],
falseValue: [{ type: Input }],
isDisabled: [{ type: Input }],
isRequired: [{ type: Input }],
direction: [{ type: Input }],
inputModelChange: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpSwitchModule {
}
NpSwitchModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [NpSwitch],
exports: [NpSwitch]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const daffProgressIndicatorAnimation = {
fill: trigger('fill', [
state('*', style({ width: "{{ percentage }}%" }), { params: { percentage: 100 } }),
transition('* <=> *', animate('800ms cubic-bezier(.86, .05, .4, .96)'))
])
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpProgressBar {
constructor() {
this.colors = [];
this.height = 15;
this.gradient = true;
this.type = 'progress';
this.leftText = '';
this.rightText = '';
this.percentage = 0;
this.background = `linear-gradient(to right, #22BABB, #CCFDD7)`;
}
/**
* @return {?}
*/
get fillState() {
return {
value: 100 - this.percentage,
params: {
percentage: 100 - this.percentage
}
};
}
/**
* @return {?}
*/
ngOnInit() {
this.buildBackgroundColors();
}
/**
* @return {?}
*/
buildBackgroundColors() {
if (this.colors && this.colors.length > 0) {
if (this.colors.length === 1) {
this.background = this.colors[0];
return;
}
/** @type {?} */
let gradientColors = '';
/** @type {?} */
let gradientPercent = Math.round(this.percentage / this.colors.length);
if (this.type === 'progress') {
this.colors.forEach((/**
* @param {?} color
* @return {?}
*/
color => {
if (this.gradient) {
gradientColors += color + ', ';
}
else {
gradientColors += color + ' ' + gradientPercent + '%, ';
}
}));
}
else {
if (!this.leftText && this.leftText != '0') {
this.leftText = this.percentage + '';
}
if (!this.rightText && this.rightText != '0') {
this.rightText = (100 - this.percentage) + '';
}
/** @type {?} */
let left = this.percentage;
this.percentage = 100;
gradientColors = this.colors[0] + ' ' + left + '%, ' + this.colors[1] + ' 0%, ';
}
gradientColors = gradientColors.substring(0, gradientColors.length - 2); // Remove tail's comma and space
this.background = `linear-gradient(to right, ` + gradientColors + `)`;
}
}
}
NpProgressBar.decorators = [
{ type: Component, args: [{
selector: `np-progress-bar`,
template: "<div class=\"progress-bar-wrapper\" [ngStyle]=\"{'height.px': height}\">\r\n <div class=\"progress-bar progress\" [ngStyle]=\"{'background': background}\"></div>\r\n <div [@fill]=\"fillState\" class=\"progress-bar shrinker\"></div>\r\n <span class=\"left-percent-text\" [ngStyle]=\"{'line-height.px': height}\"\r\n *ngIf=\"type === 'percent'\">{{ leftText }}</span>\r\n <span class=\"right-percent-text\"\r\n [ngStyle]=\"{'right': 'calc(' + (100 - percentage) + '% + 5px)', 'line-height.px': height}\"\r\n *ngIf=\"type === 'percent'\">{{ rightText }}</span>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
animations: [
daffProgressIndicatorAnimation.fill
],
styles: [".progress-bar-wrapper{height:15px;margin:0 auto;position:relative;top:50%;transform:translateY(-50%);overflow:hidden}.progress-bar-wrapper .progress-bar{width:100%;height:100%}.progress-bar-wrapper .progress{color:#fff;text-align:center;animation-direction:reverse}.progress-bar-wrapper .shrinker{background-color:#eceff4;position:absolute;top:0;right:0;width:100%}.progress-bar-wrapper .left-percent-text{position:absolute;color:#fff;left:5px;top:0}.progress-bar-wrapper .right-percent-text{position:absolute;color:#fff;top:0}"]
}] }
];
/** @nocollapse */
NpProgressBar.ctorParameters = () => [];
NpProgressBar.propDecorators = {
colors: [{ type: Input }],
height: [{ type: Input }],
gradient: [{ type: Input }],
type: [{ type: Input }],
leftText: [{ type: Input }],
rightText: [{ type: Input }],
percentage: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpProgressBarModule {
}
NpProgressBarModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [NpProgressBar],
exports: [NpProgressBar]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const $$1 = require('jquery');
/**
* 环形占比图
*
* <example-url>https://stackblitz.com/edit/np-circle-bar-sample?embed=1&file=src/app/app.component.ts</example-url>
*/
class NpCircleBar {
constructor() {
/**
* 百分比值0 ~ 1， 例如0.25，则占比1/4。
*/
this.value = 0.0;
/**
* 环的直径
*/
this.size = 100.0;
/**
* 环形占比开始的角度，例如0代表3点钟方向开始占比，π代表9点钟方向，2π转了一圈又到了3点钟方向开始，以此类推。
*/
this.startAngle = 0;
/**
* 环的厚度
*/
this.thickness = 'auto';
/**
* 环形占比渐变色gradient，例如：{ gradient: ['#3aeabb', '#fdd250'] }
*/
this.fill = { gradient: ['#3aeabb', '#fdd250'] };
/**
* 环形未占比填充颜色，例如：rgba(0, 0, 0, 0.1)
*/
this.emptyFill = 'rgba(0, 0, 0, 0.1)';
/**
* 加载动画效果，例如：{ duration: 1200, easing: 'circleProgressEasing' }
*/
this.animation = { duration: 1200, easing: 'circleProgressEasing' };
/**
* 加载动画初始值
*/
this.animationStartValue = 0.0;
/**
* 加载动画是否逆时针
*/
this.reverse = false;
/**
* 环形图截面形状，butt | round | square，默认round即圆环截面
*/
this.lineCap = 'round';
this.insertMode = 'prepend';
this.circleInited = new EventEmitter();
this.circleAnimationStart = new EventEmitter();
this.circleAnimationProgress = new EventEmitter();
this.circleAnimationEnd = new EventEmitter();
this.el = null;
this.canvas = null;
this.ctx = null;
this.radius = 0.0;
this.arcFill = null;
this.lastFrameValue = 0.0;
}
/**
* @return {?}
*/
ngOnInit() {
((/** @type {?} */ ($$1))).easing.circleProgressEasing = (/**
* @param {?} x
* @return {?}
*/
(x) => {
if (x < 0.5) {
x = 2 * x;
return 0.5 * x * x * x;
}
else {
x = 2 - 2 * x;
return 1 - 0.5 * x * x * x;
}
});
this.init();
}
/**
* @return {?}
*/
init() {
this.radius = this.size / 2;
this.initWidget();
this.initFill();
this.draw();
this.circleInited.next();
}
/**
* @private
* @return {?}
*/
initWidget() {
if (this.canvas === null) {
this.canvas = this.canvasRef.nativeElement;
this.canvas.width = this.size;
this.canvas.height = this.size;
this.ctx = this.canvas.getContext('2d');
if (window.devicePixelRatio > 1) {
/** @type {?} */
let scaleBy = window.devicePixelRatio;
this.canvas.style.width = this.canvas.style.height = this.size + 'px';
this.canvas.width = this.canvas.height = this.size * scaleBy;
this.ctx.scale(scaleBy, scaleBy);
}
}
}
/**
* @private
* @return {?}
*/
initFill() {
if (!this.fill) {
throw Error('The fill is not specified!');
}
if (typeof this.fill === 'string') {
this.fill = { color: this.fill };
}
if (this.fill.color) {
this.arcFill = this.fill.color;
}
if (this.fill.gradient) {
/** @type {?} */
let gr = this.fill.gradient;
if (gr.length === 1) {
this.arcFill = gr[0];
}
else {
/** @type {?} */
let ga = this.fill.gradientAngle || 0;
// gradient direction angle; 0 by default
/** @type {?} */
let gd = this.fill.gradientDirection || [
this.size / 2 * (1 - Math.cos(ga)),
this.size / 2 * (1 + Math.sin(ga)),
this.size / 2 * (1 + Math.cos(ga)),
this.size / 2 * (1 - Math.sin(ga)) // y1
];
/** @type {?} */
let lg = this.ctx.createLinearGradient.apply(this.ctx, gd);
for (var i = 0; i < gr.length; i++) {
/** @type {?} */
var color = gr[i];
/** @type {?} */
var pos = i / (gr.length - 1);
if (Array.isArray(color)) {
pos = color[1];
color = color[0];
}
lg.addColorStop(pos, color);
}
this.arcFill = lg;
}
}
if (this.fill.image) {
/** @type {?} */
let img = null;
if (this.fill.image instanceof Image) {
img = this.fill.image;
}
else {
img = new Image();
img.src = this.fill.image;
}
/** @type {?} */
let setImageFill = (/**
* @return {?}
*/
() => {
/** @type {?} */
var bg = this.canvas;
bg.width = this.size;
bg.height = this.size;
bg.getContext('2d').drawImage(img, 0, 0, this.size, this.size);
this.arcFill = this.ctx.createPattern(bg, 'no-repeat');
this.drawFrame(this.lastFrameValue);
});
if (img.complete) {
setImageFill();
}
else {
img.onload = setImageFill;
}
}
}
/**
* @private
* @return {?}
*/
draw() {
if (this.animation) {
this.drawAnimated(this.value);
}
else {
this.drawFrame(this.value);
}
}
/**
* @private
* @param {?} v
* @return {?}
*/
drawFrame(v) {
this.lastFrameValue = v;
this.ctx.clearRect(0, 0, this.size, this.size);
this.drawEmptyArc(v);
this.drawArc(v);
}
/**
* @private
* @param {?} v
* @return {?}
*/
drawArc(v) {
if (v === 0) {
return;
}
/** @type {?} */
var ctx = this.ctx;
/** @type {?} */
var r = this.radius;
/** @type {?} */
var t = this.getThickness();
/** @type {?} */
var a = this.startAngle;
ctx.save();
ctx.beginPath();
if (!this.reverse) {
ctx.arc(r, r, r - t / 2, a, a + Math.PI * 2 * v);
}
else {
ctx.arc(r, r, r - t / 2, a - Math.PI * 2 * v, a);
}
ctx.lineWidth = t;
ctx.lineCap = this.lineCap;
ctx.strokeStyle = this.arcFill;
ctx.stroke();
ctx.restore();
}
/**
* @private
* @param {?} v
* @return {?}
*/
drawEmptyArc(v) {
/** @type {?} */
var ctx = this.ctx;
/** @type {?} */
var r = this.radius;
/** @type {?} */
var t = this.getThickness();
/** @type {?} */
var a = this.startAngle;
if (v < 1) {
ctx.save();
ctx.beginPath();
if (v <= 0) {
ctx.arc(r, r, r - t / 2, 0, Math.PI * 2);
}
else {
if (!this.reverse) {
ctx.arc(r, r, r - t / 2, a + Math.PI * 2 * v, a);
}
else {
ctx.arc(r, r, r - t / 2, a, a - Math.PI * 2 * v);
}
}
ctx.lineWidth = t;
ctx.strokeStyle = this.emptyFill;
ctx.stroke();
ctx.restore();
}
}
/**
* @private
* @param {?} v
* @return {?}
*/
drawAnimated(v) {
/** @type {?} */
var self = this;
/** @type {?} */
var el = this.el;
/** @type {?} */
var canvas = $$1(this.canvas);
// stop previous animation before new "start" event is triggered
canvas.stop(true, false);
this.circleAnimationStart.next();
canvas
.css({ animationProgress: 0 })
.animate({ animationProgress: 1 }, $$1.extend({}, this.animation, {
step: (/**
* @param {?} animationProgress
* @return {?}
*/
(animationProgress) => {
/** @type {?} */
var stepValue = self.animationStartValue * (1 - animationProgress) + v * animationProgress;
self.drawFrame(stepValue);
self.circleAnimationProgress.next({ animationProgress: animationProgress, stepValue: stepValue });
})
}))
.promise()
.always((/**
* @return {?}
*/
() => {
// trigger on both successful & failure animation end
this.circleAnimationEnd.next();
}));
}
/**
* @private
* @return {?}
*/
getThickness() {
return isNumber(this.thickness) ? this.thickness : this.size / 14;
}
/**
* @private
* @return {?}
*/
getValue() {
return this.value;
}
/**
* @param {?} newValue
* @return {?}
*/
setValue(newValue) {
if (this.animation) {
this.animationStartValue = this.lastFrameValue;
}
this.value = newValue;
this.draw();
}
}
NpCircleBar.decorators = [
{ type: Component, args: [{
selector: `np-circle-bar`,
template: "<div class=\"circle-bar-wrapper\">\r\n <canvas #circleBarCanvas></canvas>\r\n</div>\r\n",
styles: [":host{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}"]
}] }
];
/** @nocollapse */
NpCircleBar.ctorParameters = () => [];
NpCircleBar.propDecorators = {
canvasRef: [{ type: ViewChild, args: ['circleBarCanvas',] }],
value: [{ type: Input }],
size: [{ type: Input }],
startAngle: [{ type: Input }],
thickness: [{ type: Input }],
fill: [{ type: Input }],
emptyFill: [{ type: Input }],
animation: [{ type: Input }],
animationStartValue: [{ type: Input }],
reverse: [{ type: Input }],
lineCap: [{ type: Input }],
insertMode: [{ type: Input }],
circleInited: [{ type: Output }],
circleAnimationStart: [{ type: Output }],
circleAnimationProgress: [{ type: Output }],
circleAnimationEnd: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpPercentCircleBarComponent {
/**
* @param {?} cdf
*/
constructor(cdf) {
this.cdf = cdf;
this.startAngle = 0.0;
this.thickness = 15;
this.size = 156;
this.animationTime = 500;
this.animation = { duration: this.animationTime, easing: 'circleProgressEasing' };
this.bindingData = [];
}
/**
* @return {?}
*/
ngOnInit() {
this.buildBindingData();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes) {
if (changes.animationTime && changes.animationTime.currentValue) {
this.animation.duration = this.animationTime;
}
if (changes.data && changes.data.currentValue) {
this.data = changes.data.currentValue;
this.buildBindingData();
this.refresh();
}
}
}
/**
* @return {?}
*/
refresh() {
if (this.circleBars && this.circleBars.length > 0) {
this.circleBars.forEach((/**
* @param {?} circleBar
* @return {?}
*/
circleBar => {
circleBar.init();
}));
}
}
/**
* @private
* @return {?}
*/
buildBindingData() {
if (this.data && this.data.length > 0) {
/** @type {?} */
let len = this.data.length;
/** @type {?} */
let currentPercentage = 0;
this.bindingData = [];
for (let i = 0; i < len; i++) {
/** @type {?} */
const item = this.data[i];
/** @type {?} */
let bindingItem = {
startAngle: 2 * Math.PI * currentPercentage,
fill: { gradient: [item.color] },
value: item.percentage
};
currentPercentage += item.percentage;
this.bindingData.push(bindingItem);
}
}
}
}
NpPercentCircleBarComponent.decorators = [
{ type: Component, args: [{
selector: `np-percent-circle-bar`,
template: "<div class=\"percent-circle-bar-wrapper\">\r\n <div class=\"percent-circle-bar-text\" [ngStyle]=\"{'width.px': size, 'height.px': size}\">\r\n <ng-content></ng-content>\r\n </div>\r\n <ng-container *ngFor=\"let item of bindingData; let i = index; let isFirst = first; let isLast = last;\">\r\n <np-circle-bar class=\"percent-circle-bar\" [value]=\"item.value\" [fill]=\"item.fill\" [thickness]=\"thickness\"\r\n [size]=\"size\" [startAngle]=\"item.startAngle\" [emptyFill]=\"isFirst ? 'rgba(0, 0, 0, 0.1)' : 'rgba(0, 0, 0, 0)'\"\r\n [ngStyle]=\"{'z-index': (10 - i)}\" [animation]=\"animation\">\r\n </np-circle-bar>\r\n </ng-container>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [".percent-circle-bar-wrapper{position:relative}.percent-circle-bar-wrapper .percent-circle-bar{position:absolute;left:0;top:0}.percent-circle-bar-wrapper .percent-circle-bar-text{display:flex;justify-content:center;align-items:center;z-index:11}"]
}] }
];
/** @nocollapse */
NpPercentCircleBarComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
NpPercentCircleBarComponent.propDecorators = {
circleBars: [{ type: ViewChildren, args: [NpCircleBar,] }],
startAngle: [{ type: Input }],
thickness: [{ type: Input }],
size: [{ type: Input }],
data: [{ type: Input }],
animationTime: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpCircleBarModule {
}
NpCircleBarModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [NpCircleBar, NpPercentCircleBarComponent],
exports: [NpCircleBar, NpPercentCircleBarComponent]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpLoading {
constructor() {
this.r = 98;
this.thickness = 10;
this.colors = ['#37C4CA', '#5189DA', '#FB8933'];
this.speed = 1;
}
/**
* @return {?}
*/
ngOnInit() {
}
}
NpLoading.decorators = [
{ type: Component, args: [{
selector: `np-loading`,
template: "<div class=\"np-loading-wrapper\">\r\n <div [ngStyle]=\"{'left': 'calc(50% - ' + r + 'px)', 'width.px': 2*r, 'height.px': 2*r}\">\r\n <div *ngIf=\"colors[0]\" [ngStyle]=\"{'background-color': colors[0], \r\n 'width.px': (+r + +r / 2), \r\n 'height.px': (+r + +r / 2),\r\n 'animation': (2/speed) + 's linear 1s infinite normal none running cssload-move'}\">\r\n </div>\r\n <div *ngIf=\"colors[1]\" [ngStyle]=\"{'background-color': colors[1], \r\n 'width.px': (+r + +r / 2), \r\n 'height.px': (+r + +r / 2),\r\n 'animation': (1/speed) + 's linear 0s infinite normal none running cssload-move'}\">\r\n </div>\r\n <div *ngIf=\"colors[2]\" [ngStyle]=\"{'background-color': colors[2], \r\n 'width.px': (+r + +r / 2), \r\n 'height.px': (+r + +r / 2),\r\n 'animation': (3/speed) + 's linear 2s infinite normal none running cssload-move'}\">\r\n </div>\r\n </div>\r\n <div [ngStyle]=\"{'left': 'calc(50% - ' + (r - thickness) + 'px)', \r\n 'width.px': 2*(r - thickness), \r\n 'height.px': 2*(r - thickness), \r\n 'line-height.px': 2*(r - thickness), \r\n 'top.px': (thickness - 2*r)}\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n",
styles: [":host{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.np-loading-wrapper{height:196px}.np-loading-wrapper>div{position:relative;border-radius:100%;overflow:hidden}.np-loading-wrapper>div:nth-child(2){text-align:center}.np-loading-wrapper>div div{border-radius:100%;-webkit-filter:blur(29px);filter:blur(29px);position:absolute}@-webkit-keyframes cssload-move{0%,100%{top:0;left:0}25%{top:0;left:50%}50%{top:50%;left:50%}75%{top:50%;left:0}}@keyframes cssload-move{0%,100%{top:0;left:0}25%{top:0;left:50%}50%{top:50%;left:50%}75%{top:50%;left:0}}"]
}] }
];
/** @nocollapse */
NpLoading.ctorParameters = () => [];
NpLoading.propDecorators = {
r: [{ type: Input }],
thickness: [{ type: Input }],
colors: [{ type: Input }],
speed: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpSolidLoading {
constructor() {
this.label = 'loading...';
this.size = 156;
this.thickness = 16;
this.colors = ['#37C4CA', '#5189DA', '#FB8933'];
this.animatedDidEnd = new EventEmitter();
this.speed = 0.0;
this.currentAngle = 0;
this.speedUp = true;
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.draw();
}
/**
* @return {?}
*/
startAnimate() {
this.speedUp = true;
this.speed = 0.1;
this.currentAngle = 0.0;
}
/**
* @return {?}
*/
endAnimate() {
this.speedUp = false;
}
/**
* @return {?}
*/
_animatedDidEnd() {
this.animatedDidEnd.emit();
}
/**
* @return {?}
*/
draw() {
/** @type {?} */
const ctx = this.canvasElement.nativeElement.getContext('2d');
ctx.clearRect(0, 0, this.size, this.size);
ctx.lineWidth = this.thickness;
ctx.lineCap = 'round';
/** @type {?} */
let arcs = [];
/** @type {?} */
let angle = this.currentAngle;
/** @type {?} */
let emptySep = 0.1 * Math.PI;
/** @type {?} */
let sep = (2 * Math.PI - this.colors.length * emptySep) / this.colors.length;
this.colors.forEach((/**
* @param {?} item
* @param {?} idx
* @return {?}
*/
(item, idx) => {
arcs.push({
color: item,
start: angle,
to: angle + sep,
});
angle = angle + sep + emptySep;
}));
arcs.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
ctx.beginPath();
ctx.strokeStyle = item.color;
ctx.arc(this.size / 2.0, this.size / 2.0, this.size / 2.0 - this.thickness / 2.0, item.start, item.to);
ctx.stroke();
}));
if (this.speedUp) {
if (this.speed < 0.2) {
this.speed += 0.005;
if (this.speed > 0.2) {
this.speed = 0.2;
}
}
}
else {
this.speed -= 0.005;
if (this.speed <= 0) {
this.speed = 0;
this.currentAngle = 0;
this._animatedDidEnd();
return;
}
}
this.currentAngle += this.speed;
window.requestAnimationFrame((/**
* @return {?}
*/
() => this.draw()));
}
}
NpSolidLoading.decorators = [
{ type: Component, args: [{
selector: `np-solid-loading`,
template: "<div class=\"np-solid-loading-wrapper\">\r\n <canvas #canvasElement [width]=\"size\" [height]=\"size\"></canvas>\r\n <div class=\"loading-label\">{{label}}</div>\r\n</div>\r\n",
styles: [":host{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.np-solid-loading-wrapper{position:relative}.np-solid-loading-wrapper .loading-label{font-size:12px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}"]
}] }
];
/** @nocollapse */
NpSolidLoading.ctorParameters = () => [];
NpSolidLoading.propDecorators = {
label: [{ type: Input }],
size: [{ type: Input }],
thickness: [{ type: Input }],
colors: [{ type: Input }],
animatedDidEnd: [{ type: Output }],
canvasElement: [{ type: ViewChild, args: ['canvasElement',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpLoadingModule {
}
NpLoadingModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [NpLoading, NpSolidLoading],
exports: [NpLoading, NpSolidLoading]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpPanelFooterDirective {
constructor() { }
}
NpPanelFooterDirective.decorators = [
{ type: Directive, args: [{
selector: 'np-panel-footer',
host: { 'class': 'panel-footer' }
},] }
];
/** @nocollapse */
NpPanelFooterDirective.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpPanelHeaderDirective {
constructor() { }
}
NpPanelHeaderDirective.decorators = [
{ type: Directive, args: [{ selector: 'np-panel-header' },] }
];
/** @nocollapse */
NpPanelHeaderDirective.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpPanelBodyDirective {
constructor() { }
}
NpPanelBodyDirective.decorators = [
{ type: Directive, args: [{
selector: 'np-panel-body',
host: {
'class': 'panel-body'
}
},] }
];
/** @nocollapse */
NpPanelBodyDirective.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* panel组件
*
* <example-url>https://stackblitz.com/edit/angular-hmkf7x?embed=1&file=src/app/app.component.html</example-url>
*/
class NpPanel {
constructor() {
/**
* 面板主标题
*/
this.title = '';
/**
* 面板副标题 - 常用于对主标题的解释描述等，在主标题右侧展示。
*/
this.subTitle = '';
/**
* 面板背景色
*/
this.bgColor = '#fff';
/**
* 面板圆角
*/
this.panelRadius = 5; // unit: px
}
/**
* @return {?}
*/
ngOnInit() {
}
}
NpPanel.decorators = [
{ type: Component, args: [{
selector: `np-panel`,
template: "<div class=\"panel-header\" *ngIf=\"title || npPanelHeader\" [style.margin-top]=\"title ? '-15px' : ''\"\r\n [ngClass]=\"{'np-title': title}\">\r\n <ng-container *ngIf=\"title\">\r\n <np-title [text]=\"title\" [description]=\"subTitle\" [vBar]=\"false\" [bold]=\"true\"></np-title>\r\n </ng-container>\r\n <ng-container *ngIf=\"!title\">\r\n <ng-content select=\"np-panel-header\"></ng-content>\r\n </ng-container>\r\n</div>\r\n<ng-container *ngIf=\"npPanelBody\">\r\n <ng-content select=\"np-panel-body\"></ng-content>\r\n</ng-container>\r\n<ng-container *ngIf=\"npPanelFooter\">\r\n <ng-content select=\"np-panel-footer\"></ng-content>\r\n</ng-container>\r\n",
host: {
'class': 'np-panel-wrapper flex-wrap col-flex',
// '[style.background-color]': 'bgColor',
'[style.border-radius.px]': 'panelRadius'
},
encapsulation: ViewEncapsulation.None,
styles: [".np-panel-wrapper{padding:15px}.np-panel-wrapper .panel-header{display:block;flex:1 1 0}.np-panel-wrapper .panel-body{display:block;flex:10 1 0}.np-panel-wrapper .panel-footer{display:block;flex:1 1 0}.np-panel-wrapper .np-title .np-title-wrapper{width:100%}"]
}] }
];
/** @nocollapse */
NpPanel.ctorParameters = () => [];
NpPanel.propDecorators = {
title: [{ type: Input }],
subTitle: [{ type: Input }],
bgColor: [{ type: Input }],
panelRadius: [{ type: Input }],
npPanelHeader: [{ type: ContentChild, args: [NpPanelHeaderDirective,] }],
npPanelBody: [{ type: ContentChild, args: [NpPanelBodyDirective,] }],
npPanelFooter: [{ type: ContentChild, args: [NpPanelFooterDirective,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpPanelModule {
}
NpPanelModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule,
NpTitleModule
],
declarations: [
NpPanel,
NpPanelHeaderDirective,
NpPanelBodyDirective,
NpPanelFooterDirective
],
exports: [
NpPanel,
NpPanelHeaderDirective,
NpPanelBodyDirective,
NpPanelFooterDirective
],
entryComponents: []
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpBadgeDirective {
/**
* @param {?} _elementRef
* @param {?} _renderer
*/
constructor(_elementRef, _renderer) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this.badgePosition = 'above after';
this.badgeColor = '#ed5565';
this.badgeRadius = '0';
this.hasContent = false;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const contentChange = changes['badgeContent'];
if (contentChange) {
/** @type {?} */
const value = contentChange.currentValue;
this.hasContent = value != null && `${value}`.trim().length > 0 && +value !== 0;
this.updateTextContent();
}
}
/**
* @return {?}
*/
isAbove() {
return this.badgePosition.indexOf('below') === -1;
}
/**
* @return {?}
*/
isAfter() {
return this.badgePosition.indexOf('before') === -1;
}
/**
* @private
* @return {?}
*/
updateTextContent() {
if (!this.badgeElement) {
this.badgeElement = this.createBadgeElement();
}
else {
this.badgeElement.textContent = this.badgeContent;
}
return this.badgeElement;
}
/**
* @private
* @return {?}
*/
createBadgeElement() {
/** @type {?} */
const badgeElement = this._renderer.createElement('span');
badgeElement.setAttribute('id', `np-badge-content-${Utils.ID()}`);
badgeElement.style.borderRadius = this.badgeRadius;
badgeElement.style.backgroundColor = this.badgeColor;
badgeElement.classList.add('np-badge-content');
badgeElement.textContent = this.badgeContent;
this._elementRef.nativeElement.appendChild(badgeElement);
return badgeElement;
}
}
NpBadgeDirective.decorators = [
{ type: Directive, args: [{
selector: '[np-badge]',
host: {
'class': 'np-badge-wrapper',
'[class.np-badge-above]': 'isAbove()',
'[class.np-badge-below]': '!isAbove()',
'[class.np-badge-before]': '!isAfter()',
'[class.np-badge-after]': 'isAfter()'
}
},] }
];
/** @nocollapse */
NpBadgeDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
NpBadgeDirective.propDecorators = {
badgePosition: [{ type: Input }],
badgeColor: [{ type: Input }],
badgeContent: [{ type: Input }],
badgeRadius: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpBadgeModule {
}
NpBadgeModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [NpBadgeDirective],
exports: [NpBadgeDirective]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 盒子组件 - 常用于展示汇总数据等的面板
*
* <example-url>https://stackblitz.com/edit/np-box-sample?embed=1&file=src/app/app.component.html</example-url>
*/
class NpBox {
constructor() {
this.defaultBgColors = ['blue', 'green', 'red', 'orange'];
this.showCustomHoverColor = false;
}
/**
* @return {?}
*/
ngOnInit() {
this.initOptions();
this.buildCustomBg();
}
/**
* @private
* @return {?}
*/
initOptions() {
if (this.options) {
if (!this.options.bg) {
this.options.bg = 'blue';
}
if (!this.options.layout) {
this.options.layout = 'center';
}
}
}
/**
* @private
* @return {?}
*/
buildCustomBg() {
if (this.options.bg && this.defaultBgColors.indexOf(this.options.bg) === -1 && this.npBoxHeader.nativeElement) {
if (this.options.bg.indexOf('//') > -1 || this.options.bg.indexOf('http') > -1) {
this.npBoxHeader.nativeElement.style.backgroundImage = 'url(' + this.options.bg + ')';
this.npBoxHeader.nativeElement.style.backgroundPosition = '0% 0%';
this.npBoxHeader.nativeElement.style.backgroundRepeat = 'no-repeat';
this.npBoxHeader.nativeElement.style.backgroundSize = '100% 100%';
}
else {
this.npBoxHeader.nativeElement.style.backgroundColor = this.options.bg;
}
}
}
/**
* 构建NpBoxOptions中设置的鼠标hover颜色hoverColor
* @param {?} isHover 鼠标是否hover
* @return {?}
*/
buildCustomHoverColor(isHover) {
if (this.options.bg && this.options.hoverColor && this.defaultBgColors.indexOf(this.options.bg) === -1) {
this.showCustomHoverColor = isHover;
}
}
}
NpBox.decorators = [
{ type: Component, args: [{
selector: `np-box`,
template: "<div #npBoxWrapper class=\"np-box-wrapper flex-wrap col-flex\" [ngClass]=\"{\r\n 'blue-shadow': options.bg === 'blue', \r\n 'green-shadow': options.bg === 'green', \r\n 'red-shadow': options.bg === 'red', \r\n 'orange-shadow': options.bg === 'orange'\r\n }\" [ngStyle]=\"{'box-shadow': showCustomHoverColor ? '0px 8px 16px 0px rgba(' + options.hoverColor + ', 0.2)' : ''}\"\r\n (mouseenter)=\"buildCustomHoverColor(true)\" (mouseleave)=\"buildCustomHoverColor(false)\">\r\n <div #npBoxHeader class=\"np-box-header flex-wrap row-flex\" [ngClass]=\"{\r\n 'blue': options.bg === 'blue', \r\n 'green': options.bg === 'green', \r\n 'red': options.bg === 'red', \r\n 'orange': options.bg === 'orange'\r\n }\">\r\n <i [ngClass]=\"options.faIcon\"></i>\r\n \r\n <span>{{ options.title }}</span>\r\n </div>\r\n <div class=\"np-box-content flex-wrap row-flex\" *ngIf=\"options.layout === 'leftRight'\"\r\n [ngStyle]=\"{'height.px': options.height}\">\r\n <div class=\"flex-wrap col-flex\" [ngClass]=\"{'left-right': options.layout === 'leftRight'}\">\r\n <span>{{ options.lCaption }}</span>\r\n <span [style.color]=\"options.lColor\">{{ options.lContent }}</span>\r\n </div>\r\n <span class=\"vertical-line\"></span>\r\n <div class=\"flex-wrap col-flex\" [ngClass]=\"{'left-right': options.layout === 'leftRight'}\">\r\n <span>{{ options.rCaption }}</span>\r\n <span [style.color]=\"options.rColor\">{{ options.rContent }}</span>\r\n </div>\r\n </div>\r\n <div class=\"np-box-content flex-wrap row-flex\" *ngIf=\"options.layout === 'center'\"\r\n [ngStyle]=\"{'height.px': options.height}\">\r\n <div class=\"flex-wrap col-flex\" [ngClass]=\"{'center': options.layout === 'center'}\">\r\n <span>{{ options.cCaption }}</span>\r\n <span [style.color]=\"options.cColor\">{{ options.cContent }}</span>\r\n </div>\r\n </div>\r\n <div class=\"np-box-content flex-wrap row-flex\" *ngIf=\"options.layout === 'custom'\"\r\n [ngStyle]=\"{'height.px': options.height}\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [".np-box-wrapper{box-shadow:0 8px 16px 0 rgba(174,180,180,.16);border-radius:10px;min-height:155px;transition:box-shadow .5s}.np-box-wrapper:hover.blue-shadow{box-shadow:0 8px 16px 0 rgba(78,136,221,.2)!important}.np-box-wrapper:hover.green-shadow{box-shadow:0 8px 16px 0 rgba(44,197,198,.2)!important}.np-box-wrapper:hover.red-shadow{box-shadow:0 8px 16px 0 rgba(244,107,120,.2)!important}.np-box-wrapper:hover.orange-shadow{box-shadow:0 8px 16px 0 rgba(253,137,34,.2)!important}.np-box-wrapper .np-box-header{justify-content:center;align-items:baseline;border-top-left-radius:10px;border-top-right-radius:10px;font-size:17px;line-height:48px}.np-box-wrapper .np-box-header.blue{background:url(//image.ipay.so/upload/voucher/assets/images/activity/pin-order_amt.png) 0 0/100% 100% no-repeat}.np-box-wrapper .np-box-header.green{background:url(//image.ipay.so/upload/voucher/assets/images/activity/pin-order_count.png) 0 0/100% 100% no-repeat}.np-box-wrapper .np-box-header.red{background:url(//image.ipay.so/upload/voucher/assets/images/activity/pin-user_count.png) 0 0/100% 100% no-repeat}.np-box-wrapper .np-box-header.orange{background:url(//image.ipay.so/upload/voucher/assets/images/activity/pin-product_count.png) 0 0/100% 100% no-repeat}.np-box-wrapper .np-box-content{margin:auto 0;justify-content:space-evenly;align-items:center}.np-box-wrapper .np-box-content>div.center,.np-box-wrapper .np-box-content>div.left-right{align-items:center}.np-box-wrapper .np-box-content>div.center>span:first-child,.np-box-wrapper .np-box-content>div.left-right>span:first-child{text-align:center;font-size:14px;margin-bottom:10px}.np-box-wrapper .np-box-content>div.center>span:last-child,.np-box-wrapper .np-box-content>div.left-right>span:last-child{font-weight:700;font-size:35px}.np-box-wrapper .np-box-content .vertical-line{width:1px;height:51px}"]
}] }
];
/** @nocollapse */
NpBox.ctorParameters = () => [];
NpBox.propDecorators = {
options: [{ type: Input }],
npBoxHeader: [{ type: ViewChild, args: ['npBoxHeader',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpBoxModule {
}
NpBoxModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [NpBox],
exports: [NpBox]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Shallow-extends a stylesheet object with another stylesheet object.
* \@docs-private
* @param {?} dest
* @param {?} source
* @return {?}
*/
function extendStyles(dest, source) {
for (let key in source) {
if (source.hasOwnProperty(key)) {
((/** @type {?} */ (dest[(/** @type {?} */ (key))]))) = source[(/** @type {?} */ (key))];
}
}
return dest;
}
/**
* Toggles whether the native drag interactions should be enabled for an element.
* \@docs-private
* @param {?} element Element on which to toggle the drag interactions.
* @param {?} enable Whether the drag interactions should be enabled.
* @return {?}
*/
function toggleNativeDragInteractions(element, enable) {
/** @type {?} */
const userSelect = enable ? '' : 'none';
extendStyles(element.style, {
touchAction: enable ? '' : 'none',
webkitUserDrag: enable ? '' : 'none',
webkitTapHighlightColor: enable ? '' : 'transparent',
userSelect: userSelect,
msUserSelect: userSelect,
webkitUserSelect: userSelect,
MozUserSelect: userSelect
});
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @license
* Copyright Google LLC 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
*/
/**
* Parses a CSS time value to milliseconds.
* @param {?} value
* @return {?}
*/
function parseCssTimeUnitsToMs(value) {
// Some browsers will return it in seconds, whereas others will return milliseconds.
/** @type {?} */
const multiplier = value.toLowerCase().indexOf('ms') > -1 ? 1 : 1000;
return parseFloat(value) * multiplier;
}
/**
* Gets the transform transition duration, including the delay, of an element in milliseconds.
* @param {?} element
* @return {?}
*/
function getTransformTransitionDurationInMs(element) {
/** @type {?} */
const computedStyle = getComputedStyle(element);
/** @type {?} */
const transitionedProperties = parseCssPropertyValue(computedStyle, 'transition-property');
/** @type {?} */
const property = transitionedProperties.find((/**
* @param {?} prop
* @return {?}
*/
prop => prop === 'transform' || prop === 'all'));
// If there's no transition for `all` or `transform`, we shouldn't do anything.
if (!property) {
return 0;
}
// Get the index of the property that we're interested in and match
// it up to the same index in `transition-delay` and `transition-duration`.
/** @type {?} */
const propertyIndex = transitionedProperties.indexOf(property);
/** @type {?} */
const rawDurations = parseCssPropertyValue(computedStyle, 'transition-duration');
/** @type {?} */
const rawDelays = parseCssPropertyValue(computedStyle, 'transition-delay');
return parseCssTimeUnitsToMs(rawDurations[propertyIndex]) +
parseCssTimeUnitsToMs(rawDelays[propertyIndex]);
}
/**
* Parses out multiple values from a computed style into an array.
* @param {?} computedStyle
* @param {?} name
* @return {?}
*/
function parseCssPropertyValue(computedStyle, name) {
/** @type {?} */
const value = computedStyle.getPropertyValue(name);
return value.split(',').map((/**
* @param {?} part
* @return {?}
*/
part => part.trim()));
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @license
* Copyright Google LLC 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
*/
/**
* Cached result of whether the user's browser supports passive event listeners.
* @type {?}
*/
let supportsPassiveEvents;
/**
* Checks whether the user's browser supports passive event listeners.
* See: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
* @return {?}
*/
function supportsPassiveEventListeners() {
if (supportsPassiveEvents == null && typeof window !== 'undefined') {
try {
window.addEventListener('test', (/** @type {?} */ (null)), Object.defineProperty({}, 'passive', {
get: (/**
* @return {?}
*/
() => supportsPassiveEvents = true)
}));
}
finally {
supportsPassiveEvents = supportsPassiveEvents || false;
}
}
return supportsPassiveEvents;
}
/**
* Normalizes an `AddEventListener` object to something that can be passed
* to `addEventListener` on any browser, no matter whether it supports the
* `options` parameter.
* @param {?} options Object to be normalized.
* @return {?}
*/
function normalizePassiveListenerOptions(options) {
return supportsPassiveEventListeners() ? options : !!options.capture;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Coerces an ElementRef or an Element into an element.
* Useful for APIs that can accept either a ref or the native element itself.
* @template T
* @param {?} elementOrRef
* @return {?}
*/
function coerceElement(elementOrRef) {
return elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Options that can be used to bind a passive event listener.
* @type {?}
*/
const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
/**
* Options that can be used to bind an active event listener.
* @type {?}
*/
const activeEventListenerOptions = normalizePassiveListenerOptions({ passive: false });
/**
* Time in milliseconds for which to ignore mouse events, after
* receiving a touch event. Used to avoid doing double work for
* touch devices where the browser fires fake mouse events, in
* addition to touch events.
* @type {?}
*/
const MOUSE_EVENT_IGNORE_TIME = 800;
/**
* @ignore
* Reference to a draggable item. Used to manipulate or dispose of the item.
* \@docs-private
* @template T
*/
class DragRef {
/**
* @param {?} element
* @param {?} _config
* @param {?} _document
* @param {?} _ngZone
* @param {?} _viewportRuler
* @param {?} _dragDropRegistry
*/
constructor(element, _config, _document, _ngZone, _viewportRuler, _dragDropRegistry) {
this._config = _config;
this._document = _document;
this._ngZone = _ngZone;
this._viewportRuler = _viewportRuler;
this._dragDropRegistry = _dragDropRegistry;
/**
* CSS `transform` applied to the element when it isn't being dragged. We need a
* passive transform in order for the dragged element to retain its new position
* after the user has stopped dragging and because we need to know the relative
* position in case they start dragging again. This corresponds to `element.style.transform`.
*/
this._passiveTransform = { x: 0, y: 0 };
/**
* CSS `transform` that is applied to the element while it's being dragged.
*/
this._activeTransform = { x: 0, y: 0 };
/**
* Emits when the item is being moved.
*/
this._moveEvents = new Subject();
/**
* Amount of subscriptions to the move event. Used to avoid
* hitting the zone if the consumer didn't subscribe to it.
*/
this._moveEventSubscriptions = 0;
/**
* Subscription to pointer movement events.
*/
this._pointerMoveSubscription = Subscription.EMPTY;
/**
* Subscription to the event that is dispatched when the user lifts their pointer.
*/
this._pointerUpSubscription = Subscription.EMPTY;
/**
* Cached reference to the boundary element.
*/
this._boundaryElement = null;
/**
* Whether the native dragging interactions have been enabled on the root element.
*/
this._nativeInteractionsEnabled = true;
/**
* Elements that can be used to drag the draggable item.
*/
this._handles = [];
/**
* Registered handles that are currently disabled.
*/
this._disabledHandles = new Set();
/**
* Layout direction of the item.
*/
this._direction = 'ltr';
this._disabled = false;
/**
* Emits as the drag sequence is being prepared.
*/
this.beforeStarted = new Subject();
/**
* Emits when the user starts dragging the item.
*/
this.started = new Subject();
/**
* Emits when the user has released a drag item, before any animations have started.
*/
this.released = new Subject();
/**
* Emits when the user stops dragging an item in the container.
*/
this.ended = new Subject();
/**
* Emits when the user has moved the item into a new container.
*/
this.entered = new Subject();
/**
* Emits when the user removes the item its container by dragging it into another container.
*/
this.exited = new Subject();
/**
* Emits when the user drops the item inside a container.
*/
this.dropped = new Subject();
/**
* Emits as the user is dragging the item. Use with caution,
* because this event will fire for every pixel that the user has dragged.
*/
this.moved = new Observable$1((/**
* @param {?} observer
* @return {?}
*/
(observer) => {
/** @type {?} */
const subscription = this._moveEvents.subscribe(observer);
this._moveEventSubscriptions++;
return (/**
* @return {?}
*/
() => {
subscription.unsubscribe();
this._moveEventSubscriptions--;
});
}));
/**
* Handler for the `mousedown`/`touchstart` events.
*/
this._pointerDown = (/**
* @param {?} event
* @return {?}
*/
(event) => {
this.beforeStarted.next();
// Delegate the event based on whether it started from a handle or the element itself.
if (this._handles.length) {
/** @type {?} */
const targetHandle = this._handles.find((/**
* @param {?} handle
* @return {?}
*/
handle => {
/** @type {?} */
const target = event.target;
return !!target && (target === handle || handle.contains((/** @type {?} */ (target))));
}));
if (targetHandle && !this._disabledHandles.has(targetHandle) && !this.disabled) {
this._initializeDragSequence(targetHandle, event);
}
}
else if (!this.disabled) {
this._initializeDragSequence(this._rootElement, event);
}
});
/**
* Handler that is invoked when the user moves their pointer after they've initiated a drag.
*/
this._pointerMove = (/**
* @param {?} event
* @return {?}
*/
(event) => {
if (!this._hasStartedDragging) {
/** @type {?} */
const pointerPosition = this._getPointerPositionOnPage(event);
/** @type {?} */
const distanceX = Math.abs(pointerPosition.x - this._pickupPositionOnPage.x);
/** @type {?} */
const distanceY = Math.abs(pointerPosition.y - this._pickupPositionOnPage.y);
// Only start dragging after the user has moved more than the minimum distance in either
// direction. Note that this is preferrable over doing something like `skip(minimumDistance)`
// in the `pointerMove` subscription, because we're not guaranteed to have one move event
// per pixel of movement (e.g. if the user moves their pointer quickly).
if (distanceX + distanceY >= this._config.dragStartThreshold) {
this._hasStartedDragging = true;
this._ngZone.run((/**
* @return {?}
*/
() => this._startDragSequence(event)));
}
return;
}
// We only need the preview dimensions if we have a boundary element.
if (this._boundaryElement) {
// Cache the preview element rect if we haven't cached it already or if
// we cached it too early before the element dimensions were computed.
if (!this._previewRect || (!this._previewRect.width && !this._previewRect.height)) {
this._previewRect = (this._preview || this._rootElement).getBoundingClientRect();
}
}
/** @type {?} */
const constrainedPointerPosition = this._getConstrainedPointerPosition(event);
this._hasMoved = true;
event.preventDefault();
this._updatePointerDirectionDelta(constrainedPointerPosition);
if (this._dropContainer) {
this._updateActiveDropContainer(constrainedPointerPosition);
}
else {
/** @type {?} */
const activeTransform = this._activeTransform;
activeTransform.x =
constrainedPointerPosition.x - this._pickupPositionOnPage.x + this._passiveTransform.x;
activeTransform.y =
constrainedPointerPosition.y - this._pickupPositionOnPage.y + this._passiveTransform.y;
/** @type {?} */
const transform = getTransform(activeTransform.x, activeTransform.y);
// Preserve the previous `transform` value, if there was one. Note that we apply our own
// transform before the user's, because things like rotation can affect which direction
// the element will be translated towards.
this._rootElement.style.transform = this._initialTransform ?
transform + ' ' + this._initialTransform : transform;
// Apply transform as attribute if dragging and svg element to work for IE
if (typeof SVGElement !== 'undefined' && this._rootElement instanceof SVGElement) {
/** @type {?} */
const appliedTransform = `translate(${activeTransform.x} ${activeTransform.y})`;
this._rootElement.setAttribute('transform', appliedTransform);
}
}
// Since this event gets fired for every pixel while dragging, we only
// want to fire it if the consumer opted into it. Also we have to
// re-enter the zone because we run all of the events on the outside.
if (this._moveEventSubscriptions > 0) {
this._ngZone.run((/**
* @return {?}
*/
() => {
this._moveEvents.next({
source: this,
pointerPosition: constrainedPointerPosition,
event,
delta: this._pointerDirectionDelta
});
}));
}
});
/**
* Handler that is invoked when the user lifts their pointer up, after initiating a drag.
*/
this._pointerUp = (/**
* @param {?} event
* @return {?}
*/
(event) => {
// Note that here we use `isDragging` from the service, rather than from `this`.
// The difference is that the one from the service reflects whether a dragging sequence
// has been initiated, whereas the one on `this` includes whether the user has passed
// the minimum dragging threshold.
if (!this._dragDropRegistry.isDragging(this)) {
return;
}
this._removeSubscriptions();
this._dragDropRegistry.stopDragging(this);
if (this._handles) {
this._rootElement.style.webkitTapHighlightColor = this._rootElementTapHighlight;
}
if (!this._hasStartedDragging) {
return;
}
this.released.next({ source: this });
if (!this._dropContainer) {
// Convert the active transform into a passive one. This means that next time
// the user starts dragging the item, its position will be calculated relatively
// to the new passive transform.
this._passiveTransform.x = this._activeTransform.x;
this._passiveTransform.y = this._activeTransform.y;
this._ngZone.run((/**
* @return {?}
*/
() => this.ended.next({ source: this })));
this._dragDropRegistry.stopDragging(this);
return;
}
this._animatePreviewToPlaceholder().then((/**
* @return {?}
*/
() => {
this._cleanupDragArtifacts(event);
this._dragDropRegistry.stopDragging(this);
}));
});
this.withRootElement(element);
_dragDropRegistry.registerDragItem(this);
}
/**
* Whether starting to drag this element is disabled.
* @return {?}
*/
get disabled() {
return this._disabled || !!(this._dropContainer && this._dropContainer.disabled);
}
/**
* @param {?} value
* @return {?}
*/
set disabled(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
if (newValue !== this._disabled) {
this._disabled = newValue;
this._toggleNativeDragInteractions();
}
}
/**
* Returns the element that is being used as a placeholder
* while the current element is being dragged.
* @return {?}
*/
getPlaceholderElement() {
return this._placeholder;
}
/**
* Returns the root draggable element.
* @return {?}
*/
getRootElement() {
return this._rootElement;
}
/**
* Registers the handles that can be used to drag the element.
* @template THIS
* @this {THIS}
* @param {?} handles
* @return {THIS}
*/
withHandles(handles) {
(/** @type {?} */ (this))._handles = handles.map((/**
* @param {?} handle
* @return {?}
*/
handle => coerceElement(handle)));
(/** @type {?} */ (this))._handles.forEach((/**
* @param {?} handle
* @return {?}
*/
handle => toggleNativeDragInteractions(handle, false)));
(/** @type {?} */ (this))._toggleNativeDragInteractions();
return (/** @type {?} */ (this));
}
/**
* Registers the template that should be used for the drag preview.
* @template THIS
* @this {THIS}
* @param {?} template Template that from which to stamp out the preview.
* @return {THIS}
*/
withPreviewTemplate(template) {
(/** @type {?} */ (this))._previewTemplate = template;
return (/** @type {?} */ (this));
}
/**
* Registers the template that should be used for the drag placeholder.
* @template THIS
* @this {THIS}
* @param {?} template Template that from which to stamp out the placeholder.
* @return {THIS}
*/
withPlaceholderTemplate(template) {
(/** @type {?} */ (this))._placeholderTemplate = template;
return (/** @type {?} */ (this));
}
/**
* Sets an alternate drag root element. The root element is the element that will be moved as
* the user is dragging. Passing an alternate root element is useful when trying to enable
* dragging on an element that you might not have access to.
* @template THIS
* @this {THIS}
* @param {?} rootElement
* @return {THIS}
*/
withRootElement(rootElement) {
/** @type {?} */
const element = coerceElement(rootElement);
if (element !== (/** @type {?} */ (this))._rootElement) {
if ((/** @type {?} */ (this))._rootElement) {
(/** @type {?} */ (this))._removeRootElementListeners((/** @type {?} */ (this))._rootElement);
}
element.addEventListener('mousedown', (/** @type {?} */ (this))._pointerDown, activeEventListenerOptions);
element.addEventListener('touchstart', (/** @type {?} */ (this))._pointerDown, passiveEventListenerOptions);
(/** @type {?} */ (this))._initialTransform = undefined;
(/** @type {?} */ (this))._rootElement = element;
}
return (/** @type {?} */ (this));
}
/**
* Element to which the draggable's position will be constrained.
* @template THIS
* @this {THIS}
* @param {?} boundaryElement
* @return {THIS}
*/
withBoundaryElement(boundaryElement) {
(/** @type {?} */ (this))._boundaryElement = boundaryElement ? coerceElement(boundaryElement) : null;
return (/** @type {?} */ (this));
}
/**
* Removes the dragging functionality from the DOM element.
* @return {?}
*/
dispose() {
this._removeRootElementListeners(this._rootElement);
// Do this check before removing from the registry since it'll
// stop being considered as dragged once it is removed.
if (this.isDragging()) {
// Since we move out the element to the end of the body while it's being
// dragged, we have to make sure that it's removed if it gets destroyed.
removeElement(this._rootElement);
}
this._destroyPreview();
this._destroyPlaceholder();
this._dragDropRegistry.removeDragItem(this);
this._removeSubscriptions();
this.beforeStarted.complete();
this.started.complete();
this.released.complete();
this.ended.complete();
this.entered.complete();
this.exited.complete();
this.dropped.complete();
this._moveEvents.complete();
this._handles = [];
this._disabledHandles.clear();
this._dropContainer = undefined;
this._boundaryElement = this._rootElement = this._placeholderTemplate =
this._previewTemplate = this._nextSibling = (/** @type {?} */ (null));
}
/**
* Checks whether the element is currently being dragged.
* @return {?}
*/
isDragging() {
return this._hasStartedDragging && this._dragDropRegistry.isDragging(this);
}
/**
* Resets a standalone drag item to its initial position.
* @return {?}
*/
reset() {
this._rootElement.style.transform = this._initialTransform || '';
this._activeTransform = { x: 0, y: 0 };
this._passiveTransform = { x: 0, y: 0 };
}
/**
* Sets a handle as disabled. While a handle is disabled, it'll capture and interrupt dragging.
* @param {?} handle Handle element that should be disabled.
* @return {?}
*/
disableHandle(handle) {
if (this._handles.indexOf(handle) > -1) {
this._disabledHandles.add(handle);
}
}
/**
* Enables a handle, if it has been disabled.
* @param {?} handle Handle element to be enabled.
* @return {?}
*/
enableHandle(handle) {
this._disabledHandles.delete(handle);
}
/**
* Sets the layout direction of the draggable item.
* @template THIS
* @this {THIS}
* @param {?} direction
* @return {THIS}
*/
withDirection(direction) {
(/** @type {?} */ (this))._direction = direction;
return (/** @type {?} */ (this));
}
/**
* Sets the container that the item is part of.
* @param {?} container
* @return {?}
*/
_withDropContainer(container) {
this._dropContainer = container;
}
/**
* Unsubscribes from the global subscriptions.
* @private
* @return {?}
*/
_removeSubscriptions() {
this._pointerMoveSubscription.unsubscribe();
this._pointerUpSubscription.unsubscribe();
}
/**
* Destroys the preview element and its ViewRef.
* @private
* @return {?}
*/
_destroyPreview() {
if (this._preview) {
removeElement(this._preview);
}
if (this._previewRef) {
this._previewRef.destroy();
}
this._preview = this._previewRef = (/** @type {?} */ (null));
}
/**
* Destroys the placeholder element and its ViewRef.
* @private
* @return {?}
*/
_destroyPlaceholder() {
if (this._placeholder) {
removeElement(this._placeholder);
}
if (this._placeholderRef) {
this._placeholderRef.destroy();
}
this._placeholder = this._placeholderRef = (/** @type {?} */ (null));
}
/**
* Starts the dragging sequence.
* @private
* @param {?} event
* @return {?}
*/
_startDragSequence(event) {
// Emit the event on the item before the one on the container.
this.started.next({ source: this });
if (isTouchEvent(event)) {
this._lastTouchEventTime = Date.now();
}
if (this._dropContainer) {
/** @type {?} */
const element = this._rootElement;
// Grab the `nextSibling` before the preview and placeholder
// have been created so we don't get the preview by accident.
this._nextSibling = element.nextSibling;
/** @type {?} */
const preview = this._preview = this._createPreviewElement();
/** @type {?} */
const placeholder = this._placeholder = this._createPlaceholderElement();
// We move the element out at the end of the body and we make it hidden, because keeping it in
// place will throw off the consumer's `:last-child` selectors. We can't remove the element
// from the DOM completely, because iOS will stop firing all subsequent events in the chain.
element.style.display = 'none';
this._document.body.appendChild((/** @type {?} */ (element.parentNode)).replaceChild(placeholder, element));
this._document.body.appendChild(preview);
this._dropContainer.start();
}
}
/**
* Sets up the different variables and subscriptions
* that will be necessary for the dragging sequence.
* @private
* @param {?} referenceElement Element that started the drag sequence.
* @param {?} event Browser event object that started the sequence.
* @return {?}
*/
_initializeDragSequence(referenceElement, event) {
// Always stop propagation for the event that initializes
// the dragging sequence, in order to prevent it from potentially
// starting another sequence for a draggable parent somewhere up the DOM tree.
event.stopPropagation();
/** @type {?} */
const isDragging = this.isDragging();
/** @type {?} */
const isTouchSequence = isTouchEvent(event);
/** @type {?} */
const isAuxiliaryMouseButton = !isTouchSequence && ((/** @type {?} */ (event))).button !== 0;
/** @type {?} */
const rootElement = this._rootElement;
/** @type {?} */
const isSyntheticEvent = !isTouchSequence && this._lastTouchEventTime &&
this._lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now();
// If the event started from an element with the native HTML drag&drop, it'll interfere
// with our own dragging (e.g. `img` tags do it by default). Prevent the default action
// to stop it from happening. Note that preventing on `dragstart` also seems to work, but
// it's flaky and it fails if the user drags it away quickly. Also note that we only want
// to do this for `mousedown` since doing the same for `touchstart` will stop any `click`
// events from firing on touch devices.
if (event.target && ((/** @type {?} */ (event.target))).draggable && event.type === 'mousedown') {
event.preventDefault();
}
// Abort if the user is already dragging or is using a mouse button other than the primary one.
if (isDragging || isAuxiliaryMouseButton || isSyntheticEvent) {
return;
}
// Cache the previous transform amount only after the first drag sequence, because
// we don't want our own transforms to stack on top of each other.
if (this._initialTransform == null) {
this._initialTransform = this._rootElement.style.transform || '';
}
// If we've got handles, we need to disable the tap highlight on the entire root element,
// otherwise iOS will still add it, even though all the drag interactions on the handle
// are disabled.
if (this._handles.length) {
this._rootElementTapHighlight = rootElement.style.webkitTapHighlightColor;
rootElement.style.webkitTapHighlightColor = 'transparent';
}
this._toggleNativeDragInteractions();
this._hasStartedDragging = this._hasMoved = false;
this._initialContainer = (/** @type {?} */ (this._dropContainer));
this._pointerMoveSubscription = this._dragDropRegistry.pointerMove.subscribe(this._pointerMove);
this._pointerUpSubscription = this._dragDropRegistry.pointerUp.subscribe(this._pointerUp);
this._scrollPosition = this._viewportRuler.getViewportScrollPosition();
if (this._boundaryElement) {
this._boundaryRect = this._boundaryElement.getBoundingClientRect();
}
// If we have a custom preview template, the element won't be visible anyway so we avoid the
// extra `getBoundingClientRect` calls and just move the preview next to the cursor.
this._pickupPositionInElement = this._previewTemplate && this._previewTemplate.template ?
{ x: 0, y: 0 } :
this._getPointerPositionInElement(referenceElement, event);
/** @type {?} */
const pointerPosition = this._pickupPositionOnPage = this._getPointerPositionOnPage(event);
this._pointerDirectionDelta = { x: 0, y: 0 };
this._pointerPositionAtLastDirectionChange = { x: pointerPosition.x, y: pointerPosition.y };
this._dragDropRegistry.startDragging(this, event);
}
/**
* Cleans up the DOM artifacts that were added to fanpitate the element being dragged.
* @private
* @param {?} event
* @return {?}
*/
_cleanupDragArtifacts(event) {
// Restore the element's visibility and insert it at its old position in the DOM.
// It's important that we maintain the position, because moving the element around in the DOM
// can throw off `NgFor` which does smart diffing and re-creates elements only when necessary,
// while moving the existing elements in all other cases.
this._rootElement.style.display = '';
if (this._nextSibling) {
(/** @type {?} */ (this._nextSibling.parentNode)).insertBefore(this._rootElement, this._nextSibling);
}
else {
this._initialContainer.element.appendChild(this._rootElement);
}
this._destroyPreview();
this._destroyPlaceholder();
this._boundaryRect = this._previewRect = undefined;
// Re-enter the NgZone since we bound `document` events on the outside.
this._ngZone.run((/**
* @return {?}
*/
() => {
/** @type {?} */
const container = (/** @type {?} */ (this._dropContainer));
/** @type {?} */
const currentIndex = container.getItemIndex(this);
const { x, y } = this._getPointerPositionOnPage(event);
/** @type {?} */
const isPointerOverContainer = container._isOverContainer(x, y);
this.ended.next({ source: this });
this.dropped.next({
item: this,
currentIndex,
previousIndex: this._initialContainer.getItemIndex(this),
container: container,
previousContainer: this._initialContainer,
isPointerOverContainer
});
container.drop(this, currentIndex, this._initialContainer, isPointerOverContainer);
this._dropContainer = this._initialContainer;
}));
}
/**
* Updates the item's position in its drop container, or moves it
* into a new one, depending on its current drag position.
* @private
* @param {?} __0
* @return {?}
*/
_updateActiveDropContainer({ x, y }) {
// Drop container that draggable has been moved into.
/** @type {?} */
let newContainer = (/** @type {?} */ (this._dropContainer))._getSiblingContainerFromPosition(this, x, y) ||
this._initialContainer._getSiblingContainerFromPosition(this, x, y);
// If we couldn't find a new container to move the item into, and the item has left it's
// initial container, check whether the it's over the initial container. This handles the
// case where two containers are connected one way and the user tries to undo dragging an
// item into a new container.
if (!newContainer && this._dropContainer !== this._initialContainer &&
this._initialContainer._isOverContainer(x, y)) {
newContainer = this._initialContainer;
}
if (newContainer && newContainer !== this._dropContainer) {
this._ngZone.run((/**
* @return {?}
*/
() => {
// Notify the old container that the item has left.
this.exited.next({ item: this, container: (/** @type {?} */ (this._dropContainer)) });
(/** @type {?} */ (this._dropContainer)).exit(this);
// Notify the new container that the item has entered.
this.entered.next({ item: this, container: (/** @type {?} */ (newContainer)) });
this._dropContainer = (/** @type {?} */ (newContainer));
this._dropContainer.enter(this, x, y);
}));
}
(/** @type {?} */ (this._dropContainer))._sortItem(this, x, y, this._pointerDirectionDelta);
this._preview.style.transform =
getTransform(x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);
}
/**
* Creates the element that will be rendered next to the user's pointer
* and will be used as a preview of the element that is being dragged.
* @private
* @return {?}
*/
_createPreviewElement() {
/** @type {?} */
const previewConfig = this._previewTemplate;
/** @type {?} */
const previewTemplate = previewConfig ? previewConfig.template : null;
/** @type {?} */
let preview;
if (previewTemplate) {
/** @type {?} */
const viewRef = (/** @type {?} */ (previewConfig)).viewContainer.createEmbeddedView(previewTemplate, (/** @type {?} */ (previewConfig)).context);
preview = viewRef.rootNodes[0];
this._previewRef = viewRef;
preview.style.transform =
getTransform(this._pickupPositionOnPage.x, this._pickupPositionOnPage.y);
}
else {
/** @type {?} */
const element = this._rootElement;
/** @type {?} */
const elementRect = element.getBoundingClientRect();
preview = deepCloneNode(element);
preview.style.width = `${elementRect.width}px`;
preview.style.height = `${elementRect.height}px`;
preview.style.transform = getTransform(elementRect.left, elementRect.top);
}
extendStyles(preview.style, {
// It's important that we disable the pointer events on the preview, because
// it can throw off the `document.elementFromPoint` calls in the `CdkDropList`.
pointerEvents: 'none',
position: 'fixed',
top: '0',
left: '0',
zIndex: '1000'
});
toggleNativeDragInteractions(preview, false);
preview.classList.add('cdk-drag-preview');
preview.setAttribute('dir', this._direction);
return preview;
}
/**
* Animates the preview element from its current position to the location of the drop placeholder.
* @private
* @return {?} Promise that resolves when the animation completes.
*/
_animatePreviewToPlaceholder() {
// If the user hasn't moved yet, the transitionend event won't fire.
if (!this._hasMoved) {
return Promise.resolve();
}
/** @type {?} */
const placeholderRect = this._placeholder.getBoundingClientRect();
// Apply the class that adds a transition to the preview.
this._preview.classList.add('cdk-drag-animating');
// Move the preview to the placeholder position.
this._preview.style.transform = getTransform(placeholderRect.left, placeholderRect.top);
// If the element doesn't have a `transition`, the `transitionend` event won't fire. Since
// we need to trigger a style recalculation in order for the `cdk-drag-animating` class to
// apply its style, we take advantage of the available info to figure out whether we need to
// bind the event in the first place.
/** @type {?} */
const duration = getTransformTransitionDurationInMs(this._preview);
if (duration === 0) {
return Promise.resolve();
}
return this._ngZone.runOutsideAngular((/**
* @return {?}
*/
() => {
return new Promise((/**
* @param {?} resolve
* @return {?}
*/
resolve => {
/** @type {?} */
const handler = (/** @type {?} */ (((/**
* @param {?} event
* @return {?}
*/
(event) => {
if (!event || (event.target === this._preview && event.propertyName === 'transform')) {
this._preview.removeEventListener('transitionend', handler);
resolve();
clearTimeout(timeout);
}
}))));
// If a transition is short enough, the browser might not fire the `transitionend` event.
// Since we know how long it's supposed to take, add a timeout with a 50% buffer that'll
// fire if the transition hasn't completed when it was supposed to.
/** @type {?} */
const timeout = setTimeout((/** @type {?} */ (handler)), duration * 1.5);
this._preview.addEventListener('transitionend', handler);
}));
}));
}
/**
* Creates an element that will be shown instead of the current element while dragging.
* @private
* @return {?}
*/
_createPlaceholderElement() {
/** @type {?} */
const placeholderConfig = this._placeholderTemplate;
/** @type {?} */
const placeholderTemplate = placeholderConfig ? placeholderConfig.template : null;
/** @type {?} */
let placeholder;
if (placeholderTemplate) {
this._placeholderRef = (/** @type {?} */ (placeholderConfig)).viewContainer.createEmbeddedView(placeholderTemplate, (/** @type {?} */ (placeholderConfig)).context);
placeholder = this._placeholderRef.rootNodes[0];
}
else {
placeholder = deepCloneNode(this._rootElement);
}
placeholder.classList.add('cdk-drag-placeholder');
return placeholder;
}
/**
* Figures out the coordinates at which an element was picked up.
* @private
* @param {?} referenceElement Element that initiated the dragging.
* @param {?} event Event that initiated the dragging.
* @return {?}
*/
_getPointerPositionInElement(referenceElement, event) {
/** @type {?} */
const elementRect = this._rootElement.getBoundingClientRect();
/** @type {?} */
const handleElement = referenceElement === this._rootElement ? null : referenceElement;
/** @type {?} */
const referenceRect = handleElement ? handleElement.getBoundingClientRect() : elementRect;
/** @type {?} */
const point = isTouchEvent(event) ? event.targetTouches[0] : event;
/** @type {?} */
const x = point.pageX - referenceRect.left - this._scrollPosition.left;
/** @type {?} */
const y = point.pageY - referenceRect.top - this._scrollPosition.top;
return {
x: referenceRect.left - elementRect.left + x,
y: referenceRect.top - elementRect.top + y
};
}
/**
* Determines the point of the page that was touched by the user.
* @private
* @param {?} event
* @return {?}
*/
_getPointerPositionOnPage(event) {
// `touches` will be empty for start/end events so we have to fall back to `changedTouches`.
/** @type {?} */
const point = isTouchEvent(event) ? (event.touches[0] || event.changedTouches[0]) : event;
return {
x: point.pageX - this._scrollPosition.left,
y: point.pageY - this._scrollPosition.top
};
}
/**
* Gets the pointer position on the page, accounting for any position constraints.
* @private
* @param {?} event
* @return {?}
*/
_getConstrainedPointerPosition(event) {
/** @type {?} */
const point = this._getPointerPositionOnPage(event);
/** @type {?} */
const dropContainerLock = this._dropContainer ? this._dropContainer.lockAxis : null;
if (this.lockAxis === 'x' || dropContainerLock === 'x') {
point.y = this._pickupPositionOnPage.y;
}
else if (this.lockAxis === 'y' || dropContainerLock === 'y') {
point.x = this._pickupPositionOnPage.x;
}
if (this._boundaryRect) {
const { x: pickupX, y: pickupY } = this._pickupPositionInElement;
/** @type {?} */
const boundaryRect = this._boundaryRect;
/** @type {?} */
const previewRect = (/** @type {?} */ (this._previewRect));
/** @type {?} */
const minY = boundaryRect.top + pickupY;
/** @type {?} */
const maxY = boundaryRect.bottom - (previewRect.height - pickupY);
/** @type {?} */
const minX = boundaryRect.left + pickupX;
/** @type {?} */
const maxX = boundaryRect.right - (previewRect.width - pickupX);
point.x = clamp(point.x, minX, maxX);
point.y = clamp(point.y, minY, maxY);
}
return point;
}
/**
* Updates the current drag delta, based on the user's current pointer position on the page.
* @private
* @param {?} pointerPositionOnPage
* @return {?}
*/
_updatePointerDirectionDelta(pointerPositionOnPage) {
const { x, y } = pointerPositionOnPage;
/** @type {?} */
const delta = this._pointerDirectionDelta;
/** @type {?} */
const positionSinceLastChange = this._pointerPositionAtLastDirectionChange;
// Amount of pixels the user has dragged since the last time the direction changed.
/** @type {?} */
const changeX = Math.abs(x - positionSinceLastChange.x);
/** @type {?} */
const changeY = Math.abs(y - positionSinceLastChange.y);
// Because we handle pointer events on a per-pixel basis, we don't want the delta
// to change for every pixel, otherwise anything that depends on it can look erratic.
// To make the delta more consistent, we track how much the user has moved since the last
// delta change and we only update it after it has reached a certain threshold.
if (changeX > this._config.pointerDirectionChangeThreshold) {
delta.x = x > positionSinceLastChange.x ? 1 : -1;
positionSinceLastChange.x = x;
}
if (changeY > this._config.pointerDirectionChangeThreshold) {
delta.y = y > positionSinceLastChange.y ? 1 : -1;
positionSinceLastChange.y = y;
}
return delta;
}
/**
* Toggles the native drag interactions, based on how many handles are registered.
* @private
* @return {?}
*/
_toggleNativeDragInteractions() {
if (!this._rootElement || !this._handles) {
return;
}
/** @type {?} */
const shouldEnable = this.disabled || this._handles.length > 0;
if (shouldEnable !== this._nativeInteractionsEnabled) {
this._nativeInteractionsEnabled = shouldEnable;
toggleNativeDragInteractions(this._rootElement, shouldEnable);
}
}
/**
* Removes the manually-added event listeners from the root element.
* @private
* @param {?} element
* @return {?}
*/
_removeRootElementListeners(element) {
element.removeEventListener('mousedown', this._pointerDown, activeEventListenerOptions);
element.removeEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);
}
}
/**
* Gets a 3d `transform` that can be applied to an element.
* @param {?} x Desired position of the element along the X axis.
* @param {?} y Desired position of the element along the Y axis.
* @return {?}
*/
function getTransform(x, y) {
// Round the transforms since some browsers will
// blur the elements for sub-pixel transforms.
return `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
}
/**
* Creates a deep clone of an element.
* @param {?} node
* @return {?}
*/
function deepCloneNode(node) {
/** @type {?} */
const clone = (/** @type {?} */ (node.cloneNode(true)));
// Remove the `id` to avoid having multiple elements with the same id on the page.
clone.removeAttribute('id');
return clone;
}
/**
* Clamps a value between a minimum and a maximum.
* @param {?} value
* @param {?} min
* @param {?} max
* @return {?}
*/
function clamp(value, min, max) {
return Math.max(min, Math.min(max, value));
}
/**
* Helper to remove an element from the DOM and to do all the necessary null checks.
* @param {?} element Element to be removed.
* @return {?}
*/
function removeElement(element) {
if (element && element.parentNode) {
element.parentNode.removeChild(element);
}
}
/**
* Determines whether an event is a touch event.
* @param {?} event
* @return {?}
*/
function isTouchEvent(event) {
return event.type.startsWith('touch');
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @license
* Copyright Google LLC 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
*/
/**
* Moves an item one index in an array to another.
* @template T
* @param {?} array Array in which to move the item.
* @param {?} fromIndex Starting index of the item.
* @param {?} toIndex Index to which the item should be moved.
* @return {?}
*/
function moveItemInArray(array, fromIndex, toIndex) {
/** @type {?} */
const from = clamp$1(fromIndex, array.length - 1);
/** @type {?} */
const to = clamp$1(toIndex, array.length - 1);
if (from === to) {
return;
}
/** @type {?} */
const target = array[from];
/** @type {?} */
const delta = to < from ? -1 : 1;
for (let i = from; i !== to; i += delta) {
array[i] = array[i + delta];
}
array[to] = target;
}
/**
* Moves an item from one array to another.
* @template T
* @param {?} currentArray Array from which to transfer the item.
* @param {?} targetArray Array into which to put the item.
* @param {?} currentIndex Index of the item in its current array.
* @param {?} targetIndex Index at which to insert the item.
* @return {?}
*/
function transferArrayItem(currentArray, targetArray, currentIndex, targetIndex) {
/** @type {?} */
const from = clamp$1(currentIndex, currentArray.length - 1);
/** @type {?} */
const to = clamp$1(targetIndex, targetArray.length);
if (currentArray.length) {
targetArray.splice(to, 0, currentArray.splice(from, 1)[0]);
}
}
/**
* Copies an item from one array to another, leaving it in its
* original position in current array.
* @template T
* @param {?} currentArray Array from which to copy the item.
* @param {?} targetArray Array into which is copy the item.
* @param {?} currentIndex Index of the item in its current array.
* @param {?} targetIndex Index at which to insert the item.
*
* @return {?}
*/
function copyArrayItem(currentArray, targetArray, currentIndex, targetIndex) {
/** @type {?} */
const to = clamp$1(targetIndex, targetArray.length);
if (currentArray.length) {
targetArray.splice(to, 0, currentArray[currentIndex]);
}
}
/**
* Clamps a number between zero and a maximum.
* @param {?} value
* @param {?} max
* @return {?}
*/
function clamp$1(value, max) {
return Math.max(0, Math.min(max, value));
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Counter used to generate unique ids for drop refs.
* @type {?}
*/
let _uniqueIdCounter = 0;
/**
* Proximity, as a ratio to width/height, at which a
* dragged item will affect the drop container.
* @type {?}
*/
const DROP_PROXIMITY_THRESHOLD = 0.05;
/**
* @ignore
* Reference to a drop list. Used to manipulate or dispose of the container.
* \@docs-private
* @template T
*/
class DropListRef {
/**
* @param {?} element
* @param {?} _dragDropRegistry
* @param {?} _document
*/
constructor(element, _dragDropRegistry, _document) {
this._dragDropRegistry = _dragDropRegistry;
/**
* Unique ID for the drop list.
* @deprecated No longer being used. To be removed.
* \@breaking-change 8.0.0
*/
this.id = `cdk-drop-list-ref-${_uniqueIdCounter++}`;
/**
* Whether starting a dragging sequence from this container is disabled.
*/
this.disabled = false;
/**
* Function that is used to determine whether an item
* is allowed to be moved into a drop container.
*/
this.enterPredicate = (/**
* @return {?}
*/
() => true);
/**
* Emits right before dragging has started.
*/
this.beforeStarted = new Subject();
/**
* Emits when the user has moved a new drag item into this container.
*/
this.entered = new Subject();
/**
* Emits when the user removes an item from the container
* by dragging it into another container.
*/
this.exited = new Subject();
/**
* Emits when the user drops an item inside the container.
*/
this.dropped = new Subject();
/**
* Emits as the user is swapping items while actively dragging.
*/
this.sorted = new Subject();
/**
* Whether an item in the list is being dragged.
*/
this._isDragging = false;
/**
* Cache of the dimensions of all the items inside the container.
*/
this._itemPositions = [];
/**
* Keeps track of the item that was last swapped with the dragged item, as
* well as what direction the pointer was moving in when the swap occured.
*/
this._previousSwap = { drag: (/** @type {?} */ (null)), delta: 0 };
/**
* Drop lists that are connected to the current one.
*/
this._siblings = [];
/**
* Direction in which the list is oriented.
*/
this._orientation = 'vertical';
/**
* Connected siblings that currently have a dragged item.
*/
this._activeSiblings = new Set();
/**
* Layout direction of the drop list.
*/
this._direction = 'ltr';
_dragDropRegistry.registerDropContainer(this);
this._document = _document;
this.element = element instanceof ElementRef ? element.nativeElement : element;
}
/**
* Removes the drop list functionality from the DOM element.
* @return {?}
*/
dispose() {
this.beforeStarted.complete();
this.entered.complete();
this.exited.complete();
this.dropped.complete();
this.sorted.complete();
this._activeSiblings.clear();
this._dragDropRegistry.removeDropContainer(this);
}
/**
* Whether an item from this list is currently being dragged.
* @return {?}
*/
isDragging() {
return this._isDragging;
}
/**
* Starts dragging an item.
* @return {?}
*/
start() {
this.beforeStarted.next();
this._isDragging = true;
this._activeDraggables = this._draggables.slice();
this._cacheOwnPosition();
this._cacheItemPositions();
this._siblings.forEach((/**
* @param {?} sibling
* @return {?}
*/
sibling => sibling._startReceiving(this)));
}
/**
* Emits an event to indicate that the user moved an item into the container.
* @param {?} item Item that was moved into the container.
* @param {?} pointerX Position of the item along the X axis.
* @param {?} pointerY Position of the item along the Y axis.
* @return {?}
*/
enter(item, pointerX, pointerY) {
this.entered.next({ item, container: this });
this.start();
// We use the coordinates of where the item entered the drop
// zone to figure out at which index it should be inserted.
/** @type {?} */
const newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY);
/** @type {?} */
const currentIndex = this._activeDraggables.indexOf(item);
/** @type {?} */
const newPositionReference = this._activeDraggables[newIndex];
/** @type {?} */
const placeholder = item.getPlaceholderElement();
// Since the item may be in the `activeDraggables` already (e.g. if the user dragged it
// into another container and back again), we have to ensure that it isn't duplicated.
if (currentIndex > -1) {
this._activeDraggables.splice(currentIndex, 1);
}
// Don't use items that are being dragged as a reference, because
// their element has been moved down to the bottom of the body.
if (newPositionReference && !this._dragDropRegistry.isDragging(newPositionReference)) {
/** @type {?} */
const element = newPositionReference.getRootElement();
(/** @type {?} */ (element.parentElement)).insertBefore(placeholder, element);
this._activeDraggables.splice(newIndex, 0, item);
}
else {
this.element.appendChild(placeholder);
this._activeDraggables.push(item);
}
// The transform needs to be cleared so it doesn't throw off the measurements.
placeholder.style.transform = '';
// Note that the positions were already cached when we called `start` above,
// but we need to refresh them since the amount of items has changed.
this._cacheItemPositions();
}
/**
* Removes an item from the container after it was dragged into another container by the user.
* @param {?} item Item that was dragged out.
* @return {?}
*/
exit(item) {
this._reset();
this.exited.next({ item, container: this });
}
/**
* Drops an item into this container.
* @param {?} item Item being dropped into the container.
* @param {?} currentIndex Index at which the item should be inserted.
* @param {?} previousContainer Container from which the item got dragged in.
* @param {?} isPointerOverContainer Whether the user's pointer was over the
* container when the item was dropped.
* @return {?}
*/
drop(item, currentIndex, previousContainer, isPointerOverContainer) {
this._reset();
this.dropped.next({
item,
currentIndex,
previousIndex: previousContainer.getItemIndex(item),
container: this,
previousContainer,
isPointerOverContainer
});
}
/**
* Sets the draggable items that are a part of this list.
* @template THIS
* @this {THIS}
* @param {?} items Items that are a part of this list.
* @return {THIS}
*/
withItems(items) {
(/** @type {?} */ (this))._draggables = items;
items.forEach((/**
* @param {?} item
* @return {?}
*/
item => item._withDropContainer((/** @type {?} */ (this)))));
return (/** @type {?} */ (this));
}
/**
* Sets the layout direction of the drop list.
* @template THIS
* @this {THIS}
* @param {?} direction
* @return {THIS}
*/
withDirection(direction) {
(/** @type {?} */ (this))._direction = direction;
return (/** @type {?} */ (this));
}
/**
* Sets the containers that are connected to this one. When two or more containers are
* connected, the user will be allowed to transfer items between them.
* @template THIS
* @this {THIS}
* @param {?} connectedTo Other containers that the current containers should be connected to.
* @return {THIS}
*/
connectedTo(connectedTo) {
(/** @type {?} */ (this))._siblings = connectedTo.slice();
return (/** @type {?} */ (this));
}
/**
* Sets the orientation of the container.
* @template THIS
* @this {THIS}
* @param {?} orientation New orientation for the container.
* @return {THIS}
*/
withOrientation(orientation) {
(/** @type {?} */ (this))._orientation = orientation;
return (/** @type {?} */ (this));
}
/**
* Figures out the index of an item in the container.
* @param {?} item Item whose index should be determined.
* @return {?}
*/
getItemIndex(item) {
if (!this._isDragging) {
return this._draggables.indexOf(item);
}
// Items are sorted always by top/left in the cache, however they flow differently in RTL.
// The rest of the logic still stands no matter what orientation we're in, however
// we need to invert the array when determining the index.
/** @type {?} */
const items = this._orientation === 'horizontal' && this._direction === 'rtl' ?
this._itemPositions.slice().reverse() : this._itemPositions;
return findIndex(items, (/**
* @param {?} currentItem
* @return {?}
*/
currentItem => currentItem.drag === item));
}
/**
* Whether the list is able to receive the item that
* is currently being dragged inside a connected drop list.
* @return {?}
*/
isReceiving() {
return this._activeSiblings.size > 0;
}
/**
* Sorts an item inside the container based on its position.
* @param {?} item Item to be sorted.
* @param {?} pointerX Position of the item along the X axis.
* @param {?} pointerY Position of the item along the Y axis.
* @param {?} pointerDelta Direction in which the pointer is moving along each axis.
* @return {?}
*/
_sortItem(item, pointerX, pointerY, pointerDelta) {
// Don't sort the item if it's out of range.
if (!this._isPointerNearDropContainer(pointerX, pointerY)) {
return;
}
/** @type {?} */
const siblings = this._itemPositions;
/** @type {?} */
const newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY, pointerDelta);
if (newIndex === -1 && siblings.length > 0) {
return;
}
/** @type {?} */
const isHorizontal = this._orientation === 'horizontal';
/** @type {?} */
const currentIndex = findIndex(siblings, (/**
* @param {?} currentItem
* @return {?}
*/
currentItem => currentItem.drag === item));
/** @type {?} */
const siblingAtNewPosition = siblings[newIndex];
/** @type {?} */
const currentPosition = siblings[currentIndex].clientRect;
/** @type {?} */
const newPosition = siblingAtNewPosition.clientRect;
/** @type {?} */
const delta = currentIndex > newIndex ? 1 : -1;
this._previousSwap.drag = siblingAtNewPosition.drag;
this._previousSwap.delta = isHorizontal ? pointerDelta.x : pointerDelta.y;
// How many pixels the item's placeholder should be offset.
/** @type {?} */
const itemOffset = this._getItemOffsetPx(currentPosition, newPosition, delta);
// How many pixels all the other items should be offset.
/** @type {?} */
const siblingOffset = this._getSiblingOffsetPx(currentIndex, siblings, delta);
// Save the previous order of the items before moving the item to its new index.
// We use this to check whether an item has been moved as a result of the sorting.
/** @type {?} */
const oldOrder = siblings.slice();
// Shuffle the array in place.
moveItemInArray(siblings, currentIndex, newIndex);
this.sorted.next({
previousIndex: currentIndex,
currentIndex: newIndex,
container: this,
item
});
siblings.forEach((/**
* @param {?} sibling
* @param {?} index
* @return {?}
*/
(sibling, index) => {
// Don't do anything if the position hasn't changed.
if (oldOrder[index] === sibling) {
return;
}
/** @type {?} */
const isDraggedItem = sibling.drag === item;
/** @type {?} */
const offset = isDraggedItem ? itemOffset : siblingOffset;
/** @type {?} */
const elementToOffset = isDraggedItem ? item.getPlaceholderElement() :
sibling.drag.getRootElement();
// Update the offset to reflect the new position.
sibling.offset += offset;
// Since we're moving the items with a `transform`, we need to adjust their cached
// client rects to reflect their new position, as well as swap their positions in the cache.
// Note that we shouldn't use `getBoundingClientRect` here to update the cache, because the
// elements may be mid-animation which will give us a wrong result.
if (isHorizontal) {
// Round the transforms since some browsers will
// blur the elements, for sub-pixel transforms.
elementToOffset.style.transform = `translate3d(${Math.round(sibling.offset)}px, 0, 0)`;
adjustClientRect(sibling.clientRect, 0, offset);
}
else {
elementToOffset.style.transform = `translate3d(0, ${Math.round(sibling.offset)}px, 0)`;
adjustClientRect(sibling.clientRect, offset, 0);
}
}));
}
/**
* Caches the position of the drop list.
* @private
* @return {?}
*/
_cacheOwnPosition() {
this._clientRect = this.element.getBoundingClientRect();
}
/**
* Refreshes the position cache of the items and sibling containers.
* @private
* @return {?}
*/
_cacheItemPositions() {
/** @type {?} */
const isHorizontal = this._orientation === 'horizontal';
this._itemPositions = this._activeDraggables.map((/**
* @param {?} drag
* @return {?}
*/
drag => {
/** @type {?} */
const elementToMeasure = this._dragDropRegistry.isDragging(drag) ?
// If the element is being dragged, we have to measure the
// placeholder, because the element is hidden.
drag.getPlaceholderElement() :
drag.getRootElement();
/** @type {?} */
const clientRect = elementToMeasure.getBoundingClientRect();
return {
drag,
offset: 0,
// We need to clone the `clientRect` here, because all the values on it are readonly
// and we need to be able to update them. Also we can't use a spread here, because
// the values on a `ClientRect` aren't own properties. See:
// https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes
clientRect: {
top: clientRect.top,
right: clientRect.right,
bottom: clientRect.bottom,
left: clientRect.left,
width: clientRect.width,
height: clientRect.height
}
};
})).sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => {
return isHorizontal ? a.clientRect.left - b.clientRect.left :
a.clientRect.top - b.clientRect.top;
}));
}
/**
* Resets the container to its initial state.
* @private
* @return {?}
*/
_reset() {
this._isDragging = false;
// TODO(crisbeto): may have to wait for the animations to finish.
this._activeDraggables.forEach((/**
* @param {?} item
* @return {?}
*/
item => item.getRootElement().style.transform = ''));
this._siblings.forEach((/**
* @param {?} sibling
* @return {?}
*/
sibling => sibling._stopReceiving(this)));
this._activeDraggables = [];
this._itemPositions = [];
this._previousSwap.drag = null;
this._previousSwap.delta = 0;
}
/**
* Gets the offset in pixels by which the items that aren't being dragged should be moved.
* @private
* @param {?} currentIndex Index of the item currently being dragged.
* @param {?} siblings All of the items in the list.
* @param {?} delta Direction in which the user is moving.
* @return {?}
*/
_getSiblingOffsetPx(currentIndex, siblings, delta) {
/** @type {?} */
const isHorizontal = this._orientation === 'horizontal';
/** @type {?} */
const currentPosition = siblings[currentIndex].clientRect;
/** @type {?} */
const immediateSibling = siblings[currentIndex + delta * -1];
/** @type {?} */
let siblingOffset = currentPosition[isHorizontal ? 'width' : 'height'] * delta;
if (immediateSibling) {
/** @type {?} */
const start = isHorizontal ? 'left' : 'top';
/** @type {?} */
const end = isHorizontal ? 'right' : 'bottom';
// Get the spacing between the start of the current item and the end of the one immediately
// after it in the direction in which the user is dragging, or vice versa. We add it to the
// offset in order to push the element to where it will be when it's inline and is influenced
// by the `margin` of its siblings.
if (delta === -1) {
siblingOffset -= immediateSibling.clientRect[start] - currentPosition[end];
}
else {
siblingOffset += currentPosition[start] - immediateSibling.clientRect[end];
}
}
return siblingOffset;
}
/**
* Checks whether the pointer coordinates are close to the drop container.
* @private
* @param {?} pointerX Coordinates along the X axis.
* @param {?} pointerY Coordinates along the Y axis.
* @return {?}
*/
_isPointerNearDropContainer(pointerX, pointerY) {
const { top, right, bottom, left, width, height } = this._clientRect;
/** @type {?} */
const xThreshold = width * DROP_PROXIMITY_THRESHOLD;
/** @type {?} */
const yThreshold = height * DROP_PROXIMITY_THRESHOLD;
return pointerY > top - yThreshold && pointerY < bottom + yThreshold &&
pointerX > left - xThreshold && pointerX < right + xThreshold;
}
/**
* Gets the offset in pixels by which the item that is being dragged should be moved.
* @private
* @param {?} currentPosition Current position of the item.
* @param {?} newPosition Position of the item where the current item should be moved.
* @param {?} delta Direction in which the user is moving.
* @return {?}
*/
_getItemOffsetPx(currentPosition, newPosition, delta) {
/** @type {?} */
const isHorizontal = this._orientation === 'horizontal';
/** @type {?} */
let itemOffset = isHorizontal ? newPosition.left - currentPosition.left :
newPosition.top - currentPosition.top;
// Account for differences in the item width/height.
if (delta === -1) {
itemOffset += isHorizontal ? newPosition.width - currentPosition.width :
newPosition.height - currentPosition.height;
}
return itemOffset;
}
/**
* Gets the index of an item in the drop container, based on the position of the user's pointer.
* @private
* @param {?} item Item that is being sorted.
* @param {?} pointerX Position of the user's pointer along the X axis.
* @param {?} pointerY Position of the user's pointer along the Y axis.
* @param {?=} delta Direction in which the user is moving their pointer.
* @return {?}
*/
_getItemIndexFromPointerPosition(item, pointerX, pointerY, delta) {
/** @type {?} */
const isHorizontal = this._orientation === 'horizontal';
return findIndex(this._itemPositions, (/**
* @param {?} __0
* @param {?} _
* @param {?} array
* @return {?}
*/
({ drag, clientRect }, _, array) => {
if (drag === item) {
// If there's only one item left in the container, it must be
// the dragged item itself so we use it as a reference.
return array.length < 2;
}
if (delta) {
/** @type {?} */
const direction = isHorizontal ? delta.x : delta.y;
// If the user is still hovering over the same item as last time, and they didn't change
// the direction in which they're dragging, we don't consider it a direction swap.
if (drag === this._previousSwap.drag && direction === this._previousSwap.delta) {
return false;
}
}
return isHorizontal ?
// Round these down since most browsers report client rects with
// sub-pixel precision, whereas the pointer coordinates are rounded to pixels.
pointerX >= Math.floor(clientRect.left) && pointerX <= Math.floor(clientRect.right) :
pointerY >= Math.floor(clientRect.top) && pointerY <= Math.floor(clientRect.bottom);
}));
}
/**
* Checks whether the user's pointer is positioned over the container.
* @param {?} x Pointer position along the X axis.
* @param {?} y Pointer position along the Y axis.
* @return {?}
*/
_isOverContainer(x, y) {
return isInsideClientRect(this._clientRect, x, y);
}
/**
* Figures out whether an item should be moved into a sibling
* drop container, based on its current position.
* @param {?} item Drag item that is being moved.
* @param {?} x Position of the item along the X axis.
* @param {?} y Position of the item along the Y axis.
* @return {?}
*/
_getSiblingContainerFromPosition(item, x, y) {
return this._siblings.find((/**
* @param {?} sibling
* @return {?}
*/
sibling => sibling._canReceive(item, x, y)));
}
/**
* Checks whether the drop list can receive the passed-in item.
* @param {?} item Item that is being dragged into the list.
* @param {?} x Position of the item along the X axis.
* @param {?} y Position of the item along the Y axis.
* @return {?}
*/
_canReceive(item, x, y) {
if (!this.enterPredicate(item, this) || !isInsideClientRect(this._clientRect, x, y)) {
return false;
}
/** @type {?} */
const elementFromPoint = this._document.elementFromPoint(x, y);
// If there's no element at the pointer position, then
// the client rect is probably scrolled out of the view.
if (!elementFromPoint) {
return false;
}
// The `ClientRect`, that we're using to find the container over which the user is
// hovering, doesn't give us any information on whether the element has been scrolled
// out of the view or whether it's overlapping with other containers. This means that
// we could end up transferring the item into a container that's invisible or is positioned
// below another one. We use the result from `elementFromPoint` to get the top-most element
// at the pointer position and to find whether it's one of the intersecting drop containers.
return elementFromPoint === this.element || this.element.contains(elementFromPoint);
}
/**
* Called by one of the connected drop lists when a dragging sequence has started.
* @param {?} sibling Sibling in which dragging has started.
* @return {?}
*/
_startReceiving(sibling) {
/** @type {?} */
const activeSiblings = this._activeSiblings;
if (!activeSiblings.has(sibling)) {
activeSiblings.add(sibling);
this._cacheOwnPosition();
}
}
/**
* Called by a connected drop list when dragging has stopped.
* @param {?} sibling Sibling whose dragging has stopped.
* @return {?}
*/
_stopReceiving(sibling) {
this._activeSiblings.delete(sibling);
}
}
/**
* Updates the top/left positions of a `ClientRect`, as well as their bottom/right counterparts.
* @param {?} clientRect `ClientRect` that should be updated.
* @param {?} top Amount to add to the `top` position.
* @param {?} left Amount to add to the `left` position.
* @return {?}
*/
function adjustClientRect(clientRect, top, left) {
clientRect.top += top;
clientRect.bottom = clientRect.top + clientRect.height;
clientRect.left += left;
clientRect.right = clientRect.left + clientRect.width;
}
/**
* Finds the index of an item that matches a predicate function. Used as an equivalent
* of `Array.prototype.find` which isn't part of the standard Google typings.
* @template T
* @param {?} array Array in which to look for matches.
* @param {?} predicate Function used to determine whether an item is a match.
* @return {?}
*/
function findIndex(array, predicate) {
for (let i = 0; i < array.length; i++) {
if (predicate(array[i], i, array)) {
return i;
}
}
return -1;
}
/**
* Checks whether some coordinates are within a `ClientRect`.
* @param {?} clientRect ClientRect that is being checked.
* @param {?} x Coordinates along the X axis.
* @param {?} y Coordinates along the Y axis.
* @return {?}
*/
function isInsideClientRect(clientRect, x, y) {
const { top, bottom, left, right } = clientRect;
return y >= top && y <= bottom && x >= left && x <= right;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Event options that can be used to bind an active, capturing event.
* @type {?}
*/
const activeCapturingEventOptions = normalizePassiveListenerOptions({
passive: false,
capture: true
});
/**
* @ignore
* Service that keeps track of all the drag item and drop container
* instances, and manages global event listeners on the `document`.
* \@docs-private
* @template I, C
*/
// Note: this class is generic, rather than referencing CdkDrag and CdkDropList directly, in order
// to avoid circular imports. If we were to reference them here, importing the registry into the
// classes that are registering themselves will introduce a circular import.
class DragDropRegistry {
/**
* @param {?} _ngZone
* @param {?} _document
*/
constructor(_ngZone, _document) {
this._ngZone = _ngZone;
/**
* Registered drop container instances.
*/
this._dropInstances = new Set();
/**
* Registered drag item instances.
*/
this._dragInstances = new Set();
/**
* Drag item instances that are currently being dragged.
*/
this._activeDragInstances = new Set();
/**
* Keeps track of the event listeners that we've bound to the `document`.
*/
this._globalListeners = new Map();
/**
* Emits the `touchmove` or `mousemove` events that are dispatched
* while the user is dragging a drag item instance.
*/
this.pointerMove = new Subject();
/**
* Emits the `touchend` or `mouseup` events that are dispatched
* while the user is dragging a drag item instance.
*/
this.pointerUp = new Subject();
/**
* Event listener that will prevent the default browser action while the user is dragging.
* @param event Event whose default action should be prevented.
*/
this._preventDefaultWhileDragging = (/**
* @param {?} event
* @return {?}
*/
(event) => {
if (this._activeDragInstances.size) {
event.preventDefault();
}
});
this._document = _document;
}
/**
* Adds a drop container to the registry.
* @param {?} drop
* @return {?}
*/
registerDropContainer(drop) {
if (!this._dropInstances.has(drop)) {
if (this.getDropContainer(drop.id)) {
throw Error(`Drop instance with id "${drop.id}" has already been registered.`);
}
this._dropInstances.add(drop);
}
}
/**
* Adds a drag item instance to the registry.
* @param {?} drag
* @return {?}
*/
registerDragItem(drag) {
this._dragInstances.add(drag);
// The `touchmove` event gets bound once, ahead of time, because WebKit
// won't preventDefault on a dynamically-added `touchmove` listener.
// See https://bugs.webkit.org/show_bug.cgi?id=184250.
if (this._dragInstances.size === 1) {
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
() => {
// The event handler has to be explicitly active,
// because newer browsers make it passive by default.
this._document.addEventListener('touchmove', this._preventDefaultWhileDragging, activeCapturingEventOptions);
}));
}
}
/**
* Removes a drop container from the registry.
* @param {?} drop
* @return {?}
*/
removeDropContainer(drop) {
this._dropInstances.delete(drop);
}
/**
* Removes a drag item instance from the registry.
* @param {?} drag
* @return {?}
*/
removeDragItem(drag) {
this._dragInstances.delete(drag);
this.stopDragging(drag);
if (this._dragInstances.size === 0) {
this._document.removeEventListener('touchmove', this._preventDefaultWhileDragging, activeCapturingEventOptions);
}
}
/**
* Starts the dragging sequence for a drag instance.
* @param {?} drag Drag instance which is being dragged.
* @param {?} event Event that initiated the dragging.
* @return {?}
*/
startDragging(drag, event) {
this._activeDragInstances.add(drag);
if (this._activeDragInstances.size === 1) {
/** @type {?} */
const isTouchEvent = event.type.startsWith('touch');
/** @type {?} */
const moveEvent = isTouchEvent ? 'touchmove' : 'mousemove';
/** @type {?} */
const upEvent = isTouchEvent ? 'touchend' : 'mouseup';
// We explicitly bind __active__ listeners here, because newer browsers will default to
// passive ones for `mousemove` and `touchmove`. The events need to be active, because we
// use `preventDefault` to prevent the page from scrolling while the user is dragging.
this._globalListeners
.set(moveEvent, {
handler: (/**
* @param {?} e
* @return {?}
*/
(e) => this.pointerMove.next((/** @type {?} */ (e)))),
options: activeCapturingEventOptions
})
.set(upEvent, {
handler: (/**
* @param {?} e
* @return {?}
*/
(e) => this.pointerUp.next((/** @type {?} */ (e)))),
options: true
})
// Preventing the default action on `mousemove` isn't enough to disable text selection
// on Safari so we need to prevent the selection event as well. Alternatively this can
// be done by setting `user-select: none` on the `body`, however it has causes a style
// recalculation which can be expensive on pages with a lot of elements.
.set('selectstart', {
handler: this._preventDefaultWhileDragging,
options: activeCapturingEventOptions
});
// TODO(crisbeto): prevent mouse wheel scrolling while
// dragging until we've set up proper scroll handling.
if (!isTouchEvent) {
this._globalListeners.set('wheel', {
handler: this._preventDefaultWhileDragging,
options: activeCapturingEventOptions
});
}
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
() => {
this._globalListeners.forEach((/**
* @param {?} config
* @param {?} name
* @return {?}
*/
(config, name) => {
this._document.addEventListener(name, config.handler, config.options);
}));
}));
}
}
/**
* Stops dragging a drag item instance.
* @param {?} drag
* @return {?}
*/
stopDragging(drag) {
this._activeDragInstances.delete(drag);
if (this._activeDragInstances.size === 0) {
this._clearGlobalListeners();
}
}
/**
* Gets whether a drag item instance is currently being dragged.
* @param {?} drag
* @return {?}
*/
isDragging(drag) {
return this._activeDragInstances.has(drag);
}
/**
* Gets a drop container by its id.
* @deprecated No longer being used. To be removed.
* \@breaking-change 8.0.0
* @param {?} id
* @return {?}
*/
getDropContainer(id) {
return Array.from(this._dropInstances).find((/**
* @param {?} instance
* @return {?}
*/
instance => instance.id === id));
}
/**
* @return {?}
*/
ngOnDestroy() {
this._dragInstances.forEach((/**
* @param {?} instance
* @return {?}
*/
instance => this.removeDragItem(instance)));
this._dropInstances.forEach((/**
* @param {?} instance
* @return {?}
*/
instance => this.removeDropContainer(instance)));
this._clearGlobalListeners();
this.pointerMove.complete();
this.pointerUp.complete();
}
/**
* Clears out the global event listeners from the `document`.
* @private
* @return {?}
*/
_clearGlobalListeners() {
this._globalListeners.forEach((/**
* @param {?} config
* @param {?} name
* @return {?}
*/
(config, name) => {
this._document.removeEventListener(name, config.handler, config.options);
}));
this._globalListeners.clear();
}
}
DragDropRegistry.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
DragDropRegistry.ctorParameters = () => [
{ type: NgZone },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
];
/** @nocollapse */ DragDropRegistry.ngInjectableDef = defineInjectable({ factory: function DragDropRegistry_Factory() { return new DragDropRegistry(inject(NgZone), inject(DOCUMENT)); }, token: DragDropRegistry, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Default configuration to be used when creating a `DragRef`.
* @type {?}
*/
const DEFAULT_CONFIG = {
dragStartThreshold: 5,
pointerDirectionChangeThreshold: 5
};
/**
* @ignore
* Service that allows for drag-and-drop functionality to be attached to DOM elements.
*/
class DragDrop {
/**
* @param {?} _document
* @param {?} _ngZone
* @param {?} _viewportRuler
* @param {?} _dragDropRegistry
*/
constructor(_document, _ngZone, _viewportRuler, _dragDropRegistry) {
this._document = _document;
this._ngZone = _ngZone;
this._viewportRuler = _viewportRuler;
this._dragDropRegistry = _dragDropRegistry;
}
/**
* Turns an element into a draggable item.
* @template T
* @param {?} element Element to which to attach the dragging functionality.
* @param {?=} config Object used to configure the dragging behavior.
* @return {?}
*/
createDrag(element, config = DEFAULT_CONFIG) {
return new DragRef(element, config, this._document, this._ngZone, this._viewportRuler, this._dragDropRegistry);
}
/**
* Turns an element into a drop list.
* @template T
* @param {?} element Element to which to attach the drop list functionality.
* @return {?}
*/
createDropList(element) {
return new DropListRef(element, this._dragDropRegistry, this._document);
}
}
DragDrop.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
DragDrop.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: NgZone },
{ type: ViewportRuler$1 },
{ type: DragDropRegistry }
];
/** @nocollapse */ DragDrop.ngInjectableDef = defineInjectable({ factory: function DragDrop_Factory() { return new DragDrop(inject(DOCUMENT), inject(NgZone), inject(ViewportRuler$1), inject(DragDropRegistry)); }, token: DragDrop, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Injection token that is used to provide a CdkDropList instance to CdkDrag.
* Used for avoiding circular imports.
* @type {?}
*/
const CDK_DROP_LIST = new InjectionToken('CDK_DROP_LIST');
/**
* Injection token that is used to provide a CdkDropList instance to CdkDrag.
* Used for avoiding circular imports.
* @deprecated Use `CDK_DROP_LIST` instead.
* \@breaking-change 8.0.0
* @type {?}
*/
const CDK_DROP_LIST_CONTAINER = CDK_DROP_LIST;
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Injection token that can be used for a `CdkDrag` to provide itself as a parent to the
* drag-specific child directive (`CdkDragHandle`, `CdkDragPreview` etc.). Used primarily
* to avoid circular imports.
* \@docs-private
* @type {?}
*/
const CDK_DRAG_PARENT = new InjectionToken('CDK_DRAG_PARENT');
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
* Handle that can be used to drag and CdkDrag instance.
*
*/
class CdkDragHandle {
/**
* @param {?} element
* @param {?=} parentDrag
*/
constructor(element, parentDrag) {
this.element = element;
/**
* Emits when the state of the handle has changed.
*/
this._stateChanges = new Subject();
this._disabled = false;
this._parentDrag = parentDrag;
toggleNativeDragInteractions(element.nativeElement, false);
}
/**
* Whether starting to drag through this handle is disabled.
* @return {?}
*/
get disabled() { return this._disabled; }
/**
* @param {?} value
* @return {?}
*/
set disabled(value) {
this._disabled = coerceBooleanProperty(value);
this._stateChanges.next(this);
}
/**
* @return {?}
*/
ngOnDestroy() {
this._stateChanges.complete();
}
}
CdkDragHandle.decorators = [
{ type: Directive, args: [{
selector: '[cdkDragHandle]',
host: {
'class': 'cdk-drag-handle'
}
},] }
];
/** @nocollapse */
CdkDragHandle.ctorParameters = () => [
{ type: ElementRef },
{ type: undefined, decorators: [{ type: Inject, args: [CDK_DRAG_PARENT,] }, { type: Optional }] }
];
CdkDragHandle.propDecorators = {
disabled: [{ type: Input, args: ['cdkDragHandleDisabled',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
* Element that will be used as a template for the placeholder of a CdkDrag when
* it is being dragged. The placeholder is displayed in place of the element being dragged.
* @template T
*/
class CdkDragPlaceholder {
/**
* @param {?} templateRef
*/
constructor(templateRef) {
this.templateRef = templateRef;
}
}
CdkDragPlaceholder.decorators = [
{ type: Directive, args: [{
selector: 'ng-template[cdkDragPlaceholder]'
},] }
];
/** @nocollapse */
CdkDragPlaceholder.ctorParameters = () => [
{ type: TemplateRef }
];
CdkDragPlaceholder.propDecorators = {
data: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
* Element that will be used as a template for the preview
* of a CdkDrag when it is being dragged.
* @template T
*/
class CdkDragPreview {
/**
* @param {?} templateRef
*/
constructor(templateRef) {
this.templateRef = templateRef;
}
}
CdkDragPreview.decorators = [
{ type: Directive, args: [{
selector: 'ng-template[cdkDragPreview]'
},] }
];
/** @nocollapse */
CdkDragPreview.ctorParameters = () => [
{ type: TemplateRef }
];
CdkDragPreview.propDecorators = {
data: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Injection token that can be used to configure the behavior of `CdkDrag`.
* @type {?}
*/
const CDK_DRAG_CONFIG = new InjectionToken('CDK_DRAG_CONFIG', {
providedIn: 'root',
factory: CDK_DRAG_CONFIG_FACTORY
});
/**
* \@docs-private
* @return {?}
*/
function CDK_DRAG_CONFIG_FACTORY() {
return { dragStartThreshold: 5, pointerDirectionChangeThreshold: 5 };
}
/**
* @ignore
* Element that can be moved inside a CdkDropList container.
*
* @template T
*/
class CdkDrag {
/**
* @param {?} element
* @param {?} dropContainer
* @param {?} _document
* @param {?} _ngZone
* @param {?} _viewContainerRef
* @param {?} viewportRuler
* @param {?} dragDropRegistry
* @param {?} config
* @param {?} _dir
* @param {?=} dragDrop
* @param {?=} _changeDetectorRef
*/
constructor(element, dropContainer, _document, _ngZone, _viewContainerRef, viewportRuler, dragDropRegistry, config, _dir,
/**
* @deprecated `viewportRuler`, `dragDropRegistry` and `_changeDetectorRef` parameters
* to be removed. Also `dragDrop` parameter to be made required.
* @breaking-change 8.0.0.
*/
dragDrop, _changeDetectorRef) {
this.element = element;
this.dropContainer = dropContainer;
this._document = _document;
this._ngZone = _ngZone;
this._viewContainerRef = _viewContainerRef;
this._dir = _dir;
this._changeDetectorRef = _changeDetectorRef;
this._destroyed = new Subject();
this._disabled = false;
/**
* Emits when the user starts dragging the item.
*/
this.started = new EventEmitter();
/**
* Emits when the user has released a drag item, before any animations have started.
*/
this.released = new EventEmitter();
/**
* Emits when the user stops dragging an item in the container.
*/
this.ended = new EventEmitter();
/**
* Emits when the user has moved the item into a new container.
*/
this.entered = new EventEmitter();
/**
* Emits when the user removes the item its container by dragging it into another container.
*/
this.exited = new EventEmitter();
/**
* Emits when the user drops the item inside a container.
*/
this.dropped = new EventEmitter();
/**
* Emits as the user is dragging the item. Use with caution,
* because this event will fire for every pixel that the user has dragged.
*/
this.moved = new Observable$1((/**
* @param {?} observer
* @return {?}
*/
(observer) => {
/** @type {?} */
const subscription = this._dragRef.moved.pipe(map((/**
* @param {?} movedEvent
* @return {?}
*/
movedEvent => ({
source: this,
pointerPosition: movedEvent.pointerPosition,
event: movedEvent.event,
delta: movedEvent.delta
})))).subscribe(observer);
return (/**
* @return {?}
*/
() => {
subscription.unsubscribe();
});
}));
// @breaking-change 8.0.0 Remove null check once the paramter is made required.
if (dragDrop) {
this._dragRef = dragDrop.createDrag(element, config);
}
else {
this._dragRef = new DragRef(element, config, _document, _ngZone, viewportRuler, dragDropRegistry);
}
this._dragRef.data = this;
this._syncInputs(this._dragRef);
this._handleEvents(this._dragRef);
}
/**
* Whether starting to drag this element is disabled.
* @return {?}
*/
get disabled() {
return this._disabled || (this.dropContainer && this.dropContainer.disabled);
}
/**
* @param {?} value
* @return {?}
*/
set disabled(value) {
this._disabled = coerceBooleanProperty(value);
this._dragRef.disabled = this._disabled;
}
/**
* Returns the element that is being used as a placeholder
* while the current element is being dragged.
* @return {?}
*/
getPlaceholderElement() {
return this._dragRef.getPlaceholderElement();
}
/**
* Returns the root draggable element.
* @return {?}
*/
getRootElement() {
return this._dragRef.getRootElement();
}
/**
* Resets a standalone drag item to its initial position.
* @return {?}
*/
reset() {
this._dragRef.reset();
}
/**
* @return {?}
*/
ngAfterViewInit() {
// We need to wait for the zone to stabilize, in order for the reference
// element to be in the proper place in the DOM. This is mostly relevant
// for draggable elements inside portals since they get stamped out in
// their original DOM position and then they get transferred to the portal.
this._ngZone.onStable.asObservable()
.pipe(take(1), takeUntil(this._destroyed))
.subscribe((/**
* @return {?}
*/
() => {
this._updateRootElement();
// Listen for any newly-added handles.
this._handles.changes.pipe(startWith(this._handles),
// Sync the new handles with the DragRef.
tap((/**
* @param {?} handles
* @return {?}
*/
(handles) => {
/** @type {?} */
const childHandleElements = handles
.filter((/**
* @param {?} handle
* @return {?}
*/
handle => handle._parentDrag === this))
.map((/**
* @param {?} handle
* @return {?}
*/
handle => handle.element));
this._dragRef.withHandles(childHandleElements);
})),
// Listen if the state of any of the handles changes.
switchMap((/**
* @param {?} handles
* @return {?}
*/
(handles) => {
return merge(...handles.map((/**
* @param {?} item
* @return {?}
*/
item => item._stateChanges)));
})), takeUntil(this._destroyed)).subscribe((/**
* @param {?} handleInstance
* @return {?}
*/
handleInstance => {
// Enabled/disable the handle that changed in the DragRef.
/** @type {?} */
const dragRef = this._dragRef;
/** @type {?} */
const handle = handleInstance.element.nativeElement;
handleInstance.disabled ? dragRef.disableHandle(handle) : dragRef.enableHandle(handle);
}));
}));
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const rootSelectorChange = changes['rootElementSelector'];
// We don't have to react to the first change since it's being
// handled in `ngAfterViewInit` where it needs to be deferred.
if (rootSelectorChange && !rootSelectorChange.firstChange) {
this._updateRootElement();
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this._destroyed.next();
this._destroyed.complete();
this._dragRef.dispose();
}
/**
* Syncs the root element with the `DragRef`.
* @private
* @return {?}
*/
_updateRootElement() {
/** @type {?} */
const element = this.element.nativeElement;
/** @type {?} */
const rootElement = this.rootElementSelector ?
getClosestMatchingAncestor(element, this.rootElementSelector) : element;
if (rootElement && rootElement.nodeType !== this._document.ELEMENT_NODE) {
throw Error(`cdkDrag must be attached to an element node. ` +
`Currently attached to "${rootElement.nodeName}".`);
}
this._dragRef.withRootElement(rootElement || element);
}
/**
* Gets the boundary element, based on the `boundaryElementSelector`.
* @private
* @return {?}
*/
_getBoundaryElement() {
/** @type {?} */
const selector = this.boundaryElementSelector;
return selector ? getClosestMatchingAncestor(this.element.nativeElement, selector) : null;
}
/**
* Syncs the inputs of the CdkDrag with the options of the underlying DragRef.
* @private
* @param {?} ref
* @return {?}
*/
_syncInputs(ref) {
ref.beforeStarted.subscribe((/**
* @return {?}
*/
() => {
if (!ref.isDragging()) {
/** @type {?} */
const dir = this._dir;
/** @type {?} */
const placeholder = this._placeholderTemplate ? {
template: this._placeholderTemplate.templateRef,
context: this._placeholderTemplate.data,
viewContainer: this._viewContainerRef
} : null;
/** @type {?} */
const preview = this._previewTemplate ? {
template: this._previewTemplate.templateRef,
context: this._previewTemplate.data,
viewContainer: this._viewContainerRef
} : null;
ref.disabled = this.disabled;
ref.lockAxis = this.lockAxis;
ref
.withBoundaryElement(this._getBoundaryElement())
.withPlaceholderTemplate(placeholder)
.withPreviewTemplate(preview);
if (dir) {
ref.withDirection(dir.value);
}
}
}));
}
/**
* Handles the events from the underlying `DragRef`.
* @private
* @param {?} ref
* @return {?}
*/
_handleEvents(ref) {
ref.started.subscribe((/**
* @return {?}
*/
() => {
this.started.emit({ source: this });
// Since all of these events run outside of change detection,
// we need to ensure that everything is marked correctly.
if (this._changeDetectorRef) {
// @breaking-change 8.0.0 Remove null check for _changeDetectorRef
this._changeDetectorRef.markForCheck();
}
}));
ref.released.subscribe((/**
* @return {?}
*/
() => {
this.released.emit({ source: this });
}));
ref.ended.subscribe((/**
* @return {?}
*/
() => {
this.ended.emit({ source: this });
// Since all of these events run outside of change detection,
// we need to ensure that everything is marked correctly.
if (this._changeDetectorRef) {
// @breaking-change 8.0.0 Remove null check for _changeDetectorRef
this._changeDetectorRef.markForCheck();
}
}));
ref.entered.subscribe((/**
* @param {?} event
* @return {?}
*/
event => {
this.entered.emit({
container: event.container.data,
item: this
});
}));
ref.exited.subscribe((/**
* @param {?} event
* @return {?}
*/
event => {
this.exited.emit({
container: event.container.data,
item: this
});
}));
ref.dropped.subscribe((/**
* @param {?} event
* @return {?}
*/
event => {
this.dropped.emit({
previousIndex: event.previousIndex,
currentIndex: event.currentIndex,
previousContainer: event.previousContainer.data,
container: event.container.data,
isPointerOverContainer: event.isPointerOverContainer,
item: this
});
}));
}
}
CdkDrag.decorators = [
{ type: Directive, args: [{
selector: '[cdkDrag]',
exportAs: 'cdkDrag',
host: {
'class': 'cdk-drag',
'[class.cdk-drag-disabled]': 'disabled',
'[class.cdk-drag-dragging]': '_dragRef.isDragging()',
},
providers: [{ provide: CDK_DRAG_PARENT, useExisting: CdkDrag }]
},] }
];
/** @nocollapse */
CdkDrag.ctorParameters = () => [
{ type: ElementRef },
{ type: undefined, decorators: [{ type: Inject, args: [CDK_DROP_LIST,] }, { type: Optional }, { type: SkipSelf }] },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: NgZone },
{ type: ViewContainerRef },
{ type: ViewportRuler$1 },
{ type: DragDropRegistry },
{ type: undefined, decorators: [{ type: Inject, args: [CDK_DRAG_CONFIG,] }] },
{ type: Directionality, decorators: [{ type: Optional }] },
{ type: DragDrop },
{ type: ChangeDetectorRef }
];
CdkDrag.propDecorators = {
_handles: [{ type: ContentChildren, args: [CdkDragHandle, { descendants: true },] }],
_previewTemplate: [{ type: ContentChild, args: [CdkDragPreview,] }],
_placeholderTemplate: [{ type: ContentChild, args: [CdkDragPlaceholder,] }],
data: [{ type: Input, args: ['cdkDragData',] }],
lockAxis: [{ type: Input, args: ['cdkDragLockAxis',] }],
rootElementSelector: [{ type: Input, args: ['cdkDragRootElement',] }],
boundaryElementSelector: [{ type: Input, args: ['cdkDragBoundary',] }],
disabled: [{ type: Input, args: ['cdkDragDisabled',] }],
started: [{ type: Output, args: ['cdkDragStarted',] }],
released: [{ type: Output, args: ['cdkDragReleased',] }],
ended: [{ type: Output, args: ['cdkDragEnded',] }],
entered: [{ type: Output, args: ['cdkDragEntered',] }],
exited: [{ type: Output, args: ['cdkDragExited',] }],
dropped: [{ type: Output, args: ['cdkDragDropped',] }],
moved: [{ type: Output, args: ['cdkDragMoved',] }]
};
/**
* Gets the closest ancestor of an element that matches a selector.
* @param {?} element
* @param {?} selector
* @return {?}
*/
function getClosestMatchingAncestor(element, selector) {
/** @type {?} */
let currentElement = (/** @type {?} */ (element.parentElement));
while (currentElement) {
// IE doesn't support `matches` so we have to fall back to `msMatchesSelector`.
if (currentElement.matches ? currentElement.matches(selector) :
((/** @type {?} */ (currentElement))).msMatchesSelector(selector)) {
return currentElement;
}
currentElement = currentElement.parentElement;
}
return null;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
* Declaratively connects sibling `cdkDropList` instances together. All of the `cdkDropList`
* elements that are placed inside a `cdkDropListGroup` will be connected to each other
* automatically. Can be used as an alternative to the `cdkDropListConnectedTo` input
* from `cdkDropList`.
* @template T
*/
class CdkDropListGroup {
constructor() {
/**
* Drop lists registered inside the group.
*/
this._items = new Set();
this._disabled = false;
}
/**
* Whether starting a dragging sequence from inside this group is disabled.
* @return {?}
*/
get disabled() { return this._disabled; }
/**
* @param {?} value
* @return {?}
*/
set disabled(value) {
this._disabled = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
ngOnDestroy() {
this._items.clear();
}
}
CdkDropListGroup.decorators = [
{ type: Directive, args: [{
selector: '[cdkDropListGroup]',
exportAs: 'cdkDropListGroup',
},] }
];
CdkDropListGroup.propDecorators = {
disabled: [{ type: Input, args: ['cdkDropListGroupDisabled',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Counter used to generate unique ids for drop zones.
* @type {?}
*/
let _uniqueIdCounter$1 = 0;
const ɵ0 = undefined;
// @breaking-change 8.0.0 `CdkDropList` implements `CdkDropListContainer` for backwards
// compatiblity. The implements clause, as well as all the methods that it enforces can
// be removed when `CdkDropListContainer` is deleted.
/**
* @ignore
* Container that wraps a set of draggable items.
*
* @template T
*/
class CdkDropList {
/**
* @param {?} element
* @param {?} dragDropRegistry
* @param {?} _changeDetectorRef
* @param {?=} _dir
* @param {?=} _group
* @param {?=} _document
* @param {?=} dragDrop
*/
constructor(element, dragDropRegistry, _changeDetectorRef, _dir, _group, _document,
/**
* @deprecated `dragDropRegistry` and `_document` parameters to be removed.
* Also `dragDrop` parameter to be made required.
* @breaking-change 8.0.0.
*/
dragDrop) {
this.element = element;
this._changeDetectorRef = _changeDetectorRef;
this._dir = _dir;
this._group = _group;
/**
* Emits when the list has been destroyed.
*/
this._destroyed = new Subject();
/**
* Other draggable containers that this container is connected to and into which the
* container's items can be transferred. Can either be references to other drop containers,
* or their unique IDs.
*/
this.connectedTo = [];
/**
* Direction in which the list is oriented.
*/
this.orientation = 'vertical';
/**
* Unique ID for the drop zone. Can be used as a reference
* in the `connectedTo` of another `CdkDropList`.
*/
this.id = `cdk-drop-list-${_uniqueIdCounter$1++}`;
this._disabled = false;
/**
* Function that is used to determine whether an item
* is allowed to be moved into a drop container.
*/
this.enterPredicate = (/**
* @return {?}
*/
() => true);
/**
* Emits when the user drops an item inside the container.
*/
this.dropped = new EventEmitter();
/**
* Emits when the user has moved a new drag item into this container.
*/
this.entered = new EventEmitter();
/**
* Emits when the user removes an item from the container
* by dragging it into another container.
*/
this.exited = new EventEmitter();
/**
* Emits as the user is swapping items while actively dragging.
*/
this.sorted = new EventEmitter();
// @breaking-change 8.0.0 Remove null check once `dragDrop` parameter is made required.
if (dragDrop) {
this._dropListRef = dragDrop.createDropList(element);
}
else {
this._dropListRef = new DropListRef(element, dragDropRegistry, _document || document);
}
this._dropListRef.data = this;
this._dropListRef.enterPredicate = (/**
* @param {?} drag
* @param {?} drop
* @return {?}
*/
(drag, drop) => {
return this.enterPredicate(drag.data, drop.data);
});
this._syncInputs(this._dropListRef);
this._handleEvents(this._dropListRef);
CdkDropList._dropLists.push(this);
if (_group) {
_group._items.add(this);
}
}
/**
* Whether starting a dragging sequence from this container is disabled.
* @return {?}
*/
get disabled() {
return this._disabled || (!!this._group && this._group.disabled);
}
/**
* @param {?} value
* @return {?}
*/
set disabled(value) {
this._disabled = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
ngAfterContentInit() {
this._draggables.changes
.pipe(startWith(this._draggables), takeUntil(this._destroyed))
.subscribe((/**
* @param {?} items
* @return {?}
*/
(items) => {
this._dropListRef.withItems(items.map((/**
* @param {?} drag
* @return {?}
*/
drag => drag._dragRef)));
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
/** @type {?} */
const index = CdkDropList._dropLists.indexOf(this);
if (index > -1) {
CdkDropList._dropLists.splice(index, 1);
}
if (this._group) {
this._group._items.delete(this);
}
this._dropListRef.dispose();
this._destroyed.next();
this._destroyed.complete();
}
/**
* Starts dragging an item.
* @return {?}
*/
start() {
this._dropListRef.start();
}
/**
* Drops an item into this container.
* @param {?} item Item being dropped into the container.
* @param {?} currentIndex Index at which the item should be inserted.
* @param {?} previousContainer Container from which the item got dragged in.
* @param {?} isPointerOverContainer Whether the user's pointer was over the
* container when the item was dropped.
* @return {?}
*/
drop(item, currentIndex, previousContainer, isPointerOverContainer) {
this._dropListRef.drop(item._dragRef, currentIndex, ((/** @type {?} */ (previousContainer)))._dropListRef, isPointerOverContainer);
}
/**
* Emits an event to indicate that the user moved an item into the container.
* @param {?} item Item that was moved into the container.
* @param {?} pointerX Position of the item along the X axis.
* @param {?} pointerY Position of the item along the Y axis.
* @return {?}
*/
enter(item, pointerX, pointerY) {
this._dropListRef.enter(item._dragRef, pointerX, pointerY);
}
/**
* Removes an item from the container after it was dragged into another container by the user.
* @param {?} item Item that was dragged out.
* @return {?}
*/
exit(item) {
this._dropListRef.exit(item._dragRef);
}
/**
* Figures out the index of an item in the container.
* @param {?} item Item whose index should be determined.
* @return {?}
*/
getItemIndex(item) {
return this._dropListRef.getItemIndex(item._dragRef);
}
/**
* Sorts an item inside the container based on its position.
* @param {?} item Item to be sorted.
* @param {?} pointerX Position of the item along the X axis.
* @param {?} pointerY Position of the item along the Y axis.
* @param {?} pointerDelta Direction in which the pointer is moving along each axis.
* @return {?}
*/
_sortItem(item, pointerX, pointerY, pointerDelta) {
return this._dropListRef._sortItem(item._dragRef, pointerX, pointerY, pointerDelta);
}
/**
* Figures out whether an item should be moved into a sibling
* drop container, based on its current position.
* @param {?} item Drag item that is being moved.
* @param {?} x Position of the item along the X axis.
* @param {?} y Position of the item along the Y axis.
* @return {?}
*/
_getSiblingContainerFromPosition(item, x, y) {
/** @type {?} */
const result = this._dropListRef._getSiblingContainerFromPosition(item._dragRef, x, y);
return result ? result.data : null;
}
/**
* Checks whether the user's pointer is positioned over the container.
* @param {?} x Pointer position along the X axis.
* @param {?} y Pointer position along the Y axis.
* @return {?}
*/
_isOverContainer(x, y) {
return this._dropListRef._isOverContainer(x, y);
}
/**
* Syncs the inputs of the CdkDropList with the options of the underlying DropListRef.
* @private
* @param {?} ref
* @return {?}
*/
_syncInputs(ref) {
if (this._dir) {
this._dir.change
.pipe(startWith(this._dir.value), takeUntil(this._destroyed))
.subscribe((/**
* @param {?} value
* @return {?}
*/
value => ref.withDirection(value)));
}
ref.beforeStarted.subscribe((/**
* @return {?}
*/
() => {
/** @type {?} */
const siblings = coerceArray(this.connectedTo).map((/**
* @param {?} drop
* @return {?}
*/
drop => {
return typeof drop === 'string' ?
(/** @type {?} */ (CdkDropList._dropLists.find((/**
* @param {?} list
* @return {?}
*/
list => list.id === drop)))) : drop;
}));
if (this._group) {
this._group._items.forEach((/**
* @param {?} drop
* @return {?}
*/
drop => {
if (siblings.indexOf(drop) === -1) {
siblings.push(drop);
}
}));
}
ref.lockAxis = this.lockAxis;
ref
.connectedTo(siblings.filter((/**
* @param {?} drop
* @return {?}
*/
drop => drop && drop !== this)).map((/**
* @param {?} list
* @return {?}
*/
list => list._dropListRef)))
.withOrientation(this.orientation);
}));
}
/**
* Handles events from the underlying DropListRef.
* @private
* @param {?} ref
* @return {?}
*/
_handleEvents(ref) {
ref.beforeStarted.subscribe((/**
* @return {?}
*/
() => {
this._changeDetectorRef.markForCheck();
}));
ref.entered.subscribe((/**
* @param {?} event
* @return {?}
*/
event => {
this.entered.emit({
container: this,
item: event.item.data
});
}));
ref.exited.subscribe((/**
* @param {?} event
* @return {?}
*/
event => {
this.exited.emit({
container: this,
item: event.item.data
});
}));
ref.sorted.subscribe((/**
* @param {?} event
* @return {?}
*/
event => {
this.sorted.emit({
previousIndex: event.previousIndex,
currentIndex: event.currentIndex,
container: this,
item: event.item.data
});
}));
ref.dropped.subscribe((/**
* @param {?} event
* @return {?}
*/
event => {
this.dropped.emit({
previousIndex: event.previousIndex,
currentIndex: event.currentIndex,
previousContainer: event.previousContainer.data,
container: event.container.data,
item: event.item.data,
isPointerOverContainer: event.isPointerOverContainer
});
// Mark for check since all of these events run outside of change
// detection and we're not guaranteed for something else to have triggered it.
this._changeDetectorRef.markForCheck();
}));
}
}
/**
* Keeps track of the drop lists that are currently on the page.
*/
CdkDropList._dropLists = [];
CdkDropList.decorators = [
{ type: Directive, args: [{
selector: '[cdkDropList], cdk-drop-list',
exportAs: 'cdkDropList',
providers: [
// Prevent child drop lists from picking up the same group as their parent.
{ provide: CdkDropListGroup, useValue: ɵ0 },
{ provide: CDK_DROP_LIST_CONTAINER, useExisting: CdkDropList },
],
host: {
'class': 'cdk-drop-list',
'[id]': 'id',
'[class.cdk-drop-list-disabled]': 'disabled',
'[class.cdk-drop-list-dragging]': '_dropListRef.isDragging()',
'[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()',
}
},] }
];
/** @nocollapse */
CdkDropList.ctorParameters = () => [
{ type: ElementRef },
{ type: DragDropRegistry },
{ type: ChangeDetectorRef },
{ type: Directionality, decorators: [{ type: Optional }] },
{ type: CdkDropListGroup, decorators: [{ type: Optional }, { type: SkipSelf }] },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
{ type: DragDrop }
];
CdkDropList.propDecorators = {
_draggables: [{ type: ContentChildren, args: [forwardRef((/**
* @return {?}
*/
() => CdkDrag)), {
// Explicitly set to false since some of the logic below makes assumptions about it.
// The `.withItems` call below should be updated if we ever need to switch this to `true`.
descendants: false
},] }],
connectedTo: [{ type: Input, args: ['cdkDropListConnectedTo',] }],
data: [{ type: Input, args: ['cdkDropListData',] }],
orientation: [{ type: Input, args: ['cdkDropListOrientation',] }],
id: [{ type: Input }],
lockAxis: [{ type: Input, args: ['cdkDropListLockAxis',] }],
disabled: [{ type: Input, args: ['cdkDropListDisabled',] }],
enterPredicate: [{ type: Input, args: ['cdkDropListEnterPredicate',] }],
dropped: [{ type: Output, args: ['cdkDropListDropped',] }],
entered: [{ type: Output, args: ['cdkDropListEntered',] }],
exited: [{ type: Output, args: ['cdkDropListExited',] }],
sorted: [{ type: Output, args: ['cdkDropListSorted',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpDragDropModule {
}
NpDragDropModule.decorators = [
{ type: NgModule, args: [{
declarations: [
CdkDropList,
CdkDropListGroup,
CdkDrag,
CdkDragHandle,
CdkDragPreview,
CdkDragPlaceholder,
],
exports: [
CdkDropList,
CdkDropListGroup,
CdkDrag,
CdkDragHandle,
CdkDragPreview,
CdkDragPlaceholder,
],
providers: [
DragDrop,
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 可拖拽图片组件 - 上传多张图片时展示多图并可拖拽改变排列顺序
*
* <example-url>https://stackblitz.com/edit/np-draggable-pics-sample?embed=1&file=src/app/app.component.html</example-url>
*/
class NpDraggablePics {
/**
* @param {?} viewportRuler
*/
constructor(viewportRuler) {
this.viewportRuler = viewportRuler;
/**
* 包含图片url的图片列表，可选值id（unique）
*/
this.items = [];
this.dropListEnterPredicate = (/**
* @param {?} drag
* @param {?} drop
* @return {?}
*/
(drag, drop) => {
if (drop == this.placeholder)
return true;
if (drop != this.activeContainer)
return false;
/** @type {?} */
let phElement = this.placeholder.element.nativeElement;
/** @type {?} */
let sourceElement = drag.dropContainer.element.nativeElement;
/** @type {?} */
let dropElement = drop.element.nativeElement;
/** @type {?} */
let dragIndex = __indexOf(dropElement.parentElement.children, (this.source ? phElement : sourceElement));
/** @type {?} */
let dropIndex = __indexOf(dropElement.parentElement.children, dropElement);
if (!this.source) {
this.sourceIndex = dragIndex;
this.source = drag.dropContainer;
phElement.style.width = sourceElement.clientWidth + 'px';
phElement.style.height = sourceElement.clientHeight + 'px';
sourceElement.parentElement.removeChild(sourceElement);
}
this.targetIndex = dropIndex;
this.target = drop;
phElement.style.display = '';
dropElement.parentElement.insertBefore(phElement, (dropIndex > dragIndex
? dropElement.nextSibling : dropElement));
this.placeholder.enter(drag, drag.element.nativeElement.offsetLeft, drag.element.nativeElement.offsetTop);
return false;
});
this.target = null;
this.source = null;
}
/**
* @return {?}
*/
ngOnInit() {
this.items.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
if (!item.id) {
item.id = Utils.ID();
}
}));
}
/**
* @return {?}
*/
ngAfterViewInit() {
/** @type {?} */
let phElement = this.placeholder.element.nativeElement;
phElement.style.display = 'none';
phElement.parentElement.removeChild(phElement);
}
/**
* @param {?} e
* @return {?}
*/
dragMoved(e) {
if (this.isDisabled) {
return;
}
/** @type {?} */
let point = this.getPointerPositionOnPage(e.event);
this.listGroup._items.forEach((/**
* @param {?} dropList
* @return {?}
*/
dropList => {
if (__isInsideDropListClientRect(dropList, point.x, point.y)) {
this.activeContainer = dropList;
return;
}
}));
}
/**
* @return {?}
*/
dropListDropped() {
if (!this.target)
return;
/** @type {?} */
let phElement = this.placeholder.element.nativeElement;
/** @type {?} */
let parent = phElement.parentElement;
phElement.style.display = 'none';
parent.removeChild(phElement);
parent.appendChild(phElement);
parent.insertBefore(this.source.element.nativeElement, parent.children[this.sourceIndex]);
this.target = null;
this.source = null;
if (this.sourceIndex != this.targetIndex)
moveItemInArray(this.items, this.sourceIndex, this.targetIndex);
}
/**
* Determines the point of the page that was touched by the user.
* @param {?} event
* @return {?}
*/
getPointerPositionOnPage(event) {
// `touches` will be empty for start/end events so we have to fall back to `changedTouches`.
/** @type {?} */
const point = __isTouchEvent(event) ? (event.touches[0] || event.changedTouches[0]) : event;
/** @type {?} */
const scrollPosition = this.viewportRuler.getViewportScrollPosition();
return {
x: point.pageX - scrollPosition.left,
y: point.pageY - scrollPosition.top
};
}
/**
* @param {?} item
* @return {?}
*/
onRemove(item) {
/** @type {?} */
let index = this.items.indexOf(item);
if (index > -1) {
this.items.splice(index, 1);
}
}
}
NpDraggablePics.decorators = [
{ type: Component, args: [{
selector: `np-draggable-pics`,
template: "<div class=\"np-draggable-pics-wrapper item-container\" cdkDropListGroup>\r\n <div cdkDropList [cdkDropListEnterPredicate]=\"dropListEnterPredicate\" (cdkDropListDropped)=\"dropListDropped()\">\r\n </div>\r\n <div cdkDropList *ngFor=\"let item of items\" [cdkDropListEnterPredicate]=\"dropListEnterPredicate\"\r\n (cdkDropListDropped)=\"dropListDropped()\">\r\n <div cdkDrag class=\"item-box\" (cdkDragMoved)=\"dragMoved($event);\" [style.width.px]=\"itemWidth\"\r\n [style.height.px]=\"itemHeight\">\r\n <i class=\"fas fa-times-circle\" *ngIf=\"!isDisabled\" (click)=\"onRemove(item)\"></i>\r\n <img [src]=\"item.url\" [style.width.px]=\"itemWidth\" [style.height.px]=\"itemHeight\">\r\n </div>\r\n </div>\r\n</div>\r\n",
host: {
'class': 'host-inline-block'
},
encapsulation: ViewEncapsulation.None,
styles: [".host-inline-block{display:inline-block}.np-draggable-pics-wrapper.item-container{display:flex;flex-wrap:wrap;min-width:600px;padding:10px}.np-draggable-pics-wrapper.item-container .item-box{height:auto;font-size:30pt;cursor:move;display:flex;justify-content:center;align-items:center;text-align:center;border-radius:4px;position:relative;z-index:1;transition:box-shadow .2s cubic-bezier(0,0,.2,1)}.np-draggable-pics-wrapper.item-container .item-box>.fas.fa-times-circle{position:absolute;top:-6px;right:-6px;font-size:16px;cursor:pointer;border-radius:50%}.cdk-drop-list{display:flex;box-sizing:border-box!important;padding-right:10px;padding-bottom:10px}.cdk-drag-preview{border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);display:flex;justify-content:center;align-items:center;text-align:center;font-size:30pt;opacity:.8;padding:3px;border:2px dotted gray!important;background-color:transparent!important}.cdk-drag-placeholder{box-sizing:border-box!important;opacity:.2;border:2px dotted gray!important;background-color:#ddd!important}.cdk-drag-animating{transition:transform 250ms cubic-bezier(0,0,.2,1)}"]
}] }
];
/** @nocollapse */
NpDraggablePics.ctorParameters = () => [
{ type: ViewportRuler }
];
NpDraggablePics.propDecorators = {
listGroup: [{ type: ViewChild, args: [CdkDropListGroup,] }],
placeholder: [{ type: ViewChild, args: [CdkDropList,] }],
items: [{ type: Input }],
itemWidth: [{ type: Input }],
itemHeight: [{ type: Input }],
isDisabled: [{ type: Input }]
};
/**
* @param {?} collection
* @param {?} node
* @return {?}
*/
function __indexOf(collection, node) {
return Array.prototype.indexOf.call(collection, node);
}
/**
* Determines whether an event is a touch event.
* @param {?} event
* @return {?}
*/
function __isTouchEvent(event) {
return event.type.startsWith('touch');
}
/**
* @param {?} dropList
* @param {?} x
* @param {?} y
* @return {?}
*/
function __isInsideDropListClientRect(dropList, x, y) {
const { top, bottom, left, right } = dropList.element.nativeElement.getBoundingClientRect();
return y >= top && y <= bottom && x >= left && x <= right;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpDraggablePicsModule {
}
NpDraggablePicsModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
NpDragDropModule
],
declarations: [NpDraggablePics],
exports: [NpDraggablePics],
entryComponents: []
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 图片上传组件 - 支持NgModel和reactive forms
*
* <example-url>https://stackblitz.com/edit/np-img-upload-sample?embed=1&file=src/app/app.component.html</example-url>
*/
class NpImgUpload {
/**
* @param {?} sanitizer
*/
constructor(sanitizer) {
this.sanitizer = sanitizer;
this.emitChange = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
/**
* 标签
*/
this.label = '选择图片';
/**
* 是否忽略宽高检查，true - 忽略宽高检查，false - 检查宽高
*/
this.ignoreWidthAndHeightCheck = false;
/**
* 上传图片按钮文字
*/
this.btnText = '点击上传';
/**
* 图片描述，如尺寸、格式、大小等
*/
this.imgDesc = '*图片描述，如尺寸、格式、大小等*';
/**
* 图片格式，默认jpg、png和jpeg
*/
this.imgFormat = 'jpg|png|jpeg';
/**
* 图片大小，默认最大500kb
*/
this.maxSize = 500;
/**
* 当重新选择图片时触发
*/
this.onImgFileChanged = new EventEmitter();
/**
* 上传错误，如尺寸不对、格式不对，大小不对等
*/
this.onUploadError = new EventEmitter();
/**
* 点击缩略图是触发
*/
this.onImgClicked = new EventEmitter();
this.currentImgFile = null;
this.currentImgSrc = null;
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @param {?} file
* @return {?}
*/
onCurrentImgFileChanged(file) {
/** @type {?} */
const filename = file.name;
/** @type {?} */
const reg = new RegExp(`\.(${this.imgFormat.toLowerCase()})|.(${this.imgFormat.toUpperCase()})$`);
if (!reg.test(filename)) {
this.errorMessage = '图片格式不对，支持' + this.imgFormat.split('|').join('、');
this.onUploadError.next(this.errorMessage);
this.emitChange({ file: null, src: null });
return;
}
if (file.size > +this.maxSize * 1024) {
this.errorMessage = '图片大于' + this.maxSize + 'kb，请重新选择';
this.onUploadError.next(this.errorMessage);
this.emitChange({ file: null, src: null });
return;
}
Utils$1.checkImgWidthAndHeight(file, +this.width, +this.height).subscribe((/**
* @param {?} res
* @return {?}
*/
res => {
if (!res && !this.ignoreWidthAndHeightCheck) {
this.errorMessage = '图片大小必须为' + this.width + '*' + this.height;
this.onUploadError.next(this.errorMessage);
this.emitChange({ file: null, src: null });
return;
}
this.errorMessage = '';
this.currentImgSrc = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
this.currentImgFile = file;
this.emitChange({ file: this.currentImgFile, src: this.currentImgSrc });
this.onImgFileChanged.next({ file: this.currentImgFile, src: this.currentImgSrc });
return true;
}));
}
/**
* @param {?} msg
* @return {?}
*/
onUploadImgFormatError(msg) {
this.errorMessage = '图片格式不对，支持' + this.imgFormat.split('|').join('、');
this.onUploadError.next(this.errorMessage);
this.emitChange({ file: null, src: null });
}
/**
* @return {?}
*/
onCurrentImgClick() {
this.onImgClicked.next({ file: this.currentImgFile, src: this.currentImgSrc });
}
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
if (obj) {
this.currentImgFile = obj.file;
this.currentImgSrc = obj.src;
}
else {
this.currentImgFile = null;
this.currentImgSrc = null;
}
}
/**
* @param {?} control
* @return {?}
*/
validate(control) {
if (this.isRequired) {
if (control && control.value && !control.value.file && !control.value.src) {
return { 'imgError': true };
}
if (control && !control.value) {
return { 'imgError': true };
}
}
return null;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.emitChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
/**
* @param {?} isDisabled
* @return {?}
*/
setDisabledState(isDisabled) { }
}
NpImgUpload.decorators = [
{ type: Component, args: [{
selector: `np-img-upload`,
template: "<div class=\"img-upload-wrapper flex-wrap col-flex\">\r\n <div class=\"flex-wrap row-flex\" style=\"align-items: baseline;\">\r\n <label class=\"img-label\">\r\n <span class=\"form-required\" *ngIf=\"isRequired\">*</span>\r\n {{ label }}\r\n </label>\r\n <np-button buttonType=\"secondary\" [funcType]=\"'upload'\" [isDisabled]=\"isDisabled\" [uploadFileType]=\"imgFormat\"\r\n (uploadErrorMessage)=\"onUploadImgFormatError($event)\" [file]=\"currentImgFile\"\r\n (fileChange)=\"onCurrentImgFileChanged($event)\">{{ btnText }}\r\n </np-button>\r\n </div>\r\n <span class=\"error-message\" *ngIf=\"errorMessage\" style=\"margin-left: 100px;\">{{ errorMessage }}</span>\r\n <div class=\"img-thumbnail-container flex-wrap col-flex middle-flex\" (click)=\"onCurrentImgClick()\">\r\n <img *ngIf=\"currentImgSrc\" [src]=\"currentImgSrc\">\r\n <div *ngIf=\"!currentImgSrc\" class=\"img-placeholder flex-wrap col-flex middle-flex\">\r\n <span>+</span>\r\n </div>\r\n </div>\r\n <span [innerHtml]=\"imgDesc | safeHtml\" class=\"img-desc\"></span>\r\n</div>\r\n",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpImgUpload)),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpImgUpload)),
multi: true,
}
],
encapsulation: ViewEncapsulation.None,
styles: [".img-upload-wrapper .error-message{display:block;font-size:10px;margin:5px}.img-upload-wrapper .img-thumbnail-container{width:220px;height:160px;padding:15px;margin-top:10px;margin-left:100px;border:2.5px dashed #aaa}.img-upload-wrapper .img-thumbnail-container>.img-placeholder,.img-upload-wrapper .img-thumbnail-container>img{width:160px;height:auto;max-height:120px}.img-upload-wrapper .img-thumbnail-container>.img-placeholder{font-size:18px}.img-upload-wrapper .img-thumbnail-container>.img-placeholder span{font-size:40px;font-weight:500;color:#aaa}.img-upload-wrapper .img-label{width:80px;text-align:right;margin-right:20px;font-weight:700}.img-upload-wrapper .img-desc{font-size:12px;margin-top:10px;margin-left:100px}.img-upload-wrapper .button-secondary{margin:0!important}"]
}] }
];
/** @nocollapse */
NpImgUpload.ctorParameters = () => [
{ type: DomSanitizer }
];
NpImgUpload.propDecorators = {
label: [{ type: Input }],
isDisabled: [{ type: Input }],
ignoreWidthAndHeightCheck: [{ type: Input }],
isRequired: [{ type: Input }],
btnText: [{ type: Input }],
imgDesc: [{ type: Input }],
imgFormat: [{ type: Input }],
maxSize: [{ type: Input }],
width: [{ type: Input }],
height: [{ type: Input }],
errorMessage: [{ type: Input }],
onImgFileChanged: [{ type: Output }],
onUploadError: [{ type: Output }],
onImgClicked: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpImgUploadModule {
}
NpImgUploadModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
ReactiveFormsModule,
NpSharedModule,
NpButtonModule
],
declarations: [NpImgUpload],
exports: [NpImgUpload]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 图片剪裁组件
*/
class NpCropper {
constructor() {
this.cropperOptions = {};
this.export = new EventEmitter();
this.ready = new EventEmitter();
this.isLoading = true;
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* Image loaded
* @param {?} ev
* @return {?}
*/
imageLoaded(ev) {
// Unset load error state
this.loadError = false;
// Setup image element
/** @type {?} */
const image = (/** @type {?} */ (ev.target));
this.imageElement = image;
// Add crossOrigin?
if (this.cropperOptions.checkCrossOrigin) {
image.crossOrigin = 'anonymous';
}
// Image on ready event
image.addEventListener('ready', (/**
* @return {?}
*/
() => {
// Emit ready
this.ready.emit(true);
// Unset loading state
this.isLoading = false;
// Validate cropbox existance
if (this.cropbox) {
// Set cropbox data
this.cropper.setCropBoxData(this.cropbox);
}
}));
// Set crop options
// extend default with custom config
this.cropperOptions = Object.assign({
checkCrossOrigin: true
}, this.cropperOptions);
// Set cropperjs
if (this.cropper) {
this.cropper.destroy();
this.cropper = undefined;
}
this.cropper = new Cropper(image, this.cropperOptions);
}
/**
* Image load error
* @param {?} event
* @return {?}
*/
imageLoadError(event) {
// Set load error state
this.loadError = true;
// Unset loading state
this.isLoading = false;
}
/**
* Export canvas
* @param {?=} base64
* @param {?=} options
* @return {?}
*/
exportCanvas(base64, options) {
// Get and set image, crop and canvas data
/** @type {?} */
const imageData = this.cropper.getImageData();
/** @type {?} */
const cropData = this.cropper.getCropBoxData();
/** @type {?} */
const canvas = this.cropper.getCroppedCanvas(options);
/** @type {?} */
const data = { imageData, cropData, blob: null };
// Create promise to resolve canvas data
/** @type {?} */
const promise = new Promise((/**
* @param {?} resolve
* @return {?}
*/
resolve => {
// Validate base64
if (base64) {
canvas.toBlob((/**
* @param {?} blob
* @return {?}
*/
blob => resolve({ blob, dataUrl: canvas.toDataURL('image/png') })));
}
canvas.toBlob((/**
* @param {?} blob
* @return {?}
*/
blob => resolve({ blob })));
}));
// Emit export data when promise is ready
promise.then((/**
* @param {?} res
* @return {?}
*/
res => {
this.export.emit(Object.assign(data, res));
}));
}
}
NpCropper.decorators = [
{ type: Component, args: [{
selector: `np-cropper`,
template: "<!-- CROPPER WRAPPER -->\r\n<div class=\"cropper-wrapper\">\r\n\r\n <!-- LOADING -->\r\n <div class=\"loading-block\" *ngIf=\"isLoading\">\r\n <div class=\"spinner\"></div>\r\n </div>\r\n\r\n <!-- LOAD ERROR -->\r\n <div class=\"alert alert-warning\" *ngIf=\"loadError\">{{ loadImageErrorText }}</div>\r\n\r\n <!-- CROPPER -->\r\n <div class=\"cropper\">\r\n <img #image alt=\"image\" [src]=\"imageUrl\" (load)=\"imageLoaded($event)\" (error)=\"imageLoadError($event)\" />\r\n </div>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [":host{display:block}.cropper img{max-width:100%;max-height:100%;height:auto}.cropper-wrapper{position:relative;min-height:80px}.cropper-wrapper .loading-block{position:absolute;top:0;left:0;width:100%;height:100%}.cropper-wrapper .loading-block .spinner{width:31px;height:31px;margin:0 auto;border:2px solid rgba(97,100,193,.98);border-radius:50%;border-left-color:transparent;border-right-color:transparent;-webkit-animation:425ms linear infinite cssload-spin;position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);animation:425ms linear infinite cssload-spin}@-webkit-keyframes cssload-spin{to{transform:rotate(360deg)}}@keyframes cssload-spin{to{transform:rotate(360deg)}}/*!\r\n * Cropper.js v1.5.7\r\n * https://fengyuanchen.github.io/cropperjs\r\n *\r\n * Copyright 2015-present Chen Fengyuan\r\n * Released under the MIT license\r\n *\r\n * Date: 2020-05-23T05:22:57.283Z\r\n */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:rgba(51,153,255,.75) solid 1px;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:calc(100% / 3);left:0;top:calc(100% / 3);width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:calc(100% / 3);top:0;width:calc(100% / 3)}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center::after,.cropper-center::before{background-color:#eee;content:' ';display:block;position:absolute}.cropper-center::before{height:1px;left:-3px;top:0;width:7px}.cropper-center::after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se::before{background-color:#39f;bottom:-50%;content:' ';display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}"]
}] }
];
/** @nocollapse */
NpCropper.ctorParameters = () => [];
NpCropper.propDecorators = {
image: [{ type: ViewChild, args: ['image',] }],
imageUrl: [{ type: Input }],
cropbox: [{ type: Input }],
loadImageErrorText: [{ type: Input }],
cropperOptions: [{ type: Input }],
export: [{ type: Output }],
ready: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpCropperModule {
}
NpCropperModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [NpCropper],
exports: [NpCropper]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const DATE_FORMAT = 'YYYY-MM-DD';
/** @type {?} */
const TIME_FORMAT = 'HH:mm:ss';
/** @type {?} */
const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const moment = moment_;
class NpDatePickerService {
/**
* @param {?} overlayPositionBuilder
* @param {?} overlay
*/
constructor(overlayPositionBuilder, overlay) {
this.overlayPositionBuilder = overlayPositionBuilder;
this.overlay = overlay;
}
/**
* @return {?}
*/
get locale() {
return (/** @type {?} */ (moment.locale()));
}
/**
* 根据传入的moment时间及传入的年份生成年份范围数组YearData。
* 例如：year = 2020， 年份范围value示例为
*
* [
*
* 2019, 2020, 2021,
*
* 2022, 2023, 2024,
*
* 2025, 2026, 2027,
*
* 2028, 2029, 2030
*
* ]
* @param {?} date Moment时间
* @param {?} year 年份YYYY， 例：2020
* @param {?} selectedDate 当前选中的日期
* @return {?}
*/
buildYearsPanel(date, year, selectedDate) {
/** @type {?} */
let years = [];
/** @type {?} */
let lastNumOfYear = +year.charAt(3);
/** @type {?} */
let start = lastNumOfYear;
/** @type {?} */
let end = 10 - lastNumOfYear;
/** @type {?} */
let copyDateStart = date.clone();
while (start >= 0) {
/** @type {?} */
const cur = copyDateStart.add(-1, 'year');
years.push({
available: start > 0,
value: cur.format('YYYY'),
isSelected: selectedDate ? selectedDate.format('YYYY') === cur.format('YYYY') : false,
date: cur.clone()
});
start--;
}
years.push({
available: true,
value: date.format('YYYY'),
isSelected: selectedDate ? selectedDate.format('YYYY') === date.format('YYYY') : false,
date: date.clone()
});
/** @type {?} */
let copyDateEnd = date.clone();
while (end <= 10 && end > 0) {
/** @type {?} */
const cur = copyDateEnd.add(1, 'year');
years.push({
available: end > 1,
value: cur.format('YYYY'),
isSelected: selectedDate ? selectedDate.format('YYYY') === cur.format('YYYY') : false,
date: cur.clone()
});
end--;
}
return years.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => { return (+a.value - +b.value); }));
}
/**
* 构建当前年份的全部月份
* @param {?} date
* @param {?} selectedDate 当前选中的日期
* @return {?}
*/
buildMonthsPanel(date, selectedDate) {
/** @type {?} */
let m = moment.monthsShort();
/** @type {?} */
let months = [];
for (let i = 0; i < m.length; i++) {
months.push({
available: true,
value: m[i],
isSelected: selectedDate ? m[i] === selectedDate.format('MMM') : false,
date: moment(date.format('YYYY') + m[i] + date.format('DD'), 'YYYYMMMDD')
});
}
return months;
}
/**
* 根据传入的日期构建当前显示日历面板（当前这个月的天数面板）。
* 例如：传入日期为2020/08/20，则返回一个DayDataPerMonth数组，
* 其中的value示例如下:
*
* ['日', '一', '二', '三', '四', '五', '六',
*
* '26', '27', '28', '29', '30', '31', '1',
*
* '2', '3', '4', '5', '6', '7', '8',
*
* '9', '10', '11', '12', '13', '14', '15',
*
* '16', '17', '18', '19', '20', '21', '22',
*
* '23', '24', '25', '26', '27', '28', '29',
*
* '30', '31', '1', '2', '3', '4', '5']
* @param {?} date 构建日期面板的日期
* @param {?} selectedDate 当前选中的日期
* @return {?}
*/
buildDaysPanel(date, selectedDate) {
/** @type {?} */
const total = 49;
/** @type {?} */
let days = [];
/** @type {?} */
let copyDate = date.clone();
/** @type {?} */
let weekdaysMin = this.getWeekdaysMin();
weekdaysMin.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
days.push({ available: false, value: item, isSelected: false, isWeekDayMin: true, date: null });
}));
/** @type {?} */
let startOfMonth = copyDate.clone().startOf('month');
startOfMonth = moment(startOfMonth.format(DATE_FORMAT) + ' ' + copyDate.format(TIME_FORMAT));
// 获取当月第一天是周几，如2020/08/01是周六，则得到的是“六”
/** @type {?} */
let weekDayMin_startOfMonth = weekdaysMin[+startOfMonth.weekday() + 1];
/** @type {?} */
let index_weekDayMin_startOfMonth = weekdaysMin.indexOf(weekDayMin_startOfMonth);
// 添加上月后几天用以补足当前面板
while (index_weekDayMin_startOfMonth > 0) {
days.push({
available: false,
value: startOfMonth.clone().add(-index_weekDayMin_startOfMonth, 'day').format('D'),
isSelected: false,
isWeekDayMin: false,
date: startOfMonth.clone().add(-index_weekDayMin_startOfMonth, 'day').clone()
});
index_weekDayMin_startOfMonth--;
}
/** @type {?} */
let lastOfMonth = copyDate.clone().endOf('month');
lastOfMonth = moment(lastOfMonth.format(DATE_FORMAT) + ' ' + copyDate.format(TIME_FORMAT));
// 获取当月最后天是周几，如2020/08/31是周一，则得到的是“一”
// 添加当月到当前面板数组
while (startOfMonth <= lastOfMonth) {
days.push({
available: true,
value: startOfMonth.format('D'),
isSelected: selectedDate ? startOfMonth.format(DATE_FORMAT) === selectedDate.format(DATE_FORMAT) : false,
isWeekDayMin: false,
date: startOfMonth.clone()
});
startOfMonth = startOfMonth.add(1, 'day');
}
// 添加下月前几天用以补足当前面板
/** @type {?} */
let i = 1;
while (days.length < total) {
days.push({
available: false,
value: lastOfMonth.clone().add(i, 'day').format('D'),
isSelected: false,
isWeekDayMin: false,
date: lastOfMonth.clone().add(i, 'day').clone()
});
i++;
}
return days;
}
/**
* @param {?} dates
* @param {?=} asc
* @return {?}
*/
sortDates(dates, asc = true) {
return dates.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => asc ? a.diff(b) : b.diff(a)));
}
/**
* @param {?} sDate
* @param {?} eDate
* @return {?}
*/
buildStartAndEndDates(sDate, eDate) {
if (!sDate || !eDate) {
return [];
}
if (moment(sDate) < moment(eDate)) {
return [sDate, eDate];
}
return [eDate, sDate];
}
/**
* @param {?} date
* @return {?}
*/
day(date) {
if (date) {
return moment(date.format(DATE_FORMAT + ' 00:00:00'), 'YYYY-MM-DD');
}
return moment();
}
/**
* @private
* @param {?} currentDate
* @param {?} hoverDate
* @param {?=} dates
* @return {?}
*/
getDayStatus(currentDate, hoverDate, dates = []) {
if (!dates || dates.length === 0) {
return 'normal';
}
/** @type {?} */
const day = (/**
* @param {?} date
* @return {?}
*/
(date) => {
if (date) {
return moment(date.format(DATE_FORMAT + ' 00:00:00'), 'YYYY-MM-DD');
}
return moment();
});
/** @type {?} */
let sortedDates = this.sortDates([hoverDate, ...dates]);
if (currentDate < sortedDates[0] || currentDate > sortedDates[2]) {
return (/** @type {?} */ ('normal'));
}
if (day(hoverDate).diff(dates[0]) < 0) {
if (day(currentDate).diff(day(hoverDate)) < 0) {
return 'normal';
}
else if (day(currentDate).diff(hoverDate) >= 0 && day(currentDate).diff(dates[0]) < 0) {
return 'within-hover';
}
else if (day(currentDate).diff(dates[0]) >= 0 && day(currentDate).diff(dates[1]) <= 0) {
return 'within-selected';
}
else if (day(currentDate).diff(dates[1]) > 0) {
return 'normal';
}
}
if (day(hoverDate).diff(dates[0]) >= 0 && day(hoverDate).diff(dates[1]) <= 0) {
if (day(currentDate).diff(day(dates[0])) < 0) {
return 'normal';
}
else if (day(currentDate).diff(dates[0]) >= 0 && day(currentDate).diff(hoverDate) < 0) {
return 'within-selected-hover';
}
else if (day(currentDate).diff(hoverDate) >= 0 && day(currentDate).diff(dates[1]) <= 0) {
return 'within-selected';
}
else if (day(currentDate).diff(dates[1]) > 0) {
return 'normal';
}
}
if (day(hoverDate).diff(dates[1]) > 0) {
if (day(currentDate).diff(day(dates[0])) < 0) {
return 'normal';
}
else if (day(currentDate).diff(dates[0]) >= 0 && day(currentDate).diff(dates[1]) < 0) {
return 'within-selected';
}
else if (day(currentDate).diff(dates[1]) >= 0 && day(currentDate).diff(hoverDate) <= 0) {
return 'within-hover';
}
else if (day(currentDate).diff(hoverDate) > 0) {
return 'normal';
}
}
return (/** @type {?} */ ('normal'));
}
/**
* 构建时间区间选择当鼠标hover面板时的状态，同buildDaysPanel的功能，
* 增加对象DayDataPerMonth中对字段isWithinDateRangeHover的值的区分。
*
* @param {?} date 构建日期面板的日期
* @param {?} selectedDate 当前选中的日期
* @param {?} hoverDate 当前hover的时间moment值
* @param {?=} dates 需要传入此时间区间字段，代表时间区间已选择的区间值
* @return {?}
*/
buildDaysPanelForRangePicker(date, selectedDate, hoverDate, dates = []) {
/** @type {?} */
const total = 49;
/** @type {?} */
let days = [];
/** @type {?} */
let copyDate = date.clone();
/** @type {?} */
let weekdaysMin = this.getWeekdaysMin();
weekdaysMin.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
days.push({ available: false, value: item, isSelected: false, isWeekDayMin: true, date: null, hoverDateType: 'normal' });
}));
/** @type {?} */
let startOfMonth = copyDate.clone().startOf('month');
startOfMonth = moment(startOfMonth.format(DATE_FORMAT) + ' ' + copyDate.format(TIME_FORMAT));
// 获取当月第一天是周几，如2020/08/01是周六，则得到的是“六”
/** @type {?} */
let weekDayMin_startOfMonth = weekdaysMin[+startOfMonth.weekday() + 1];
/** @type {?} */
let index_weekDayMin_startOfMonth = weekdaysMin.indexOf(weekDayMin_startOfMonth);
// 添加上月后几天用以补足当前面板
while (index_weekDayMin_startOfMonth > 0) {
/** @type {?} */
let cDate = startOfMonth.clone().add(-index_weekDayMin_startOfMonth, 'day').clone();
days.push({
available: false,
value: cDate.format('D'),
isSelected: false,
isWeekDayMin: false,
date: cDate,
hoverDateType: this.getDayStatus(cDate, hoverDate, dates)
});
index_weekDayMin_startOfMonth--;
}
/** @type {?} */
let lastOfMonth = copyDate.clone().endOf('month');
lastOfMonth = moment(lastOfMonth.format(DATE_FORMAT) + ' ' + copyDate.format(TIME_FORMAT));
// 获取当月最后天是周几，如2020/08/31是周一，则得到的是“一”
// 添加当月到当前面板数组
while (startOfMonth <= lastOfMonth) {
days.push({
available: true,
value: startOfMonth.format('D'),
isSelected: selectedDate ? startOfMonth.format(DATE_FORMAT) === selectedDate.format(DATE_FORMAT) : false,
isWeekDayMin: false,
date: startOfMonth.clone(),
hoverDateType: this.getDayStatus(startOfMonth.clone(), hoverDate, dates)
});
startOfMonth = startOfMonth.add(1, 'day');
}
// 添加下月前几天用以补足当前面板
/** @type {?} */
let i = 1;
while (days.length < total) {
/** @type {?} */
let cDate = lastOfMonth.clone().add(i, 'day').clone();
days.push({
available: false,
value: cDate.format('D'),
isSelected: false,
isWeekDayMin: false,
date: cDate.clone(),
hoverDateType: this.getDayStatus(cDate, hoverDate, dates)
});
i++;
}
return days;
}
/**
* @return {?}
*/
getWeekdaysMin() {
return moment.weekdaysMin();
}
/**
* @param {?} elementRef
* @return {?}
*/
getOverlayRef(elementRef) {
/** @type {?} */
const popupPositions = [{
originX: "start",
originY: "bottom",
overlayX: "start",
overlayY: "top",
offsetX: 0,
offsetY: 1
}, {
originX: "start",
originY: "top",
overlayX: "start",
overlayY: "bottom",
offsetX: 0,
offsetY: -1
}];
/** @type {?} */
const positionStrategy = this.overlayPositionBuilder
.flexibleConnectedTo(elementRef)
.withPositions(popupPositions);
return this.overlay.create({
positionStrategy,
hasBackdrop: true,
backdropClass: 'cdk-overlay-transparent-backdrop',
scrollStrategy: this.overlay.scrollStrategies.noop()
});
}
/**
* 获取calendar时间，例如今天，昨天，明天等
* @param {?} date
* @param {?=} locale
* @return {?}
*/
calendar(date, locale = 'zh-cn') {
/** @type {?} */
let calendarDate = '';
switch (locale) {
case 'zh-cn':
calendarDate = date.calendar({
sameDay: '[今天]',
nextDay: '[明天]',
nextWeek: 'dddd',
lastDay: '[昨天]',
lastWeek: '[上] dddd',
sameElse: 'DD/MM/YYYY'
});
break;
case 'en':
calendarDate = date.calendar({
sameDay: '[Today]',
nextDay: '[Tomorrow]',
nextWeek: 'dddd',
lastDay: '[Yesterday]',
lastWeek: '[Last] dddd',
sameElse: 'DD/MM/YYYY'
});
break;
default:
calendarDate = date.calendar({
sameDay: '[今天]',
nextDay: '[明天]',
nextWeek: 'dddd',
lastDay: '[昨天]',
lastWeek: '[上] dddd',
sameElse: 'DD/MM/YYYY'
});
break;
}
return calendarDate;
}
/**
* @param {?} date
* @return {?}
*/
isValid(date) {
return date && moment(date).isValid();
}
}
NpDatePickerService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NpDatePickerService.ctorParameters = () => [
{ type: OverlayPositionBuilder },
{ type: Overlay }
];
/** @nocollapse */ NpDatePickerService.ngInjectableDef = defineInjectable({ factory: function NpDatePickerService_Factory() { return new NpDatePickerService(inject(OverlayPositionBuilder), inject(Overlay)); }, token: NpDatePickerService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const moment$1 = moment_;
/**
* @ignore
*/
class NpDatePickerHeader {
/**
* @param {?} datePickerService
*/
constructor(datePickerService) {
this.datePickerService = datePickerService;
this.date = moment$1();
this.onYearClicked = new EventEmitter();
this.onMonthClicked = new EventEmitter();
this.onArrowClicked = new EventEmitter();
this.isYearLabelRanged = false;
this.isShowMonthLabel = true;
this.isShowPreBtn = true;
}
/**
* @return {?}
*/
ngOnInit() {
this.resetYearAndMonth();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const date = (/** @type {?} */ (changes['date'].currentValue));
if (date) {
this.resetYearAndMonth();
}
}
/**
* @return {?}
*/
onYearLabelClicked() {
if (this.isYearLabelRanged) {
return;
}
this.isYearLabelRanged = true;
this.isShowMonthLabel = false;
this.isShowPreBtn = false;
/** @type {?} */
let ranges = this.datePickerService.buildYearsPanel(this.date, this.year, this.date.clone());
this.year = ranges[1].value + '-' + ranges[ranges.length - 2].value;
this.onYearClicked.emit({ date: this.date, year: this.year, ranges: ranges });
}
/**
* @return {?}
*/
onMonthLabelClicked() {
this.isShowMonthLabel = false;
this.isShowPreBtn = false;
this.month = this.date.format('MMMM');
this.onMonthClicked.emit({ date: this.date, month: this.month });
}
/**
* @param {?} arrowType
* @return {?}
*/
onArrowBtnClicked(arrowType) {
this.onArrowClicked.emit({ arrowType: arrowType, date: this.date });
}
/**
* @private
* @return {?}
*/
resetYearAndMonth() {
if (this.isYearLabelRanged) {
/** @type {?} */
let ranges = this.datePickerService.buildYearsPanel(this.date, this.date.format('YYYY'), this.date.clone());
this.year = ranges[1].value + '-' + ranges[ranges.length - 2].value;
}
else {
this.year = this.date.format('YYYY');
}
this.month = this.date.format('MMMM');
}
}
NpDatePickerHeader.decorators = [
{ type: Component, args: [{
selector: `np-date-picker-header`,
template: "<div class=\"date-picker-header flex-wrap row-flex\">\r\n <div class=\"arrow-container flex-wrap row-flex\">\r\n <span class=\"double-pre-btn\" (click)=\"onArrowBtnClicked('double-pre')\"></span>\r\n <span class=\"pre-btn\" *ngIf=\"isShowPreBtn\" (click)=\"onArrowBtnClicked('pre')\"></span>\r\n </div>\r\n <div class=\"date-container flex-wrap row-flex\">\r\n <span class=\"year\" (click)=\"onYearLabelClicked()\">{{ year }}</span>\r\n \r\n <span class=\"month\" *ngIf=\"isShowMonthLabel\" (click)=\"onMonthLabelClicked()\">{{ month }}</span>\r\n </div>\r\n <div class=\"arrow-container flex-wrap row-flex\">\r\n <span class=\"next-btn\" *ngIf=\"isShowPreBtn\" (click)=\"onArrowBtnClicked('next')\"></span>\r\n <span class=\"double-next-btn\" (click)=\"onArrowBtnClicked('double-next')\"></span>\r\n </div>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [".date-picker-header{position:relative;justify-content:space-between;height:41px;line-height:41px;font-weight:500}.date-picker-header .arrow-container{position:relative;padding-top:17px}.date-picker-header .arrow-container .arrow-btn,.date-picker-header .arrow-container .double-next-btn::after,.date-picker-header .arrow-container .double-next-btn::before,.date-picker-header .arrow-container .double-pre-btn::after,.date-picker-header .arrow-container .double-pre-btn::before,.date-picker-header .arrow-container .next-btn::before,.date-picker-header .arrow-container .pre-btn::before{position:absolute;display:inline-block;width:6px;height:6px;border:0 solid;border-width:1.5px 0 0 1.5px;content:\"\"}.date-picker-header .arrow-container .double-next-btn::before,.date-picker-header .arrow-container .double-pre-btn::before{top:0;left:0}.date-picker-header .arrow-container .double-next-btn::after,.date-picker-header .arrow-container .double-pre-btn::after{top:4px;left:4px}.date-picker-header .arrow-container .next-btn::before,.date-picker-header .arrow-container .pre-btn::before{top:0;left:0}.date-picker-header .arrow-container .double-pre-btn,.date-picker-header .arrow-container .pre-btn{transform:rotate(-45deg);position:relative;display:inline-block;width:7px;height:7px;margin-left:17px;cursor:pointer}.date-picker-header .arrow-container .double-next-btn,.date-picker-header .arrow-container .next-btn{transform:rotate(135deg);position:relative;display:inline-block;width:7px;height:7px;margin-right:17px;cursor:pointer}.date-picker-header .date-container{cursor:pointer}"]
}] }
];
/** @nocollapse */
NpDatePickerHeader.ctorParameters = () => [
{ type: NpDatePickerService }
];
NpDatePickerHeader.propDecorators = {
date: [{ type: Input }],
onYearClicked: [{ type: Output }],
onMonthClicked: [{ type: Output }],
onArrowClicked: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const moment$2 = moment_;
/**
* @ignore
*/
class NpDatePickerFooter {
/**
* @param {?} datePickerService
*/
constructor(datePickerService) {
this.datePickerService = datePickerService;
this.datePickerType = 'date-picker';
this.footerItems = [];
this.onItemLabelClicked = new EventEmitter();
this.today = '今天';
this.todayTitle = moment$2().format('LL');
}
/**
* @return {?}
*/
ngOnInit() {
this.today = this.datePickerService.calendar(moment$2(), this.datePickerService.locale) || this.today;
this.todayTitle = moment$2().format('LL');
}
/**
* @return {?}
*/
onTodayLabelClicked() {
this.onItemLabelClicked.emit({ label: this.today, value: moment$2() });
}
/**
* @param {?} item
* @return {?}
*/
onItemClicked(item) {
this.onItemLabelClicked.emit(item);
}
}
NpDatePickerFooter.decorators = [
{ type: Component, args: [{
selector: `np-date-picker-footer`,
template: "<div class=\"np-date-picker-footer flex-wrap row-flex\">\r\n <ng-container\r\n *ngIf=\"datePickerType === 'date-picker' || datePickerType === 'datetime-picker' || datePickerType === 'date-range-picker'\">\r\n <ng-container *ngIf=\"footerItems && footerItems.length > 0\">\r\n <div class=\"footer-items-and-today flex-wrap row-flex\">\r\n <div class=\"flex-wrap row-flex\">\r\n <span *ngFor=\"let item of footerItems\" (click)=\"onItemClicked(item)\">{{ item.label }}</span>\r\n </div>\r\n <span *ngIf=\"datePickerType === 'date-picker'\" [title]=\"todayTitle\"\r\n (click)=\"onTodayLabelClicked()\">{{ today }}</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"(!footerItems || footerItems.length === 0) && datePickerType === 'date-picker'\">\r\n <div class=\"today flex-wrap row-flex middle-flex\">\r\n <span [title]=\"todayTitle\" (click)=\"onTodayLabelClicked()\">{{ today }}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [".np-date-picker-footer{height:41px;font-weight:500}.np-date-picker-footer .footer-items-and-today,.np-date-picker-footer .today{width:100%;line-height:41px;padding:0 15px}.np-date-picker-footer .footer-items-and-today span,.np-date-picker-footer .today span{cursor:pointer}.np-date-picker-footer .footer-items-and-today{justify-content:space-between}.np-date-picker-footer .footer-items-and-today span{margin-right:10px}.np-date-picker-footer .today{justify-content:center}"]
}] }
];
/** @nocollapse */
NpDatePickerFooter.ctorParameters = () => [
{ type: NpDatePickerService }
];
NpDatePickerFooter.propDecorators = {
datePickerType: [{ type: Input }],
footerItems: [{ type: Input }],
onItemLabelClicked: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NotifyService {
constructor() {
this._notifySubject = new Subject();
}
/**
* @param {?} key
* @param {?} value
* @return {?}
*/
notify(key, value) {
this._notifySubject.next({ key, value });
}
/**
* @param {?} key
* @return {?}
*/
get(key) {
return this._notifySubject.asObservable()
.pipe(filter((/**
* @param {?} e
* @return {?}
*/
e => e.key === key)), map((/**
* @param {?} e
* @return {?}
*/
e => e.value)));
}
}
NotifyService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NotifyService.ctorParameters = () => [];
/** @nocollapse */ NotifyService.ngInjectableDef = defineInjectable({ factory: function NotifyService_Factory() { return new NotifyService(); }, token: NotifyService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpTimePickerPanel {
/**
* @param {?} datePickerService
* @param {?} notifyService
*/
constructor(datePickerService, notifyService) {
this.datePickerService = datePickerService;
this.notifyService = notifyService;
this.onTimeClicked = new EventEmitter();
this.onConfirmClicked = new EventEmitter();
this.hours = [];
this.minutes = [];
this.seconds = [];
this.selectedHour = '';
this.selectedMinute = '';
this.selectedSecond = '';
}
/**
* @return {?}
*/
ngOnInit() {
this.buildData();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const time = (/** @type {?} */ (changes['time'].currentValue));
}
/**
* @param {?} hour
* @return {?}
*/
onHourClicked(hour) {
this.selectedHour = hour;
this.buildSelectedTime();
this.onTimeClicked.emit(this.time);
}
/**
* @param {?} minute
* @return {?}
*/
onMinuteClicked(minute) {
this.selectedMinute = minute;
this.buildSelectedTime();
this.onTimeClicked.emit(this.time);
}
/**
* @param {?} second
* @return {?}
*/
onSecondClicked(second) {
this.selectedSecond = second;
this.buildSelectedTime();
this.onTimeClicked.emit(this.time);
}
/**
* @return {?}
*/
onConfirmButtonClicked() {
this.onConfirmClicked.emit(this.time);
}
/**
* 根据传入时间滚动到指定时间位置
* @param {?} time 当前传入时间，格式为\@link TIME_FORMAT
* @return {?}
*/
scrollTo(time) {
/** @type {?} */
const itemHeight = 28;
this.selectedHour = time.split(':')[0];
this.selectedMinute = time.split(':')[1];
this.selectedSecond = time.split(':')[2];
this.hoursElementRef.nativeElement.scrollTo({
top: +this.selectedHour * itemHeight
});
this.minutesElementRef.nativeElement.scrollTo({
top: +this.selectedMinute * itemHeight
});
this.secondsElementRef.nativeElement.scrollTo({
top: +this.selectedSecond * itemHeight
});
}
/**
* @private
* @return {?}
*/
buildData() {
for (let i = 0; i < 24; i++) {
this.hours.push((i + '').padStart(2, '0'));
}
for (let i = 0; i < 60; i++) {
this.minutes.push((i + '').padStart(2, '0'));
}
for (let i = 0; i < 60; i++) {
this.seconds.push((i + '').padStart(2, '0'));
}
}
/**
* @private
* @return {?}
*/
buildSelectedTime() {
this.time = this.selectedHour;
if (this.selectedMinute) {
this.time += ':' + this.selectedMinute;
}
if (this.selectedSecond) {
this.time += ':' + this.selectedSecond;
}
this.scrollTo(this.time);
}
}
NpTimePickerPanel.decorators = [
{ type: Component, args: [{
selector: `np-time-picker-panel`,
template: "<div class=\"np-time-picker-panel flex-wrap col-flex\">\r\n <div class=\"time-picker-header\">{{ time }}</div>\r\n <div class=\"time-picker-body flex-wrap row-flex\">\r\n <div #hoursElementRef class=\"hours flex-wrap col-flex\">\r\n <span *ngFor=\"let hour of hours\" [ngClass]=\"{'selected-item': selectedHour === hour}\"\r\n (click)=\"onHourClicked(hour)\">{{ hour }}</span>\r\n </div>\r\n <div #minutesElementRef class=\"minutes flex-wrap col-flex\">\r\n <span *ngFor=\"let minute of minutes\" [ngClass]=\"{'selected-item': selectedMinute === minute}\"\r\n (click)=\"onMinuteClicked(minute)\">{{ minute }}</span>\r\n </div>\r\n <div #secondsElementRef class=\"seconds flex-wrap col-flex\">\r\n <span *ngFor=\"let second of seconds\" [ngClass]=\"{'selected-item': selectedSecond === second}\"\r\n (click)=\"onSecondClicked(second)\">{{ second }}</span>\r\n </div>\r\n </div>\r\n <div class=\"time-picker-footer flex-wrap col-flex\">\r\n <np-button *ngIf=\"confirmButtonText\" (click)=\"onConfirmButtonClicked()\">{{ confirmButtonText }}</np-button>\r\n </div>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [".np-time-picker-panel{width:169px}.np-time-picker-panel .time-picker-header{height:41px;line-height:41px;text-align:center;font-weight:500}.np-time-picker-panel .time-picker-body{height:232px;justify-content:space-between}.np-time-picker-panel .time-picker-body .hours,.np-time-picker-panel .time-picker-body .minutes,.np-time-picker-panel .time-picker-body .seconds{width:56px;flex-wrap:nowrap;overflow:hidden;padding-bottom:204px;scroll-behavior:smooth}.np-time-picker-panel .time-picker-body .hours:hover,.np-time-picker-panel .time-picker-body .minutes:hover,.np-time-picker-panel .time-picker-body .seconds:hover{overflow-y:auto}.np-time-picker-panel .time-picker-body .hours:hover>span,.np-time-picker-panel .time-picker-body .minutes:hover>span,.np-time-picker-panel .time-picker-body .seconds:hover>span{margin-left:-8.5px}.np-time-picker-panel .time-picker-body .hours>span,.np-time-picker-panel .time-picker-body .minutes>span,.np-time-picker-panel .time-picker-body .seconds>span{width:56px;height:28px;text-align:center;line-height:28px}.np-time-picker-panel .time-picker-footer{height:41px;justify-content:center;align-items:flex-end}.np-time-picker-panel .time-picker-footer .np-button-wrapper{width:auto;letter-spacing:initial;font-size:13px;line-height:16px}"]
}] }
];
/** @nocollapse */
NpTimePickerPanel.ctorParameters = () => [
{ type: NpDatePickerService },
{ type: NotifyService }
];
NpTimePickerPanel.propDecorators = {
time: [{ type: Input }],
confirmButtonText: [{ type: Input }],
onTimeClicked: [{ type: Output }],
onConfirmClicked: [{ type: Output }],
hoursElementRef: [{ type: ViewChild, args: ['hoursElementRef',] }],
minutesElementRef: [{ type: ViewChild, args: ['minutesElementRef',] }],
secondsElementRef: [{ type: ViewChild, args: ['secondsElementRef',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const moment$4 = moment_;
/**
* Date picker popup组件
*/
class NpDatePickerPopup {
/**
* @param {?} datePickerService
* @param {?} elementRef
*/
constructor(datePickerService, elementRef) {
this.datePickerService = datePickerService;
this.elementRef = elementRef;
this.datePickerType = 'date-picker';
this.isShowTime = false;
this.date = null;
this.onDayClicked = new EventEmitter();
this.onDayMouseover = new EventEmitter();
this.onMonthClicked = new EventEmitter();
this.onYearClicked = new EventEmitter();
this.onTimeClicked = new EventEmitter();
this.onConfirmClicked = new EventEmitter();
this.onItemLabelClicked = new EventEmitter();
this.footerItems = [];
this.selectedDate = null;
this.isShowDaysPanel = true;
this.isShowMonthsPanel = false;
this.isShowYearsPanel = false;
this.days = [];
this.months = [];
this.years = [];
this.preDay = null;
}
/**
* @return {?}
*/
ngOnInit() {
this.initMoment();
if (this.datePickerType === 'date-picker') {
this.showPanel('days');
}
else if (this.datePickerType === 'month-picker') {
this.showPanel('months');
}
else if (this.datePickerType === 'year-picker') {
this.showPanel('years');
}
else if (this.datePickerType === 'datetime-picker') {
this.showPanel('days');
}
this.buildPanel();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const date = (/** @type {?} */ (changes['date'].currentValue));
this.selectedDate = date ? date.clone() : null;
}
/**
* @param {?} time
* @return {?}
*/
onTimeLabelClicked(time) {
this.time = time;
this.onTimeClicked.emit(this.time);
}
/**
* @param {?} time
* @return {?}
*/
onConfirmButtonClicked(time) {
this.time = time;
this.onConfirmClicked.emit(this.time);
}
/**
* @param {?} item
* @return {?}
*/
onFooterItemLabelClicked(item) {
this.onItemLabelClicked.emit(item);
}
/**
* @param {?} day
* @return {?}
*/
onDayLabelClicked(day) {
if (day.isWeekDayMin) {
return;
}
if (this.isShowTime) {
day.date = moment$4(day.date.format(DATE_FORMAT) + ' ' + (this.time ? this.time : moment$4().format(TIME_FORMAT)));
}
this.showPanel('days');
this.buildPanel(day.date, day.date);
this.initTimePicker(day.date);
this.onDayClicked.emit(day);
}
/**
* @param {?} day
* @return {?}
*/
onDayLabelMouseover(day) {
if (this.preDay && this.preDay.date && day.date && this.preDay.date.format(DATE_FORMAT) !== day.date.format(DATE_FORMAT)) {
this.onDayMouseover.emit(day);
}
this.preDay = Object.assign({}, day);
}
/**
* @param {?} month
* @return {?}
*/
onMonthLabelClicked(month) {
if (this.datePickerType === 'date-picker' || this.datePickerType === 'datetime-picker' || this.datePickerType === 'date-range-picker') {
this.showPanel('days');
this.buildPanel(month.date, this.selectedDate);
return;
}
if (this.datePickerType === 'month-picker') {
this.onMonthClicked.emit(month);
return;
}
}
/**
* @param {?} year
* @return {?}
*/
onYearLabelClicked(year) {
if (this.datePickerType === 'date-picker' || this.datePickerType === 'datetime-picker' || this.datePickerType === 'date-range-picker') {
this.showPanel('days');
this.buildPanel(year.date, this.selectedDate);
return;
}
if (this.datePickerType === 'month-picker') {
this.showPanel('months');
this.buildPanel(year.date, this.selectedDate);
return;
}
if (this.datePickerType === 'year-picker') {
this.onYearClicked.emit(year);
return;
}
}
/**
* @param {?} data
* @return {?}
*/
onYearInHeaderClicked(data) {
this.years = this.datePickerService.buildYearsPanel(data.date, data.year, this.selectedDate);
this.showPanel('years');
}
/**
* @return {?}
*/
onMonthInHeaderClicked() {
this.months = this.datePickerService.buildMonthsPanel(this.date, this.selectedDate);
this.showPanel('months');
}
/**
* @param {?} data
* @return {?}
*/
onArrowClicked(data) {
switch (data.arrowType) {
case 'double-pre':
if (this.isShowDaysPanel || this.isShowMonthsPanel) {
this.date = this.date.add(-1, 'year').clone();
}
else if (this.isShowYearsPanel) {
this.date = this.date.add(-10, 'year').clone();
}
break;
case 'pre':
if (this.isShowDaysPanel) {
this.date = this.date.add(-1, 'month').clone();
}
break;
case 'next':
if (this.isShowDaysPanel) {
this.date = this.date.add(1, 'month').clone();
}
break;
case 'double-next':
if (this.isShowDaysPanel || this.isShowMonthsPanel) {
this.date = this.date.add(1, 'year').clone();
}
else if (this.isShowYearsPanel) {
this.date = this.date.add(10, 'year').clone();
}
break;
default:
break;
}
this.buildPanel();
}
/**
* @param {?=} date
* @param {?=} selectedDate
* @return {?}
*/
buildPanel(date = this.date, selectedDate = null) {
this.date = date && date.isValid() ? date.clone() : moment$4();
this.selectedDate = selectedDate ? selectedDate.clone() : this.selectedDate;
if (this.isShowDaysPanel) {
this.days = this.datePickerService.buildDaysPanel(this.date, this.selectedDate);
this.nowDay = moment$4();
return;
}
if (this.isShowMonthsPanel) {
this.months = this.datePickerService.buildMonthsPanel(this.date, this.selectedDate);
return;
}
if (this.isShowYearsPanel) {
this.years = this.datePickerService.buildYearsPanel(this.date, this.date.format('YYYY'), this.selectedDate);
return;
}
}
/**
* @param {?} hoverDate
* @param {?=} dates
* @return {?}
*/
buildPanelForRangePicker(hoverDate, dates = []) {
if (this.isShowDaysPanel) {
this.days = this.datePickerService.buildDaysPanelForRangePicker(this.date, this.selectedDate, hoverDate, dates);
this.nowDay = moment$4();
}
}
/**
* @private
* @return {?}
*/
initMoment() {
if (this.date && this.date.isValid()) {
this.selectedDate = this.date.clone();
this.initTimePicker(this.selectedDate);
}
else {
this.selectedDate = null;
this.date = moment$4();
}
}
/**
* @private
* @param {?} date
* @return {?}
*/
initTimePicker(date) {
if (this.datePickerType === 'datetime-picker') {
this.time = date.format(TIME_FORMAT);
if (this.timePickerPanel) {
this.timePickerPanel.scrollTo(this.time);
}
else {
setTimeout((/**
* @return {?}
*/
() => {
this.timePickerPanel.scrollTo(this.time);
}), 0);
}
}
}
/**
* @private
* @param {?} type
* @return {?}
*/
showPanel(type) {
switch (type) {
case 'days':
this.isShowDaysPanel = true;
this.isShowMonthsPanel = false;
this.isShowYearsPanel = false;
if (this.datePickerHeader) {
this.datePickerHeader.isYearLabelRanged = false;
this.datePickerHeader.isShowMonthLabel = true;
this.datePickerHeader.isShowPreBtn = true;
}
break;
case 'months':
this.isShowDaysPanel = false;
this.isShowMonthsPanel = true;
this.isShowYearsPanel = false;
if (this.datePickerHeader) {
this.datePickerHeader.isYearLabelRanged = false;
this.datePickerHeader.isShowMonthLabel = false;
this.datePickerHeader.isShowPreBtn = false;
}
break;
case 'years':
this.isShowDaysPanel = false;
this.isShowMonthsPanel = false;
this.isShowYearsPanel = true;
if (this.datePickerHeader) {
this.datePickerHeader.isYearLabelRanged = true;
this.datePickerHeader.isShowMonthLabel = false;
this.datePickerHeader.isShowPreBtn = false;
}
break;
default:
this.isShowDaysPanel = true;
this.isShowMonthsPanel = false;
this.isShowYearsPanel = false;
break;
}
}
}
NpDatePickerPopup.decorators = [
{ type: Component, args: [{
selector: `np-date-picker-popup`,
template: "<div @date-picker-animations class=\"np-date-picker-popup-wrapper flex-wrap row-flex\">\r\n <div class=\"date-wrapper flex-wrap col-flex\">\r\n <np-date-picker-header #datePickerHeader [date]=\"date\" (onYearClicked)=\"onYearInHeaderClicked($event)\"\r\n (onMonthClicked)=\"onMonthInHeaderClicked()\" (onArrowClicked)=\"onArrowClicked($event)\">\r\n </np-date-picker-header>\r\n <div class=\"date-picker-body\">\r\n <!-- \u65E5\u671F\u9762\u677F -->\r\n <ng-container *ngIf=\"isShowDaysPanel\">\r\n <div class=\"days-panel flex-wrap row-flex wrap\">\r\n <span #dayLabel class=\"day flex-wrap col-flex\" [ngClass]=\"{\r\n 'now-day': nowDay.format('YYYYMMDD') === (day.date && day.date.format('YYYYMMDD')), \r\n 'selected-day': day.isSelected, \r\n 'non-available-day': !day.available && !day.isWeekDayMin,\r\n 'within-hover': day.hoverDateType === 'within-hover' && day.available,\r\n 'within-selected': day.hoverDateType === 'within-selected' && day.available,\r\n 'within-selected-hover': day.hoverDateType === 'within-selected-hover' && day.available\r\n }\" *ngFor=\"let day of days\" (click)=\"onDayLabelClicked(day)\"\r\n (mouseover)=\"onDayLabelMouseover(day)\">{{ day.value }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- \u6708\u4EFD\u9762\u677F -->\r\n <ng-container *ngIf=\"isShowMonthsPanel\">\r\n <div class=\"months-panel flex-wrap row-flex wrap\">\r\n <span class=\"month flex-wrap col-flex\" [ngClass]=\"{'selected-month': month.isSelected}\"\r\n *ngFor=\"let month of months\" (click)=\"onMonthLabelClicked(month)\">{{ month.value }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- \u5E74\u4EFD\u9762\u677F -->\r\n <ng-container *ngIf=\"isShowYearsPanel\">\r\n <div class=\"years-panel flex-wrap row-flex wrap\">\r\n <span class=\"year flex-wrap col-flex\"\r\n [ngClass]=\"{'selected-year': year.isSelected, 'non-available-year': !year.available}\"\r\n *ngFor=\"let year of years\" (click)=\"onYearLabelClicked(year)\">{{ year.value }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <np-date-picker-footer\r\n *ngIf=\"datePickerType === 'date-picker' || datePickerType === 'datetime-picker' || datePickerType === 'date-range-picker'\"\r\n [datePickerType]=\"datePickerType\" [footerItems]=\"footerItems\"\r\n (onItemLabelClicked)=\"onFooterItemLabelClicked($event)\">\r\n </np-date-picker-footer>\r\n </div>\r\n <np-time-picker-panel #timePickerPanel *ngIf=\"isShowTime\" [time]=\"time\" [confirmButtonText]=\"confirmButtonText\"\r\n (onTimeClicked)=\"onTimeLabelClicked($event)\" (onConfirmClicked)=\"onConfirmButtonClicked($event)\">\r\n </np-time-picker-panel>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
animations: [trigger('date-picker-animations', [
transition(':enter', [
style({ opacity: 0 }),
animate(300, style({ opacity: 1 })),
]),
transition(':leave', [
animate(300, style({ opacity: 0 })),
]),
])],
styles: [".np-date-picker-popup-wrapper .date-wrapper{width:280px}.np-date-picker-popup-wrapper .date-wrapper .date-picker-body .days-panel{justify-content:center;align-items:center;padding:10px 0}.np-date-picker-popup-wrapper .date-wrapper .date-picker-body .days-panel>.day{justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:26px;height:24px;line-height:24px;margin:3px 5px;box-sizing:border-box}.np-date-picker-popup-wrapper .date-wrapper .date-picker-body .months-panel,.np-date-picker-popup-wrapper .date-wrapper .date-picker-body .years-panel{justify-content:center;align-items:center;padding:10px 0}.np-date-picker-popup-wrapper .date-wrapper .date-picker-body .months-panel>.month,.np-date-picker-popup-wrapper .date-wrapper .date-picker-body .months-panel>.year,.np-date-picker-popup-wrapper .date-wrapper .date-picker-body .years-panel>.month,.np-date-picker-popup-wrapper .date-wrapper .date-picker-body .years-panel>.year{justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:60px;height:24px;line-height:66px;margin:22px 14px}"]
}] }
];
/** @nocollapse */
NpDatePickerPopup.ctorParameters = () => [
{ type: NpDatePickerService },
{ type: ElementRef }
];
NpDatePickerPopup.propDecorators = {
date: [{ type: Input }],
onDayClicked: [{ type: Output }],
onDayMouseover: [{ type: Output }],
onMonthClicked: [{ type: Output }],
onYearClicked: [{ type: Output }],
onTimeClicked: [{ type: Output }],
onConfirmClicked: [{ type: Output }],
onItemLabelClicked: [{ type: Output }],
footerItems: [{ type: Input }],
confirmButtonText: [{ type: Input }],
datePickerHeader: [{ type: ViewChild, args: ['datePickerHeader',] }],
datePickerFooter: [{ type: ViewChild, args: ['datePickerFooter',] }],
timePickerPanel: [{ type: ViewChild, args: ['timePickerPanel',] }],
dayLabel: [{ type: ViewChild, args: ['dayLabel',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const moment$5 = moment_;
/**
* Date picker组件
*/
class NpDatePicker {
/**
* @param {?} datePickerService
* @param {?} cdf
*/
constructor(datePickerService, cdf) {
this.datePickerService = datePickerService;
this.cdf = cdf;
/**
* Placeholder
*/
this.placeholder = '';
/**
* 已选时间
*/
this.date = null;
/**
* 日期时间展示格式，默认只展示日期
*/
this.format = DATE_FORMAT;
/**
* 是否展示时间，默认不展示
*/
this.isShowTime = false;
/**
* 显示在footer左侧的自定义时间标签数组，如“昨天”等
*/
this.footerItems = [];
/**
* 当为datetime-picker时，底部面板最右侧展示的确认按钮名称
*/
this.confirmButtonText = '确认';
this.onDateChanged = new EventEmitter();
this.isHover = false;
this.emitChange = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
}
/**
* @return {?}
*/
ngOnInit() {
this.overlayRef = this.datePickerService.getOverlayRef(this.datePickerInput.npInput);
if (this.isShowTime) {
this.format = DATE_TIME_FORMAT;
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) { }
/**
* @return {?}
*/
onToggleDatePickerPopup() {
if (this.isDisabled) {
return;
}
if (this.overlayRef.hasAttached()) {
this.closePopup();
return;
}
this.datePickerPopupRef = this.overlayRef.attach(new ComponentPortal(NpDatePickerPopup));
this.datePickerPopupRef.instance.date = moment$5(this.date);
this.datePickerPopupRef.instance.datePickerType = this.isShowTime ? 'datetime-picker' : 'date-picker';
this.datePickerPopupRef.instance.footerItems = this.footerItems;
this.datePickerPopupRef.instance.isShowTime = this.isShowTime;
this.datePickerPopupRef.instance.confirmButtonText = this.confirmButtonText;
this.subscribeNotifyEvents();
this.overlayRef.backdropClick().subscribe((/**
* @return {?}
*/
() => {
this.closePopup();
}));
}
/**
* @param {?} data
* @return {?}
*/
onBlur(data) {
if (this.datePickerService.isValid(data.value)) {
this.date = moment$5(data.value, this.format).clone();
}
else {
// 如果输入日期不合法，默认当前时间
this.date = moment$5().clone();
}
this.syncValue();
this.emitChange(this.date);
this.onDateChanged.emit(this.date);
}
/**
* @return {?}
*/
onClear() {
if (this.isDisabled) {
return;
}
this.date = null;
this.syncValue();
this.emitChange(this.date);
this.onDateChanged.emit(this.date);
}
/**
* @return {?}
*/
onMouseenter() {
this.isHover = true;
}
/**
* @return {?}
*/
onMouseleave() {
this.isHover = false;
}
//#region Private methods
/**
* 每次this.date改变时，这个方法都必须要调用
* @private
* @return {?}
*/
syncValue() {
if (this.date && this.datePickerService.isValid(this.date)) {
this.value = moment$5(this.date, this.format).format(this.format);
}
else {
this.value = '';
}
}
/**
* @private
* @return {?}
*/
closePopup() {
if (this.overlayRef.hasAttached()) {
this.overlayRef.detach();
}
}
/**
* @private
* @return {?}
*/
subscribeNotifyEvents() {
this.datePickerPopupRef.instance.onDayClicked.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
this.emitDataAndClosePopup(res.date);
}));
this.datePickerPopupRef.instance.onItemLabelClicked.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
if (res.value instanceof Function) {
this.emitDataAndClosePopup(res.value());
}
else {
this.emitDataAndClosePopup(moment$5(res.value));
}
this.closePopup();
}));
if (this.isShowTime) {
this.datePickerPopupRef.instance.onTimeClicked.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
/** @type {?} */
let date = moment$5(moment$5(this.date).format(DATE_FORMAT) + ' ' + res);
this.emitDataAndClosePopup(date);
}));
this.datePickerPopupRef.instance.onConfirmClicked.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
/** @type {?} */
let date = moment$5(moment$5(this.date).format(DATE_FORMAT) + ' ' + res);
this.emitDataAndClosePopup(date);
this.closePopup();
}));
}
}
/**
* @private
* @param {?} date
* @return {?}
*/
emitDataAndClosePopup(date) {
this.date = date;
this.syncValue();
this.emitChange(moment$5(this.date));
this.onDateChanged.emit(moment$5(this.date));
this.datePickerInput.focus();
if (!this.isShowTime) {
this.closePopup();
}
}
//#endregion
//#region Implement for ControlValueAccessor
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
this.date = obj;
this.syncValue();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.emitChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
}
NpDatePicker.decorators = [
{ type: Component, args: [{
selector: `np-date-picker`,
template: "<div class=\"np-date-picker-wrapper flex-wrap col-flex\" (mouseenter)=\"onMouseenter()\" (mouseleave)=\"onMouseleave()\">\r\n <i *ngIf=\"!isHover\" class=\"far fa-calendar\"></i>\r\n <i *ngIf=\"isHover\" class=\"fas fa-times-circle\" (click)=\"onClear()\"></i>\r\n <np-input #datePickerInput [label]=\"label\" [isRequired]=\"isRequired\" [isDisabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\" [errorMessage]=\"errorMessage\" [(ngModel)]=\"value\" (click)=\"onToggleDatePickerPopup()\"\r\n (onBlur)=\"onBlur($event)\">\r\n </np-input>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpDatePicker)),
multi: true,
}
],
styles: [".np-date-picker-wrapper{position:relative}.np-date-picker-wrapper>.far.fa-calendar,.np-date-picker-wrapper>.fas.fa-times-circle{position:absolute;right:10px;line-height:34px;font-size:15px;cursor:pointer;z-index:1}.np-date-picker-wrapper .np-input-wrapper .np-input{width:220px}"]
}] }
];
/** @nocollapse */
NpDatePicker.ctorParameters = () => [
{ type: NpDatePickerService },
{ type: ChangeDetectorRef }
];
NpDatePicker.propDecorators = {
label: [{ type: Input }],
isRequired: [{ type: Input }],
placeholder: [{ type: Input }],
errorMessage: [{ type: Input }],
isDisabled: [{ type: Input }],
date: [{ type: Input }],
format: [{ type: Input }],
isShowTime: [{ type: Input }],
footerItems: [{ type: Input }],
confirmButtonText: [{ type: Input }],
onDateChanged: [{ type: Output }],
datePickerInput: [{ type: ViewChild, args: ['datePickerInput',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const moment$6 = moment_;
/**
* Month picker组件
*/
class NpMonthPicker {
/**
* @param {?} datePickerService
*/
constructor(datePickerService) {
this.datePickerService = datePickerService;
/**
* Placeholder
*/
this.placeholder = '';
/**
* 已选时间
*/
this.date = null;
/**
* 时间展示格式
*/
this.format = 'YYYY-MM';
this.onMonthChanged = new EventEmitter();
this.isHover = false;
this.emitChange = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
}
/**
* @return {?}
*/
ngOnInit() {
this.overlayRef = this.datePickerService.getOverlayRef(this.monthPickerInput.npInput);
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
}
/**
* @return {?}
*/
onToggleDatePickerPopup() {
if (this.isDisabled) {
return;
}
if (this.overlayRef.hasAttached()) {
this.closePopup();
return;
}
this.datePickerPopupRef = this.overlayRef.attach(new ComponentPortal(NpDatePickerPopup));
this.datePickerPopupRef.instance.date = moment$6(this.date);
this.datePickerPopupRef.instance.datePickerType = 'month-picker';
this.datePickerPopupRef.instance.isShowMonthsPanel = true;
this.subscribeNotifyEvents();
this.overlayRef.backdropClick().subscribe((/**
* @return {?}
*/
() => {
this.closePopup();
}));
}
/**
* @param {?} data
* @return {?}
*/
onBlur(data) {
if (this.datePickerService.isValid(data.value)) {
this.date = moment$6(data.value, this.format).clone();
}
else {
// 如果输入日期不合法，默认当前时间
this.date = moment$6().clone();
}
this.syncValue();
this.emitChange(this.date);
this.onMonthChanged.emit(this.date);
}
/**
* @return {?}
*/
onClear() {
if (this.isDisabled) {
return;
}
this.date = null;
this.syncValue();
this.emitChange(this.date);
this.onMonthChanged.emit(this.date);
}
/**
* @return {?}
*/
onMouseenter() {
this.isHover = true;
}
/**
* @return {?}
*/
onMouseleave() {
this.isHover = false;
}
//#region Private methods
/**
* 每次this.date改变时，这个方法都必须要调用
* @private
* @return {?}
*/
syncValue() {
if (this.date && this.datePickerService.isValid(this.date)) {
this.value = moment$6(this.date, this.format).format(this.format);
}
else {
this.value = '';
}
}
/**
* @private
* @return {?}
*/
closePopup() {
if (this.overlayRef.hasAttached) {
this.overlayRef.detach();
}
}
/**
* @private
* @return {?}
*/
subscribeNotifyEvents() {
this.datePickerPopupRef.instance.onMonthClicked.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
this.emitDataAndClosePopup(res.date);
}));
}
/**
* @private
* @param {?} date
* @return {?}
*/
emitDataAndClosePopup(date) {
this.date = date;
this.syncValue();
this.emitChange(this.date);
this.onMonthChanged.emit(this.date);
this.monthPickerInput.focus();
this.closePopup();
}
//#endregion
//#region Implement for ControlValueAccessor
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
this.date = obj;
this.syncValue();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.emitChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
}
NpMonthPicker.decorators = [
{ type: Component, args: [{
selector: `np-month-picker`,
template: "<div class=\"np-month-picker-wrapper flex-wrap col-flex\" (mouseenter)=\"onMouseenter()\" (mouseleave)=\"onMouseleave()\">\r\n <i *ngIf=\"!isHover\" class=\"far fa-calendar\"></i>\r\n <i *ngIf=\"isHover\" class=\"fas fa-times-circle\" (click)=\"onClear()\"></i>\r\n <np-input #monthPickerInput [label]=\"label\" [isRequired]=\"isRequired\" [isDisabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\" [errorMessage]=\"errorMessage\" [(ngModel)]=\"value\" (click)=\"onToggleDatePickerPopup()\"\r\n (onBlur)=\"onBlur($event)\">\r\n </np-input>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpMonthPicker)),
multi: true,
}
],
styles: [".np-month-picker-wrapper{position:relative}.np-month-picker-wrapper>.far.fa-calendar,.np-month-picker-wrapper>.fas.fa-times-circle{position:absolute;right:10px;line-height:34px;font-size:15px;cursor:pointer;z-index:1}.np-month-picker-wrapper .np-input-wrapper .np-input{width:220px}"]
}] }
];
/** @nocollapse */
NpMonthPicker.ctorParameters = () => [
{ type: NpDatePickerService }
];
NpMonthPicker.propDecorators = {
label: [{ type: Input }],
isRequired: [{ type: Input }],
placeholder: [{ type: Input }],
errorMessage: [{ type: Input }],
isDisabled: [{ type: Input }],
date: [{ type: Input }],
format: [{ type: Input }],
onMonthChanged: [{ type: Output }],
monthPickerInput: [{ type: ViewChild, args: ['monthPickerInput',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const moment$7 = moment_;
/**
* Year picker组件
*/
class NpYearPicker {
/**
* @param {?} datePickerService
*/
constructor(datePickerService) {
this.datePickerService = datePickerService;
/**
* Placeholder
*/
this.placeholder = '';
/**
* 已选时间
*/
this.date = null;
/**
* 时间展示格式
*/
this.format = 'YYYY';
this.onYearChanged = new EventEmitter();
this.onYearClicked = new EventEmitter();
this.isHover = false;
this.emitChange = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
}
/**
* @return {?}
*/
ngOnInit() {
this.overlayRef = this.datePickerService.getOverlayRef(this.yearPickerInput.npInput);
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
}
/**
* @return {?}
*/
onToggleDatePickerPopup() {
if (this.isDisabled) {
return;
}
if (this.overlayRef.hasAttached()) {
this.closePopup();
return;
}
this.datePickerPopupRef = this.overlayRef.attach(new ComponentPortal(NpDatePickerPopup));
this.datePickerPopupRef.instance.date = moment$7(this.date);
this.datePickerPopupRef.instance.datePickerType = 'year-picker';
this.datePickerPopupRef.instance.isShowYearsPanel = true;
this.subscribeNotifyEvents();
this.overlayRef.backdropClick().subscribe((/**
* @return {?}
*/
() => {
this.closePopup();
}));
}
/**
* @param {?} data
* @return {?}
*/
onBlur(data) {
if (this.datePickerService.isValid(data.value)) {
this.date = moment$7(data.value, this.format).clone();
}
else {
// 如果输入日期不合法，默认当前时间
this.date = moment$7().clone();
}
this.syncValue();
this.emitChange(this.date);
this.onYearChanged.emit(this.date);
}
/**
* @return {?}
*/
onClear() {
if (this.isDisabled) {
return;
}
this.date = null;
this.syncValue();
this.emitChange(this.date);
this.onYearChanged.emit(this.date);
}
/**
* @return {?}
*/
onMouseenter() {
this.isHover = true;
}
/**
* @return {?}
*/
onMouseleave() {
this.isHover = false;
}
//#region Private methods
/**
* 每次this.date改变时，这个方法都必须要调用
* @private
* @return {?}
*/
syncValue() {
if (this.date && this.datePickerService.isValid(this.date)) {
this.value = moment$7(this.date, this.format).format(this.format);
}
else {
this.value = '';
}
}
/**
* @private
* @return {?}
*/
closePopup() {
if (this.overlayRef.hasAttached) {
this.overlayRef.detach();
}
}
/**
* @private
* @return {?}
*/
subscribeNotifyEvents() {
this.datePickerPopupRef.instance.onYearClicked.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
this.emitDataAndClosePopup(res.date);
}));
}
/**
* @private
* @param {?} date
* @return {?}
*/
emitDataAndClosePopup(date) {
this.date = date;
this.syncValue();
this.emitChange(this.date);
this.onYearChanged.emit(this.date);
this.yearPickerInput.focus();
this.closePopup();
}
//#endregion
//#region Implement for ControlValueAccessor
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
this.date = obj;
this.syncValue();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.emitChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
}
NpYearPicker.decorators = [
{ type: Component, args: [{
selector: `np-year-picker`,
template: "<div class=\"np-year-picker-wrapper flex-wrap col-flex\" (mouseenter)=\"onMouseenter()\" (mouseleave)=\"onMouseleave()\">\r\n <i *ngIf=\"!isHover\" class=\"far fa-calendar\"></i>\r\n <i *ngIf=\"isHover\" class=\"fas fa-times-circle\" (click)=\"onClear()\"></i>\r\n <np-input #yearPickerInput [label]=\"label\" [isRequired]=\"isRequired\" [isDisabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\" [errorMessage]=\"errorMessage\" [(ngModel)]=\"value\" (click)=\"onToggleDatePickerPopup()\"\r\n (onBlur)=\"onBlur($event)\">\r\n </np-input>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpYearPicker)),
multi: true,
}
],
styles: [".np-year-picker-wrapper{position:relative}.np-year-picker-wrapper>.far.fa-calendar,.np-year-picker-wrapper>.fas.fa-times-circle{position:absolute;right:10px;line-height:34px;font-size:15px;cursor:pointer;z-index:1}.np-year-picker-wrapper .np-input-wrapper .np-input{width:220px}"]
}] }
];
/** @nocollapse */
NpYearPicker.ctorParameters = () => [
{ type: NpDatePickerService }
];
NpYearPicker.propDecorators = {
label: [{ type: Input }],
isRequired: [{ type: Input }],
placeholder: [{ type: Input }],
errorMessage: [{ type: Input }],
isDisabled: [{ type: Input }],
date: [{ type: Input }],
format: [{ type: Input }],
onYearChanged: [{ type: Output }],
onYearClicked: [{ type: Output }],
yearPickerInput: [{ type: ViewChild, args: ['yearPickerInput',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const moment$8 = moment_;
/**
* Date range picker popup组件
*/
class NpDateRangePickerPopup {
/**
* @param {?} datePickerService
*/
constructor(datePickerService) {
this.datePickerService = datePickerService;
this.datePickerType = 'date-range-picker';
this.footerItems = [];
this.onStartDayClicked = new EventEmitter();
this.onEndDayClicked = new EventEmitter();
this.onItemLabelClicked = new EventEmitter();
this.nowDate = moment$8();
}
/**
* @return {?}
*/
ngOnInit() {
this.buildPicker();
setTimeout((/**
* @return {?}
*/
() => {
this.buildDayPanelStyle(moment$8(this.startDate));
}), 0);
}
/**
* @param {?} dayData
* @return {?}
*/
onStartPickerDayClicked(dayData) {
/** @type {?} */
let dates = this.buildStartAndEndDates();
this.onStartDayClicked.emit({ day: dayData, dates: dates });
}
/**
* @param {?} dayData
* @return {?}
*/
onEndPickerDayClicked(dayData) {
/** @type {?} */
let dates = this.buildStartAndEndDates();
this.onEndDayClicked.emit({ day: dayData, dates: dates });
}
/**
* @param {?} dayData
* @return {?}
*/
onStartPickerDayMouseover(dayData) {
this.buildDayPanelStyle(dayData.date);
}
/**
* @param {?} dayData
* @return {?}
*/
onEndPickerDayMouseover(dayData) {
this.buildDayPanelStyle(dayData.date);
}
/**
* @param {?} item
* @return {?}
*/
onFooterItemLabelClicked(item) {
this.onItemLabelClicked.emit(item);
}
/**
* @return {?}
*/
ngOnChanges() {
}
/**
* @private
* @param {?} date
* @return {?}
*/
buildDayPanelStyle(date) {
/** @type {?} */
let dates = this.buildStartAndEndDates();
this.startPicker.buildPanelForRangePicker(date, dates);
this.endPicker.buildPanelForRangePicker(date, dates);
}
/**
* @private
* @return {?}
*/
buildPicker() {
if (this.startPicker) {
this.startPicker.datePickerType = this.datePickerType;
}
if (this.endPicker) {
this.endPicker.datePickerType = this.datePickerType;
}
}
/**
* @private
* @return {?}
*/
buildStartAndEndDates() {
if (!this.datePickerService.isValid(this.startDate) || !this.datePickerService.isValid(this.endDate)) {
return [];
}
if (moment$8(this.startDate) < moment$8(this.endDate)) {
return [this.startDate, this.endDate];
}
return [this.endDate, this.startDate];
}
}
NpDateRangePickerPopup.decorators = [
{ type: Component, args: [{
selector: `np-date-range-picker-popup`,
template: "<div class=\"np-date-range-picker-popup-wrapper flex-wrap row-flex\">\r\n <np-date-picker-popup class=\"start-picker\" #startPicker [date]=\"startDate\" [footerItems]=\"footerItems\"\r\n (onItemLabelClicked)=\"onFooterItemLabelClicked($event)\" (onDayClicked)=\"onStartPickerDayClicked($event)\"\r\n (onDayMouseover)=\"onStartPickerDayMouseover($event)\">\r\n </np-date-picker-popup>\r\n <np-date-picker-popup class=\"end-picker\" #endPicker [date]=\"endDate\" (onDayClicked)=\"onEndPickerDayClicked($event)\"\r\n (onDayMouseover)=\"onEndPickerDayMouseover($event)\"></np-date-picker-popup>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
animations: [trigger('date-picker-animations', [
transition(':enter', [
style({ opacity: 0 }),
animate(300, style({ opacity: 1 })),
]),
transition(':leave', [
animate(300, style({ opacity: 0 })),
]),
])],
styles: [""]
}] }
];
/** @nocollapse */
NpDateRangePickerPopup.ctorParameters = () => [
{ type: NpDatePickerService }
];
NpDateRangePickerPopup.propDecorators = {
startDate: [{ type: Input }],
endDate: [{ type: Input }],
onStartDayClicked: [{ type: Output }],
onEndDayClicked: [{ type: Output }],
onItemLabelClicked: [{ type: Output }],
startPicker: [{ type: ViewChild, args: ['startPicker',] }],
endPicker: [{ type: ViewChild, args: ['endPicker',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const moment$9 = moment_;
/**
* Date range picker组件
*/
class NpDateRangePicker {
/**
* @param {?} datePickerService
*/
constructor(datePickerService) {
this.datePickerService = datePickerService;
/**
* 展示开始时间占位符
*/
this.startPlaceholder = '';
/**
* 展示结束时间占位符
*/
this.endPlaceholder = '';
/**
* 已选时间
*/
this.dates = [];
/**
* 日期时间展示格式，默认只展示日期
*/
this.format = DATE_FORMAT;
/**
* 是否展示时间，默认不展示
*/
this.isShowTime = false;
/**
* 显示在footer左侧的自定义时间标签数组，如“昨天”等
*/
this.footerItems = [];
this.onDateRangeChanged = new EventEmitter();
this.isHover = false;
this.emitChange = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
}
/**
* @return {?}
*/
ngOnInit() {
if (this.dates && this.dates.length === 2) {
/** @type {?} */
let dates = this.datePickerService.buildStartAndEndDates(moment$9(this.dates[0]).clone(), moment$9(this.dates[1]).clone());
this.startDate = dates[0];
this.endDate = dates[1];
this.syncSValue();
this.syncEValue();
}
this.overlayRef = this.datePickerService.getOverlayRef(this.dateRangeStartPicker.npInput);
if (this.isShowTime) {
this.format = DATE_TIME_FORMAT;
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
}
/**
* @return {?}
*/
onStartPickerClicked() {
this.onToggleDatePickerPopup();
}
/**
* @return {?}
*/
onEndPickerClicked() {
this.onToggleDatePickerPopup();
}
/**
* @return {?}
*/
onToggleDatePickerPopup() {
if (this.isDisabled) {
return;
}
if (this.overlayRef.hasAttached()) {
this.closePopup();
return;
}
this.daterangePickerPopupRef = this.overlayRef.attach(new ComponentPortal(NpDateRangePickerPopup));
this.daterangePickerPopupRef.instance.datePickerType = 'date-range-picker';
this.daterangePickerPopupRef.instance.footerItems = this.footerItems;
this.daterangePickerPopupRef.instance.startDate = moment$9(this.startDate);
this.daterangePickerPopupRef.instance.endDate = moment$9(this.endDate);
this.subscribeNotifyEvents();
this.overlayRef.backdropClick().subscribe((/**
* @return {?}
*/
() => {
this.closePopup();
}));
if (this.dateRangeWrapper && this.dateRangeWrapper.nativeElement) {
this.dateRangeWrapper.nativeElement.focus();
}
}
/**
* @param {?} data
* @return {?}
*/
onStartDateBlur(data) {
if (this.datePickerService.isValid(data.value)) {
this.startDate = moment$9(data.value, this.format).clone();
}
else {
// 如果输入日期不合法，默认当前时间
this.startDate = moment$9().clone();
}
/** @type {?} */
let dates = this.datePickerService.buildStartAndEndDates(moment$9(this.startDate).clone(), moment$9(this.endDate).clone());
this.startDate = dates[0];
this.endDate = dates[1];
this.syncSValue();
this.syncEValue();
this.emitChange([this.startDate, this.endDate]);
this.onDateRangeChanged.emit([this.startDate, this.endDate]);
}
/**
* @param {?} data
* @return {?}
*/
onEndDateBlur(data) {
if (this.datePickerService.isValid(data.value)) {
this.endDate = moment$9(data.value, this.format).clone();
}
else {
// 如果输入日期不合法，默认当前时间
this.endDate = moment$9().clone();
}
/** @type {?} */
let dates = this.datePickerService.buildStartAndEndDates(moment$9(this.startDate).clone(), moment$9(this.endDate).clone());
this.startDate = dates[0];
this.endDate = dates[1];
this.syncSValue();
this.syncEValue();
this.emitChange([this.startDate, this.endDate]);
this.onDateRangeChanged.emit([this.startDate, this.endDate]);
}
/**
* @return {?}
*/
onClear() {
if (this.isDisabled) {
return;
}
this.startDate = null;
this.endDate = null;
this.syncSValue();
this.syncEValue();
this.emitChange([]);
this.onDateRangeChanged.emit([]);
}
/**
* @return {?}
*/
onMouseenter() {
this.isHover = true;
}
/**
* @return {?}
*/
onMouseleave() {
this.isHover = false;
}
//#region Private methods
/**
* 每次this.startDate改变时，这个方法都必须要调用
* @private
* @return {?}
*/
syncSValue() {
if (this.startDate && this.datePickerService.isValid(this.startDate)) {
this.sValue = moment$9(this.startDate, this.format).format(this.format);
}
else {
this.sValue = '';
}
}
/**
* 每次this.endDate改变时，这个方法都必须要调用
* @private
* @return {?}
*/
syncEValue() {
if (this.endDate && this.datePickerService.isValid(this.endDate)) {
this.eValue = moment$9(this.endDate, this.format).format(this.format);
}
else {
this.eValue = '';
}
}
/**
* @private
* @return {?}
*/
closePopup() {
if (this.overlayRef.hasAttached()) {
this.overlayRef.detach();
}
}
/**
* @private
* @return {?}
*/
subscribeNotifyEvents() {
this.daterangePickerPopupRef.instance.onStartDayClicked.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
if (this.datePickerService.isValid(this.endDate)) {
this.emitDataAndClosePopup([res.day.date, moment$9(this.endDate).clone()]);
}
else {
this.startDate = res.day.date;
this.syncSValue();
}
}));
this.daterangePickerPopupRef.instance.onEndDayClicked.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
if (this.datePickerService.isValid(this.startDate)) {
this.emitDataAndClosePopup([res.day.date, moment$9(this.startDate).clone()]);
}
else {
this.endDate = res.day.date;
this.syncEValue();
}
}));
this.daterangePickerPopupRef.instance.onItemLabelClicked.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
if (res && res.values && res.values.length === 2) {
if (((res.values[0]) instanceof Function) && ((res.values[1]) instanceof Function)) {
this.emitDataAndClosePopup([((/** @type {?} */ (res.values[0])))(), ((/** @type {?} */ (res.values[1])))()]);
}
else {
this.emitDataAndClosePopup([moment$9((/** @type {?} */ (res.values[0]))), moment$9((/** @type {?} */ (res.values[1])))]);
}
}
}));
}
/**
* @private
* @param {?} dates
* @return {?}
*/
emitDataAndClosePopup(dates) {
/** @type {?} */
let sortedDates = this.datePickerService.sortDates(dates);
this.startDate = sortedDates[0].clone();
this.endDate = sortedDates[sortedDates.length - 1].clone();
this.syncSValue();
this.syncEValue();
this.emitChange([this.startDate, this.endDate]);
this.onDateRangeChanged.emit([this.startDate, this.endDate]);
this.closePopup();
}
//#endregion
//#region Implement for ControlValueAccessor
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
if (obj && obj.length === 2 && this.datePickerService.isValid(obj[0]) && this.datePickerService.isValid(obj[1])) {
/** @type {?} */
let sortedDates = this.datePickerService.sortDates(obj);
this.startDate = sortedDates[0].clone();
this.endDate = sortedDates[sortedDates.length - 1].clone();
}
else {
this.startDate = null;
this.endDate = null;
}
this.syncSValue();
this.syncEValue();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.emitChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
}
NpDateRangePicker.decorators = [
{ type: Component, args: [{
selector: `np-date-range-picker`,
template: "<div class=\"np-date-range-picker-wrapper flex-wrap row-flex\" (mouseenter)=\"onMouseenter()\"\r\n (mouseleave)=\"onMouseleave()\">\r\n <i *ngIf=\"!isHover\" class=\"far fa-calendar\"></i>\r\n <i *ngIf=\"isHover\" class=\"fas fa-times-circle\" (click)=\"onClear()\"></i>\r\n <div class=\"flex-wrap col-flex\" *ngIf=\"label\">\r\n <label class=\"np-date-lbl\">\r\n <span class=\"form-required\" *ngIf=\"isRequired\">*</span>\r\n {{ label }}\r\n </label>\r\n </div>\r\n <div>\r\n <div #dateRangeWrapper class=\"date-range-wrapper flex-wrap row-flex\">\r\n <np-input #dateRangeStartPicker class=\"date-range-start-picker\" [(ngModel)]=\"sValue\" [isRequired]=\"isRequired\"\r\n [isDisabled]=\"isDisabled\" [placeholder]=\"startPlaceholder\" (click)=\"onStartPickerClicked()\" (onBlur)=\"onStartDateBlur($event)\">\r\n </np-input>\r\n <span class=\"range-picker-divider\" [ngClass]=\"{'disabled': isDisabled}\"> ~ </span>\r\n <np-input #dateRangeEndPicker class=\"date-range-end-picker\" [(ngModel)]=\"eValue\" [isDisabled]=\"isDisabled\"\r\n [placeholder]=\"endPlaceholder\" (click)=\"onEndPickerClicked()\" (onBlur)=\"onEndDateBlur($event)\">\r\n </np-input>\r\n </div>\r\n <span class=\"error-message\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n </div>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NpDateRangePicker)),
multi: true,
}
],
styles: [".np-date-range-picker-wrapper{position:relative;align-items:baseline}.np-date-range-picker-wrapper>.far.fa-calendar,.np-date-range-picker-wrapper>.fas.fa-times-circle{position:absolute;right:10px;line-height:34px;font-size:15px;cursor:pointer;z-index:1}.np-date-range-picker-wrapper .np-date-lbl{width:80px;margin-right:20px;text-align:right;font-size:13px;font-weight:700;height:34px;line-height:34px}.np-date-range-picker-wrapper .date-range-wrapper .np-input-wrapper .np-input{height:32px}.np-date-range-picker-wrapper .date-range-wrapper .date-range-start-picker .np-input{width:160px}.np-date-range-picker-wrapper .date-range-wrapper .date-range-end-picker .np-input{width:190px}.np-date-range-picker-wrapper .error-message{display:block;font-size:10px;margin:5px}"]
}] }
];
/** @nocollapse */
NpDateRangePicker.ctorParameters = () => [
{ type: NpDatePickerService }
];
NpDateRangePicker.propDecorators = {
label: [{ type: Input }],
isRequired: [{ type: Input }],
startPlaceholder: [{ type: Input }],
endPlaceholder: [{ type: Input }],
errorMessage: [{ type: Input }],
isDisabled: [{ type: Input }],
dates: [{ type: Input }],
format: [{ type: Input }],
isShowTime: [{ type: Input }],
footerItems: [{ type: Input }],
onDateRangeChanged: [{ type: Output }],
dateRangeWrapper: [{ type: ViewChild, args: ['dateRangeWrapper',] }],
dateRangeStartPicker: [{ type: ViewChild, args: ['dateRangeStartPicker',] }],
dateRangeEndPicker: [{ type: ViewChild, args: ['dateRangeEndPicker',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpDateViaPickerModule {
}
NpDateViaPickerModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
OverlayModule,
NpInputModule,
NpButtonModule
],
declarations: [
NpDatePicker,
NpMonthPicker,
NpYearPicker,
NpDatePickerHeader,
NpDatePickerFooter,
NpDatePickerPopup,
NpTimePickerPanel,
NpDateRangePickerPopup,
NpDateRangePicker
],
exports: [
NpDatePicker,
NpMonthPicker,
NpYearPicker,
NpDatePickerHeader,
NpDatePickerFooter,
NpDatePickerPopup,
NpTimePickerPanel,
NpDateRangePickerPopup,
NpDateRangePicker
],
entryComponents: [
NpDatePickerPopup,
NpDateRangePickerPopup
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const moment$a = moment_;
/**
* @param {?=} locale
* @return {?}
*/
function registerNpDatePickerLocale(locale = 'zh-cn') {
moment$a.locale(locale);
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 侧边菜单
*
* Example of usage:
* <example-url>https://stackblitz.com/edit/x-button?embed=1&file=src/app/app.component.ts</example-url>
*/
class NpSideNav {
/**
* @param {?} renderer2
* @param {?} el
* @param {?} router
*/
constructor(renderer2, el, router) {
this.renderer2 = renderer2;
this.el = el;
this.router = router;
this.items = [];
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
}
/**
* @return {?}
*/
ngAfterViewInit() {
}
/**
* @param {?} item
* @return {?}
*/
onItemClicked(item) {
item.expanded = !item.expanded;
if (item.route) {
this.router.navigate([item.route]);
}
}
}
NpSideNav.decorators = [
{ type: Component, args: [{
selector: `np-sidenav`,
template: "<div class=\"np-sidenav-wrapper\">\r\n <ng-container *ngTemplateOutlet=\"sidenavItem; context: { items: items }\">\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #sidenavItem let-items=\"items\">\r\n <div class=\"sidenav-item-wrapper\" *ngFor=\"let item of items\">\r\n <div class=\"sidenav-item flex-wrap row-flex\" (click)=\"onItemClicked(item)\">\r\n <i class=\"sidenav-icon\" [class]=\"item.iconName\" *ngIf=\"item.iconName\"></i>\r\n <span>{{ item.displayName }}</span>\r\n <i *ngIf=\"item.children && item.children.length > 0\" class=\"fa right-arrow\" [ngClass]=\"{'fa-angle-left': !item.expanded, \r\n 'fa-angle-down': item.expanded}\"></i>\r\n </div>\r\n\r\n <ng-container *ngIf=\"item.expanded\">\r\n <ng-container *ngTemplateOutlet=\"sidenavItem; context: { items: item.children }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [".np-sidenav-wrapper{display:inline-block;width:100%}.np-sidenav-wrapper .sidenav-item-wrapper{font-size:16px;font-weight:500;padding:8px 0 8px 15px}.np-sidenav-wrapper .sidenav-item-wrapper .sidenav-item{align-items:center;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.np-sidenav-wrapper .sidenav-item-wrapper .sidenav-item>span{margin:0 15px}.np-sidenav-wrapper .sidenav-item-wrapper .sidenav-item .right-arrow{position:absolute;top:50%;right:0;transform:translateY(-50%)}"]
}] }
];
/** @nocollapse */
NpSideNav.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef },
{ type: Router }
];
NpSideNav.propDecorators = {
items: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @ignore
*/
class NpSideNavModule {
}
NpSideNavModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [NpSideNav],
exports: [NpSideNav]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NpButton, NpButtonModule, NpCheckbox, NpCheckboxModule, NpInput, NpInputModule, NpTree, NpTreeModule, DialogConfig, DialogRef, NpDialog, DialogService, NpDialogModule, NpPaginator, NpPaginatorModule, NpSharedModule, LoadingService, SafeHtmlPipe, NpTabGroup, NpTab, NpTabHeaderDirective, NpTabModule, NpTextarea, NpTextareaModule, NpTable, NpColumnDirective, NpTableModule, NpRadioButton, NpRadioButtonModule, NpRadioGroup, NpStep, NpStepperComponent, NpStepperModule, NpTitle, NpTitleModule, NpSwitch, NpSwitchModule, NpProgressBar, NpProgressBarModule, NpCircleBar, NpPercentCircleBarComponent, NpCircleBarModule, NpLoading, NpSolidLoading, NpLoadingModule, NpTooltip, NpTooltipDirective, NpTooltipModule, NpPanel, NpPanelHeaderDirective, NpPanelBodyDirective, NpPanelFooterDirective, NpPanelModule, NpBadgeDirective, NpBadgeModule, NpBox, NpBoxModule, NpKebab, NpKebabModule, NpDraggablePics, NpDraggablePicsModule, DragDrop, DragRef, DropListRef, CdkDropList, CDK_DROP_LIST, CDK_DROP_LIST_CONTAINER, moveItemInArray, transferArrayItem, copyArrayItem, NpDragDropModule, DragDropRegistry, CdkDropListGroup, CDK_DRAG_CONFIG_FACTORY, CDK_DRAG_CONFIG, CdkDrag, CdkDragHandle, CdkDragPreview, CdkDragPlaceholder, NpImgUpload, NpImgUploadModule, NpCropper, NpCropperModule, registerNpDatePickerLocale, NpDatePickerHeader, NpDatePicker, NpDatePickerPopup, NpDateViaPickerModule, NpDropdown, NpDropdownModule, NpSideNav, NpSideNavModule, OverlayService as ɵe, NpDatePickerFooter as ɵq, NpDateRangePickerPopup as ɵt, NpTimePickerPanel as ɵr, NpDatePickerService as ɵn, NpDateRangePicker as ɵu, NpMonthPicker as ɵo, NpYearPicker as ɵp, InsertionDirective as ɵc, CDK_DRAG_PARENT as ɵm, NpDropdownItemDirective as ɵd, daffProgressIndicatorAnimation as ɵl, TooltipDirective as ɵb, NotifyService as ɵs, NpStepFinishDirective as ɵj, NpStepHeaderDirective as ɵh, NpStepProcessDirective as ɵi, NpEmptyDirective as ɵg, NpHeaderDirective as ɵf, TitleTemplateDirective as ɵk };
//# sourceMappingURL=ngx-pluto.js.map