ack-angular
Version:
Extra special directives, components, providers and pipes to aide in tackling everyday interface development needs in Angular2
738 lines (719 loc) • 214 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Injectable, Output, Directive, Input, Component, ContentChild, ViewChild, Pipe, TemplateRef, ContentChildren, HostListener, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { animations } from 'ack-angular-fx';
import { ack as ack$1 } from 'ack-x/es/index-browser';
export { ack } from 'ack-x/es/index-browser';
import * as i1$1 from '@angular/platform-browser';
import { BehaviorSubject } from 'rxjs';
import * as i1$2 from '@angular/router';
import { NavigationEnd, RouterModule } from '@angular/router';
class HtmlSizeService {
constructor() {
this.change = new EventEmitter();
this.htmlSize = { width: null, height: null };
this.onResize = () => {
this.htmlSize.width = window.document.documentElement.clientWidth;
this.htmlSize.height = window.document.documentElement.clientHeight;
this.change.emit();
};
this.checkWatchers();
this.onResize();
}
checkWatchers() {
if (this.change.observers.length) {
window.addEventListener('resize', this.onResize);
//window.addEventListener('scroll', this.onResize)
}
else {
window.removeEventListener('resize', this.onResize);
//window.removeEventListener('scroll', this.onResize)
}
}
}
HtmlSizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: HtmlSizeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
HtmlSizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: HtmlSizeService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: HtmlSizeService, decorators: [{
type: Injectable
}], ctorParameters: function () { return []; }, propDecorators: { change: [{
type: Output
}] } });
class Log {
constructor() {
this.log = [];
this.maxLog = 80;
}
add(e, toConsole) {
const ob = this.paramAudit(e, toConsole);
this.log.unshift(ob);
if (this.maxLog) {
while (this.log.length > this.maxLog) {
this.log.pop(); //remove last
}
}
return e;
}
paramAudit(e, toConsole) {
switch (e.constructor) {
case String:
case Boolean:
case Number: {
e = { message: e };
}
}
if (toConsole == null || toConsole)
console.log(e);
e['datetime'] = e['datetime'] || getDateTimeString$1();
return e;
}
}
Log.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: Log, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
Log.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: Log });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: Log, decorators: [{
type: Injectable
}] });
function getDateTimeString$1() {
return (function (d) { return (('0' + (d.getMonth() + 1)).slice(-2) + '/' + ('0' + d.getDate()).slice(-2) + '/' + d.getFullYear()); })(new Date()) + ' ' + (function (d) { var h = d.getHours(), t = 'AM', m = d.getMinutes(); var mn = m < 10 ? '0' + m : m; h = h >= 12 ? (t = 'PM', h - 12 || 12) : h == 0 ? 12 : h; return ('0' + h).slice(-2) + ':' + ('0' + mn).slice(-2) + ' ' + t; })(new Date());
}
class Prompts {
constructor() {
this.prompts = [];
}
remove(prompt) {
for (let x = this.prompts.length - 1; x >= 0; --x) {
if (this.prompts[x] == prompt) {
this.prompts.splice(x, 1);
return;
}
}
}
issuePrompt(prompt) {
this.prompts.push(prompt);
prompt.emitter.subscribe(() => this.remove(prompt));
return prompt.emitter;
}
alert(message, options = {}) {
options.emitter = new EventEmitter();
options.type = "alert";
options.message = message;
return this.issuePrompt(options);
}
confirm(message, options = {}) {
options.emitter = new EventEmitter();
options.type = "confirm";
options.message = message;
return this.issuePrompt(options);
}
}
Prompts.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: Prompts, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
Prompts.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: Prompts });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: Prompts, decorators: [{
type: Injectable
}] });
class AckApp {
constructor(prompts) {
this.prompts = prompts;
this.warnedFixElements = true;
this.fixedElms = [];
this.modals = [];
}
registerModal(item) {
this.modals.push(item);
return this;
}
unregisterModal(item) {
for (let index = this.modals.length - 1; index >= 0; --index) {
if (this.modals[index] == item) {
this.modals.splice(index, 1);
break;
}
}
return this;
}
}
AckApp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: AckApp, deps: [{ token: Prompts }], target: i0.ɵɵFactoryTarget.Injectable });
AckApp.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: AckApp });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: AckApp, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: Prompts }]; } });
class ErrorLog {
constructor() {
this.log = [];
this.maxLog = 30;
}
monitorWindow(win) {
win = win || window;
const callback = (evt) => this.add(evt, false);
win.addEventListener('error', callback);
}
reject(err) {
const e = this.add(err);
return Promise.reject(e);
}
rejector() {
return (err) => this.reject(err);
}
add(e, toConsole) {
const ob = this.paramAudit(e, toConsole);
this.log.unshift(ob);
if (this.maxLog) {
while (this.log.length > this.maxLog) {
this.log.pop(); //remove last
}
}
return logObToErrorObject(ob);
}
//api error to js Error object
paramAudit(e, toConsole) {
if (e.constructor === String) {
e = new Error(e);
}
if (toConsole == null || toConsole)
console.error(e);
const err = this.objectifyError(e);
err['datetime'] = err['datetime'] || getDateTimeString();
if (!e.message && e.status == -1) {
e.message = "Cannot connect to server";
e.details = e.details || "Connection to internet maybe down. Also possible CORS needs be to enabled at remote server.";
}
return err;
}
/** Convert Error object to a regular object */
objectifyError(err) {
const keys = Object.getOwnPropertyNames(err);
keys.push.apply(keys, Object.keys(err));
const recErr = {}; //new Error(err.message || err.name || err.type || 'Unexpected Error Occured')
keys.forEach(v => recErr[v] = err[v]);
const knownKeys = ["stack", "message", "name", "arguments", "type"];
knownKeys.forEach(key => {
if (typeof err[key] != 'undefined') {
recErr[key] = err[key];
}
});
const body = err.body || err._body;
//auto attempt to parse body
if (body && !err.data && err.headers) {
const contentType = err.headers.get('content-type');
if (contentType && contentType.toLowerCase() == 'application/json') {
try {
recErr.data = JSON.parse(body);
}
catch (e) { }
}
}
return recErr;
}
/** same as reject but uses native throw instead of native Promise.reject */
rethrow(err) {
const e = this.add(err);
throw e;
}
}
ErrorLog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: ErrorLog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
ErrorLog.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: ErrorLog });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: ErrorLog, decorators: [{
type: Injectable
}] });
function getErrorMessage(err) {
return err.message || err.statusText || err.name || 'Unexpected Error Occured';
}
function getResponseMessage(res) {
if (res.data && res.data.error && res.data.error.message) {
return res.data.error.message;
}
return getErrorMessage(res);
}
function logObToErrorObject(log) {
const e = new Error(getResponseMessage(log));
Object.keys(log).forEach(v => e[v] = log[v]);
return e;
}
function getDateTimeString() {
return (function (d) { return (('0' + (d.getMonth() + 1)).slice(-2) + '/' + ('0' + d.getDate()).slice(-2) + '/' + d.getFullYear()); })(new Date()) + ' ' + (function (d) { var h = d.getHours(), t = 'AM', m = d.getMinutes(); var mn = m < 10 ? '0' + m : m; h = h >= 12 ? (t = 'PM', h - 12 || 12) : h == 0 ? 12 : h; return ('0' + h).slice(-2) + ':' + ('0' + mn).slice(-2) + ' ' + t; })(new Date());
}
function getWindow() { return window; }
class WindowService {
get nativeElement() { return getWindow(); }
//deprecated
get nativeWindow() { return getWindow(); }
}
WindowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: WindowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
WindowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: WindowService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: WindowService, decorators: [{
type: Injectable
}] });
class UrlVars {
constructor(WindowService) {
this.WindowService = WindowService;
this.vars = this.parse();
}
parse() {
var regex = /[?&]([^=#]+)(=([^&#]*))?/g, url = this.WindowService.nativeWindow.location.href, params = {}, match;
while (match = regex.exec(url)) {
params[match[1]] = match[2] == null ? true : match[3];
}
return params;
}
/** case in-sensative variable fetch */
get(name, param) {
if (!name)
return;
if (this.vars && this.vars[name] != null) //try exact match first
return this.vars[name];
//case insensative search
var lcase = name.toLowerCase();
for (var key in this.vars) {
if (lcase == key.toLowerCase())
return this.vars[key];
}
return param;
}
}
UrlVars.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: UrlVars, deps: [{ token: WindowService }], target: i0.ɵɵFactoryTarget.Injectable });
UrlVars.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: UrlVars });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: UrlVars, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: WindowService }]; } });
function getDocument() { return document; }
class DocumentService {
get nativeElement() { return getDocument(); }
}
DocumentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: DocumentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
DocumentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: DocumentService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: DocumentService, decorators: [{
type: Injectable
}] });
const providers$1 = [
Log,
ErrorLog,
AckApp,
UrlVars,
WindowService,
DocumentService,
Prompts,
HtmlSizeService
];
class SectionProvider {
constructor() {
//appTemplates:AckSectionTemplates[] = []
this.headerTemplates = [];
this.footerTemplates = [];
this.leftBodyTemplates = [];
this.rightBodyTemplates = [];
}
unregisterHeaderTemplate(item) {
this.unregisterTemplateFrom(item, this.headerTemplates);
}
unregisterFooterTemplate(item) {
this.unregisterTemplateFrom(item, this.footerTemplates);
}
unregisterTemplateFrom(item, templates) {
for (let x = templates.length - 1; x >= 0; --x) {
if (templates[x] === item) {
templates.splice(x, 1);
break;
}
}
}
unregisterTemplate(item) {
this.unregisterTemplateFrom(item, this.headerTemplates);
this.unregisterTemplateFrom(item, this.footerTemplates);
this.unregisterTemplateFrom(item, this.leftBodyTemplates);
this.unregisterTemplateFrom(item, this.rightBodyTemplates);
}
}
SectionProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: SectionProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
SectionProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: SectionProvider });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: SectionProvider, decorators: [{
type: Injectable
}] });
const string$5 = "<ng-container [(htmlHeightModel)]=\"htmlHeightModel\"></ng-container><ng-container *ngIf=\"SectionProvider.headerTemplates.length\"><div *ngIf=\"mode==='calculate'\" style=\"position:fixed;top:0;width:100%\" [style.z-index]=\"zIndex\" [(elementHeightModel)]=\"headerHeight\" [elementSizeModelWatch]=\"SectionProvider.headerTemplates.length\"><ng-template *ngTemplateOutlet=\"headerWrap || headerContent;context:{outlet:headerContent}\"></ng-template></div><ng-template #headerContent=\"\"><ng-container *ngFor=\"let item of SectionProvider.headerTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></ng-template><div *ngIf=\"!mode || mode==='clone'\" style=\"position:fixed;top:0;width:100%\" [style.z-index]=\"zIndex\"><ng-template *ngTemplateOutlet=\"headerContent\"></ng-template></div></ng-container><ng-template *ngTemplateOutlet=\"table || defaultTableTag;context:{outlet:tableRows}\"></ng-template><ng-template #defaultTableTag=\"\"><table style=\"height:100%;width:100%;border-collapse: collapse;\" cellPadding=\"0\" cellSpacing=\"0\" border=\"0\"><ng-template *ngTemplateOutlet=\"tableRows\"></ng-template></table></ng-template><ng-template #tableRows=\"\"><tr *ngIf=\"SectionProvider.headerTemplates.length\"><td colspan=\"3\" [style.height.px]=\"headerHeight\" style=\"visibility:hidden\"><ng-container *ngIf=\"!mode || mode==='clone'\"><ng-container *ngFor=\"let item of SectionProvider.headerTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></ng-container></td></tr><tr><td *ngIf=\"SectionProvider.leftBodyTemplates.length\" [style.min-width.px]=\"leftBodyWidth\" valign=\"top\" align=\"right\"><ng-template #defaultLeftBodyWrap=\"\"><div style=\"overflow:auto;height:100%;\"><ng-template *ngTemplateOutlet=\"leftBodyContent\"></ng-template></div></ng-template><ng-template #leftBodyContent=\"\"><ng-container *ngFor=\"let item of SectionProvider.leftBodyTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></ng-template><div *ngIf=\"mode==='calculate'\" style=\"position:fixed;\" [style.z-index]=\"zIndex - 1\" [style.height.px]=\"htmlHeightModel - (SectionProvider.headerTemplates.length ? headerHeight : 0) - (SectionProvider.footerTemplates.length ? footerHeight : 0)\" [(elementWidthModel)]=\"leftBodyWidth\" [elementSizeModelWatch]=\"SectionProvider.leftBodyTemplates.length\"><ng-template *ngTemplateOutlet=\"leftBodyWrap || defaultLeftBodyWrap;context:{outlet:leftBodyContent}\"></ng-template></div><div *ngIf=\"!mode || mode==='clone'\" style=\"position:fixed;top:0;\" [style.z-index]=\"zIndex - 1\"><ng-template *ngTemplateOutlet=\"leftBodyWrap || defaultLeftBodyWrap;context:{outlet:leftBodyContent}\"></ng-template></div><ng-container *ngIf=\"!mode || mode==='clone'\"><ng-template *ngTemplateOutlet=\"leftBodyWrap || defaultLeftBodyWrap;context:{outlet:leftBodyContent}\"></ng-template></ng-container></td><ng-container *ngTemplateOutlet=\"bodyCell || defaultBodyCell;context:{outlet:body}\"></ng-container><ng-template #defaultBodyCell=\"\"><td style=\"height:100%\" valign=\"top\"><ng-template *ngTemplateOutlet=\"body\"></ng-template></td></ng-template><ng-template #body=\"\"><ng-content></ng-content></ng-template><td *ngIf=\"SectionProvider.rightBodyTemplates.length\" [style.min-width.px]=\"rightBodyWidth\" valign=\"top\" align=\"left\"><ng-template #defaultRightBodyWrap=\"\"><div style=\"overflow:auto;height:100%;\"><ng-template *ngTemplateOutlet=\"rightBodyContent\"></ng-template></div></ng-template><ng-template #rightBodyContent=\"\"><ng-container *ngFor=\"let item of SectionProvider.rightBodyTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></ng-template><div *ngIf=\"mode==='calculate'\" style=\"position:fixed;\" [style.z-index]=\"zIndex - 1\" [style.height.px]=\"htmlHeightModel - (SectionProvider.headerTemplates.length ? headerHeight : 0) - (SectionProvider.footerTemplates.length ? footerHeight : 0)\" [(elementWidthModel)]=\"rightBodyWidth\" [elementSizeModelWatch]=\"SectionProvider.rightBodyTemplates.length\"><ng-template *ngTemplateOutlet=\"rightBodyWrap || defaultRightBodyWrap;context:{outlet:rightBodyContent}\"></ng-template></div><div *ngIf=\"!mode || mode==='clone'\" style=\"position:fixed;top:0;overflow:auto;\" [style.z-index]=\"zIndex - 1\"><ng-template *ngTemplateOutlet=\"rightBodyWrap || defaultRightBodyWrap;context:{outlet:rightBodyContent}\"></ng-template></div><ng-container *ngIf=\"!mode || mode==='clone'\"><ng-template *ngTemplateOutlet=\"rightBodyWrap || defaultRightBodyWrap;context:{outlet:rightBodyContent}\"></ng-template></ng-container></td></tr><tr *ngIf=\"SectionProvider.footerTemplates.length\"><td colspan=\"3\" [style.height.px]=\"footerHeight\"><div *ngIf=\"!mode || mode==='clone'\" style=\"visibility:hidden\"><ng-container *ngFor=\"let item of SectionProvider.footerTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></div></td></tr></ng-template><ng-container *ngIf=\"SectionProvider.footerTemplates.length\"><div *ngIf=\"mode==='calculate'\" style=\"position:fixed;bottom:0;width:100%\" [style.z-index]=\"zIndex\" [(elementHeightModel)]=\"footerHeight\" [elementSizeModelWatch]=\"SectionProvider.footerTemplates.length\"><ng-container *ngFor=\"let item of SectionProvider.footerTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></div><div *ngIf=\"!mode || mode==='clone'\" style=\"position:fixed;bottom:0;width:100%\" [style.z-index]=\"zIndex\"><ng-container *ngFor=\"let item of SectionProvider.footerTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></div></ng-container>";
class HtmlWidthModel {
constructor(HtmlSizeService) {
this.HtmlSizeService = HtmlSizeService;
this.htmlWidthModelChange = new EventEmitter();
this.sub = this.HtmlSizeService.change.subscribe(() => this.changed());
this.HtmlSizeService.checkWatchers();
/*if( this.HtmlSizeService.htmlSize ){
this.changed()
}*/
}
ngAfterViewInit() {
Promise.resolve().then(() => this.changed()); //two way bind often needs init override
}
ngOnDestroy() {
this.sub.unsubscribe();
this.HtmlSizeService.checkWatchers();
}
changed() {
if (!this.HtmlSizeService.htmlSize || !this.hasChanged())
return;
this.setModel(this.HtmlSizeService.htmlSize);
}
hasChanged() {
return this.htmlWidthModel !== window.document.documentElement.clientWidth;
}
setModel(htmlSize) {
this.htmlWidthModel = htmlSize.width;
this.htmlWidthModelChange.emit(this.htmlWidthModel);
}
}
HtmlWidthModel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: HtmlWidthModel, deps: [{ token: HtmlSizeService }], target: i0.ɵɵFactoryTarget.Directive });
HtmlWidthModel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.4", type: HtmlWidthModel, selector: "[htmlWidthModel]", inputs: { htmlWidthModel: "htmlWidthModel" }, outputs: { htmlWidthModelChange: "htmlWidthModelChange" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: HtmlWidthModel, decorators: [{
type: Directive,
args: [{
selector: '[htmlWidthModel]'
}]
}], ctorParameters: function () { return [{ type: HtmlSizeService }]; }, propDecorators: { htmlWidthModel: [{
type: Input
}], htmlWidthModelChange: [{
type: Output
}] } });
class HtmlHeightModel extends HtmlWidthModel {
constructor(HtmlSizeService) {
super(HtmlSizeService);
this.HtmlSizeService = HtmlSizeService;
this.htmlHeightModelChange = new EventEmitter();
}
hasChanged() {
return this.htmlHeightModel !== window.document.documentElement.clientHeight;
}
setModel(model) {
this.htmlHeightModel = model.height;
this.htmlHeightModelChange.emit(this.htmlHeightModel);
}
}
HtmlHeightModel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: HtmlHeightModel, deps: [{ token: HtmlSizeService }], target: i0.ɵɵFactoryTarget.Directive });
HtmlHeightModel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.4", type: HtmlHeightModel, selector: "[htmlHeightModel]", inputs: { htmlHeightModel: "htmlHeightModel" }, outputs: { htmlHeightModelChange: "htmlHeightModelChange" }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: HtmlHeightModel, decorators: [{
type: Directive,
args: [{
selector: '[htmlHeightModel]'
}]
}], ctorParameters: function () { return [{ type: HtmlSizeService }]; }, propDecorators: { htmlHeightModel: [{
type: Input
}], htmlHeightModelChange: [{
type: Output
}] } });
class ElementSizeModel {
constructor(element) {
this.element = element;
this.elementSizeModelChange = new EventEmitter();
}
ngAfterViewInit() {
this.onResize = () => {
this.setModel();
};
window.addEventListener('resize', this.onResize);
Promise.resolve().then(() => this.setModel());
this.observer = new MutationObserver(() => {
this.setModel();
});
const config = {
attributes: true,
childList: true,
characterData: true,
subtree: true
};
this.observer.observe(this.element.nativeElement, config);
setTimeout(() => this.setModel(), 800);
}
ngOnChanges() {
Promise.resolve().then(() => {
if (!this.inChange) {
this.setModel();
}
});
}
setModel() {
this.elementSizeModel = this.elementSizeModel || {};
this.inChange = true;
this.elementSizeModel.width = this.element.nativeElement.offsetWidth;
this.elementSizeModel.height = this.element.nativeElement.offsetHeight;
this.elementSizeModelChange.emit(this.elementSizeModel);
Promise.resolve().then(() => {
this.inChange = false;
});
}
ngOnDestroy() {
this.observer.disconnect();
window.removeEventListener('resize', this.onResize);
}
}
ElementSizeModel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: ElementSizeModel, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ElementSizeModel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.4", type: ElementSizeModel, selector: "[elementSizeModel]", inputs: { elementSizeModelWatch: "elementSizeModelWatch", elementSizeModel: "elementSizeModel" }, outputs: { elementSizeModelChange: "elementSizeModelChange" }, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: ElementSizeModel, decorators: [{
type: Directive,
args: [{
selector: '[elementSizeModel]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { elementSizeModelWatch: [{
type: Input
}], elementSizeModel: [{
type: Input
}], elementSizeModelChange: [{
type: Output
}] } });
class ElementHeightModel extends ElementSizeModel {
constructor(element) {
super(element);
this.element = element;
this.elementHeightModelChange = new EventEmitter();
}
setModel() {
this.elementHeightModel = this.element.nativeElement.offsetHeight;
this.elementHeightModelChange.emit(this.elementHeightModel);
}
}
ElementHeightModel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: ElementHeightModel, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ElementHeightModel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.4", type: ElementHeightModel, selector: "[elementHeightModel]", inputs: { elementHeightModel: "elementHeightModel" }, outputs: { elementHeightModelChange: "elementHeightModelChange" }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: ElementHeightModel, decorators: [{
type: Directive,
args: [{
selector: '[elementHeightModel]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { elementHeightModel: [{
type: Input
}], elementHeightModelChange: [{
type: Output
}] } });
class ElementWidthModel extends ElementSizeModel {
constructor(element) {
super(element);
this.element = element;
this.elementWidthModelChange = new EventEmitter();
}
setModel() {
this.elementWidthModel = this.element.nativeElement.offsetWidth;
this.elementWidthModelChange.emit(this.elementWidthModel);
}
}
ElementWidthModel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: ElementWidthModel, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ElementWidthModel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.4", type: ElementWidthModel, selector: "[elementWidthModel]", inputs: { elementWidthModel: "elementWidthModel" }, outputs: { elementWidthModelChange: "elementWidthModelChange" }, exportAs: ["ElementWidthModel"], usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: ElementWidthModel, decorators: [{
type: Directive,
args: [{
selector: '[elementWidthModel]',
exportAs: 'ElementWidthModel'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { elementWidthModel: [{
type: Input
}], elementWidthModelChange: [{
type: Output
}] } });
class AckSections {
constructor(SectionProvider, ElementRef) {
this.SectionProvider = SectionProvider;
this.ElementRef = ElementRef;
//clone is more performant in most cases but things duplicate like requests and timers may result
this.mode = "calculate";
this.zIndex = 19;
const elmStyle = ElementRef.nativeElement.style;
elmStyle.height = "100%";
elmStyle.display = "block";
}
}
AckSections.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: AckSections, deps: [{ token: SectionProvider }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
AckSections.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: AckSections, selector: "ack-sections", inputs: { mode: "mode", zIndex: "zIndex" }, providers: [SectionProvider], queries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "headerWrap", first: true, predicate: ["headerWrap"], descendants: true }, { propertyName: "bodyCell", first: true, predicate: ["bodyCell"], descendants: true }, { propertyName: "leftBodyWrap", first: true, predicate: ["leftBodyWrap"], descendants: true }, { propertyName: "rightBodyWrap", first: true, predicate: ["rightBodyWrap"], descendants: true }], ngImport: i0, template: "<ng-container [(htmlHeightModel)]=\"htmlHeightModel\"></ng-container><ng-container *ngIf=\"SectionProvider.headerTemplates.length\"><div *ngIf=\"mode==='calculate'\" style=\"position:fixed;top:0;width:100%\" [style.z-index]=\"zIndex\" [(elementHeightModel)]=\"headerHeight\" [elementSizeModelWatch]=\"SectionProvider.headerTemplates.length\"><ng-template *ngTemplateOutlet=\"headerWrap || headerContent;context:{outlet:headerContent}\"></ng-template></div><ng-template #headerContent=\"\"><ng-container *ngFor=\"let item of SectionProvider.headerTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></ng-template><div *ngIf=\"!mode || mode==='clone'\" style=\"position:fixed;top:0;width:100%\" [style.z-index]=\"zIndex\"><ng-template *ngTemplateOutlet=\"headerContent\"></ng-template></div></ng-container><ng-template *ngTemplateOutlet=\"table || defaultTableTag;context:{outlet:tableRows}\"></ng-template><ng-template #defaultTableTag=\"\"><table style=\"height:100%;width:100%;border-collapse: collapse;\" cellPadding=\"0\" cellSpacing=\"0\" border=\"0\"><ng-template *ngTemplateOutlet=\"tableRows\"></ng-template></table></ng-template><ng-template #tableRows=\"\"><tr *ngIf=\"SectionProvider.headerTemplates.length\"><td colspan=\"3\" [style.height.px]=\"headerHeight\" style=\"visibility:hidden\"><ng-container *ngIf=\"!mode || mode==='clone'\"><ng-container *ngFor=\"let item of SectionProvider.headerTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></ng-container></td></tr><tr><td *ngIf=\"SectionProvider.leftBodyTemplates.length\" [style.min-width.px]=\"leftBodyWidth\" valign=\"top\" align=\"right\"><ng-template #defaultLeftBodyWrap=\"\"><div style=\"overflow:auto;height:100%;\"><ng-template *ngTemplateOutlet=\"leftBodyContent\"></ng-template></div></ng-template><ng-template #leftBodyContent=\"\"><ng-container *ngFor=\"let item of SectionProvider.leftBodyTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></ng-template><div *ngIf=\"mode==='calculate'\" style=\"position:fixed;\" [style.z-index]=\"zIndex - 1\" [style.height.px]=\"htmlHeightModel - (SectionProvider.headerTemplates.length ? headerHeight : 0) - (SectionProvider.footerTemplates.length ? footerHeight : 0)\" [(elementWidthModel)]=\"leftBodyWidth\" [elementSizeModelWatch]=\"SectionProvider.leftBodyTemplates.length\"><ng-template *ngTemplateOutlet=\"leftBodyWrap || defaultLeftBodyWrap;context:{outlet:leftBodyContent}\"></ng-template></div><div *ngIf=\"!mode || mode==='clone'\" style=\"position:fixed;top:0;\" [style.z-index]=\"zIndex - 1\"><ng-template *ngTemplateOutlet=\"leftBodyWrap || defaultLeftBodyWrap;context:{outlet:leftBodyContent}\"></ng-template></div><ng-container *ngIf=\"!mode || mode==='clone'\"><ng-template *ngTemplateOutlet=\"leftBodyWrap || defaultLeftBodyWrap;context:{outlet:leftBodyContent}\"></ng-template></ng-container></td><ng-container *ngTemplateOutlet=\"bodyCell || defaultBodyCell;context:{outlet:body}\"></ng-container><ng-template #defaultBodyCell=\"\"><td style=\"height:100%\" valign=\"top\"><ng-template *ngTemplateOutlet=\"body\"></ng-template></td></ng-template><ng-template #body=\"\"><ng-content></ng-content></ng-template><td *ngIf=\"SectionProvider.rightBodyTemplates.length\" [style.min-width.px]=\"rightBodyWidth\" valign=\"top\" align=\"left\"><ng-template #defaultRightBodyWrap=\"\"><div style=\"overflow:auto;height:100%;\"><ng-template *ngTemplateOutlet=\"rightBodyContent\"></ng-template></div></ng-template><ng-template #rightBodyContent=\"\"><ng-container *ngFor=\"let item of SectionProvider.rightBodyTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></ng-template><div *ngIf=\"mode==='calculate'\" style=\"position:fixed;\" [style.z-index]=\"zIndex - 1\" [style.height.px]=\"htmlHeightModel - (SectionProvider.headerTemplates.length ? headerHeight : 0) - (SectionProvider.footerTemplates.length ? footerHeight : 0)\" [(elementWidthModel)]=\"rightBodyWidth\" [elementSizeModelWatch]=\"SectionProvider.rightBodyTemplates.length\"><ng-template *ngTemplateOutlet=\"rightBodyWrap || defaultRightBodyWrap;context:{outlet:rightBodyContent}\"></ng-template></div><div *ngIf=\"!mode || mode==='clone'\" style=\"position:fixed;top:0;overflow:auto;\" [style.z-index]=\"zIndex - 1\"><ng-template *ngTemplateOutlet=\"rightBodyWrap || defaultRightBodyWrap;context:{outlet:rightBodyContent}\"></ng-template></div><ng-container *ngIf=\"!mode || mode==='clone'\"><ng-template *ngTemplateOutlet=\"rightBodyWrap || defaultRightBodyWrap;context:{outlet:rightBodyContent}\"></ng-template></ng-container></td></tr><tr *ngIf=\"SectionProvider.footerTemplates.length\"><td colspan=\"3\" [style.height.px]=\"footerHeight\"><div *ngIf=\"!mode || mode==='clone'\" style=\"visibility:hidden\"><ng-container *ngFor=\"let item of SectionProvider.footerTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></div></td></tr></ng-template><ng-container *ngIf=\"SectionProvider.footerTemplates.length\"><div *ngIf=\"mode==='calculate'\" style=\"position:fixed;bottom:0;width:100%\" [style.z-index]=\"zIndex\" [(elementHeightModel)]=\"footerHeight\" [elementSizeModelWatch]=\"SectionProvider.footerTemplates.length\"><ng-container *ngFor=\"let item of SectionProvider.footerTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></div><div *ngIf=\"!mode || mode==='clone'\" style=\"position:fixed;bottom:0;width:100%\" [style.z-index]=\"zIndex\"><ng-container *ngFor=\"let item of SectionProvider.footerTemplates\"><ng-template *ngTemplateOutlet=\"item\"></ng-template></ng-container></div></ng-container>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: HtmlHeightModel, selector: "[htmlHeightModel]", inputs: ["htmlHeightModel"], outputs: ["htmlHeightModelChange"] }, { kind: "directive", type: ElementWidthModel, selector: "[elementWidthModel]", inputs: ["elementWidthModel"], outputs: ["elementWidthModelChange"], exportAs: ["ElementWidthModel"] }, { kind: "directive", type: ElementHeightModel, selector: "[elementHeightModel]", inputs: ["elementHeightModel"], outputs: ["elementHeightModelChange"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: AckSections, decorators: [{
type: Component,
args: [{
selector: 'ack-sections',
template: string$5,
providers: [SectionProvider]
//,exportAs:"AckSections"
}]
}], ctorParameters: function () { return [{ type: SectionProvider }, { type: i0.ElementRef }]; }, propDecorators: { mode: [{
type: Input
}], zIndex: [{
type: Input
}], table: [{
type: ContentChild,
args: ["table"]
}], headerWrap: [{
type: ContentChild,
args: ["headerWrap"]
}], bodyCell: [{
type: ContentChild,
args: ["bodyCell"]
}], leftBodyWrap: [{
type: ContentChild,
args: ["leftBodyWrap"]
}], rightBodyWrap: [{
type: ContentChild,
args: ["rightBodyWrap"]
}] } });
class AckSectionTemplates {
constructor(SectionProvider) {
this.SectionProvider = SectionProvider;
}
ngAfterViewInit() {
Promise.resolve().then(() => {
this.check();
this.inited = true;
});
}
ngOnChanges() {
if (this.inited) {
this.check();
}
}
check() {
if (this.pushed)
return;
if (this.header) {
this.SectionProvider.headerTemplates.unshift(this.header);
}
if (this.footer) {
this.SectionProvider.footerTemplates.unshift(this.footer);
}
if (this.leftBody) {
this.SectionProvider.leftBodyTemplates.unshift(this.leftBody);
}
if (this.rightBody) {
this.SectionProvider.rightBodyTemplates.unshift(this.rightBody);
}
this.pushed = true;
}
ngOnDestroy() {
Promise.resolve().then(() => this.unregister());
}
unregister() {
this.pushed = false;
this.SectionProvider.unregisterHeaderTemplate(this.header);
this.SectionProvider.unregisterFooterTemplate(this.footer);
this.SectionProvider.unregisterTemplate(this.leftBody);
this.SectionProvider.unregisterTemplate(this.rightBody);
}
}
AckSectionTemplates.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: AckSectionTemplates, deps: [{ token: SectionProvider }], target: i0.ɵɵFactoryTarget.Directive });
AckSectionTemplates.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.4", type: AckSectionTemplates, selector: "ack-section-templates", queries: [{ propertyName: "header", first: true, predicate: ["sectionHeader"], descendants: true }, { propertyName: "footer", first: true, predicate: ["sectionFooter"], descendants: true }, { propertyName: "leftBody", first: true, predicate: ["sectionLeftBody"], descendants: true }, { propertyName: "rightBody", first: true, predicate: ["sectionRightBody"], descendants: true }], usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: AckSectionTemplates, decorators: [{
type: Directive,
args: [{
selector: "ack-section-templates"
}]
}], ctorParameters: function () { return [{ type: SectionProvider }]; }, propDecorators: { header: [{
type: ContentChild,
args: ['sectionHeader']
}], footer: [{
type: ContentChild,
args: ['sectionFooter']
}], leftBody: [{
type: ContentChild,
args: ['sectionLeftBody']
}], rightBody: [{
type: ContentChild,
args: ['sectionRightBody']
}] } });
const template = '<div style="display:inline-block;cursor:pointer;border:3px solid white;border-radius:50%;background-color:#666;color:white;text-align:center;font-family:Arial">' +
'<div style="font-weight:bold;line-height:22px;font-size:23px;height:25px;width:25px">x</div>' +
'</div>';
class AckCloseIcon {
}
AckCloseIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: AckCloseIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
AckCloseIcon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: AckCloseIcon, selector: "ack-close-icon", ngImport: i0, template: "<div style=\"display:inline-block;cursor:pointer;border:3px solid white;border-radius:50%;background-color:#666;color:white;text-align:center;font-family:Arial\"><div style=\"font-weight:bold;line-height:22px;font-size:23px;height:25px;width:25px\">x</div></div>", isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: AckCloseIcon, decorators: [{
type: Component,
args: [{
selector: 'ack-close-icon',
template: template
}]
}] });
class AckModalLayout {
//@Input() template:ElementRef<any>
constructor(element) {
this.element = element;
this.zIndex = 20;
this.close = new EventEmitter();
this.allowClose = true;
this.valign = 'top';
this.isModelMode = false;
this.showModel = true; // when using, do not allow to be undefined
this.showModelChange = new EventEmitter();
//after possible double click, close on outside content click
setTimeout(() => this.clickListenForClose(), 400);
}
clickListenForClose() {
this.element.nativeElement.addEventListener('click', (event) => {
if (!this.allowClose)
return false;
const eTar = event.srcElement || event.toElement || event.target;
const isDirectChild = eTar == this.element.nativeElement.children[0] || eTar == this.element.nativeElement.children[0].children[0];
if (isDirectChild) {
this.fireClose();
}
return true;
});
}
ngOnInit() {
return Promise.resolve().then(() => {
if (this.showModel !== undefined && this.showModelChange.observers.length) {
this.isModelMode = true;
}
});
}
fireClose() {
this.showModelChange.emit(this.showModel = false);
this.close.emit(this);
}
}
AckModalLayout.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: AckModalLayout, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
AckModalLayout.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: AckModalLayout, selector: "ack-modal-layout", inputs: { zIndex: "zIndex", allowClose: "allowClose", wrapStyle: "wrapStyle", wrapContentClass: "wrapContentClass", wrapCellStyle: "wrapCellStyle", backgroundColor: "backgroundColor", valign: "valign", isModelMode: "isModelMode", showModel: "showModel" }, outputs: { close: "close", showModelChange: "showModelChange" }, ngImport: i0, template: "<div *ngIf=\"showModel || !isModelMode\"\n [@fadeInOutUp]=\"1\"\n style=\"\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n overflow: auto;\n \"\n [style.z-index]=\"zIndex || 20\"\n>\n <div\n style=\"height: 100%; width: 100%; padding: 20px; display: inline-table\"\n [ngStyle]=\"{ 'background-color': backgroundColor || 'rgba(0,0,0,.7)' }\"\n >\n <table\n style=\"height: 100%; margin: auto\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"\n [ngStyle]=\"wrapStyle\"\n >\n <tr>\n <td (click)=\"allowClose ? fireClose() : 0\"></td>\n </tr>\n <tr>\n <td [attr.valign]=\"valign\" [ngStyle]=\"wrapCellStyle\" [ngClass]=\"wrapContentClass\">\n <div *ngIf=\"allowClose\" style=\"position: relative\">\n <div style=\"position: absolute;bottom: -17px;right: -16px;z-index: 20;\">\n <ack-close-icon (click)=\"fireClose()\"></ack-close-icon>\n </div>\n </div>\n <ng-content></ng-content>\n </td>\n </tr>\n <tr>\n <td (click)=\"allowClose ? fireClose() : 0\"></td>\n </tr>\n </table>\n </div>\n</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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AckCloseIcon, selector: "ack-close-icon" }], animations: animations });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: AckModalLayout, decorators: [{
type: Component,
args: [{ selector: 'ack-modal-layout', animations: animations, template: "<div *ngIf=\"showModel || !isModelMode\"\n [@fadeInOutUp]=\"1\"\n style=\"\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n overflow: auto;\n \"\n [style.z-index]=\"zIndex || 20\"\n>\n <div\n style=\"height: 100%; width: 100%; padding: 20px; display: inline-table\"\n [ngStyle]=\"{ 'background-color': backgroundColor || 'rgba(0,0,0,.7)' }\"\n >\n <table\n style=\"height: 100%; margin: auto\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"\n [ngStyle]=\"wrapStyle\"\n >\n <tr>\n <td (click)=\"allowClose ? fireClose() : 0\"></td>\n </tr>\n <tr>\n <td [attr.valign]=\"valign\" [ngStyle]=\"wrapCellStyle\" [ngClass]=\"wrapContentClass\">\n <div *ngIf=\"allowClose\" style=\"position: relative\">\n <div style=\"position: absolute;bottom: -17px;right: -16px;z-index: 20;\">\n <ack-close-icon (click)=\"fireClose()\"></ack-close-icon>\n </div>\n </div>\n <ng-content></ng-content>\n </td>\n </tr>\n <tr>\n <td (click)=\"allowClose ? fireClose() : 0\"></td>\n </tr>\n </table>\n </div>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { zIndex: [{
type: Input
}], close: [{
type: Output
}], allowClose: [{
type: Input
}], wrapStyle: [{
type: Input
}], wrapContentClass: [{
type: Input
}], wrapCellStyle: [{
type: Input
}], backgroundColor: [{
type: Input
}], valign: [{
type: Input
}], isModelMode: [{
type: Input
}], showModel: [{
type: Input
}], showModelChange: [{
type: Output
}] } });
class AckModal {
constructor(element, AckApp) {
this.element = element;
this.AckApp = AckApp;
this.zIndex = 20;
this.valign = 'top';
this.allowClose = true;
this.showModelChange = new EventEmitter();
//one way expression binds
this.close = new EventEmitter();
Promise.resolve().then(() => this.determineStage());
}
determineStage() {
if (this.inline)
return;
if (this.AckApp.fixedElementStage) {
this.AckApp.registerModal(this);
}
else if (!this.AckApp.warnedFixElements) {
this.AckApp.warnedFixElements = true;
console.warn('Please put the element tag <ack-fixed-element-stage> inside your app so <ack-modal> renders properly amongst other elements. OR set <ack-modal inline="true">');
}
}
ngOnDestroy() {
this.AckApp.unregisterModal(this);
}
}
AckModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: AckModal, deps: [{ token: i0.ElementRef }, { token: AckApp }], target: i0.ɵɵFactoryTarget.Component });
AckModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: AckModal, selector: "ack-modal", inputs: { inline: "inline", isModelMode: "isModelMode", zIndex: "zIndex", valign: "valign", wrapStyle: "wrapStyle", wrapCellStyle: "wrapCellStyle", wrapContentClass: "wrapContentClass", backgroundColor: "backgroundColor", allowClose: "allowClose", showModel: "showModel" }, outputs: { showModelChange: "showModelChange", close: "close" }, queries: [{ propertyName: "body", first: true, predicate: ["body"], descendants: true }], viewQueries: [{ propertyName: "layout", first: true, predicate: ["placeholder"], descendants: true }], ngImport: i0, template: "<ng-template #placeholder>\n <ack-modal-layout\n [zIndex] = \"zIndex\"\n [valign] = \"valign\"\n (close) = \"close.emit($event)\"\n [isModelMode] = \"isModelMode==null ? showModelChange.observers.length : isModelMode\"\n [showModel] = \"showModel\"\n (showModelChange) = \"showModelChange.emit(showModel=$event)\"\n [backgroundColor] = \"backgroundColor\"\n [wrapStyle] = \"wrapStyle\"\n [wrapContentClass]= \"wrapContentClass\"\n [wrapCellStyle] = \"wrapCellStyle\"\n [allowClose] = \"allowClose\"\n >\n <ng-template [ngTemplateOutlet]=\"body\"></ng-template>\n <ng-content *ngIf=\"!body\"></ng-co