@c-standard/angular-devui-extension
Version:
an extensional components lib for devui
274 lines (266 loc) • 13.1 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ViewChild, Injectable, NgModule } from '@angular/core';
import * as i1 from 'ng-devui';
import { ModalModule } from 'ng-devui';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { isUndefined } from 'lodash-es';
var PopupSize;
(function (PopupSize) {
PopupSize["extra"] = "extra";
PopupSize["supper"] = "supper";
PopupSize["large"] = "large";
PopupSize["default"] = "default";
PopupSize["small"] = "small";
})(PopupSize || (PopupSize = {}));
const PopupSizeParams = {
supper: '1200px',
extra: '900px',
large: '700px',
default: '550px',
small: '400px',
};
// export const PopupSizeParameter: XPopupSizeType = {
// x: {
// ratio: 61.8,
// min: 620,
// },
// l: {
// ratio: 42.1,
// min: 380,
// },
// m: {
// ratio: 35.6,
// min: 250,
// },
// s: {
// ratio: 23.6,
// min: 120,
// },
// };
class PopupContentComponent {
constructor(myRef) {
this.myRef = myRef;
this.closeBtnClick = new EventEmitter();
}
onCloseBtnClick(e) {
this.closeBtnClick.emit();
e.stopPropagation();
}
ngOnInit() {
this.ref = this.ref ? this.ref : this.myRef;
}
}
PopupContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PopupContentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
PopupContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: PopupContentComponent, selector: "d-popup-content", inputs: { title: "title", ref: "ref", footerTemplate: "footerTemplate", bodyTemplate: "bodyTemplate" }, outputs: { closeBtnClick: "closeBtnClick" }, ngImport: i0, template: "<div\n class=\"modal\"\n [dMovable]=\"true\"\n [handle]=\"header\"\n [moveEl]=\"ref?.nativeElement.parentElement\"\n>\n <div\n #header\n class=\"modal-header\"\n >\n <button\n class=\"close\"\n (click)=\"onCloseBtnClick($event)\"\n >\n <i class=\"icon-error\"></i>\n </button>\n <div class=\"standard-title\">\n <span>{{ title }}</span>\n </div>\n </div>\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n <div class=\"modal-footer\">\n <ng-container [ngTemplateOutlet]=\"footerTemplate || defaultItemTemplate\">\n <ng-template #defaultItemTemplate></ng-template>\n </ng-container>\n </div>\n</div>\n", styles: [".modal-header{padding:32px 32px 0;height:56px;position:relative;border:none;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;vertical-align:middle}.modal-header .close{position:absolute;right:20px;top:20px;font-weight:700;line-height:1;color:#000;cursor:pointer;background:transparent}.modal-header .close:hover{color:var(--devui-icon-fill-active, #252b3a);background:var(--devui-list-item-hover-bg, #f2f2f3)}.modal-body{padding:20px 32px}.modal-footer{border-top:none;padding-bottom:20px;text-align:center}\n"], directives: [{ type: i1.MovableDirective, selector: "[dMovable]", inputs: ["handle", "moveEl", "dMovable"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PopupContentComponent, decorators: [{
type: Component,
args: [{ selector: 'd-popup-content', template: "<div\n class=\"modal\"\n [dMovable]=\"true\"\n [handle]=\"header\"\n [moveEl]=\"ref?.nativeElement.parentElement\"\n>\n <div\n #header\n class=\"modal-header\"\n >\n <button\n class=\"close\"\n (click)=\"onCloseBtnClick($event)\"\n >\n <i class=\"icon-error\"></i>\n </button>\n <div class=\"standard-title\">\n <span>{{ title }}</span>\n </div>\n </div>\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n <div class=\"modal-footer\">\n <ng-container [ngTemplateOutlet]=\"footerTemplate || defaultItemTemplate\">\n <ng-template #defaultItemTemplate></ng-template>\n </ng-container>\n </div>\n</div>\n", styles: [".modal-header{padding:32px 32px 0;height:56px;position:relative;border:none;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;vertical-align:middle}.modal-header .close{position:absolute;right:20px;top:20px;font-weight:700;line-height:1;color:#000;cursor:pointer;background:transparent}.modal-header .close:hover{color:var(--devui-icon-fill-active, #252b3a);background:var(--devui-list-item-hover-bg, #f2f2f3)}.modal-body{padding:20px 32px}.modal-footer{border-top:none;padding-bottom:20px;text-align:center}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { title: [{
type: Input
}], ref: [{
type: Input
}], footerTemplate: [{
type: Input
}], bodyTemplate: [{
type: Input
}], closeBtnClick: [{
type: Output
}] } });
class PopupComponent {
constructor(modal) {
this.modal = modal;
this.width = 'default';
this.closed = new EventEmitter();
this.visibleChange = new EventEmitter();
}
get visible() {
return this._visible || false;
}
set visible(value) {
this._visible = value;
if (this._visible) {
this.showPopup();
}
else {
this.closePopup();
}
}
showPopup() {
const me = this;
this.modalInstance = this.show({
width: this.width,
template: this.modalContent,
closed() {
me.visible = false;
me.closed.emit();
},
}).modalInstance;
}
closePopup() {
this.modalInstance?.hide();
}
onPopupClose() {
this.visibleChange.emit(false);
this.modalInstance?.hide();
}
show(option) {
// 计算 popup比例尺寸
let width = PopupComponent.calcWidth(option.width);
return this.modal.open({
width: width,
placement: 'top',
offsetY: window.innerHeight * 0.15 + 'px',
backdropCloseable: false,
contentTemplate: option.template,
onClose: option.closed,
});
}
static calcWidth(width) {
if (width) {
return PopupSizeParams[width];
}
else {
return PopupSizeParams['default'];
}
}
}
PopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PopupComponent, deps: [{ token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Component });
PopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: PopupComponent, selector: "d-popup", inputs: { visible: "visible", title: "title", width: "width" }, outputs: { closed: "closed", visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], ngImport: i0, template: `
<ng-template
#modalContent
let-modalInstance="modalInstance"
>
<d-popup-content
[title]="title"
(closeBtnClick)="onPopupClose()"
>
<ng-content></ng-content>
</d-popup-content>
</ng-template>
`, isInline: true, components: [{ type: PopupContentComponent, selector: "d-popup-content", inputs: ["title", "ref", "footerTemplate", "bodyTemplate"], outputs: ["closeBtnClick"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PopupComponent, decorators: [{
type: Component,
args: [{
selector: 'd-popup',
template: `
<ng-template
#modalContent
let-modalInstance="modalInstance"
>
<d-popup-content
[title]="title"
(closeBtnClick)="onPopupClose()"
>
<ng-content></ng-content>
</d-popup-content>
</ng-template>
`,
}]
}], ctorParameters: function () { return [{ type: i1.ModalService }]; }, propDecorators: { visible: [{
type: Input
}], title: [{
type: Input
}], width: [{
type: Input
}], closed: [{
type: Output
}], visibleChange: [{
type: Output
}], modalContent: [{
type: ViewChild,
args: ['modalContent', { static: true }]
}] } });
class PopupService {
/**
* 弹框建议的 400px，550px，700px，900px，
* 弹框比例 16：9，3：2
*/
constructor(dialog) {
this.dialog = dialog;
}
show(option, resolve, reject) {
const width = this.calcWidth(option.width);
const ref = this.dialog.open({
width: width,
title: option.title || '',
placement: 'top',
offsetY: window.innerHeight * 0.1 + 'px',
backdropCloseable: false,
content: option.component,
injector: option.parent,
onClose: option.closed,
maxHeight: '80vh',
buttons: [],
data: {
args: option.args,
callback: (ok, data) => {
if (ok == undefined) {
ref.modalInstance.hide();
return;
}
if (ok) {
if (isUndefined(resolve?.(data)) || resolve?.(data)) {
ref.modalInstance.hide();
}
}
else {
reject?.(data);
}
},
},
});
}
calcWidth(width) {
if (width) {
// if (isString(size)) {
// return size;
// } else {
return PopupSizeParams[width];
// }
}
else {
return PopupSizeParams['default'];
}
}
}
PopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PopupService, deps: [{ token: i1.DialogService }], target: i0.ɵɵFactoryTarget.Injectable });
PopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PopupService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PopupService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () { return [{ type: i1.DialogService }]; } });
class PopupModule {
}
PopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
PopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PopupModule, declarations: [PopupComponent,
PopupContentComponent], imports: [CommonModule,
ModalModule], exports: [PopupComponent] });
PopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PopupModule, providers: [PopupService], imports: [[
CommonModule,
ModalModule,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PopupModule, decorators: [{
type: NgModule,
args: [{
declarations: [
PopupComponent,
PopupContentComponent,
],
imports: [
CommonModule,
ModalModule,
],
providers: [PopupService],
exports: [
PopupComponent,
],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PopupComponent, PopupModule, PopupService, PopupSize, PopupSizeParams };
//# sourceMappingURL=c-standard-angular-devui-extension-popup.mjs.map