@koalarx/ui
Version:
Koala UI is a Design System developed in Angular whose objective is to facilitate and make your development faster and simpler, making this framework your greatest ally.
120 lines (114 loc) • 8.43 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, NgModule, Injectable } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i4 from '@angular/material/dialog';
import { MatDialogModule } from '@angular/material/dialog';
import { randomString } from '@koalarx/utils/operators/string';
import * as i2$1 from 'ngx-device-detector';
class DialogComponent {
}
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DialogComponent, selector: "koala-dialog", inputs: { titleDialog: "titleDialog", iconTitleDialog: "iconTitleDialog", triggerDialogClose: "triggerDialogClose", btnCloseLabel: "btnCloseLabel", btnCloseColor: "btnCloseColor" }, ngImport: i0, template: "<div *ngIf=\"titleDialog\" mat-dialog-title>\n <mat-icon *ngIf=\"iconTitleDialog\">{{iconTitleDialog}}</mat-icon>\n <h2>\n {{titleDialog}}\n </h2>\n</div>\n<mat-dialog-content>\n <ng-content select=\"[dialog-content]\"></ng-content>\n</mat-dialog-content>\n<div align=\"end\" mat-dialog-actions>\n <button [color]=\"btnCloseColor\" [mat-dialog-close]=\"triggerDialogClose\" class=\"mr-8\" mat-button>\n {{btnCloseLabel}}\n </button>\n <ng-content select=\"[dialog-actions]\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, decorators: [{
type: Component,
args: [{ selector: 'koala-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"titleDialog\" mat-dialog-title>\n <mat-icon *ngIf=\"iconTitleDialog\">{{iconTitleDialog}}</mat-icon>\n <h2>\n {{titleDialog}}\n </h2>\n</div>\n<mat-dialog-content>\n <ng-content select=\"[dialog-content]\"></ng-content>\n</mat-dialog-content>\n<div align=\"end\" mat-dialog-actions>\n <button [color]=\"btnCloseColor\" [mat-dialog-close]=\"triggerDialogClose\" class=\"mr-8\" mat-button>\n {{btnCloseLabel}}\n </button>\n <ng-content select=\"[dialog-actions]\"></ng-content>\n</div>\n" }]
}], propDecorators: { titleDialog: [{
type: Input
}], iconTitleDialog: [{
type: Input
}], triggerDialogClose: [{
type: Input
}], btnCloseLabel: [{
type: Input
}], btnCloseColor: [{
type: Input
}] } });
class KoalaDialogModule {
}
KoalaDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
KoalaDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: KoalaDialogModule, declarations: [DialogComponent], imports: [CommonModule,
MatIconModule,
MatButtonModule,
MatDialogModule], exports: [DialogComponent] });
KoalaDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaDialogModule, imports: [CommonModule,
MatIconModule,
MatButtonModule,
MatDialogModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaDialogModule, decorators: [{
type: NgModule,
args: [{
declarations: [
DialogComponent
],
imports: [
CommonModule,
MatIconModule,
MatButtonModule,
MatDialogModule
],
exports: [
DialogComponent
]
}]
}] });
class KoalaDialogService {
constructor(dialog, deviceService) {
this.dialog = dialog;
this.deviceService = deviceService;
}
open(dialogComponent, size, data, triggerBeforeClosed = false, beforeClosed) {
const dialogRef = this.dialog.open(dialogComponent, this.dialogTemplate(data)[this.deviceService.isMobile() ? 'mobile' : size]);
dialogRef.afterOpened().subscribe(() => {
history.pushState(null, '', location.href);
return false;
});
dialogRef.beforeClosed().subscribe(event => {
if ((triggerBeforeClosed && event === triggerBeforeClosed) ||
(typeof triggerBeforeClosed == 'object' && typeof event == 'object')) {
if (beforeClosed) {
beforeClosed(event);
}
}
});
dialogRef.keydownEvents().subscribe(event => {
if (event.key === 'Escape') {
dialogRef.close({ closeOnNavigation: true });
}
});
}
dialogTemplate(data = null) {
let dialogElementId = "dialog-" + randomString(10);
return {
auto: { id: dialogElementId, panelClass: ['koala-dialog', 'auto'], disableClose: true, data },
small: { id: dialogElementId, panelClass: ['koala-dialog', 'small'], disableClose: true, data },
normal: { id: dialogElementId, panelClass: ['koala-dialog', 'normal'], disableClose: true, data },
big: { id: dialogElementId, panelClass: ['koala-dialog', 'big'], disableClose: true, data },
fullScreen: { id: dialogElementId, panelClass: ['koala-dialog'], disableClose: true, data },
mobile: {
id: dialogElementId,
autoFocus: false,
panelClass: ["koala-dialog", 'mobile'],
width: '100vw',
maxWidth: '100vw',
maxHeight: '90vh',
data
}
};
}
}
KoalaDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaDialogService, deps: [{ token: i4.MatDialog }, { token: i2$1.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Injectable });
KoalaDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaDialogService, providedIn: "any" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaDialogService, decorators: [{
type: Injectable,
args: [{ providedIn: "any" }]
}], ctorParameters: function () { return [{ type: i4.MatDialog }, { type: i2$1.DeviceDetectorService }]; } });
/**
* Generated bundle index. Do not edit.
*/
export { DialogComponent, KoalaDialogModule, KoalaDialogService };
//# sourceMappingURL=koalarx-ui-dialog.mjs.map