ng-devui
Version:
DevUI components based on Angular
273 lines (267 loc) • 34.6 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, TemplateRef, ElementRef, ContentChild, ViewChild, ViewChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'ng-devui/popover';
import { PopoverModule } from 'ng-devui/popover';
import { FormsModule } from '@angular/forms';
class TagComponent {
constructor() {
this.labelStyle = '';
this.customColor = '';
// @deprecated
this.deletable = false;
this.mode = 'default';
this.size = 'md';
this.checked = false;
/**
* tag被删除后触发
*/
this.tagDelete = new EventEmitter();
this.checkedChange = new EventEmitter();
this.deleteTag = false;
this.colorMap = {
'blue-w98': '#3383ff',
'aqua-w98': '#39afcc',
'olivine-w98': '#2fa898',
'green-w98': '#4eb15e',
'yellow-w98': '#b08d1a',
'orange-w98': '#d47f35',
'red-w98': '#f66f6a',
'pink-w98': '#f3689a',
'purple-w98': '#a97af8',
};
}
get isColorfulTag() {
return !!(this.colorMap[this.labelStyle] || (this.customColor && this.customColor !== ''));
}
ngOnChanges(changes) {
const { tag } = changes;
if (tag) {
this.currentTag = typeof this.tag === 'string' ? this.tag : '';
}
}
removeTag($event, tag) {
this.canDeleteTag(tag).then((canDelete) => {
if (!canDelete) {
return;
}
this.deleteTag = true;
this.tagDelete.emit({ tag: tag, event: $event });
});
}
tagClick() {
if (this.mode === 'checkable') {
this.checked = !this.checked;
this.checkedChange.emit(this.checked);
}
}
canDeleteTag(tag) {
let closeResult = Promise.resolve(true);
if (this.beforeDelete) {
const result = this.beforeDelete(tag);
if (typeof result !== 'undefined') {
if (result.then) {
closeResult = result;
}
else if (result.subscribe) {
closeResult = result.toPromise();
}
else {
closeResult = Promise.resolve(result);
}
}
}
return closeResult;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TagComponent, selector: "d-tag", inputs: { tag: "tag", labelStyle: "labelStyle", customColor: "customColor", deletable: "deletable", titleContent: "titleContent", mode: "mode", size: "size", checked: "checked", maxWidth: "maxWidth", customViewTemplate: "customViewTemplate", beforeDelete: "beforeDelete" }, outputs: { tagDelete: "tagDelete", checkedChange: "checkedChange" }, exportAs: ["Tag"], usesOnChanges: true, ngImport: i0, template: "<span\r\n class=\"devui-tag-item {{ size }}-size {{ labelStyle }}\"\r\n [style.display]=\"deleteTag ? 'none' : 'block'\"\r\n [ngClass]=\"{\r\n 'devui-colorful-tag': isColorfulTag,\r\n 'devui-selected-tag': checked,\r\n 'devui-deletable-tag': mode === 'closeable' || deletable,\r\n 'devui-checkable-tag': mode === 'checkable'\r\n }\"\r\n [ngStyle]=\"{\r\n 'border-color': customColor,\r\n 'background-color': isColorfulTag ? (checked ? customColor : '') : '',\r\n color: isColorfulTag ? (checked ? '#fff' : customColor) : '',\r\n cursor: this.mode === 'checkable' ? 'pointer' : ''\r\n }\"\r\n title=\"{{ titleContent ? titleContent : currentTag }}\"\r\n (click)=\"tagClick()\"\r\n>\r\n <div class=\"content-wrapper\" [ngStyle]=\"{ 'background-color': colorMap[labelStyle] || customColor }\"></div>\r\n <span *ngIf=\"!customViewTemplate\" [class.devui-max-width-tag]=\"maxWidth\" [style.maxWidth]=\"maxWidth || ''\">{{ currentTag }}</span>\r\n <ng-template *ngIf=\"customViewTemplate\" [ngTemplateOutlet]=\"customViewTemplate\" [ngTemplateOutletContext]=\"{ tag: tag }\"></ng-template>\r\n <a class=\"remove-button\" *ngIf=\"mode === 'closeable' || deletable\" (click)=\"removeTag($event, tag)\">\r\n <svg viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g transform=\"translate(3.000000, 3.000000)\" fill=\"#71757F\" fill-rule=\"nonzero\">\r\n <path\r\n [ngStyle]=\"{ fill: isColorfulTag ? (checked ? '#fff' : customColor) : '' }\"\r\n d=\"M-0.353553391,-0.353553391 C-0.179987039,-0.527119742 0.0894373624,-0.546404893 0.284305503,-0.411408841 L0.353553391,-0.353553391 L10.3535534,9.64644661 C10.5488155,9.84170876 10.5488155,10.1582912 10.3535534,10.3535534 C10.179987,10.5271197 9.91056264,10.5464049 9.7156945,10.4114088 L9.64644661,10.3535534 L-0.353553391,0.353553391 C-0.548815536,0.158291245 -0.548815536,-0.158291245 -0.353553391,-0.353553391 Z\"\r\n ></path>\r\n <path\r\n [ngStyle]=\"{ fill: isColorfulTag ? (checked ? '#fff' : customColor) : '' }\"\r\n d=\"M9.64644661,-0.353553391 C9.84170876,-0.548815536 10.1582912,-0.548815536 10.3535534,-0.353553391 C10.5271197,-0.179987039 10.5464049,0.0894373624 10.4114088,0.284305503 L10.3535534,0.353553391 L0.353553391,10.3535534 C0.158291245,10.5488155 -0.158291245,10.5488155 -0.353553391,10.3535534 C-0.527119742,10.179987 -0.546404893,9.91056264 -0.411408841,9.7156945 L-0.353553391,9.64644661 L9.64644661,-0.353553391 Z\"\r\n ></path>\r\n </g>\r\n </g>\r\n </svg>\r\n </a>\r\n</span>\r\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host{display:inline-block;position:relative}.devui-tag-item{padding:0 8px;min-height:20px;font-size:var(--devui-font-size, 12px);line-height:20px;color:var(--devui-aide-text, #595959);background-color:var(--devui-label-bg, #f0f0f0);border-radius:var(--devui-border-radius, 2px);border-width:0;border-style:solid;border-color:inherit;display:block;align-items:center;position:relative;cursor:default}.devui-tag-item.lg-size{min-height:24px;line-height:22px}.devui-tag-item .content-wrapper{pointer-events:none;position:absolute;width:100%;height:100%;border:1px solid transparent;top:0;left:0;opacity:0}.devui-tag-item span{vertical-align:0}.devui-tag-item:hover:not(.devui-colorful-tag):not(.devui-selected-tag).devui-checkable-tag{color:var(--devui-aide-text-hover, #000000)}.devui-tag-item:hover:not(.devui-colorful-tag):not(.devui-selected-tag).devui-checkable-tag .remove-button svg path{fill:var(--devui-brand-hover, #3979f9)}.devui-tag-item:hover.devui-checkable-tag .content-wrapper{opacity:.08}.devui-tag-item.devui-selected-tag{color:var(--devui-aide-text-hover, #000000)}.devui-tag-item.devui-selected-tag .remove-button svg path{fill:var(--devui-brand-active, #0950de)}.devui-tag-item .remove-button{margin-left:12px;font-size:var(--devui-font-size-icon, 16px);cursor:pointer;width:12px;height:12px;line-height:12px;display:inline-block;text-align:center;position:absolute;top:50%;transform:translateY(-50%)}.devui-tag-item .remove-button svg path{fill:var(--devui-icon-fill, #595959)}.devui-deletable-tag{padding-right:32px}.devui-colorful-tag{height:18px;line-height:18px;border-width:1px;background-color:var(--devui-base-bg, #ffffff)}.lg-size .devui-colorful-tag{height:22px;line-height:22px}.blue-w98{color:#0b81f6;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#0b81f6}.blue-w98 .remove-button svg path{fill:#0b81f6}.blue-w98.devui-selected-tag{background-color:#0b81f6}.aqua-w98{color:#39afcc;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#39afcc}.aqua-w98 .remove-button svg path{fill:#39afcc}.aqua-w98.devui-selected-tag{background-color:#39afcc}.olivine-w98{color:#2fa898;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#2fa898}.olivine-w98 .remove-button svg path{fill:#2fa898}.olivine-w98.devui-selected-tag{background-color:#2fa898}.green-w98{color:#4eb15e;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#4eb15e}.green-w98 .remove-button svg path{fill:#4eb15e}.green-w98.devui-selected-tag{background-color:#4eb15e}.yellow-w98{color:#b08d1a;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#b08d1a}.yellow-w98 .remove-button svg path{fill:#b08d1a}.yellow-w98.devui-selected-tag{background-color:#b08d1a}.orange-w98{color:#d47f35;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#d47f35}.orange-w98 .remove-button svg path{fill:#d47f35}.orange-w98.devui-selected-tag{background-color:#d47f35}.red-w98{color:#e05a46;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#e05a46}.red-w98 .remove-button svg path{fill:#e05a46}.red-w98.devui-selected-tag{background-color:#e05a46}.pink-w98{color:#f3689a;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#f3689a}.pink-w98 .remove-button svg path{fill:#f3689a}.pink-w98.devui-selected-tag{background-color:#f3689a}.purple-w98{color:#b05bc1;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#b05bc1}.purple-w98 .remove-button svg path{fill:#b05bc1}.purple-w98.devui-selected-tag{background-color:#b05bc1}.devui-selected-tag.devui-colorful-tag{color:var(--devui-base-bg, #ffffff)}.devui-selected-tag.devui-colorful-tag .remove-button svg path{fill:var(--devui-base-bg, #ffffff)}.remove-button svg{vertical-align:text-top}.devui-tag-item.devui-checkable-tag{transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-tag-item.devui-checkable-tag .content-wrapper{transition:opacity var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-tag-item.devui-checkable-tag .remove-button svg path{transition:fill var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-max-width-tag{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagComponent, decorators: [{
type: Component,
args: [{ selector: 'd-tag', exportAs: 'Tag', preserveWhitespaces: false, template: "<span\r\n class=\"devui-tag-item {{ size }}-size {{ labelStyle }}\"\r\n [style.display]=\"deleteTag ? 'none' : 'block'\"\r\n [ngClass]=\"{\r\n 'devui-colorful-tag': isColorfulTag,\r\n 'devui-selected-tag': checked,\r\n 'devui-deletable-tag': mode === 'closeable' || deletable,\r\n 'devui-checkable-tag': mode === 'checkable'\r\n }\"\r\n [ngStyle]=\"{\r\n 'border-color': customColor,\r\n 'background-color': isColorfulTag ? (checked ? customColor : '') : '',\r\n color: isColorfulTag ? (checked ? '#fff' : customColor) : '',\r\n cursor: this.mode === 'checkable' ? 'pointer' : ''\r\n }\"\r\n title=\"{{ titleContent ? titleContent : currentTag }}\"\r\n (click)=\"tagClick()\"\r\n>\r\n <div class=\"content-wrapper\" [ngStyle]=\"{ 'background-color': colorMap[labelStyle] || customColor }\"></div>\r\n <span *ngIf=\"!customViewTemplate\" [class.devui-max-width-tag]=\"maxWidth\" [style.maxWidth]=\"maxWidth || ''\">{{ currentTag }}</span>\r\n <ng-template *ngIf=\"customViewTemplate\" [ngTemplateOutlet]=\"customViewTemplate\" [ngTemplateOutletContext]=\"{ tag: tag }\"></ng-template>\r\n <a class=\"remove-button\" *ngIf=\"mode === 'closeable' || deletable\" (click)=\"removeTag($event, tag)\">\r\n <svg viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g transform=\"translate(3.000000, 3.000000)\" fill=\"#71757F\" fill-rule=\"nonzero\">\r\n <path\r\n [ngStyle]=\"{ fill: isColorfulTag ? (checked ? '#fff' : customColor) : '' }\"\r\n d=\"M-0.353553391,-0.353553391 C-0.179987039,-0.527119742 0.0894373624,-0.546404893 0.284305503,-0.411408841 L0.353553391,-0.353553391 L10.3535534,9.64644661 C10.5488155,9.84170876 10.5488155,10.1582912 10.3535534,10.3535534 C10.179987,10.5271197 9.91056264,10.5464049 9.7156945,10.4114088 L9.64644661,10.3535534 L-0.353553391,0.353553391 C-0.548815536,0.158291245 -0.548815536,-0.158291245 -0.353553391,-0.353553391 Z\"\r\n ></path>\r\n <path\r\n [ngStyle]=\"{ fill: isColorfulTag ? (checked ? '#fff' : customColor) : '' }\"\r\n d=\"M9.64644661,-0.353553391 C9.84170876,-0.548815536 10.1582912,-0.548815536 10.3535534,-0.353553391 C10.5271197,-0.179987039 10.5464049,0.0894373624 10.4114088,0.284305503 L10.3535534,0.353553391 L0.353553391,10.3535534 C0.158291245,10.5488155 -0.158291245,10.5488155 -0.353553391,10.3535534 C-0.527119742,10.179987 -0.546404893,9.91056264 -0.411408841,9.7156945 L-0.353553391,9.64644661 L9.64644661,-0.353553391 Z\"\r\n ></path>\r\n </g>\r\n </g>\r\n </svg>\r\n </a>\r\n</span>\r\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host{display:inline-block;position:relative}.devui-tag-item{padding:0 8px;min-height:20px;font-size:var(--devui-font-size, 12px);line-height:20px;color:var(--devui-aide-text, #595959);background-color:var(--devui-label-bg, #f0f0f0);border-radius:var(--devui-border-radius, 2px);border-width:0;border-style:solid;border-color:inherit;display:block;align-items:center;position:relative;cursor:default}.devui-tag-item.lg-size{min-height:24px;line-height:22px}.devui-tag-item .content-wrapper{pointer-events:none;position:absolute;width:100%;height:100%;border:1px solid transparent;top:0;left:0;opacity:0}.devui-tag-item span{vertical-align:0}.devui-tag-item:hover:not(.devui-colorful-tag):not(.devui-selected-tag).devui-checkable-tag{color:var(--devui-aide-text-hover, #000000)}.devui-tag-item:hover:not(.devui-colorful-tag):not(.devui-selected-tag).devui-checkable-tag .remove-button svg path{fill:var(--devui-brand-hover, #3979f9)}.devui-tag-item:hover.devui-checkable-tag .content-wrapper{opacity:.08}.devui-tag-item.devui-selected-tag{color:var(--devui-aide-text-hover, #000000)}.devui-tag-item.devui-selected-tag .remove-button svg path{fill:var(--devui-brand-active, #0950de)}.devui-tag-item .remove-button{margin-left:12px;font-size:var(--devui-font-size-icon, 16px);cursor:pointer;width:12px;height:12px;line-height:12px;display:inline-block;text-align:center;position:absolute;top:50%;transform:translateY(-50%)}.devui-tag-item .remove-button svg path{fill:var(--devui-icon-fill, #595959)}.devui-deletable-tag{padding-right:32px}.devui-colorful-tag{height:18px;line-height:18px;border-width:1px;background-color:var(--devui-base-bg, #ffffff)}.lg-size .devui-colorful-tag{height:22px;line-height:22px}.blue-w98{color:#0b81f6;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#0b81f6}.blue-w98 .remove-button svg path{fill:#0b81f6}.blue-w98.devui-selected-tag{background-color:#0b81f6}.aqua-w98{color:#39afcc;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#39afcc}.aqua-w98 .remove-button svg path{fill:#39afcc}.aqua-w98.devui-selected-tag{background-color:#39afcc}.olivine-w98{color:#2fa898;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#2fa898}.olivine-w98 .remove-button svg path{fill:#2fa898}.olivine-w98.devui-selected-tag{background-color:#2fa898}.green-w98{color:#4eb15e;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#4eb15e}.green-w98 .remove-button svg path{fill:#4eb15e}.green-w98.devui-selected-tag{background-color:#4eb15e}.yellow-w98{color:#b08d1a;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#b08d1a}.yellow-w98 .remove-button svg path{fill:#b08d1a}.yellow-w98.devui-selected-tag{background-color:#b08d1a}.orange-w98{color:#d47f35;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#d47f35}.orange-w98 .remove-button svg path{fill:#d47f35}.orange-w98.devui-selected-tag{background-color:#d47f35}.red-w98{color:#e05a46;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#e05a46}.red-w98 .remove-button svg path{fill:#e05a46}.red-w98.devui-selected-tag{background-color:#e05a46}.pink-w98{color:#f3689a;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#f3689a}.pink-w98 .remove-button svg path{fill:#f3689a}.pink-w98.devui-selected-tag{background-color:#f3689a}.purple-w98{color:#b05bc1;background-color:var(--devui-base-bg, #ffffff);border-width:1px;border-color:#b05bc1}.purple-w98 .remove-button svg path{fill:#b05bc1}.purple-w98.devui-selected-tag{background-color:#b05bc1}.devui-selected-tag.devui-colorful-tag{color:var(--devui-base-bg, #ffffff)}.devui-selected-tag.devui-colorful-tag .remove-button svg path{fill:var(--devui-base-bg, #ffffff)}.remove-button svg{vertical-align:text-top}.devui-tag-item.devui-checkable-tag{transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-tag-item.devui-checkable-tag .content-wrapper{transition:opacity var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-tag-item.devui-checkable-tag .remove-button svg path{transition:fill var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-max-width-tag{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
}], propDecorators: { tag: [{
type: Input
}], labelStyle: [{
type: Input
}], customColor: [{
type: Input
}], deletable: [{
type: Input
}], titleContent: [{
type: Input
}], mode: [{
type: Input
}], size: [{
type: Input
}], checked: [{
type: Input
}], maxWidth: [{
type: Input
}], customViewTemplate: [{
type: Input
}], beforeDelete: [{
type: Input
}], tagDelete: [{
type: Output
}], checkedChange: [{
type: Output
}] } });
class TagsComponent {
constructor(cdr) {
this.cdr = cdr;
/**
* 【必选】记录输入的标签
*/
this.tags = [];
/**
* 【可选】使用的属性名
*/
this.displayProperty = '';
/**
* @deprecated
*/
this.deletable = false;
this.mode = 'default';
this.size = 'md';
this.titleProperty = '';
this.hideBeyondTags = false;
/**
* tag被删除后触发
*/
this.tagDelete = new EventEmitter();
this.checkedChange = new EventEmitter();
/**
* 多标签超出显示相关数据
*/
this.showTags = [];
this.beyondTags = [];
this.showMore = false;
this.MORE_TAG_WIDTH = 30;
this.TAG_MARGIN = 4;
}
ngOnInit() {
this.maxShowNumber = 0;
// TODO: 使用cloneDeep导致category-search卡顿，lodash-es报Illegal invocation非法调用错误，需调查原因，暂用循环方式替代深拷贝
if (this.hideBeyondTags) {
this.tags.forEach((item) => this.showTags.push(typeof item === 'object' ? { ...item } : item));
}
}
ngAfterViewInit() {
if (this.hideBeyondTags) {
this.calculateHideTagsStatus();
}
}
ngOnChanges(changes) {
if (this.hideBeyondTags && changes.tags && !changes.tags.firstChange) {
this.maxShowNumber = 0;
this.showTags = [...this.tags];
this.calculateHideTagsStatus();
}
}
calculateHideTagsStatus() {
this.cdr.detectChanges();
let curWidth = 0;
const viewChildrenArr = this.viewChildren.toArray();
// 通过suffix添加ng-content至tags末尾，判断总宽度时不计算该部分，使得百分比宽度场景tags后可添加内容
const suffixWidth = this.suffixElement?.nativeElement.offsetWidth || 0;
this.tagsFatherWidth = this.tagsElement.nativeElement.getBoundingClientRect().width - suffixWidth;
for (let i = 0; i < viewChildrenArr.length; i++) {
if (curWidth + viewChildrenArr[i].nativeElement.offsetWidth + this.TAG_MARGIN < this.tagsFatherWidth - this.MORE_TAG_WIDTH) {
curWidth += viewChildrenArr[i].nativeElement.offsetWidth;
curWidth += this.TAG_MARGIN;
this.maxShowNumber = i + 1;
}
else {
break;
}
}
if (this.maxShowNumber !== this.tags.length) {
this.showMore = true;
this.beyondTags = this.showTags.slice(this.maxShowNumber);
this.showTags.splice(this.maxShowNumber);
this.cdr.detectChanges();
}
else {
this.showMore = false;
}
}
removeTag($event, tag, index) {
this.tagDelete.emit({ tag: tag, index: index, event: $event });
}
tagChecked($event, tag, index) {
this.checkedChange.emit({ tag: tag, index: index, checked: $event });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TagsComponent, selector: "d-tags", inputs: { tags: "tags", displayProperty: "displayProperty", deletable: "deletable", mode: "mode", size: "size", titleProperty: "titleProperty", hideBeyondTags: "hideBeyondTags", beforeDelete: "beforeDelete" }, outputs: { tagDelete: "tagDelete", checkedChange: "checkedChange" }, queries: [{ propertyName: "customViewTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "suffixElement", first: true, predicate: ["suffixElement"], descendants: true }, { propertyName: "tagsElement", first: true, predicate: ["tagsElement"], descendants: true }, { propertyName: "viewChildren", predicate: ["tagElement"], descendants: true, read: ElementRef }], exportAs: ["Tags"], usesOnChanges: true, ngImport: i0, template: "<div class=\"devui-tags\" #tagsElement>\r\n <d-tag\r\n #tagElement\r\n *ngFor=\"let tag of hideBeyondTags ? showTags : tags; let index = index\"\r\n [tag]=\"displayProperty ? tag[displayProperty] : tag\"\r\n [mode]=\"mode\"\r\n [size]=\"size\"\r\n [deletable]=\"deletable\"\r\n [checked]=\"tag['checked']\"\r\n [labelStyle]=\"tag['labelStyle']\"\r\n [customColor]=\"tag['customColor']\"\r\n [titleContent]=\"titleProperty ? tag[titleProperty] : displayProperty ? tag[displayProperty] : tag\"\r\n [customViewTemplate]=\"customViewTemplate\"\r\n [beforeDelete]=\"beforeDelete\"\r\n (tagDelete)=\"removeTag($event, tag, index)\"\r\n (checkedChange)=\"tagChecked($event, tag, index)\"\r\n >\r\n </d-tag>\r\n <d-tag\r\n class=\"show-more-tag\"\r\n *ngIf=\"hideBeyondTags && showMore\"\r\n dPopover\r\n [content]=\"beyondTagsTpl\"\r\n [controlled]=\"true\"\r\n [trigger]=\"'hover'\"\r\n [tag]=\"'+ ' + beyondTags.length\"\r\n [mode]=\"'checkable'\"\r\n [size]=\"size\"\r\n [popoverStyle]=\"{ backgroundColor: 'var(--devui-base-bg)' }\"\r\n ></d-tag>\r\n <div #suffixElement class=\"devui-tags-suffix\">\r\n <ng-content select=\"[suffix]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<ng-template #beyondTagsTpl>\r\n <div class=\"beyond-tags-wrapper\">\r\n <d-tag\r\n class=\"beyond-tag-style\"\r\n *ngFor=\"let tag of beyondTags; let index = index\"\r\n [tag]=\"displayProperty ? tag[displayProperty] : tag\"\r\n [mode]=\"mode\"\r\n [size]=\"size\"\r\n [deletable]=\"deletable\"\r\n [checked]=\"tag['checked']\"\r\n [labelStyle]=\"tag['labelStyle']\"\r\n [customColor]=\"tag['customColor']\"\r\n [titleContent]=\"titleProperty ? tag[titleProperty] : displayProperty ? tag[displayProperty] : tag\"\r\n [customViewTemplate]=\"customViewTemplate\"\r\n [beforeDelete]=\"beforeDelete\"\r\n (tagDelete)=\"removeTag($event, tag, index)\"\r\n (checkedChange)=\"tagChecked($event, tag, index)\"\r\n >\r\n </d-tag>\r\n </div>\r\n</ng-template>\r\n", styles: [".devui-tags{overflow:hidden;word-wrap:break-word;height:100%;line-height:24px}.devui-tags-suffix{width:min-content;display:none}.devui-tags-suffix:not(:empty){display:inline-block}.beyond-tags-wrapper{max-width:300px;margin-top:8px;max-height:300px;overflow:auto}.beyond-tags-wrapper .beyond-tag-style{margin-bottom:8px}.beyond-tags-wrapper d-tag:not(:last-of-type){margin-right:8px}d-tag:not(:last-of-type){margin-right:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.PopoverDirective, selector: "[dPopover]", inputs: ["content", "controlled", "position", "showAnimation", "showAnimate", "scrollElement", "autoHideCoefficient", "appendToBody", "zIndex", "popType", "popMaxWidth", "trigger", "hoverToContent", "hoverDelayTime", "popoverStyle", "mouseEnterDelay", "mouseLeaveDelay", "visible"], exportAs: ["dPopover"] }, { kind: "component", type: TagComponent, selector: "d-tag", inputs: ["tag", "labelStyle", "customColor", "deletable", "titleContent", "mode", "size", "checked", "maxWidth", "customViewTemplate", "beforeDelete"], outputs: ["tagDelete", "checkedChange"], exportAs: ["Tag"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagsComponent, decorators: [{
type: Component,
args: [{ selector: 'd-tags', exportAs: 'Tags', preserveWhitespaces: false, template: "<div class=\"devui-tags\" #tagsElement>\r\n <d-tag\r\n #tagElement\r\n *ngFor=\"let tag of hideBeyondTags ? showTags : tags; let index = index\"\r\n [tag]=\"displayProperty ? tag[displayProperty] : tag\"\r\n [mode]=\"mode\"\r\n [size]=\"size\"\r\n [deletable]=\"deletable\"\r\n [checked]=\"tag['checked']\"\r\n [labelStyle]=\"tag['labelStyle']\"\r\n [customColor]=\"tag['customColor']\"\r\n [titleContent]=\"titleProperty ? tag[titleProperty] : displayProperty ? tag[displayProperty] : tag\"\r\n [customViewTemplate]=\"customViewTemplate\"\r\n [beforeDelete]=\"beforeDelete\"\r\n (tagDelete)=\"removeTag($event, tag, index)\"\r\n (checkedChange)=\"tagChecked($event, tag, index)\"\r\n >\r\n </d-tag>\r\n <d-tag\r\n class=\"show-more-tag\"\r\n *ngIf=\"hideBeyondTags && showMore\"\r\n dPopover\r\n [content]=\"beyondTagsTpl\"\r\n [controlled]=\"true\"\r\n [trigger]=\"'hover'\"\r\n [tag]=\"'+ ' + beyondTags.length\"\r\n [mode]=\"'checkable'\"\r\n [size]=\"size\"\r\n [popoverStyle]=\"{ backgroundColor: 'var(--devui-base-bg)' }\"\r\n ></d-tag>\r\n <div #suffixElement class=\"devui-tags-suffix\">\r\n <ng-content select=\"[suffix]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<ng-template #beyondTagsTpl>\r\n <div class=\"beyond-tags-wrapper\">\r\n <d-tag\r\n class=\"beyond-tag-style\"\r\n *ngFor=\"let tag of beyondTags; let index = index\"\r\n [tag]=\"displayProperty ? tag[displayProperty] : tag\"\r\n [mode]=\"mode\"\r\n [size]=\"size\"\r\n [deletable]=\"deletable\"\r\n [checked]=\"tag['checked']\"\r\n [labelStyle]=\"tag['labelStyle']\"\r\n [customColor]=\"tag['customColor']\"\r\n [titleContent]=\"titleProperty ? tag[titleProperty] : displayProperty ? tag[displayProperty] : tag\"\r\n [customViewTemplate]=\"customViewTemplate\"\r\n [beforeDelete]=\"beforeDelete\"\r\n (tagDelete)=\"removeTag($event, tag, index)\"\r\n (checkedChange)=\"tagChecked($event, tag, index)\"\r\n >\r\n </d-tag>\r\n </div>\r\n</ng-template>\r\n", styles: [".devui-tags{overflow:hidden;word-wrap:break-word;height:100%;line-height:24px}.devui-tags-suffix{width:min-content;display:none}.devui-tags-suffix:not(:empty){display:inline-block}.beyond-tags-wrapper{max-width:300px;margin-top:8px;max-height:300px;overflow:auto}.beyond-tags-wrapper .beyond-tag-style{margin-bottom:8px}.beyond-tags-wrapper d-tag:not(:last-of-type){margin-right:8px}d-tag:not(:last-of-type){margin-right:4px}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tags: [{
type: Input
}], displayProperty: [{
type: Input
}], deletable: [{
type: Input
}], mode: [{
type: Input
}], size: [{
type: Input
}], titleProperty: [{
type: Input
}], hideBeyondTags: [{
type: Input
}], beforeDelete: [{
type: Input
}], customViewTemplate: [{
type: ContentChild,
args: [TemplateRef]
}], suffixElement: [{
type: ViewChild,
args: ['suffixElement']
}], tagsElement: [{
type: ViewChild,
args: ['tagsElement']
}], viewChildren: [{
type: ViewChildren,
args: ['tagElement', { read: ElementRef }]
}], tagDelete: [{
type: Output
}], checkedChange: [{
type: Output
}] } });
class TagsModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TagsModule, declarations: [TagsComponent,
TagComponent], imports: [CommonModule,
FormsModule,
PopoverModule], exports: [TagsComponent,
TagComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagsModule, imports: [CommonModule,
FormsModule,
PopoverModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagsModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
FormsModule,
PopoverModule
],
exports: [
TagsComponent,
TagComponent
],
declarations: [
TagsComponent,
TagComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TagComponent, TagsComponent, TagsModule };
//# sourceMappingURL=ng-devui-tags.mjs.map