ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
114 lines (109 loc) • 5.64 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'ng-zorro-antd-mobile/icon';
import { IconModule } from 'ng-zorro-antd-mobile/icon';
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
}] } });
class TagModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: TagModule, declarations: [TagComponent], imports: [CommonModule, IconModule], exports: [TagComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TagModule, imports: [CommonModule, IconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TagModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, IconModule],
declarations: [TagComponent],
exports: [TagComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TagComponent, TagModule };
//# sourceMappingURL=ng-zorro-antd-mobile-tag.mjs.map