ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
371 lines (361 loc) • 19.8 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, ViewEncapsulation, EventEmitter, Injector, Directive, Input, Output, HostListener, HostBinding, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { getPositionElements } from 'ng-zorro-antd-mobile/core';
import { IconModule } from 'ng-zorro-antd-mobile/icon';
class PopoverOptions {
constructor() {
this.showArrow = false;
this.mask = false;
this.placement = 'bottom';
this.appendToBody = false;
this.className = '';
this.autoClose = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverOptions }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverOptions, decorators: [{
type: Injectable
}] });
class PopoverComponentOptions extends PopoverOptions {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverComponentOptions, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverComponentOptions }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverComponentOptions, decorators: [{
type: Injectable
}] });
class PopoverComponent {
constructor(options) {
this.options = options;
this.defaultProps = {
prefixCls: 'am-popover'
};
this.maskCls = {};
this.popoverCls = {};
}
setClassMap() {
this.maskCls = {
[`${this.defaultProps.prefixCls}-mask`]: this.options.mask,
[`${this.defaultProps.prefixCls}-mask-hidden`]: !this.options.mask
};
this.popoverCls = {
[`${this.defaultProps.prefixCls}`]: true,
[`${this.defaultProps.prefixCls}-placement-${this.options.placement}`]: true,
[`${this.defaultProps.prefixCls}-${this.options.className}`]: true
};
}
ngOnInit() {
this.setClassMap();
}
ngAfterViewInit() {
this.options.onAfterViewInit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverComponent, deps: [{ token: PopoverComponentOptions }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PopoverComponent, selector: "Popover", ngImport: i0, template: "<ng-content></ng-content>\n<div [ngClass]=\"maskCls\" (click)=\"options.hidePopover()\"></div>\n<div [ngClass]=\"popoverCls\" style=\"color: currentcolor;\">\n <div class=\"{{ defaultProps.prefixCls }}-content\">\n <div *ngIf=\"options.showArrow\" class=\"{{ defaultProps.prefixCls }}-arrow\"></div>\n <div class=\"{{ defaultProps.prefixCls }}-inner\">\n <div class=\"{{ defaultProps.prefixCls }}-inner-wrapper\">\n <ng-template [ngTemplateOutlet]=\"options.overlay\" [ngTemplateOutletContext]=\"{ options: options }\">\n </ng-template>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverComponent, decorators: [{
type: Component,
args: [{ selector: 'Popover', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n<div [ngClass]=\"maskCls\" (click)=\"options.hidePopover()\"></div>\n<div [ngClass]=\"popoverCls\" style=\"color: currentcolor;\">\n <div class=\"{{ defaultProps.prefixCls }}-content\">\n <div *ngIf=\"options.showArrow\" class=\"{{ defaultProps.prefixCls }}-arrow\"></div>\n <div class=\"{{ defaultProps.prefixCls }}-inner\">\n <div class=\"{{ defaultProps.prefixCls }}-inner-wrapper\">\n <ng-template [ngTemplateOutlet]=\"options.overlay\" [ngTemplateOutletContext]=\"{ options: options }\">\n </ng-template>\n </div>\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: () => [{ type: PopoverComponentOptions }] });
class PopoverDirective {
togglePopover() {
if (!this.popover) {
this.showPopover();
}
else {
this.hidePopover();
}
}
constructor(_viewContainerRef, _elm, _defaultOptions, _cfr, _renderer) {
this._viewContainerRef = _viewContainerRef;
this._elm = _elm;
this._defaultOptions = _defaultOptions;
this._cfr = _cfr;
this._renderer = _renderer;
this._eventListeners = [];
this.onVisibleChange = new EventEmitter(true);
this.onSelect = new EventEmitter();
}
positionMap(placement) {
switch (placement) {
case 'topLeft':
return 'top-left';
case 'topRight':
return 'top-right';
case 'bottomLeft':
return 'bottom-left';
case 'bottomRight':
return 'bottom-right';
case 'leftTop':
return 'left-top';
case 'leftBottom':
return 'left-bottom';
case 'rightTop':
return 'right-top';
case 'rightBottom':
return 'right-bottom';
case 'fullScreen':
case 'landScape':
return 'bottom';
default:
return placement;
}
}
ngOnInit() { }
ngOnChanges(changes) {
if (changes.visible && changes.visible.currentValue) {
setTimeout(() => {
this.showPopover();
}, 0);
}
else {
setTimeout(() => {
this.hidePopover();
}, 0);
}
}
ngOnDestroy() {
this.hidePopover();
}
onDocumentClick(event) {
if (this.popover &&
!this._elm.nativeElement.contains(event.target) &&
!this.popover.location.nativeElement.contains(event.target)) {
this.hidePopover();
}
}
showPopover() {
if (!this.popover) {
setTimeout(() => {
this._eventListeners = [
this._renderer.listen('document', 'click', (event) => this.onDocumentClick(event)),
this._renderer.listen('document', 'touchend', (event) => this.onDocumentClick(event)),
this._renderer.listen('window', 'resize', () => this.positionPopover())
];
});
const options = new PopoverComponentOptions();
options.placement = this.placement;
Object.assign(options, this._defaultOptions, {
hidePopover: (event) => {
this.hidePopover();
},
onAfterViewInit: () => {
this.positionPopover();
const children = document.getElementsByClassName('am-popover-inner-wrapper')[0].children;
if (children.length > 0) {
// 首先我们检查它是否包含子节点
for (let i = 0; i < children.length; i++) {
children[i].id = `${i}`;
children[i].addEventListener('click', () => {
if (this.onSelect) {
this.onSelect.emit(children[i]);
if (options.autoClose) {
this.hidePopover();
}
}
}, false);
}
}
}
});
const optionalParams = [
'mask',
'showArrow',
'placement',
'appendToBody',
'overlay',
'className',
'autoClose'
];
optionalParams.forEach(param => {
if (typeof this[param] !== 'undefined') {
options[param] = this[param];
}
});
const componentFactory = this._cfr.resolveComponentFactory(PopoverComponent);
const childInjector = Injector.create([
{
provide: PopoverComponentOptions,
useValue: options
}
], this._viewContainerRef.parentInjector);
this.popover = this._viewContainerRef.createComponent(componentFactory, this._viewContainerRef.length, childInjector);
if (options.appendToBody) {
this.appendToBodyElement = document.body.appendChild(this.popover.location.nativeElement);
}
this.onVisibleChange.emit(true);
}
}
positionPopover() {
if (this.popover) {
const popoverElement = this.popover.location.nativeElement.children[1];
const popoverPosition = getPositionElements(this._elm.nativeElement, popoverElement, this.positionMap(this.placement) || this._defaultOptions.placement, this.appendToBody || this._defaultOptions.appendToBody);
if (this.placement === 'landScape') {
this._renderer.setStyle(popoverElement, 'top', `${popoverPosition.top}px`);
this._renderer.setStyle(popoverElement, 'left', `0px`);
this._renderer.setStyle(popoverElement, 'width', `${window.innerWidth}px`);
this._renderer.setStyle(popoverElement, 'max-height', `${window.innerHeight - popoverPosition.height}px`);
}
else if (this.placement === 'fullScreen') {
this._renderer.setStyle(popoverElement, 'top', `${0}px`);
this._renderer.setStyle(popoverElement, 'left', `0px`);
this._renderer.setStyle(popoverElement, 'width', `${window.innerWidth}px`);
this._renderer.setStyle(popoverElement, 'max-height', `${window.innerHeight - popoverPosition.height}px`);
}
else {
this._renderer.setStyle(popoverElement, 'top', `${popoverPosition.top}px`);
this._renderer.setStyle(popoverElement, 'left', `${popoverPosition.left}px`);
}
}
}
hidePopover() {
if (this.appendToBodyElement) {
document.body.removeChild(this.appendToBodyElement);
this.appendToBodyElement = null;
}
if (this.popover) {
this.popover.destroy();
delete this.popover;
this.onVisibleChange.emit(false);
this._eventListeners.forEach(fn => fn());
this._eventListeners = [];
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: PopoverOptions }, { token: i0.ComponentFactoryResolver }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: PopoverDirective, selector: "[Popover], [nzm-popover]", inputs: { mask: "mask", showArrow: "showArrow", visible: "visible", placement: "placement", overlay: "overlay", appendToBody: "appendToBody", className: "className", autoClose: "autoClose" }, outputs: { onVisibleChange: "onVisibleChange", onSelect: "onSelect" }, host: { listeners: { "click": "togglePopover()" } }, providers: [PopoverOptions], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverDirective, decorators: [{
type: Directive,
args: [{
selector: '[Popover], [nzm-popover]',
providers: [PopoverOptions]
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: PopoverOptions }, { type: i0.ComponentFactoryResolver }, { type: i0.Renderer2 }], propDecorators: { mask: [{
type: Input
}], showArrow: [{
type: Input
}], visible: [{
type: Input
}], placement: [{
type: Input
}], overlay: [{
type: Input
}], onVisibleChange: [{
type: Output
}], onSelect: [{
type: Output
}], appendToBody: [{
type: Input
}], className: [{
type: Input
}], autoClose: [{
type: Input
}], togglePopover: [{
type: HostListener,
args: ['click']
}] } });
class PopoverItemComponent {
get icon() {
return this._icon;
}
set icon(value) {
this._icon = value;
}
get style() {
return this._style;
}
set style(value) {
this._style = value;
}
set disabled(value) {
this.defaultProps.disabled = value;
}
get amPopoverItemActive() {
return this.isActive;
}
get amPopoverItemDisabled() {
return this.defaultProps.disabled;
}
touchStart(e) {
this.select.emit();
this.isActive = true;
}
constructor(_elementRef) {
this._elementRef = _elementRef;
this.defaultProps = {
prefixCls: 'am-popover',
disabled: false
};
this.isActive = false;
this.select = new EventEmitter();
this.amPopoverItem = true;
}
ngAfterContentInit() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PopoverItemComponent, selector: "PopoverItem, nzm-popover-item", inputs: { icon: "icon", style: "style", disabled: "disabled" }, outputs: { select: "select" }, host: { listeners: { "touchstart": "touchStart($event)", "mousedown": "touchStart($event)" }, properties: { "class.am-popover-item": "this.amPopoverItem", "class.am-popover-item-active": "this.amPopoverItemActive", "class.am-popover-item-disabled": "this.amPopoverItemDisabled" } }, ngImport: i0, template: "<div class=\"{{ defaultProps.prefixCls }}-item-container\">\n <span class=\"{{ defaultProps.prefixCls }}-item-icon\" aria-hidden=\"true\">\n <ng-template [ngTemplateOutlet]=\"icon\"></ng-template>\n </span>\n <span class=\"{{ defaultProps.prefixCls }}-item-content\">\n <ng-content></ng-content>\n </span>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverItemComponent, decorators: [{
type: Component,
args: [{ selector: 'PopoverItem, nzm-popover-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"{{ defaultProps.prefixCls }}-item-container\">\n <span class=\"{{ defaultProps.prefixCls }}-item-icon\" aria-hidden=\"true\">\n <ng-template [ngTemplateOutlet]=\"icon\"></ng-template>\n </span>\n <span class=\"{{ defaultProps.prefixCls }}-item-content\">\n <ng-content></ng-content>\n </span>\n</div>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { icon: [{
type: Input
}], style: [{
type: Input
}], disabled: [{
type: Input
}], select: [{
type: Output
}], amPopoverItem: [{
type: HostBinding,
args: ['class.am-popover-item']
}], amPopoverItemActive: [{
type: HostBinding,
args: ['class.am-popover-item-active']
}], amPopoverItemDisabled: [{
type: HostBinding,
args: ['class.am-popover-item-disabled']
}], touchStart: [{
type: HostListener,
args: ['touchstart', ['$event']]
}, {
type: HostListener,
args: ['mousedown', ['$event']]
}] } });
class PopoverItemModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: PopoverItemModule, declarations: [PopoverItemComponent], imports: [CommonModule, IconModule], exports: [PopoverItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverItemModule, imports: [CommonModule, IconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverItemModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, IconModule],
exports: [PopoverItemComponent],
declarations: [PopoverItemComponent]
}]
}] });
function PopoverOptionsFactory(userOptions) {
const options = new PopoverOptions();
Object.assign(options, userOptions);
return options;
}
class PopoverModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: PopoverModule, declarations: [PopoverDirective, PopoverComponent], imports: [CommonModule], exports: [PopoverDirective, PopoverComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverModule, decorators: [{
type: NgModule,
args: [{
declarations: [PopoverDirective, PopoverComponent],
imports: [CommonModule],
exports: [PopoverDirective, PopoverComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PopoverComponent, PopoverComponentOptions, PopoverDirective, PopoverItemComponent, PopoverItemModule, PopoverModule, PopoverOptions, PopoverOptionsFactory };
//# sourceMappingURL=ng-zorro-antd-mobile-popover.mjs.map