ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
205 lines (200 loc) • 9.18 kB
JavaScript
import * as i0 from '@angular/core';
import { TemplateRef, EventEmitter, Component, ViewEncapsulation, Input, Output, HostListener, 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';
import { WingBlankModule } from 'ng-zorro-antd-mobile/wing-blank';
import { WhiteSpaceModule } from 'ng-zorro-antd-mobile/white-space';
import { ListModule } from 'ng-zorro-antd-mobile/list';
class ButtonComponent {
get type() {
return this._type;
}
get size() {
return this._size;
}
get disabled() {
return this._disabled;
}
get loading() {
return this._loading;
}
get inline() {
return this._inline;
}
get icon() {
return this._icon;
}
set icon(value) {
if (value instanceof TemplateRef) {
this.ngTemplate = true;
this._icon = value;
}
else {
this.ngTemplate = false;
this._icon = value;
this.setClassMap();
}
}
set className(v) {
this._className = this._className + ' ' + v;
this.setClassMap();
}
touchStart(event) {
if (this._disabled) {
return;
}
this._active = true;
this.setClassMap();
}
touchEnd(event) {
if (this._disabled) {
return;
}
this._active = false;
this.setClassMap();
}
click(event) {
if (this._disabled) {
return;
}
this.onClick.emit();
}
constructor(_elementRef, _render) {
this._elementRef = _elementRef;
this._render = _render;
this.prefixCls = 'am-button';
this.ngTemplate = false;
this._className = '';
this._classList = [];
this._size = 'large';
this._loading = false;
this._active = false;
this._inline = false;
this._disabled = false;
this._icon = '';
this._userAgent = navigator.userAgent || navigator.vendor || window.opera;
this.onClick = new EventEmitter();
this._el = this._elementRef.nativeElement;
this._render.addClass(this._el, this.prefixCls);
this._className = this._el.className;
}
isTemplateRef(value) {
if (value) {
return value instanceof TemplateRef;
}
return false;
}
set type(value) {
this._type = value;
this.setClassMap();
}
set disabled(value) {
this._disabled = value;
this.setClassMap();
}
set loading(value) {
this._loading = value;
if (this._el.querySelector('icon')) {
const icon = this._el.querySelector('icon');
icon.style.display = value ? '' : 'none';
}
this.setClassMap();
}
set size(value) {
this._size = value;
this.setClassMap();
}
set inline(value) {
this._inline = value;
this.setClassMap();
}
ngAfterViewInit() {
if (this._el.querySelector('img')) {
const amSize = this._size === 'small' ? 'am-icon-xxs' : 'am-icon-md';
this._el.querySelector('img').setAttribute('class', `am-icon ${this.prefixCls}-icon ${amSize}`);
this._render.addClass(this._el, `${this.prefixCls}-icon`);
}
}
setClassMap() {
this.iconType = this._loading ? 'loading' : this._icon;
this._classList = [
this._type && `${this.prefixCls}-${this._type}`,
this._size === 'small' && `${this.prefixCls}-${this._size}`,
this._disabled && `${this.prefixCls}-disabled`,
this._loading && `${this.prefixCls}-loading`,
this.iconType && `${this.prefixCls}-icon`,
this._active && `${this.prefixCls}-active`,
this._inline && `${this.prefixCls}-inline`
].filter(item => {
return !!item;
});
this._el.className = this._className + ' ' + this._classList.join(' ');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ButtonComponent, selector: "[Button], nzm-button", inputs: { type: "type", size: "size", disabled: "disabled", loading: "loading", inline: "inline", icon: "icon", className: "className" }, outputs: { onClick: "onClick" }, host: { listeners: { "touchstart": "touchStart($event)", "mousedown": "touchStart($event)", "touchend": "touchEnd($event)", "mouseup": "touchEnd($event)", "touchmove": "touchEnd($event)", "mousemove": "touchEnd($event)", "touchcancel": "touchEnd($event)", "click": "click($event)" } }, ngImport: i0, template: "<Icon\n *ngIf=\"!ngTemplate\"\n class=\"{{ prefixCls }}-icon\"\n [type]=\"iconType\"\n [size]=\"size === 'small' ? 'xxs' : 'md'\"\n></Icon>\n<ng-template *ngIf=\"ngTemplate\" [ngTemplateOutlet]=\"icon\"></ng-template>\n<ng-content select=\"img\"></ng-content>\n<div class=\"{{ prefixCls }}-content\">\n <span>\n <ng-content></ng-content>\n </span>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: '[Button], nzm-button', encapsulation: ViewEncapsulation.None, template: "<Icon\n *ngIf=\"!ngTemplate\"\n class=\"{{ prefixCls }}-icon\"\n [type]=\"iconType\"\n [size]=\"size === 'small' ? 'xxs' : 'md'\"\n></Icon>\n<ng-template *ngIf=\"ngTemplate\" [ngTemplateOutlet]=\"icon\"></ng-template>\n<ng-content select=\"img\"></ng-content>\n<div class=\"{{ prefixCls }}-content\">\n <span>\n <ng-content></ng-content>\n </span>\n</div>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { type: [{
type: Input
}], size: [{
type: Input
}], disabled: [{
type: Input
}], loading: [{
type: Input
}], inline: [{
type: Input
}], icon: [{
type: Input
}], className: [{
type: Input
}], onClick: [{
type: Output
}], touchStart: [{
type: HostListener,
args: ['touchstart', ['$event']]
}, {
type: HostListener,
args: ['mousedown', ['$event']]
}], touchEnd: [{
type: HostListener,
args: ['touchend', ['$event']]
}, {
type: HostListener,
args: ['mouseup', ['$event']]
}, {
type: HostListener,
args: ['touchmove', ['$event']]
}, {
type: HostListener,
args: ['mousemove', ['$event']]
}, {
type: HostListener,
args: ['touchcancel', ['$event']]
}], click: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
const NZ_BUTTON_DIRECTIVES = [ButtonComponent];
class ButtonModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, IconModule, WingBlankModule, WhiteSpaceModule, ListModule], exports: [ButtonComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ButtonModule, imports: [CommonModule, IconModule, WingBlankModule, WhiteSpaceModule, ListModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ButtonModule, decorators: [{
type: NgModule,
args: [{
declarations: NZ_BUTTON_DIRECTIVES,
exports: NZ_BUTTON_DIRECTIVES,
imports: [CommonModule, IconModule, WingBlankModule, WhiteSpaceModule, ListModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ButtonComponent, ButtonModule };
//# sourceMappingURL=ng-zorro-antd-mobile-button.mjs.map