ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
90 lines • 11 kB
JavaScript
import { Component, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "ng-zorro-antd-mobile/icon";
export class TagComponent {
get small() {
return this._small;
}
set small(v) {
this._small = v;
this.setClassMap();
}
get closable() {
return this._closable;
}
set closable(v) {
this._closable = v;
this.setClassMap();
}
set selected(v) {
this._selected = v;
this.setClassMap();
}
get disabled() {
return this._disabled;
}
set disabled(v) {
this._disabled = v;
this.setClassMap();
}
constructor() {
this.prefixCls = 'am-tag';
this.closed = false;
this.wrapCls = {};
this._small = false;
this._closable = false;
this._selected = false;
this._disabled = false;
this.onChange = new EventEmitter();
this.onClose = new EventEmitter();
this.afterClose = new EventEmitter();
}
onClick() {
if (this._disabled) {
return;
}
this._selected = !this._selected;
this.onChange.emit(this._selected);
this.setClassMap();
}
onTagClose() {
this.onClose.emit();
this.closed = true;
this.afterClose.emit();
}
setClassMap() {
this.wrapCls = {
[this.prefixCls]: true,
[`${this.prefixCls}-normal`]: !this._disabled && (!this._selected || this._small || this._closable),
[`${this.prefixCls}-small`]: this._small,
[`${this.prefixCls}-active`]: this._selected && !this._disabled && !this._small && !this._closable,
[`${this.prefixCls}-disabled`]: this._disabled,
[`${this.prefixCls}-closable`]: this._closable
};
}
ngOnInit() {
this.setClassMap();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TagComponent, selector: "Tag, nzm-tag", inputs: { small: "small", closable: "closable", selected: "selected", disabled: "disabled" }, outputs: { onChange: "onChange", onClose: "onClose", afterClose: "afterClose" }, ngImport: i0, template: "<div *ngIf=\"!closed\" [ngClass]=\"wrapCls\" (click)=\"onClick()\">\n <div class=\"{{ prefixCls }}-text\">\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"closable && !disabled && !small\"\n role=\"button\"\n class=\"{{ prefixCls }}-close\"\n aria-label=\"remove tag\"\n (click)=\"onTagClose()\"\n >\n <Icon aria-hidden=\"true\" [type]=\"'cross-circle'\" [size]=\"'xs'\"></Icon>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "Icon, nzm-icon", inputs: ["color", "type", "src", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TagComponent, decorators: [{
type: Component,
args: [{ selector: 'Tag, nzm-tag', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"!closed\" [ngClass]=\"wrapCls\" (click)=\"onClick()\">\n <div class=\"{{ prefixCls }}-text\">\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"closable && !disabled && !small\"\n role=\"button\"\n class=\"{{ prefixCls }}-close\"\n aria-label=\"remove tag\"\n (click)=\"onTagClose()\"\n >\n <Icon aria-hidden=\"true\" [type]=\"'cross-circle'\" [size]=\"'xs'\"></Icon>\n </div>\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { small: [{
type: Input
}], closable: [{
type: Input
}], selected: [{
type: Input
}], disabled: [{
type: Input
}], onChange: [{
type: Output
}], onClose: [{
type: Output
}], afterClose: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvdGFnL3RhZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi9jb21wb25lbnRzL3RhZy90YWcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxpQkFBaUIsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQU9sRyxNQUFNLE9BQU8sWUFBWTtJQVV2QixJQUNJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQUNELElBQUksS0FBSyxDQUFDLENBQUM7UUFDVCxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztRQUNoQixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUNELElBQ0ksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUN4QixDQUFDO0lBQ0QsSUFBSSxRQUFRLENBQUMsQ0FBQztRQUNaLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxDQUFDO1FBQ25CLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBQ0QsSUFDSSxRQUFRLENBQUMsQ0FBQztRQUNaLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxDQUFDO1FBQ25CLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBQ0QsSUFDSSxRQUFRO1FBQ1YsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3hCLENBQUM7SUFDRCxJQUFJLFFBQVEsQ0FBQyxDQUFDO1FBQ1osSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLENBQUM7UUFDbkIsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFRRDtRQTdDQSxjQUFTLEdBQVcsUUFBUSxDQUFDO1FBQzdCLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFDeEIsWUFBTyxHQUFRLEVBQUUsQ0FBQztRQUVWLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFDeEIsY0FBUyxHQUFZLEtBQUssQ0FBQztRQUMzQixjQUFTLEdBQVksS0FBSyxDQUFDO1FBQzNCLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFnQ25DLGFBQVEsR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUV0RCxZQUFPLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7UUFFckQsZUFBVSxHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDO0lBRXpDLENBQUM7SUFFaEIsT0FBTztRQUNMLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNsQixPQUFPO1NBQ1I7UUFDRCxJQUFJLENBQUMsU0FBUyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQztRQUNqQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDbkMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNwQixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztRQUNuQixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLE9BQU8sR0FBRztZQUNiLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxFQUFFLElBQUk7WUFDdEIsQ0FBQyxHQUFHLElBQUksQ0FBQyxTQUFTLFNBQVMsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLFNBQVMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUM7WUFDbkcsQ0FBQyxHQUFHLElBQUksQ0FBQyxTQUFTLFFBQVEsQ0FBQyxFQUFFLElBQUksQ0FBQyxNQUFNO1lBQ3hDLENBQUMsR0FBRyxJQUFJLENBQUMsU0FBUyxTQUFTLENBQUMsRUFBRSxJQUFJLENBQUMsU0FBUyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUztZQUNsRyxDQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsV0FBVyxDQUFDLEVBQUUsSUFBSSxDQUFDLFNBQVM7WUFDOUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxTQUFTLFdBQVcsQ0FBQyxFQUFFLElBQUksQ0FBQyxTQUFTO1NBQy9DLENBQUM7SUFDSixDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDOzhHQTVFVSxZQUFZO2tHQUFaLFlBQVksbU9DUHpCLCthQWNBOzsyRkRQYSxZQUFZO2tCQUx4QixTQUFTOytCQUNFLGNBQWMsaUJBRVQsaUJBQWlCLENBQUMsSUFBSTt3REFhakMsS0FBSztzQkFEUixLQUFLO2dCQVNGLFFBQVE7c0JBRFgsS0FBSztnQkFTRixRQUFRO3NCQURYLEtBQUs7Z0JBTUYsUUFBUTtzQkFEWCxLQUFLO2dCQVNOLFFBQVE7c0JBRFAsTUFBTTtnQkFHUCxPQUFPO3NCQUROLE1BQU07Z0JBR1AsVUFBVTtzQkFEVCxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIFZpZXdFbmNhcHN1bGF0aW9uLCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnVGFnLCBuem0tdGFnJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RhZy5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmVcbn0pXG5leHBvcnQgY2xhc3MgVGFnQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgcHJlZml4Q2xzOiBzdHJpbmcgPSAnYW0tdGFnJztcbiAgY2xvc2VkOiBib29sZWFuID0gZmFsc2U7XG4gIHdyYXBDbHM6IGFueSA9IHt9O1xuXG4gIHByaXZhdGUgX3NtYWxsOiBib29sZWFuID0gZmFsc2U7XG4gIHByaXZhdGUgX2Nsb3NhYmxlOiBib29sZWFuID0gZmFsc2U7XG4gIHByaXZhdGUgX3NlbGVjdGVkOiBib29sZWFuID0gZmFsc2U7XG4gIHByaXZhdGUgX2Rpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgZ2V0IHNtYWxsKCkge1xuICAgIHJldHVybiB0aGlzLl9zbWFsbDtcbiAgfVxuICBzZXQgc21hbGwodikge1xuICAgIHRoaXMuX3NtYWxsID0gdjtcbiAgICB0aGlzLnNldENsYXNzTWFwKCk7XG4gIH1cbiAgQElucHV0KClcbiAgZ2V0IGNsb3NhYmxlKCkge1xuICAgIHJldHVybiB0aGlzLl9jbG9zYWJsZTtcbiAgfVxuICBzZXQgY2xvc2FibGUodikge1xuICAgIHRoaXMuX2Nsb3NhYmxlID0gdjtcbiAgICB0aGlzLnNldENsYXNzTWFwKCk7XG4gIH1cbiAgQElucHV0KClcbiAgc2V0IHNlbGVjdGVkKHYpIHtcbiAgICB0aGlzLl9zZWxlY3RlZCA9IHY7XG4gICAgdGhpcy5zZXRDbGFzc01hcCgpO1xuICB9XG4gIEBJbnB1dCgpXG4gIGdldCBkaXNhYmxlZCgpIHtcbiAgICByZXR1cm4gdGhpcy5fZGlzYWJsZWQ7XG4gIH1cbiAgc2V0IGRpc2FibGVkKHYpIHtcbiAgICB0aGlzLl9kaXNhYmxlZCA9IHY7XG4gICAgdGhpcy5zZXRDbGFzc01hcCgpO1xuICB9XG4gIEBPdXRwdXQoKVxuICBvbkNoYW5nZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgQE91dHB1dCgpXG4gIG9uQ2xvc2U6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBPdXRwdXQoKVxuICBhZnRlckNsb3NlOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBvbkNsaWNrKCkge1xuICAgIGlmICh0aGlzLl9kaXNhYmxlZCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLl9zZWxlY3RlZCA9ICF0aGlzLl9zZWxlY3RlZDtcbiAgICB0aGlzLm9uQ2hhbmdlLmVtaXQodGhpcy5fc2VsZWN0ZWQpO1xuICAgIHRoaXMuc2V0Q2xhc3NNYXAoKTtcbiAgfVxuXG4gIG9uVGFnQ2xvc2UoKSB7XG4gICAgdGhpcy5vbkNsb3NlLmVtaXQoKTtcbiAgICB0aGlzLmNsb3NlZCA9IHRydWU7XG4gICAgdGhpcy5hZnRlckNsb3NlLmVtaXQoKTtcbiAgfVxuXG4gIHNldENsYXNzTWFwKCkge1xuICAgIHRoaXMud3JhcENscyA9IHtcbiAgICAgIFt0aGlzLnByZWZpeENsc106IHRydWUsXG4gICAgICBbYCR7dGhpcy5wcmVmaXhDbHN9LW5vcm1hbGBdOiAhdGhpcy5fZGlzYWJsZWQgJiYgKCF0aGlzLl9zZWxlY3RlZCB8fCB0aGlzLl9zbWFsbCB8fCB0aGlzLl9jbG9zYWJsZSksXG4gICAgICBbYCR7dGhpcy5wcmVmaXhDbHN9LXNtYWxsYF06IHRoaXMuX3NtYWxsLFxuICAgICAgW2Ake3RoaXMucHJlZml4Q2xzfS1hY3RpdmVgXTogdGhpcy5fc2VsZWN0ZWQgJiYgIXRoaXMuX2Rpc2FibGVkICYmICF0aGlzLl9zbWFsbCAmJiAhdGhpcy5fY2xvc2FibGUsXG4gICAgICBbYCR7dGhpcy5wcmVmaXhDbHN9LWRpc2FibGVkYF06IHRoaXMuX2Rpc2FibGVkLFxuICAgICAgW2Ake3RoaXMucHJlZml4Q2xzfS1jbG9zYWJsZWBdOiB0aGlzLl9jbG9zYWJsZVxuICAgIH07XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnNldENsYXNzTWFwKCk7XG4gIH1cbn1cbiIsIjxkaXYgKm5nSWY9XCIhY2xvc2VkXCIgW25nQ2xhc3NdPVwid3JhcENsc1wiIChjbGljayk9XCJvbkNsaWNrKClcIj5cbiAgPGRpdiBjbGFzcz1cInt7IHByZWZpeENscyB9fS10ZXh0XCI+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbiAgPGRpdlxuICAgICpuZ0lmPVwiY2xvc2FibGUgJiYgIWRpc2FibGVkICYmICFzbWFsbFwiXG4gICAgcm9sZT1cImJ1dHRvblwiXG4gICAgY2xhc3M9XCJ7eyBwcmVmaXhDbHMgfX0tY2xvc2VcIlxuICAgIGFyaWEtbGFiZWw9XCJyZW1vdmUgdGFnXCJcbiAgICAoY2xpY2spPVwib25UYWdDbG9zZSgpXCJcbiAgPlxuICAgIDxJY29uIGFyaWEtaGlkZGVuPVwidHJ1ZVwiIFt0eXBlXT1cIidjcm9zcy1jaXJjbGUnXCIgW3NpemVdPVwiJ3hzJ1wiPjwvSWNvbj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==