ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
376 lines (369 loc) • 18.9 kB
JavaScript
import * as i0 from '@angular/core';
import { TemplateRef, Component, ViewEncapsulation, Input, HostBinding, EventEmitter, Output, HostListener, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class ListComponent {
set className(value) {
this._className = value;
}
get renderHeader() {
return this._renderHeader;
}
set renderHeader(value) {
if (value instanceof TemplateRef) {
this.renderHeaderType = 'templateRef';
}
else {
this.renderHeaderType = typeof value;
}
this._renderHeader = value;
}
get renderFooter() {
return this._renderFooter;
}
set renderFooter(value) {
if (value instanceof TemplateRef) {
this.renderFooterType = 'templateRef';
}
else {
this.renderFooterType = typeof value;
}
this._renderFooter = value;
}
get hostClassName() {
return 'am-list ' + this._className;
}
constructor() {
this.defaultProps = {
prefixCls: 'am-list'
};
this.renderHeaderType = '';
this.renderFooterType = '';
this._renderHeader = '';
this._renderFooter = '';
this._className = '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ListComponent, selector: "List, nzm-list", inputs: { className: "className", renderHeader: "renderHeader", renderFooter: "renderFooter" }, host: { properties: { "class": "this.hostClassName" } }, ngImport: i0, template: "<div\n *ngIf=\"renderHeader && renderHeaderType === 'string'\"\n class=\"{{ defaultProps.prefixCls }}-header\"\n [innerHTML]=\"renderHeader\"\n></div>\n<div *ngIf=\"renderHeader && renderHeaderType === 'function'\" class=\"{{ defaultProps.prefixCls }}-header\">\n {{ renderHeader() }}\n</div>\n<ng-template *ngIf=\"renderHeader && renderHeaderType === 'templateRef'\" [ngTemplateOutlet]=\"renderHeader\">\n</ng-template>\n<div class=\"{{ defaultProps.prefixCls }}-body\">\n <ng-content></ng-content>\n</div>\n<div\n *ngIf=\"renderFooter && renderFooterType === 'string'\"\n class=\"{{ defaultProps.prefixCls }}-footer\"\n [innerHTML]=\"renderFooter\"\n></div>\n<div *ngIf=\"renderFooter && renderFooterType === 'function'\" class=\"{{ defaultProps.prefixCls }}-footer\">\n {{ renderFooter() }}\n</div>\n<ng-template *ngIf=\"renderFooter && renderFooterType === 'templateRef'\" [ngTemplateOutlet]=\"renderFooter\">\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ListComponent, decorators: [{
type: Component,
args: [{ selector: 'List, nzm-list', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"renderHeader && renderHeaderType === 'string'\"\n class=\"{{ defaultProps.prefixCls }}-header\"\n [innerHTML]=\"renderHeader\"\n></div>\n<div *ngIf=\"renderHeader && renderHeaderType === 'function'\" class=\"{{ defaultProps.prefixCls }}-header\">\n {{ renderHeader() }}\n</div>\n<ng-template *ngIf=\"renderHeader && renderHeaderType === 'templateRef'\" [ngTemplateOutlet]=\"renderHeader\">\n</ng-template>\n<div class=\"{{ defaultProps.prefixCls }}-body\">\n <ng-content></ng-content>\n</div>\n<div\n *ngIf=\"renderFooter && renderFooterType === 'string'\"\n class=\"{{ defaultProps.prefixCls }}-footer\"\n [innerHTML]=\"renderFooter\"\n></div>\n<div *ngIf=\"renderFooter && renderFooterType === 'function'\" class=\"{{ defaultProps.prefixCls }}-footer\">\n {{ renderFooter() }}\n</div>\n<ng-template *ngIf=\"renderFooter && renderFooterType === 'templateRef'\" [ngTemplateOutlet]=\"renderFooter\">\n</ng-template>\n" }]
}], ctorParameters: () => [], propDecorators: { className: [{
type: Input
}], renderHeader: [{
type: Input
}], renderFooter: [{
type: Input
}], hostClassName: [{
type: HostBinding,
args: ['class']
}] } });
class ListItemComponent {
get extra() {
return this._extra;
}
get extra_component() {
return this._extra_component;
}
get extra_title() {
return this._extra_title;
}
set extra(value) {
if (value instanceof TemplateRef) {
this._extra_component = true;
this._extra = value;
}
else {
this._extra_component = false;
this._extra_title = value;
}
}
set className(value) {
this._className = value;
this.setClsMap();
}
get arrow() {
return this._arrow;
}
set arrow(value) {
this._arrow = value;
this.setClsMap();
}
set multipleLine(value) {
this.defaultProps.multipleLine = value === '' ? true : value;
this.setClsMap();
}
set error(value) {
this.defaultProps.error = value === '' ? true : value;
this.setClsMap();
}
set wrap(value) {
this.defaultProps.wrap = value === '' ? true : value;
this.setClsMap();
}
set align(value) {
this.defaultProps.align = value;
this.setClsMap();
}
set platform(value) {
this.defaultProps.platform = value;
}
set disabled(value) {
if (typeof value === 'boolean') {
this._disabled = value;
}
else {
if (value === 'true') {
this._disabled = true;
}
else {
this._disabled = false;
}
}
this.setClsMap();
}
get thumb() {
return this._thumb;
}
get thumb_component() {
return this._thumb_component;
}
get thumb_src() {
return this._thumb_src;
}
set thumb(value) {
if (value instanceof TemplateRef) {
this._thumb_component = true;
this._thumb = value;
}
else {
this._thumb_component = false;
this._thumb_src = value;
}
}
get bingClassName() {
return this.wrapCls;
}
click(event) {
this.onItemClick(event);
}
start() {
if (!this._disabled && this.onClick.observers.length > 0) {
this._active = true;
this.setClsMap();
}
}
move() {
if (!this._disabled && this.onClick.observers.length > 0) {
this._active = false;
this.setClsMap();
}
}
end() {
if (!this._disabled && this.onClick.observers.length > 0) {
this._active = false;
this.setClsMap();
}
}
mouse_start() {
if (!this._disabled && this.onClick.observers.length > 0) {
this._active = true;
this.setClsMap();
}
}
mouse_end() {
if (!this._disabled && this.onClick.observers.length > 0) {
this._active = false;
this.setClsMap();
}
}
constructor() {
this.defaultProps = {
prefixCls: 'am-list',
align: 'middle',
error: false,
multipleLine: false,
wrap: false,
platform: 'ios',
rippleStyle: {}
};
this.arrowCls = {};
this.lineCls = {};
this.wrapCls = '';
this.rippleCls = {};
this.rippleClicked = false;
this._thumb_component = false;
this._thumb_src = '';
this._extra_component = false;
this._extra_title = '';
this._arrow = '';
this._disabled = false;
this._className = '';
this._active = false;
this.onClick = new EventEmitter();
}
setClsMap() {
const classNameList = this._className.split(' ');
let classNameObj = {};
this.wrapCls = '';
for (const value of classNameList) {
if (value) {
classNameObj = {
...classNameObj,
...{ [`${value}`]: true }
};
}
}
const wrapClsObj = {
[`${this.defaultProps.prefixCls}-item`]: true,
[`${this.defaultProps.prefixCls}-item-disabled`]: this._disabled,
[`${this.defaultProps.prefixCls}-item-active`]: this._active,
[`${this.defaultProps.prefixCls}-item-error`]: this.defaultProps.error,
[`${this.defaultProps.prefixCls}-item-top`]: this.defaultProps.align === 'top',
[`${this.defaultProps.prefixCls}-item-middle`]: this.defaultProps.align === 'middle',
[`${this.defaultProps.prefixCls}-item-bottom`]: this.defaultProps.align === 'bottom',
...classNameObj
};
for (const key in wrapClsObj) {
if (wrapClsObj[key]) {
this.wrapCls += ` ${key}`;
}
}
this.rippleCls = {
[`${this.defaultProps.prefixCls}-ripple`]: true,
[`${this.defaultProps.prefixCls}-ripple-animate`]: this.rippleClicked
};
this.lineCls = {
[`${this.defaultProps.prefixCls}-line`]: true,
[`${this.defaultProps.prefixCls}-line-multiple`]: this.defaultProps.multipleLine,
[`${this.defaultProps.prefixCls}-line-wrap`]: this.defaultProps.wrap
};
this.arrowCls = {
[`${this.defaultProps.prefixCls}-arrow`]: true,
[`${this.defaultProps.prefixCls}-arrow-horizontal`]: this._arrow === 'horizontal',
[`${this.defaultProps.prefixCls}-arrow-vertical`]: this._arrow === 'down' || this._arrow === 'up',
[`${this.defaultProps.prefixCls}-arrow-vertical-up`]: this._arrow === 'up'
};
}
onItemClick(ev) {
const isAndroid = this.defaultProps.platform === 'android';
if (isAndroid) {
if (this.debounceTimeout) {
clearTimeout(this.debounceTimeout);
this.debounceTimeout = null;
}
const Item = ev.currentTarget;
const RippleWidth = Math.max(Item.offsetHeight, Item.offsetWidth);
const ClientRect = ev.currentTarget.getBoundingClientRect();
const pointX = ev.clientX - ClientRect.left - Item.offsetWidth / 2;
const pointY = ev.clientY - ClientRect.top - Item.offsetWidth / 2;
const coverRippleStyle = {
width: `${RippleWidth}px`,
height: `${RippleWidth}px`,
left: `${pointX}px`,
top: `${pointY}px`
};
this.defaultProps.rippleStyle = coverRippleStyle;
this.rippleClicked = true;
this.setClsMap();
this.debounceTimeout = setTimeout(() => {
this.rippleClicked = false;
this.defaultProps.rippleStyle = { display: 'none' };
this.setClsMap();
}, 1000);
}
this.onClick.emit(ev);
}
ngOnInit() {
this.defaultProps.rippleStyle = { display: 'none' };
this.setClsMap();
}
ngOnDestroy() {
if (this.debounceTimeout) {
clearTimeout(this.debounceTimeout);
this.debounceTimeout = null;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ListItemComponent, selector: "ListItem, nzm-list-item", inputs: { extra: "extra", className: "className", arrow: "arrow", multipleLine: "multipleLine", error: "error", wrap: "wrap", align: "align", platform: "platform", disabled: "disabled", thumb: "thumb" }, outputs: { onClick: "onClick" }, host: { listeners: { "click": "click($event)", "touchstart": "start()", "touchmove": "move()", "touchend": "end()", "mousedown": "mouse_start()", "mouseup": "mouse_end()" }, properties: { "class": "this.bingClassName" } }, ngImport: i0, template: "<div *ngIf=\"thumb_src && !thumb_component\" class=\"{{ defaultProps.prefixCls }}-thumb\">\n <img src=\"{{ thumb_src }}\" />\n</div>\n<div *ngIf=\"thumb && thumb_component\" class=\"{{ defaultProps.prefixCls }}-thumb\">\n <ng-template [ngTemplateOutlet]=\"thumb\"></ng-template>\n</div>\n<div [ngClass]=\"lineCls\">\n <div class=\"{{ defaultProps.prefixCls }}-content\">\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"extra_title && !extra_component\"\n class=\"{{ defaultProps.prefixCls }}-extra\"\n [innerHTML]=\"extra_title\"\n ></div>\n <div *ngIf=\"extra && extra_component\" class=\"{{ defaultProps.prefixCls }}-extra\">\n <ng-template [ngTemplateOutlet]=\"extra\"></ng-template>\n </div>\n <div *ngIf=\"arrow\" [ngClass]=\"arrowCls\" aria-hidden=\"true\"></div>\n</div>\n<div [ngClass]=\"rippleCls\" [ngStyle]=\"defaultProps.rippleStyle\"></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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ListItemComponent, decorators: [{
type: Component,
args: [{ selector: 'ListItem, nzm-list-item', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"thumb_src && !thumb_component\" class=\"{{ defaultProps.prefixCls }}-thumb\">\n <img src=\"{{ thumb_src }}\" />\n</div>\n<div *ngIf=\"thumb && thumb_component\" class=\"{{ defaultProps.prefixCls }}-thumb\">\n <ng-template [ngTemplateOutlet]=\"thumb\"></ng-template>\n</div>\n<div [ngClass]=\"lineCls\">\n <div class=\"{{ defaultProps.prefixCls }}-content\">\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"extra_title && !extra_component\"\n class=\"{{ defaultProps.prefixCls }}-extra\"\n [innerHTML]=\"extra_title\"\n ></div>\n <div *ngIf=\"extra && extra_component\" class=\"{{ defaultProps.prefixCls }}-extra\">\n <ng-template [ngTemplateOutlet]=\"extra\"></ng-template>\n </div>\n <div *ngIf=\"arrow\" [ngClass]=\"arrowCls\" aria-hidden=\"true\"></div>\n</div>\n<div [ngClass]=\"rippleCls\" [ngStyle]=\"defaultProps.rippleStyle\"></div>\n" }]
}], ctorParameters: () => [], propDecorators: { extra: [{
type: Input
}], className: [{
type: Input
}], arrow: [{
type: Input
}], multipleLine: [{
type: Input
}], error: [{
type: Input
}], wrap: [{
type: Input
}], align: [{
type: Input
}], platform: [{
type: Input
}], disabled: [{
type: Input
}], thumb: [{
type: Input
}], onClick: [{
type: Output
}], bingClassName: [{
type: HostBinding,
args: ['class']
}], click: [{
type: HostListener,
args: ['click', ['$event']]
}], start: [{
type: HostListener,
args: ['touchstart']
}], move: [{
type: HostListener,
args: ['touchmove']
}], end: [{
type: HostListener,
args: ['touchend']
}], mouse_start: [{
type: HostListener,
args: ['mousedown']
}], mouse_end: [{
type: HostListener,
args: ['mouseup']
}] } });
class BriefComponent {
constructor() {
this.defaultProps = {
prefixCls: 'am-list'
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BriefComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: BriefComponent, selector: "Brief, nzm-brief", ngImport: i0, template: "<div class=\"{{ defaultProps.prefixCls }}-brief\">\n <ng-content></ng-content>\n</div>\n", encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BriefComponent, decorators: [{
type: Component,
args: [{ selector: 'Brief, nzm-brief', encapsulation: ViewEncapsulation.None, template: "<div class=\"{{ defaultProps.prefixCls }}-brief\">\n <ng-content></ng-content>\n</div>\n" }]
}] });
class ListModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ListModule, declarations: [ListComponent, ListItemComponent, BriefComponent], imports: [CommonModule, FormsModule], exports: [ListComponent, ListItemComponent, BriefComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ListModule, imports: [CommonModule, FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ListModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule],
exports: [ListComponent, ListItemComponent, BriefComponent],
declarations: [ListComponent, ListItemComponent, BriefComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { BriefComponent, ListComponent, ListItemComponent, ListModule };
//# sourceMappingURL=ng-zorro-antd-mobile-list.mjs.map