lamb-web-lib
Version:
LambWebLib. Es un proyecto angular de tipo Librería. que contiene una Suit de componentes reutilizables para el proyecto [Lamb Financial](https://lamb.upeu.edu.pe).
1,504 lines (1,468 loc) • 321 kB
JavaScript
import { Injectable, Component, Input, HostBinding, EventEmitter, Output, ViewChildren, ElementRef, ApplicationRef, Injector, Inject, ComponentFactoryResolver, TemplateRef, ReflectiveInjector, Renderer2, HostListener, Directive, ContentChild, ContentChildren, NgModule, InjectionToken, defineInjectable } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd, RouterModule } from '@angular/router';
import { Location, CommonModule, DOCUMENT } from '@angular/common';
import { filter, map, takeUntil, withLatestFrom, share, takeWhile } from 'rxjs/operators';
import { fromEvent, ReplaySubject, BehaviorSubject } from 'rxjs';
import { trigger, style, transition, animate, state } from '@angular/animations';
import { Title } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambWebLibService {
constructor() { }
}
LambWebLibService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] },
];
LambWebLibService.ctorParameters = () => [];
/** @nocollapse */ LambWebLibService.ngInjectableDef = defineInjectable({ factory: function LambWebLibService_Factory() { return new LambWebLibService(); }, token: LambWebLibService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambWebLibComponent {
constructor() { }
/**
* @return {?}
*/
ngOnInit() {
}
}
LambWebLibComponent.decorators = [
{ type: Component, args: [{
selector: 'lamb-lamb-web-lib',
template: `
<p>
lamb-web-lib works!
</p>
`,
styles: []
},] },
];
LambWebLibComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambWebLibModule {
}
LambWebLibModule.decorators = [
{ type: NgModule, args: [{
imports: [],
declarations: [LambWebLibComponent],
exports: [LambWebLibComponent]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambButtonBackComponent {
// private pathBack: string;
/**
* @param {?} route
* @param {?} router
* @param {?} location
*/
constructor(route, router, location) {
this.route = route;
this.router = router;
this.location = location;
this.flag = true;
}
/**
* @return {?}
*/
ngOnInit() {
/** Estos dos metodos son para el flag. */
this.initShowOrHideFlag();
this.eventFlagSubscribe();
}
/**
* @return {?}
*/
initShowOrHideFlag() {
/** @type {?} */
const pathEnd = this.pathEnd(this.location.path());
this.condition(pathEnd);
}
/**
* @return {?}
*/
eventFlagSubscribe() {
this.router.events.pipe(filter(path => path instanceof NavigationEnd))
.subscribe((path) => {
/** @type {?} */
const pathEnd = this.pathEnd(path.url);
this.condition(pathEnd);
});
}
/**
* @param {?} path
* @return {?}
*/
pathEnd(path) {
/** @type {?} */
const paths = path.split('/')
.filter(path2 => path2 !== '');
return paths[paths.length - 1];
}
/**
* @param {?} pathEnd
* @return {?}
*/
condition(pathEnd) {
/** @type {?} */
const url = this.route.snapshot.url;
if (((url[0] && url[0].path) === pathEnd)) {
this.flag = true;
}
else if (url[0] == null) {
/** @type {?} */
const urlParent = this.route.parent.snapshot.url;
if (((urlParent[urlParent.length - 1] && urlParent[urlParent.length - 1].path) === pathEnd)) {
this.flag = true;
}
else {
this.flag = false;
}
}
else {
this.flag = false;
}
}
/**
* @return {?}
*/
onBack() {
/** @type {?} */
const url = this.route.snapshot.url;
/** @type {?} */
const link = (url[0] && url[0].path) || '';
/** @type {?} */
const relativeUrl = link ? `../${link}` : `./${link}`;
this.router.navigate([relativeUrl], { relativeTo: this.route });
}
}
LambButtonBackComponent.decorators = [
{ type: Component, args: [{
selector: 'lamb-button-back',
template: `
<a class="btn btn-light lamb-button" [ngClass]="{'lamb-flag': flag}" (click)="onBack()">
<span class="fa fa-reply" > </span>
</a>
`,
styles: [
`
.lamb-flag {
visibility: hidden;
}
.lamb-button {
/* padding: 0.3rem 0.6rem; */
padding: 0.1rem 0.3rem;
cursor: pointer !important;
border-radius: 50%;
-webkit-transition: -webkit-transform .4s ease-in-out;
transition: transform .4s ease-in-out;
}
.lamb-button:hover {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg)
}
`,
],
},] },
];
LambButtonBackComponent.ctorParameters = () => [
{ type: ActivatedRoute },
{ type: Router },
{ type: Location }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambButtonBackModule {
}
LambButtonBackModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
],
exports: [
LambButtonBackComponent,
],
declarations: [
LambButtonBackComponent,
],
providers: [],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambButtonIconComponent {
constructor() {
this.colorClass = 'btn-light';
this.icon = 'fa fa-plus-circle';
this.label = 'New';
this.size = 'lg';
}
/**
* @return {?}
*/
ngOnInit() {
}
}
LambButtonIconComponent.decorators = [
{ type: Component, args: [{
selector: 'lamb-button-icon',
template: `<!-- <button class="btn lamb-btn-block btn-sm" [title]="title || ''" [routerLink]="routerLink" [disabled]="isDisabled"> -->
<button class="btn lamb-btn-block btn-{{ size }} {{ colorClass }}" [title]="title || ''" [disabled]="isDisabled">
<span class="{{ icon }}" [ngClass]="{'lamb-icon': !onlyIcon, 'lamb-text-black': (colorClass === 'btn-light') }"></span>
<span *ngIf="!onlyIcon" [ngClass]="{'lamb-text-black': (colorClass === 'btn-light')}"> {{ label }}</span>
</button>`,
styles: [`.lamb-icon{margin-right:3px}@media (max-width:550px){.lamb-btn-block{display:block;width:100%}}:host{display:flex;flex-direction:column;position:relative;height:100%}`]
},] },
];
LambButtonIconComponent.ctorParameters = () => [];
LambButtonIconComponent.propDecorators = {
colorClass: [{ type: Input }],
label: [{ type: Input }],
isDisabled: [{ type: Input }],
onlyIcon: [{ type: Input }],
icon: [{ type: Input }],
title: [{ type: Input }],
size: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambButtonIconModule {
}
LambButtonIconModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
],
declarations: [LambButtonIconComponent],
exports: [LambButtonIconComponent],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambModalBackdropComponent {
constructor() { }
/**
* @return {?}
*/
get modalClass() { return 'modal-backdrop fade show'; }
}
LambModalBackdropComponent.decorators = [
{ type: Component, args: [{
selector: 'lamb-modal-backdrop',
template: '',
// host: { 'class': 'modal-backdrop fade show' },
styles: [],
},] },
];
LambModalBackdropComponent.ctorParameters = () => [];
LambModalBackdropComponent.propDecorators = {
modalClass: [{ type: HostBinding, args: ['class',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @enum {number} */
const ModalDismissReasons = {
BACKDROP_CLICK: 0,
ESC: 1,
};
ModalDismissReasons[ModalDismissReasons.BACKDROP_CLICK] = 'BACKDROP_CLICK';
ModalDismissReasons[ModalDismissReasons.ESC] = 'ESC';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @enum {number} */
const Key = {
Tab: 9,
Enter: 13,
Escape: 27,
Space: 32,
PageUp: 33,
PageDown: 34,
End: 35,
Home: 36,
ArrowLeft: 37,
ArrowUp: 38,
ArrowRight: 39,
ArrowDown: 40,
};
Key[Key.Tab] = 'Tab';
Key[Key.Enter] = 'Enter';
Key[Key.Escape] = 'Escape';
Key[Key.Space] = 'Space';
Key[Key.PageUp] = 'PageUp';
Key[Key.PageDown] = 'PageDown';
Key[Key.End] = 'End';
Key[Key.Home] = 'Home';
Key[Key.ArrowLeft] = 'ArrowLeft';
Key[Key.ArrowUp] = 'ArrowUp';
Key[Key.ArrowRight] = 'ArrowRight';
Key[Key.ArrowDown] = 'ArrowDown';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const FOCUSABLE_ELEMENTS_SELECTOR = [
'a[href]', 'button:not([disabled])', 'input:not([disabled]):not([type="hidden"])', 'select:not([disabled])',
'textarea:not([disabled])', '[contenteditable]', '[tabindex]:not([tabindex="-1"])'
].join(', ');
/**
* Returns first and last focusable elements inside of a given element based on specific CSS selector
* @param {?} element
* @return {?}
*/
function getFocusableBoundaryElements(element) {
/** @type {?} */
const list = element.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR);
return [list[0], list[list.length - 1]];
}
/**
* Function that enforces browser focus to be trapped inside a DOM element.
*
* Works only for clicks inside the element and navigation with 'Tab', ignoring clicks outside of the element
*
* \@param element The element around which focus will be trapped inside
* \@param stopFocusTrap$ The observable stream. When completed the focus trap will clean up listeners
* and free internal resources
* @type {?}
*/
const lambFocusTrap = (element, stopFocusTrap$) => {
// last focused element
/** @type {?} */
const lastFocusedElement$ = fromEvent(element, 'focusin').pipe(takeUntil(stopFocusTrap$), map(e => e.target));
// 'tab' / 'shift+tab' stream
fromEvent(element, 'keydown')
.pipe(takeUntil(stopFocusTrap$), filter(e => e.which === Key.Tab), withLatestFrom(lastFocusedElement$))
.subscribe(([tabEvent, focusedElement]) => {
const [first, last] = getFocusableBoundaryElements(element);
if (focusedElement === first && tabEvent.shiftKey) {
last.focus();
tabEvent.preventDefault();
}
if (focusedElement === last && !tabEvent.shiftKey) {
first.focus();
tabEvent.preventDefault();
}
});
// inside click
fromEvent(element, 'click')
.pipe(takeUntil(stopFocusTrap$), withLatestFrom(lastFocusedElement$), map(arr => (/** @type {?} */ (arr[1]))))
.subscribe(lastFocusedElement => lastFocusedElement.focus());
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambModalWindowComponent {
// @HostBinding('attr.role')
// public role = 'dialog';
// @HostBinding('attr.tabindex')
// public tabindex = '-1';
// @HostBinding('attr.style')
// public style = 'display: block;';
/**
* @param {?} document
* @param {?} _elRef
* @param {?} _renderer
*/
constructor(document, _elRef, _renderer) {
this._elRef = _elRef;
this._renderer = _renderer;
this.backdrop = true;
this.keyboard = true;
this.dismissEvent = new EventEmitter();
this._document = document;
lambFocusTrap(this._elRef.nativeElement, this.dismissEvent);
}
/**
* @return {?}
*/
get modalClass() { return 'modal fade show d-block' + (this.windowClass ? ' ' + this.windowClass : ''); }
/**
* @param {?} $event
* @return {?}
*/
backdropClick($event) {
if (this.backdrop === true && this._elRef.nativeElement === $event.target) {
this.dismiss(ModalDismissReasons.BACKDROP_CLICK);
}
}
/**
* @param {?} $event
* @return {?}
*/
escKey($event) {
if (this.keyboard && !$event.defaultPrevented) {
this.dismiss(ModalDismissReasons.ESC);
}
}
/**
* @param {?} reason
* @return {?}
*/
dismiss(reason) { this.dismissEvent.emit(reason); }
/**
* @return {?}
*/
ngOnInit() {
this._elWithFocus = this._document.activeElement;
this._renderer.addClass(this._document.body, 'modal-open');
}
/**
* @return {?}
*/
ngAfterViewInit() {
if (!this._elRef.nativeElement.contains(document.activeElement)) {
this._elRef.nativeElement['focus'].apply(this._elRef.nativeElement, []);
}
}
/**
* @return {?}
*/
ngOnDestroy() {
/** @type {?} */
const body = this._document.body;
/** @type {?} */
const elWithFocus = this._elWithFocus;
/** @type {?} */
let elementToFocus;
if (elWithFocus && elWithFocus['focus'] && body.contains(elWithFocus)) {
elementToFocus = elWithFocus;
}
else {
elementToFocus = body;
}
elementToFocus['focus'].apply(elementToFocus, []);
this._elWithFocus = null;
this._renderer.removeClass(body, 'modal-open');
}
}
LambModalWindowComponent.decorators = [
{ type: Component, args: [{
selector: 'lamb-modal-window',
template: `
<div
[class]="'modal-dialog' + (size ? ' modal-' + size : '') + (centered ? ' modal-dialog-centered' : '')"
role="document">
<div class="modal-content"><ng-content></ng-content></div>
</div>
`,
host: {
// '[class]': '"modal fade show" + (windowClass ? " " + windowClass : "")',
'role': 'dialog',
'tabindex': '-1',
'style': 'display: block;',
},
},] },
];
LambModalWindowComponent.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: ElementRef },
{ type: Renderer2 }
];
LambModalWindowComponent.propDecorators = {
backdrop: [{ type: Input }],
keyboard: [{ type: Input }],
size: [{ type: Input }],
centered: [{ type: Input }],
windowClass: [{ type: Input }],
dismissEvent: [{ type: Output }],
modalClass: [{ type: HostBinding, args: ['class',] }],
backdropClick: [{ type: HostListener, args: ['click', ['$event'],] }],
escKey: [{ type: HostListener, args: ['keyup.esc', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* Una referencia a un modal activo (actualmente abierto). Instancias de esta clase
* puede ser inyectado en componentes pasados como contenido modal.
*/
class LambActiveModal {
/**
* Se puede usar para cerrar un modal, pasando un resultado opcional.
* @param {?=} result
* @return {?}
*/
close(result) { }
/**
* Se puede usar para descartar un modal, pasando un motivo opcional.
* @param {?=} reason razon por que se descarto.
* @return {?}
*/
dismiss(reason) { }
}
/**
* Una referencia a un modal recientemente abierto.
*/
class LambModalRef {
/**
* @param {?} windowComponentRef
* @param {?} contentRef
* @param {?=} backdropComponentRef
* @param {?=} beforeDismiss
*/
constructor(windowComponentRef, contentRef, backdropComponentRef, beforeDismiss) {
this.windowComponentRef = windowComponentRef;
this.contentRef = contentRef;
this.backdropComponentRef = backdropComponentRef;
this.beforeDismiss = beforeDismiss;
windowComponentRef.instance.dismissEvent.subscribe((reason) => { this.dismiss(reason); });
this.result = new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
this.result.then(null, () => { });
}
/**
* La instancia de componente utilizada como contenido modal.
* Indefinido cuando se utiliza un TemplateRef como contenido modal.
* @return {?}
*/
get componentInstance() {
if (this.contentRef.componentRef) {
return this.contentRef.componentRef.instance;
}
}
// solo es necesario para mantener la compatibilidad con TS1.8
/**
* @param {?} instance
* @return {?}
*/
set componentInstance(instance) { }
/**
* Se puede usar para cerrar un modal, pasando un resultado opcional.
* @param {?=} result
* @return {?}
*/
close(result) {
if (this.windowComponentRef) {
this.resolve(result);
this.removeModalElements();
}
}
/**
* Se puede usar para descartar un modal, pasando un motivo opcional.
* @param {?=} reason
* @return {?}
*/
dismiss(reason) {
// console.log('reason');
// console.log(reason);
if (this.windowComponentRef) {
if (!this.beforeDismiss || this.beforeDismiss() !== false) {
this.reject(reason);
this.removeModalElements();
}
}
}
/**
* @return {?}
*/
removeModalElements() {
/** @type {?} */
const windowNativeEl = this.windowComponentRef.location.nativeElement;
windowNativeEl.parentNode.removeChild(windowNativeEl);
this.windowComponentRef.destroy();
if (this.backdropComponentRef) {
/** @type {?} */
const backdropNativeEl = this.backdropComponentRef.location.nativeElement;
backdropNativeEl.parentNode.removeChild(backdropNativeEl);
this.backdropComponentRef.destroy();
}
if (this.contentRef && this.contentRef.viewRef) {
this.contentRef.viewRef.destroy();
}
this.windowComponentRef = null;
this.backdropComponentRef = null;
this.contentRef = null;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @param {?} value
* @return {?}
*/
function isDefined(value) {
return value !== undefined && value !== null;
}
/**
* @param {?} value
* @return {?}
*/
function isString(value) {
return typeof value === 'string';
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class ContentRef {
/**
* @param {?} nodes
* @param {?=} viewRef
* @param {?=} componentRef
*/
constructor(nodes, viewRef, componentRef) {
this.nodes = nodes;
this.viewRef = viewRef;
this.componentRef = componentRef;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambModalStackService {
/**
* @param {?} applicationRef
* @param {?} injector
* @param {?} componentFactoryResolver
* @param {?} document
*/
constructor(applicationRef, injector, componentFactoryResolver, document) {
this.applicationRef = applicationRef;
this.injector = injector;
this.componentFactoryResolver = componentFactoryResolver;
this._windowAttributes = ['backdrop', 'keyboard', 'centered', 'size', 'windowClass'];
this._document = document;
}
/**
* @param {?} moduleCFR
* @param {?} contentInjector
* @param {?} content
* @param {?} options
* @return {?}
*/
open(moduleCFR, contentInjector, content, options) {
/** @type {?} */
const containerEl = isDefined(options.container) ?
this._document.querySelector(options.container) : this._document.body;
if (!containerEl) {
throw new Error(`El contenedor modal especificado "${options.container || 'body'}" no fue encontrado en el DOM`);
}
/** @type {?} */
const activeModal = new LambActiveModal();
/** @type {?} */
const contentRef = this.getContentRef(moduleCFR, options.injector || contentInjector, content, activeModal);
/** @type {?} */
const backdropCmptRef = options.backdrop !== false ? this.attachBackdrop(containerEl) : null;
/** @type {?} */
const windowCmptRef = this.attachWindowComponent(containerEl, contentRef);
/** @type {?} */
const lambModalRef = new LambModalRef(windowCmptRef, contentRef, backdropCmptRef, options.beforeDismiss);
activeModal.close = (result) => { lambModalRef.close(result); };
activeModal.dismiss = (reason) => { lambModalRef.dismiss(reason); };
this.applyWindowOptions(windowCmptRef.instance, options);
return lambModalRef;
}
/**
* @param {?} containerEl
* @return {?}
*/
attachBackdrop(containerEl) {
/** @type {?} */
const backdropFactory = this.componentFactoryResolver.resolveComponentFactory(LambModalBackdropComponent);
/** @type {?} */
const backdropCmptRef = backdropFactory.create(this.injector);
this.applicationRef.attachView(backdropCmptRef.hostView);
containerEl.appendChild(backdropCmptRef.location.nativeElement);
return backdropCmptRef;
}
/**
* @param {?} containerEl
* @param {?} contentRef
* @return {?}
*/
attachWindowComponent(containerEl, contentRef) {
/** @type {?} */
const windowFactory = this.componentFactoryResolver.resolveComponentFactory(LambModalWindowComponent);
/** @type {?} */
const windowCmptRef = windowFactory.create(this.injector, contentRef.nodes);
this.applicationRef.attachView(windowCmptRef.hostView);
containerEl.appendChild(windowCmptRef.location.nativeElement);
return windowCmptRef;
}
/**
* @param {?} windowInstance
* @param {?} options
* @return {?}
*/
applyWindowOptions(windowInstance, options) {
this._windowAttributes.forEach((optionName) => {
if (isDefined(options[optionName])) {
windowInstance[optionName] = options[optionName];
}
});
}
/**
* @param {?} moduleCFR
* @param {?} contentInjector
* @param {?} content
* @param {?} context
* @return {?}
*/
getContentRef(moduleCFR, contentInjector, content, context) {
if (!content) {
return new ContentRef([]);
}
else if (content instanceof TemplateRef) {
return this.createFromTemplateRef(content, context);
}
else if (isString(content)) {
return this.createFromString(content);
}
else {
return this.createFromComponent(moduleCFR, contentInjector, content, context);
}
}
/**
* @param {?} content
* @param {?} context
* @return {?}
*/
createFromTemplateRef(content, context) {
/** @type {?} */
const viewRef = content.createEmbeddedView(context);
this.applicationRef.attachView(viewRef);
return new ContentRef([viewRef.rootNodes], viewRef);
}
/**
* @param {?} content
* @return {?}
*/
createFromString(content) {
/** @type {?} */
const component = this._document.createTextNode(`${content}`);
return new ContentRef([[component]]);
}
/**
* @param {?} moduleCFR
* @param {?} contentInjector
* @param {?} content
* @param {?} context
* @return {?}
*/
createFromComponent(moduleCFR, contentInjector, content, context) {
/** @type {?} */
const contentComponentFactory = moduleCFR.resolveComponentFactory(content);
/** @type {?} */
const modalContentInjector = ReflectiveInjector.resolveAndCreate([{ provide: LambActiveModal, useValue: context }], contentInjector);
/** @type {?} */
const componentRef = contentComponentFactory.create(modalContentInjector);
this.applicationRef.attachView(componentRef.hostView);
return new ContentRef([[componentRef.location.nativeElement]], componentRef.hostView, componentRef);
}
}
LambModalStackService.decorators = [
{ type: Injectable },
];
LambModalStackService.ctorParameters = () => [
{ type: ApplicationRef },
{ type: Injector },
{ type: ComponentFactoryResolver },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* Un servicio para abrir ventanas modales
* Crear un modal es sencillo: crear una plantilla y pasarla como argumento para
* el método "abierto"!
*/
class LambModalService {
/**
* @param {?} moduleCFR
* @param {?} injector
* @param {?} lambModalStackService
*/
constructor(moduleCFR, injector, lambModalStackService) {
this.moduleCFR = moduleCFR;
this.injector = injector;
this.lambModalStackService = lambModalStackService;
}
/**
* Abre una nueva ventana modal con el contenido especificado y usando las opciones provistas.
* El contenido puede ser proporcionado
* como un TemplateRef o un tipo de componente.
* Si pasa un tipo de componente como contenido que las instancias de aquellos
* los componentes se pueden inyectar con una instancia de la clase NgbActiveModal.
* Puedes usar métodos en
* Clase LambActiveModal para close / dismiss modales del "inside" de un componente.
* @param {?} content
* @param {?=} options
* @return {?}
*/
open(content, options = {}) {
return this.lambModalStackService.open(this.moduleCFR, this.injector, content, options);
}
}
LambModalService.decorators = [
{ type: Injectable },
];
LambModalService.ctorParameters = () => [
{ type: ComponentFactoryResolver },
{ type: Injector },
{ type: LambModalStackService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambModalModule {
}
LambModalModule.decorators = [
{ type: NgModule, args: [{
imports: [],
declarations: [
LambModalBackdropComponent,
LambModalWindowComponent,
],
entryComponents: [
LambModalBackdropComponent,
LambModalWindowComponent,
],
providers: [
LambModalService,
LambModalStackService,
],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambConfirmDialogComponent {
/**
* @param {?} activeModal
*/
constructor(activeModal) {
this.activeModal = activeModal;
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
cancel() {
// this.activeModal.close(false);
this.activeModal.dismiss(false);
}
/**
* @return {?}
*/
ok() {
this.activeModal.close({ data: 'Hi' });
}
/**
* @return {?}
*/
dismiss() {
// this.activeModal.close(true);
this.activeModal.dismiss(false);
}
}
LambConfirmDialogComponent.decorators = [
{ type: Component, args: [{
selector: 'lamb-confirm-dialog',
template: `<div class="modal-header">
<h6 class="modal-title">{{ title }}</h6>
<button type="button" class="close" aria-label="Close" (click)="dismiss()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{ message }}
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-light btn-sm" (click)="cancel()" autofocus>{{ btnCancelText }}</button>
<button type="button" class="btn btn-primary btn-sm" (click)="ok()" >{{ btnOkText }}</button>
</div>`,
styles: [`.btn.btn-light,.btn.btn-light:active,.btn.btn-light:hover{color:#2a2a2a}`],
},] },
];
LambConfirmDialogComponent.ctorParameters = () => [
{ type: LambActiveModal }
];
LambConfirmDialogComponent.propDecorators = {
title: [{ type: Input }],
message: [{ type: Input }],
btnOkText: [{ type: Input }],
btnCancelText: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const message = {
confirmDelete: '¿Estas seguro de Eliminar este registro?',
confirmUpdate: '¿Estas seguro de Actualizar este registro?',
confirmSave: '¿Estas seguro de Guardar?',
confirmDefault: '¿Estas seguro de realizar la Acción?',
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambConfirmDialogService {
/**
* @param {?} lambModalService
*/
constructor(lambModalService) {
this.lambModalService = lambModalService;
}
/**
* Confirm
* @param {?=} options optional JSON Options
* @param {?=} action X = XXX; D = Delete; U = Update; S = Save
* @return {?}
*/
confirm(options = {}, action) {
/** @type {?} */
const modalRef = this.lambModalService.open(LambConfirmDialogComponent, { centered: true });
// const modalRef = this.lambModalService.open(LambConfirmDialogComponent);
// const modalRef =
// this.lambModalService.open(ConfirmDialogComponent,
// { size: (options.dialogSize ? options.dialogSize : this.config.dialogSize) });
modalRef.componentInstance.title
= options.title ? options.title : this.config.title;
modalRef.componentInstance.message
= options.message ? options.message : this.getMessage(action);
modalRef.componentInstance.btnOkText
= options.btnOkText ? options.btnOkText : this.config.btnOkText;
modalRef.componentInstance.btnCancelText
= options.btnCancelText ? options.btnCancelText : this.config.btnCancelText;
return modalRef.result;
}
/**
* @param {?=} options
* @return {?}
*/
confirmDelete(options = {}) {
return this.confirm(options, 'D');
}
/**
* @param {?=} options
* @return {?}
*/
confirmUpdate(options = {}) {
return this.confirm(options, 'U');
}
/**
* @param {?=} options
* @return {?}
*/
confirmSave(options = {}) {
return this.confirm(options, 'S');
}
/**
* @param {?} action
* @return {?}
*/
getMessage(action) {
switch (action) {
case 'D': {
return message.confirmDelete;
}
case 'U': {
return message.confirmUpdate;
}
case 'S': {
return message.confirmSave;
}
default: {
return this.config.message;
}
}
}
/**
* Config for default.
* @return {?}
*/
get config() {
return {
title: 'Confirmación',
message: message.confirmDefault,
btnOkText: 'OK',
btnCancelText: 'CANCELAR',
dialogSize: 'lg',
};
}
}
LambConfirmDialogService.decorators = [
{ type: Injectable },
];
LambConfirmDialogService.ctorParameters = () => [
{ type: LambModalService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambConfirmDialogModule {
}
LambConfirmDialogModule.decorators = [
{ type: NgModule, args: [{
imports: [
LambModalModule,
],
declarations: [
LambConfirmDialogComponent,
],
providers: [
LambConfirmDialogService,
],
entryComponents: [
LambConfirmDialogComponent,
],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambInputIconComponent {
constructor() {
this.justify = 'end';
}
/**
* @return {?}
*/
ngOnInit() {
}
}
LambInputIconComponent.decorators = [
{ type: Component, args: [{
selector: 'lamb-input-icon',
template: `<div class="inner-addon {{ justify }}-addon">
<ng-content></ng-content>
</div>`,
styles: [`::ng-deep .inner-addon{position:relative}::ng-deep .inner-addon .fa{position:absolute;top:25%;padding-right:.5rem;padding-left:.5rem;pointer-events:none;font-size:initial}.start-addon /deep/ .fa{left:0}.start-addon /deep/ input{padding-left:30px}.end-addon /deep/ .fa{right:0}.end-addon /deep/ input{padding-right:30px}`]
},] },
];
LambInputIconComponent.ctorParameters = () => [];
LambInputIconComponent.propDecorators = {
justify: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambInputIconModule {
}
LambInputIconModule.decorators = [
{ type: NgModule, args: [{
imports: [],
exports: [LambInputIconComponent],
declarations: [LambInputIconComponent],
providers: [],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class ConfigNames {
/**
* @param {?=} buttonBack
* @param {?=} buttonNext
* @param {?=} buttonFinish
*/
constructor(buttonBack, buttonNext, buttonFinish) {
this.buttonBack = buttonBack;
this.buttonNext = buttonNext;
this.buttonFinish = buttonFinish;
}
}
class LambStepConfig {
constructor() {
// justify: 'start' | 'center' | 'end' | 'fill' | 'justified';
// orientation: 'horizontal' | 'vertical';
// type: 'tabss' | 'pills';
this.justify = 'center';
this.orientation = 'horizontal';
// type: 'tabss' | 'pills' = 'tabss';
this.type = 'stepss';
this.configNames = new ConfigNames('Anterior', 'Siguiente', 'Finalizar');
}
}
LambStepConfig.decorators = [
{ type: Injectable },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const slideOfRight = trigger('slideOfRight', [
transition(':enter', [
style({ transform: 'translateX(100%)', opacity: 0 }),
animate('.35s', style({ transform: 'translateX(0)', 'opacity': 1 })),
]),
transition(':leave', [
style({ transform: 'translateX(0)', 'opacity': 1 }),
animate('.35s', style({ transform: 'translateX(100%)', 'opacity': 0 })),
]),
// state('next', style({ height: '0px', transform: 'scaleY(0)' /*opacity: 0*/ })),
state('next', style({ height: '*', transform: 'scaleY(1)' /*opacity: 1*/ })),
state('back', style({ height: '6px', transform: 'scaleY(0)' /*opacity: 1*/ })),
transition('* => back', [
style({ transform: 'translateX(100%)', display: 'block' }),
animate('.35s', style({ transform: 'translateX(0)', display: 'none' })),
]),
transition('* => next', [
style({ transform: 'translateX(0)', display: 'none' }),
animate('.35s', style({ transform: 'translateX(100%)', display: 'block' })),
]),
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LambStepTitleDirective {
/**
* @param {?} templateRef
*/
constructor(templateRef) {
this.templateRef = templateRef;
}
}
LambStepTitleDirective.decorators = [
{ type: Directive, args: [{
selector: 'ng-template[lambStepTitle]',
},] },
];
LambStepTitleDirective.ctorParameters = () => [
{ type: TemplateRef }
];
class LambStepContentDirective {
/**
* @param {?} templateRef
*/
constructor(templateRef) {
this.templateRef = templateRef;
}
}
LambStepContentDirective.decorators = [
{ type: Directive, args: [{
selector: 'ng-template[lambStepContent]',
},] },
];
LambStepContentDirective.ctorParameters = () => [
{ type: TemplateRef }
];
/** @type {?} */
let nextId = 0;
class LambStepDirective {
constructor() {
this.id = `lamb-step-${nextId++}`;
this.disabled = false;
// @Input() disabled = true;
this.isValidStep = true;
}
// public isValidStep: boolean = false;
/**
* @param {?} value
* @return {?}
*/
set validStep(value) {
this.isValidStep = (value === 'true' || value === true) ? true : false;
}
}
LambStepDirective.decorators = [
{ type: Directive, args: [{
// tslint:disable-next-line:directive-selector
selector: 'lamb-step',
},] },
];
LambStepDirective.propDecorators = {
id: [{ type: Input }],
title: [{ type: Input }],
icon: [{ type: Input }],
data: [{ type: Input }],
disabled: [{ type: Input }],
validStep: [{ type: Input }],
contentTemplate: [{ type: ContentChild, args: [LambStepContentDirective,] }],
titleTemplate: [{ type: ContentChild, args: [LambStepTitleDirective,] }]
};
class LambStepGroupComponent {
/**
* @param {?} config
*/
constructor(config) {
this.config = config;
this.hideContent = false;
/**
* Cuando cambia de step se destruira el contenido anterior o solo se oculatará?
*/
// @Input() destroyOnHide: boolean = true;
this.destroyOnHide = false;
/**
* Emite cuando hay cambios de steps.
*/
this.stepChange = new EventEmitter();
// tslint:disable-next-line:no-output-on-prefix
this.onComplete = new EventEmitter();
this.type = this.config.type;
this.justify = this.config.justify;
this.orientation = this.config.orientation;
this.iConfigNames = this.config.configNames;
}
/**
* @param {?} confign
* @return {?}
*/
set configNames(confign) {
this.iConfigNames.buttonBack = confign.buttonBack || this.iConfigNames.buttonBack;
this.iConfigNames.buttonNext = confign.buttonNext || this.iConfigNames.buttonNext;
this.iConfigNames.buttonFinish = confign.buttonFinish || this.iConfigNames.buttonFinish;
}
/**
* @param {?} className
* @return {?}
*/
set justify(className) {
if (className === 'fill' || className === 'justified') {
this.justifyClass = `nav-${className}`;
}
else {
this.justifyClass = `justify-content-${className}`;
}
}
/**
* @param {?} stepId
* @return {?}
*/
onSelect(stepId) {
/** @type {?} */
const selectedStep = this.getStepById(stepId);
/** @type {?} */
const selectedActive = this.getStepById(this.activeId);
// console.log('selectedStep');
// console.log(selectedStep);
if (selectedStep && !selectedStep.disabled && this.activeId !== selectedStep.id) {
/** @type {?} */
let defaultPrevented = false;
this.stepChange.emit({
activeId: this.activeId,
activeData: selectedActive.data || null,
nextId: selectedStep.id,
preventDefault: () => { defaultPrevented = true; },
});
if (!defaultPrevented) {
this.activeId = selectedStep.id;
}
}
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
ngAfterContentChecked() {
/** @type {?} */
const activeStep = this.getStepById(this.activeId);
this.activeId = activeStep ? activeStep.id : (this.steps.length ? this.steps.first.id : null);
}
/**
* @param {?} id
* @return {?}
*/
getStepById(id) {
/** @type {?} */
const stepsWithId = this.steps.filter(step => step.id === id);
return stepsWithId.length ? stepsWithId[0] : null;
}
/**
* @return {?}
*/
back() {
/** @type {?} */
const back = this.getStepIdSplice(-1);
this.onSelect(back);
}
/**
* @return {?}
*/
next() {
/** @type {?} */
const next = this.getStepIdSplice(+1);
this.onSelect(next);
}
/**
* @return {?}
*/
complete() {
this.onComplete.emit();
}
/**
* @param {?} condicion
* @return {?}
*/
getStepIdSplice(condicion) {
/** @type {?} */
const actual = this.activeId;
/** @type {?} */
const splice = actual.slice(0, actual.length - 1);
/** @type {?} */
const index = parseInt(actual.slice((actual.length - 1), actual.length), 10);
/** @type {?} */
const next = `${splice}${(index + (condicion))}`;
return next;
}
/**
* @return {?}
*/
get hidePrevious() {
return this.activeId !== 'lamb-step-0';
}
/**
* @return {?}
*/
get hideNext() {
/** @type {?} */
const allLength = (this.steps.length - 1);
return this.activeId !== 'lamb-step-' + allLength;
}
/**
* @param {?} stepId
* @return {?}
*/
hideLineRight(stepId) {
/** @type {?} */
const step = parseInt(stepId.slice(stepId.length - 1, stepId.length), 10);
return (this.steps.length !== (step + 1));
}
/**
* @return {?}
*/
ngOnDestroy() {
nextId = 0;
}
}
LambStepGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'lamb-step-group',
template: `<!-- <ul class="nav justify-content-center" id="myStep" role="steplist"> -->
<ul [class]="'nav lamb-nav-tabs nav-' + type + (orientation == 'horizontal'? ' ' + justifyClass : ' flex-column' )" id="myStep"
role="steplist">
<!-- <ng-template ngFor let-step [ngForOf]="steps" *ngFor="let step of steps"> -->
<ng-template ngFor let-step [ngForOf]="steps">
<li class="nav-item">
<a [id]="step.id" class="nav-link" [class.active]="step.id === activeId" [class.disabled]="step.disabled || !step.isValidStep"
(click)="!!onSelect(step.id)" role="step" [attr.stepindex]="(step.disabled || !step.isValidStep ? '-1': undefined)"
[attr.aria-controls]="(!destroyOnHide || step.id === activeId ? step.id + '-panel': null)" [attr.aria-expanded]="step.id === activeId"
[attr.aria-disabled]="step.disabled || !step.isValidStep">
<!-- data-toggle="step"
aria-selected="true" -->
<ng-template [ngIf]="step.icon">
<span class="lamb-round-tabs" [title]="step.title">
<i class="{{ step.icon }} lamb-icon"></i>
</span>
</ng-template>
<br>
<span class="lamb-round-text">
{{ step.title }}
</span>
<ng-template [ngTemplateOutlet]="step.titleTemplate?.templateRef"></ng-template>
</a>
</li>
<li class="nav-line" *ngIf="hideLineRight(step.id)">
<div class="lamb-liner"></div>
</li>
</ng-template>
<!-- <ng-content select="lamb-step-head"></ng-content> -->
</ul>
<div class="tab-content lamb-content" id="myStepContent">
<!-- <ng-content select="lamb-step-body"></ng-content> -->
<ng-template ngFor let-step [ngForOf]="steps">
<!-- class="step-pane fade {{ step.id === activeId ? 'active': null }}" -->
<!--
<div [@slideOfRight]="((step.id === activeId) && (status === 'next')) ? 'next': 'back'" class="tab-pane {{ step.id === activeId ? 'active': 'active' }}"
*ngIf="!destroyOnHide || step.id === activeId" role="steppanel" [attr.aria-labelledby]="step.id" id="{{ step.id }}-panel"
[attr.aria-expanded]="step.id === activeId"> -->
<div class="tab-pane {{ step.id === activeId ? 'active': null }}" *ngIf="!destroyOnHide || step.id === activeId" role="steppanel"
[attr.aria-labelledby]="step.id" id="{{ step.id }}-panel" [attr.aria-expanded]="step.id === activeId">
<div class="row">
<div class="col-md-12">
<ng-template [ngTemplateOutlet]="step.contentTemplate?.templateRef"></ng-template>
</div>
</div>
<div class="row lamb-button-manage">
<div class="offset-md-4 col-md-4">
<div class="row">
<div class="col-md-6" *ngIf="hidePrevious">
<div class="form-group text-center space-20">
<button class="btn btn-sm btn-block btn-outline-rounded btn-default" (click)="back()">
<span style="margin-right:10px;" class="fa fa-arrow-left"></span>
{{ iConfigNames.buttonBack }}
</button>
</div>
</div>
<div class="col-md-6" *ngIf="hideNext">
<div class="form-group text-center space-20">
<button class="btn btn-sm btn-block btn-outline-rounded btn-info" [disabled]="!step.isValidStep" (click)="next()">
{{ iConfigNames.buttonNext }}
<span style="margin-left:10px;" class="fa fa-arrow-right"></span>
</button>
</div>
</div>
<div class="col-md-6" *ngIf="hidePrevious && !hideNext">
<div class="form-group text-center space-20">
<button class="btn btn-sm btn-block btn-outline-rounded btn-info" [disabled]="!step.isValidStep" (click)="complete()">