ngx-pluto
Version:
165 lines • 14.4 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ViewEncapsulation, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { NpTooltipDirective } from '../tooltip/index';
import { Utils } from '../utils';
/**
* kebab组件
*
* <example-url>https://stackblitz.com/edit/angular-vc3q8h?embed=1&file=src/app/app.component.html</example-url>
*/
export 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,] }]
};
if (false) {
/**
* 传入的需要进行展示的数组
* @type {?}
*/
NpKebab.prototype.data;
/**
* 布局格式，默认flex布局
* @type {?}
*/
NpKebab.prototype.display;
/** @type {?} */
NpKebab.prototype.position;
/**
* 点击单个item接收符合KebabItem 格式的对象
*
* @type {?}
*/
NpKebab.prototype.onItemClicked;
/** @type {?} */
NpKebab.prototype.dropdownTooltip;
/** @type {?} */
NpKebab.prototype.itemsInKebab;
/** @type {?} */
NpKebab.prototype.itemsOutKebab;
/** @type {?} */
NpKebab.prototype.isDropdownVisible;
}
/**
* @ignore
* @record
*/
export function KebabComponentData() { }
if (false) {
/** @type {?} */
KebabComponentData.prototype.items;
/**
* If no limit passed in or 0, which means all items out of kebab;
* if limit === items.length, which means all items in kebab;
* otherwise, limit is the count for items in kebab.
*
* @type {?|undefined}
*/
KebabComponentData.prototype.limit;
}
/**
* @record
*/
export function KebabItem() { }
if (false) {
/**
* 页面展示文案，字符串类型，属于必传参数
* @type {?}
*/
KebabItem.prototype.value;
/**
* 可自己传入不同的id，支持字符串和数字，如果不传入，则默认生成随机id
* @type {?|undefined}
*/
KebabItem.prototype.id;
/**
* 支持传入`icon`, `text`, `separator`, 默认`text`
* @type {?|undefined}
*/
KebabItem.prototype.type;
/**
* 支持传入颜色，非必传，不传使用默认色
* @type {?|undefined}
*/
KebabItem.prototype.color;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2ViYWIuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtcGx1dG8vIiwic291cmNlcyI6WyJsaWIva2ViYWIva2ViYWIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQVUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdHLE9BQU8sRUFBRSxrQkFBa0IsRUFBcUIsTUFBTSxrQkFBa0IsQ0FBQztBQUN6RSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sVUFBVSxDQUFDOzs7Ozs7QUFlakMsTUFBTSxPQUFPLE9BQU87SUFpQmxCOzs7O1FBWlMsWUFBTyxHQUFXLE1BQU0sQ0FBQztRQUN6QixhQUFRLEdBQXNCLGFBQWEsQ0FBQzs7Ozs7UUFJM0Msa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBb0MsQ0FBQztRQUcvRSxpQkFBWSxHQUFxQixFQUFFLENBQUM7UUFDcEMsa0JBQWEsR0FBcUIsRUFBRSxDQUFDO1FBQ3JDLHNCQUFpQixHQUFHLEtBQUssQ0FBQztJQUVWLENBQUM7Ozs7SUFFakIsUUFBUTtRQUNOLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUN6QixDQUFDOzs7Ozs7O0lBRUQsa0JBQWtCLENBQUMsTUFBVyxFQUFFLElBQWUsRUFBRSxjQUF1QixLQUFLO1FBQzNFLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUV4RCxJQUFJLFdBQVcsSUFBSSxJQUFJLENBQUMsZUFBZSxFQUFFO1lBQ3ZDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDN0I7SUFDSCxDQUFDOzs7OztJQUVPLGVBQWU7UUFDckIsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNsQyxNQUFNLElBQUksS0FBSyxDQUFDLGNBQWMsQ0FBQyxDQUFDO1NBQ2pDO1FBRUQsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTzs7OztRQUFDLElBQUksQ0FBQyxFQUFFO1lBQzdCLElBQUksSUFBSSxDQUFDLEVBQUUsS0FBSyxTQUFTLElBQUksSUFBSSxDQUFDLEVBQUUsS0FBSyxJQUFJLEVBQUU7Z0JBQzdDLElBQUksQ0FBQyxFQUFFLEdBQUcsS0FBSyxDQUFDLEVBQUUsRUFBRSxDQUFDO2FBQ3RCO1FBQ0gsQ0FBQyxFQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDcEIsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssSUFBSSxFQUFFLENBQUM7WUFDM0MsSUFBSSxDQUFDLFlBQVksR0FBRyxFQUFFLENBQUM7WUFFdkIsT0FBTztTQUNSO1FBRUQsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUNyRCxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO1lBQ3hHLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDOUYsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO1lBRW5HLE9BQU87U0FDUjtJQUNILENBQUM7OztZQS9ERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFVBQVU7Z0JBQ3BCLCs5Q0FBeUI7Z0JBRXpCLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJOzthQUN0Qzs7Ozs7bUJBS0UsS0FBSztzQkFFTCxLQUFLO3VCQUNMLEtBQUs7NEJBSUwsTUFBTTs4QkFFTixTQUFTLFNBQUMsa0JBQWtCOzs7Ozs7O0lBVDdCLHVCQUFrQzs7Ozs7SUFFbEMsMEJBQWtDOztJQUNsQywyQkFBcUQ7Ozs7OztJQUlyRCxnQ0FBK0U7O0lBRS9FLGtDQUFtRTs7SUFDbkUsK0JBQW9DOztJQUNwQyxnQ0FBcUM7O0lBQ3JDLG9DQUEwQjs7Ozs7O0FBK0M1Qix3Q0FPQzs7O0lBTkMsbUNBQXdCOzs7Ozs7OztJQUt4QixtQ0FBZTs7Ozs7QUFHakIsK0JBU0M7Ozs7OztJQVBDLDBCQUFjOzs7OztJQUVkLHVCQUFxQjs7Ozs7SUFFckIseUJBQXFDOzs7OztJQUVyQywwQkFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgVmlld0VuY2Fwc3VsYXRpb24sIE9uSW5pdCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTnBUb29sdGlwRGlyZWN0aXZlLCBOcFRvb2x0aXBQb3NpdGlvbiB9IGZyb20gJy4uL3Rvb2x0aXAvaW5kZXgnO1xyXG5pbXBvcnQgeyBVdGlscyB9IGZyb20gJy4uL3V0aWxzJztcclxuXHJcbi8qKlxyXG4gKiBrZWJhYue7hOS7tlxyXG4gKiBcclxuICogPGV4YW1wbGUtdXJsPmh0dHBzOi8vc3RhY2tibGl0ei5jb20vZWRpdC9hbmd1bGFyLXZjM3E4aD9lbWJlZD0xJmZpbGU9c3JjL2FwcC9hcHAuY29tcG9uZW50Lmh0bWw8L2V4YW1wbGUtdXJsPlxyXG4gKi9cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiBgbnAta2ViYWJgLFxyXG4gIHRlbXBsYXRlVXJsOiAna2ViYWIuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJ2tlYmFiLnNjc3MnXSxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgTnBLZWJhYiBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIC8qKuS8oOWFpeeahOmcgOimgei/m+ihjOWxleekuueahOaVsOe7hCAgKi9cclxuICBASW5wdXQoKSBkYXRhOiBLZWJhYkNvbXBvbmVudERhdGE7XHJcbiAgLyoq5biD5bGA5qC85byP77yM6buY6K6kZmxleOW4g+WxgCAqL1xyXG4gIEBJbnB1dCgpIGRpc3BsYXk6IHN0cmluZyA9ICdmbGV4JztcclxuICBASW5wdXQoKSBwb3NpdGlvbjogTnBUb29sdGlwUG9zaXRpb24gPSAnYm90dG9tUmlnaHQnO1xyXG4gIC8qKlxyXG4gICAqIOeCueWHu+WNleS4qml0ZW3mjqXmlLbnrKblkIhLZWJhYkl0ZW0g5qC85byP55qE5a+56LGhXHJcbiAgICogICovXHJcbiAgQE91dHB1dCgpIG9uSXRlbUNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPHsgJGV2ZW50OiBhbnksIGl0ZW06IEtlYmFiSXRlbSB9PigpO1xyXG5cclxuICBAVmlld0NoaWxkKE5wVG9vbHRpcERpcmVjdGl2ZSkgZHJvcGRvd25Ub29sdGlwOiBOcFRvb2x0aXBEaXJlY3RpdmU7XHJcbiAgaXRlbXNJbktlYmFiOiBBcnJheTxLZWJhYkl0ZW0+ID0gW107XHJcbiAgaXRlbXNPdXRLZWJhYjogQXJyYXk8S2ViYWJJdGVtPiA9IFtdO1xyXG4gIGlzRHJvcGRvd25WaXNpYmxlID0gZmFsc2U7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5idWlsZEtlYmFiSXRlbXMoKTtcclxuICB9XHJcblxyXG4gIG9uS2ViYWJJdGVtQ2xpY2tlZCgkZXZlbnQ6IGFueSwgaXRlbTogS2ViYWJJdGVtLCBpdGVtSW5LZWJhYjogYm9vbGVhbiA9IGZhbHNlKSB7XHJcbiAgICB0aGlzLm9uSXRlbUNsaWNrZWQuZW1pdCh7ICRldmVudDogJGV2ZW50LCBpdGVtOiBpdGVtIH0pO1xyXG5cclxuICAgIGlmIChpdGVtSW5LZWJhYiAmJiB0aGlzLmRyb3Bkb3duVG9vbHRpcCkge1xyXG4gICAgICB0aGlzLmRyb3Bkb3duVG9vbHRpcC5oaWRlKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIGJ1aWxkS2ViYWJJdGVtcygpIHtcclxuICAgIGlmICghdGhpcy5kYXRhIHx8ICF0aGlzLmRhdGEuaXRlbXMpIHtcclxuICAgICAgdGhyb3cgbmV3IEVycm9yKCdJbnZhbGlkIGRhdGEnKTtcclxuICAgIH1cclxuXHJcbiAgICB0aGlzLmRhdGEuaXRlbXMuZm9yRWFjaChpdGVtID0+IHtcclxuICAgICAgaWYgKGl0ZW0uaWQgPT09IHVuZGVmaW5lZCB8fCBpdGVtLmlkID09PSBudWxsKSB7XHJcbiAgICAgICAgaXRlbS5pZCA9IFV0aWxzLklEKCk7XHJcbiAgICAgIH1cclxuICAgIH0pO1xyXG5cclxuICAgIGlmICghdGhpcy5kYXRhLmxpbWl0KSB7XHJcbiAgICAgIHRoaXMuaXRlbXNPdXRLZWJhYiA9IHRoaXMuZGF0YS5pdGVtcyB8fCBbXTtcclxuICAgICAgdGhpcy5pdGVtc0luS2ViYWIgPSBbXTtcclxuXHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuXHJcbiAgICBpZiAodGhpcy5kYXRhLmxpbWl0ID4gMCAmJiB0aGlzLmRhdGEuaXRlbXMubGVuZ3RoID4gMCkge1xyXG4gICAgICB0aGlzLmRhdGEubGltaXQgPSAodGhpcy5kYXRhLmxpbWl0ID4gdGhpcy5kYXRhLml0ZW1zLmxlbmd0aCkgPyB0aGlzLmRhdGEuaXRlbXMubGVuZ3RoIDogdGhpcy5kYXRhLmxpbWl0O1xyXG4gICAgICB0aGlzLml0ZW1zT3V0S2ViYWIgPSB0aGlzLmRhdGEuaXRlbXMuc2xpY2UoMCwgdGhpcy5kYXRhLml0ZW1zLmxlbmd0aCAtIHRoaXMuZGF0YS5saW1pdCkgfHwgW107XHJcbiAgICAgIHRoaXMuaXRlbXNJbktlYmFiID0gdGhpcy5kYXRhLml0ZW1zLnNsaWNlKHRoaXMuaXRlbXNPdXRLZWJhYi5sZW5ndGgsIHRoaXMuZGF0YS5pdGVtcy5sZW5ndGgpIHx8IFtdO1xyXG5cclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG5cclxuLyoqXHJcbiAqIEBpZ25vcmVcclxuICovXHJcbmV4cG9ydCBpbnRlcmZhY2UgS2ViYWJDb21wb25lbnREYXRhIHtcclxuICBpdGVtczogQXJyYXk8S2ViYWJJdGVtPjtcclxuICAvKipJZiBubyBsaW1pdCBwYXNzZWQgaW4gb3IgMCwgd2hpY2ggbWVhbnMgYWxsIGl0ZW1zIG91dCBvZiBrZWJhYjsgXHJcbiAgICogaWYgbGltaXQgPT09IGl0ZW1zLmxlbmd0aCwgd2hpY2ggbWVhbnMgYWxsIGl0ZW1zIGluIGtlYmFiO1xyXG4gICAqIG90aGVyd2lzZSwgbGltaXQgaXMgdGhlIGNvdW50IGZvciBpdGVtcyBpbiBrZWJhYi5cclxuICAgKiAgKi9cclxuICBsaW1pdD86IG51bWJlcjtcclxufVxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBLZWJhYkl0ZW0ge1xyXG4gIC8qKumhtemdouWxleekuuaWh+ahiO+8jOWtl+espuS4suexu+Wei++8jOWxnuS6juW/heS8oOWPguaVsCAqL1xyXG4gIHZhbHVlOiBzdHJpbmc7XHJcbiAgLyoq5Y+v6Ieq5bex5Lyg5YWl5LiN5ZCM55qEaWTvvIzmlK/mjIHlrZfnrKbkuLLlkozmlbDlrZfvvIzlpoLmnpzkuI3kvKDlhaXvvIzliJnpu5jorqTnlJ/miJDpmo/mnLppZCAqL1xyXG4gIGlkPzogc3RyaW5nIHwgbnVtYmVyO1xyXG4gIC8qKuaUr+aMgeS8oOWFpWBpY29uYCwgYHRleHRgLCBgc2VwYXJhdG9yYCwg6buY6K6kYHRleHRgKi9cclxuICB0eXBlPzogJ3RleHQnIHwgJ2ljb24nIHwgJ3NlcGFyYXRvcic7XHJcbiAgLyoqIOaUr+aMgeS8oOWFpeminOiJsu+8jOmdnuW/heS8oO+8jOS4jeS8oOS9v+eUqOm7mOiupOiJsiAqL1xyXG4gIGNvbG9yPzogc3RyaW5nO1xyXG59XHJcblxyXG5cclxuIl19