import * as i0 from '@angular/core';
import { Injectable, Component, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { trigger, state, style, transition, animate } from '@angular/animations';

class AnglBstpUIService {
    constructor() { }
}
AnglBstpUIService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: AnglBstpUIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
AnglBstpUIService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: AnglBstpUIService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: AnglBstpUIService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: function () { return []; } });

class CardComponent {
    constructor() {
        this.clase = [];
    }
    ngOnInit() {
    }
}
CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: CardComponent, selector: "ngb-card", inputs: { clase: ["clss", "clase"] }, ngImport: i0, template: "<div [ngClass]=\"['card'].concat(clase)\" >\n    <ng-content ></ng-content>\n</div>\n", styles: [":host ::ng-deep .card-body{flex:1 1 auto;padding:1rem}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}:host ::ng-deep .card>hr{margin-right:0;margin-left:0}:host ::ng-deep .card>.list-group{border-top:inherit;border-bottom:inherit}:host ::ng-deep .card>.list-group:first-child{border-top-width:0;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}:host ::ng-deep .card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}:host ::ng-deep .card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}:host ::ng-deep .card-title{margin-bottom:.5rem}:host ::ng-deep .card-subtitle{margin-top:-.25rem;margin-bottom:0}:host ::ng-deep .card-text:last-child{margin-bottom:0}:host ::ng-deep .card-link+.card-link{margin-left:1rem}:host ::ng-deep .card-header{padding:.5rem 1rem;margin-bottom:0;background-color:#00000008;border-bottom:1px solid rgba(0,0,0,.125)}:host ::ng-deep .card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}:host ::ng-deep .card-footer{padding:.5rem 1rem;background-color:#00000008;border-top:1px solid rgba(0,0,0,.125)}:host ::ng-deep .card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}:host ::ng-deep .card-header-tabs{margin-right:-.5rem;margin-bottom:-.5rem;margin-left:-.5rem;border-bottom:0}:host ::ng-deep .card-header-pills{margin-right:-.5rem;margin-left:-.5rem}:host ::ng-deep .card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1rem;border-radius:calc(.25rem - 1px)}:host ::ng-deep .card-img,.card-img-bottom,.card-img-top{width:100%}:host ::ng-deep .card-img,.card-img-top{border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}:host ::ng-deep .card-img,.card-img-bottom{border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}:host ::ng-deep .card-group>.card{margin-bottom:.75rem}@media (min-width:576px){:host ::ng-deep .card-group{display:flex;flex-flow:row wrap}:host ::ng-deep .card-group>.card{flex:1 0 0%;margin-bottom:0}:host ::ng-deep .card-group>.card+.card{margin-left:0;border-left:0}:host ::ng-deep .card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}:host ::ng-deep .card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}:host ::ng-deep .card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}:host ::ng-deep .card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}:host ::ng-deep .card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CardComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ngb-card',
                    templateUrl: './card.component.html',
                    styleUrls: ['./card.component.css']
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { clase: [{
                type: Input,
                args: ["clss"]
            }] } });

class ButtonComponent {
    constructor() {
        this.disabled = false;
        /**
         * Cuando se hace click en el boton, se ejecuta el evento Emitt
         */
        this.clck = new EventEmitter();
    }
    ngOnInit() {
    }
    clckBttn() {
        this.clck.emit();
    }
}
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: ButtonComponent, selector: "ngb-button", inputs: { clase: ["clss", "clase"], disabled: ["dsbl", "disabled"] }, outputs: { clck: "clck" }, ngImport: i0, template: "<button type=\"button\" [ngClass]=\"disabled ? ['disabled'].concat(clase) : clase\" (click)=\"clckBttn()\" [disabled]=\"disabled\">\n    <ng-content></ng-content>\n</button>", styles: [".btn-check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn-check:disabled+.btn,.btn-check[disabled]+.btn{pointer-events:none;filter:none;opacity:.65}.btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.btn-close{box-sizing:content-box;width:1em;height:1em;padding:.25em;color:#000;background:transparent url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e\") center/1em auto no-repeat;border:0;border-radius:.25rem;opacity:.5}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#212529}.btn-check:focus+.btn,.btn:focus{outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.btn.disabled,.btn:disabled,fieldset:disabled .btn{pointer-events:none;opacity:.65}.btn-primary{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-primary:hover{color:#fff;background-color:#0b5ed7;border-color:#0a58ca}.btn-check:focus+.btn-primary,.btn-primary:focus{color:#fff;background-color:#0b5ed7;border-color:#0a58ca;box-shadow:0 0 0 .25rem #3184fd80}.btn-check:active+.btn-primary,.btn-check:checked+.btn-primary,.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0a58ca;border-color:#0a53be}.btn-check:active+.btn-primary:focus,.btn-check:checked+.btn-primary:focus,.btn-primary.active:focus,.btn-primary:active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .25rem #3184fd80}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:hover{color:#fff;background-color:#5c636a;border-color:#565e64}.btn-check:focus+.btn-secondary,.btn-secondary:focus{color:#fff;background-color:#5c636a;border-color:#565e64;box-shadow:0 0 0 .25rem #828a9180}.btn-check:active+.btn-secondary,.btn-check:checked+.btn-secondary,.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#565e64;border-color:#51585e}.btn-check:active+.btn-secondary:focus,.btn-check:checked+.btn-secondary:focus,.btn-secondary.active:focus,.btn-secondary:active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .25rem #828a9180}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-success{color:#fff;background-color:#198754;border-color:#198754}.btn-success:hover{color:#fff;background-color:#157347;border-color:#146c43}.btn-check:focus+.btn-success,.btn-success:focus{color:#fff;background-color:#157347;border-color:#146c43;box-shadow:0 0 0 .25rem #3c996e80}.btn-check:active+.btn-success,.btn-check:checked+.btn-success,.btn-success.active,.btn-success:active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#146c43;border-color:#13653f}.btn-check:active+.btn-success:focus,.btn-check:checked+.btn-success:focus,.btn-success.active:focus,.btn-success:active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .25rem #3c996e80}.btn-success .disabled,.btn-success:disabled{color:#fff;background-color:#198754;border-color:#198754}.btn-info{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-info:hover{color:#000;background-color:#31d2f2;border-color:#25cff2}.btn-check:focus+.btn-info,.btn-info:focus{color:#000;background-color:#31d2f2;border-color:#25cff2;box-shadow:0 0 0 .25rem #0baccc80}.btn-check:active+.btn-info,.btn-check:checked+.btn-info,.btn-info .active,.btn-info:active,.show>.btn-info .dropdown-toggle{color:#000;background-color:#3dd5f3;border-color:#25cff2}.btn-check:active+.btn-info:focus,.btn-check:checked+.btn-info:focus,.btn-info .active:focus,.btn-info:active:focus,.show>.btn-info .dropdown-toggle:focus{box-shadow:0 0 0 .25rem #0baccc80}.btn-info.disabled,.btn-info:disabled{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-warning{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#000;background-color:#ffca2c;border-color:#ffc720}.btn-check:focus+.btn-warning,.btn-warning:focus{color:#000;background-color:#ffca2c;border-color:#ffc720;box-shadow:0 0 0 .25rem #d9a40680}.btn-check:active+.btn-warning,.btn-check:checked+.btn-warning,.btn-warning.active,.btn-warning:active,.show>.btn-warning.dropdown-toggle{color:#000;background-color:#ffcd39;border-color:#ffc720}.btn-check:active+.btn-warning:focus,.btn-check:checked+.btn-warning:focus,.btn-warning.active:focus,.btn-warning:active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .25rem #d9a40680}.btn-warning.disabled,.btn-warning:disabled{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#bb2d3b;border-color:#b02a37}.btn-check:focus+.btn-danger,.btn-danger:focus{color:#fff;background-color:#bb2d3b;border-color:#b02a37;box-shadow:0 0 0 .25rem #e1536180}.btn-check:active+.btn-danger,.btn-check:checked+.btn-danger,.btn-danger.active,.btn-danger:active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#b02a37;border-color:#a52834}.btn-check:active+.btn-danger:focus,.btn-check:checked+.btn-danger:focus,.btn-danger.active:focus,.btn-danger:active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .25rem #e1536180}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-light{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#000;background-color:#f9fafb;border-color:#f9fafb}.btn-check:focus+.btn-light,.btn-light:focus{color:#000;background-color:#f9fafb;border-color:#f9fafb;box-shadow:0 0 0 .25rem #d3d4d580}.btn-check:active+.btn-light,.btn-check:checked+.btn-light,.btn-light.active,.btn-light:active,.show>.btn-light.dropdown-toggle{color:#000;background-color:#f9fafb;border-color:#f9fafb}.btn-check:active+.btn-light:focus,.btn-check:checked+.btn-light:focus,.btn-light.active:focus,.btn-light:active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .25rem #d3d4d580}.btn-light.disabled,.btn-light:disabled{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-dark{color:#fff;background-color:#212529;border-color:#212529}.btn-dark:hover{color:#fff;background-color:#1c1f23;border-color:#1a1e21}.btn-check:focus+.btn-dark,.btn-dark:focus{color:#fff;background-color:#1c1f23;border-color:#1a1e21;box-shadow:0 0 0 .25rem #42464980}.btn-check:active+.btn-dark,.btn-check:checked+.btn-dark,.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1a1e21;border-color:#191c1f}.btn-check:active+.btn-dark:focus,.btn-check:checked+.btn-dark:focus,.btn-dark.active:focus,.btn-dark:active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .25rem #42464980}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#212529;border-color:#212529}.btn-outline-primary{color:#0d6efd;border-color:#0d6efd}.btn-outline-primary:hover{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-check:focus+.btn-outline-primary,.btn-outline-primary:focus{box-shadow:0 0 0 .25rem #0d6efd80}.btn-check:active+.btn-outline-primary,.btn-check:checked+.btn-outline-primary,.btn-outline-primary.active,.btn-outline-primary.dropdown-toggle.show,.btn-outline-primary:active{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-check:active+.btn-outline-primary:focus,.btn-check:checked+.btn-outline-primary:focus,.btn-outline-primary.active:focus,.btn-outline-primary.dropdown-toggle.show:focus,.btn-outline-primary:active:focus{box-shadow:0 0 0 .25rem #0d6efd80}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#0d6efd;background-color:transparent}.btn-outline-secondary{color:#6c757d;border-color:#6c757d}.btn-outline-secondary:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-check:focus+.btn-outline-secondary,.btn-outline-secondary:focus{box-shadow:0 0 0 .25rem #6c757d80}.btn-check:active+.btn-outline-secondary,.btn-check:checked+.btn-outline-secondary,.btn-outline-secondary.active,.btn-outline-secondary.dropdown-toggle.show,.btn-outline-secondary:active{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-check:active+.btn-outline-secondary:focus,.btn-check:checked+.btn-outline-secondary:focus,.btn-outline-secondary.active:focus,.btn-outline-secondary.dropdown-toggle.show:focus,.btn-outline-secondary:active:focus{box-shadow:0 0 0 .25rem #6c757d80}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6c757d;background-color:transparent}.btn-outline-success{color:#198754;border-color:#198754}.btn-outline-success:hover{color:#fff;background-color:#198754;border-color:#198754}.btn-check:focus+.btn-outline-success,.btn-outline-success:focus{box-shadow:0 0 0 .25rem #19875480}.btn-check:active+.btn-outline-success,.btn-check:checked+.btn-outline-success,.btn-outline-success.active,.btn-outline-success.dropdown-toggle.show,.btn-outline-success:active{color:#fff;background-color:#198754;border-color:#198754}.btn-check:active+.btn-outline-success:focus,.btn-check:checked+.btn-outline-success:focus,.btn-outline-success.active:focus,.btn-outline-success.dropdown-toggle.show:focus,.btn-outline-success:active:focus{box-shadow:0 0 0 .25rem #19875480}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#198754;background-color:transparent}.btn-outline-info{color:#0dcaf0;border-color:#0dcaf0}.btn-outline-info:hover{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-check:focus+.btn-outline-info,.btn-outline-info:focus{box-shadow:0 0 0 .25rem #0dcaf080}.btn-check:active+.btn-outline-info,.btn-check:checked+.btn-outline-info,.btn-outline-info.active,.btn-outline-info.dropdown-toggle.show,.btn-outline-info:active{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-check:active+.btn-outline-info:focus,.btn-check:checked+.btn-outline-info:focus,.btn-outline-info.active:focus,.btn-outline-info.dropdown-toggle.show:focus,.btn-outline-info:active:focus{box-shadow:0 0 0 .25rem #0dcaf080}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#0dcaf0;background-color:transparent}.btn-outline-warning{color:#ffc107;border-color:#ffc107}.btn-outline-warning:hover{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-check:focus+.btn-outline-warning,.btn-outline-warning:focus{box-shadow:0 0 0 .25rem #ffc10780}.btn-check:active+.btn-outline-warning,.btn-check:checked+.btn-outline-warning,.btn-outline-warning.active,.btn-outline-warning.dropdown-toggle.show,.btn-outline-warning:active{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-check:active+.btn-outline-warning:focus,.btn-check:checked+.btn-outline-warning:focus,.btn-outline-warning.active:focus,.btn-outline-warning.dropdown-toggle.show:focus,.btn-outline-warning:active:focus{box-shadow:0 0 0 .25rem #ffc10780}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#ffc107;background-color:transparent}.btn-outline-danger{color:#dc3545;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-check:focus+.btn-outline-danger,.btn-outline-danger:focus{box-shadow:0 0 0 .25rem #dc354580}.btn-check:active+.btn-outline-danger,.btn-check:checked+.btn-outline-danger,.btn-outline-danger.active,.btn-outline-danger.dropdown-toggle.show,.btn-outline-danger:active{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-check:active+.btn-outline-danger:focus,.btn-check:checked+.btn-outline-danger:focus,.btn-outline-danger.active:focus,.btn-outline-danger.dropdown-toggle.show:focus,.btn-outline-danger:active:focus{box-shadow:0 0 0 .25rem #dc354580}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-outline-light{color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:hover{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-check:focus+.btn-outline-light,.btn-outline-light:focus{box-shadow:0 0 0 .25rem #f8f9fa80}.btn-check:active+.btn-outline-light,.btn-check:checked+.btn-outline-light,.btn-outline-light.active,.btn-outline-light.dropdown-toggle.show,.btn-outline-light:active{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-check:active+.btn-outline-light:focus,.btn-check:checked+.btn-outline-light:focus,.btn-outline-light.active:focus,.btn-outline-light.dropdown-toggle.show:focus,.btn-outline-light:active:focus{box-shadow:0 0 0 .25rem #f8f9fa80}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-dark{color:#212529;border-color:#212529}.btn-outline-dark:hover{color:#fff;background-color:#212529;border-color:#212529}.btn-check:focus+.btn-outline-dark,.btn-outline-dark:focus{box-shadow:0 0 0 .25rem #21252980}.btn-check:active+.btn-outline-dark,.btn-check:checked+.btn-outline-dark,.btn-outline-dark.active,.btn-outline-dark.dropdown-toggle.show,.btn-outline-dark:active{color:#fff;background-color:#212529;border-color:#212529}.btn-check:active+.btn-outline-dark:focus,.btn-check:checked+.btn-outline-dark:focus,.btn-outline-dark.active:focus,.btn-outline-dark.dropdown-toggle.show:focus,.btn-outline-dark:active:focus{box-shadow:0 0 0 .25rem #21252980}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#212529;background-color:transparent}.btn-link{font-weight:400;color:#0d6efd;text-decoration:underline}.btn-link:hover{color:#0a58ca}.btn-link.disabled,.btn-link:disabled{color:#6c757d}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1rem;font-size:1.25rem;border-radius:.3rem}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: ButtonComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ngb-button',
                    templateUrl: './button.component.html',
                    styleUrls: ['./button.component.css']
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { clase: [{
                type: Input,
                args: ["clss"]
            }], disabled: [{
                type: Input,
                args: ["dsbl"]
            }], clck: [{
                type: Output
            }] } });

class ButtonPageComponent {
    constructor() {
        this.bttnXmpl = [
            { sltr: "ngb-button", clss: "['btn', 'btn-primary']", vlue: "Primary" },
            { sltr: "ngb-button", clss: "['btn', 'btn-secondary']", vlue: "Secondary" },
            { sltr: "ngb-button", clss: "['btn', 'btn-success']", vlue: "Success" },
            { sltr: "ngb-button", clss: "['btn', 'btn-danger']", vlue: "Danger" },
            { sltr: "ngb-button", clss: "['btn', 'btn-warning']", vlue: "Warning" },
            { sltr: "ngb-button", clss: "['btn', 'btn-info']", vlue: "Info" },
            { sltr: "ngb-button", clss: "['btn', 'btn-light']", vlue: "Light" },
            { sltr: "ngb-button", clss: "['btn', 'btn-dark']", vlue: "Dark" },
            { sltr: "ngb-button", clss: "['btn', 'btn-link']", vlue: "Link" },
        ];
        this.bttnOtln = [
            { sltr: "ngb-button", clss: "['btn', 'btn-outline-primary']", vlue: "Primary" },
            { sltr: "ngb-button", clss: "['btn', 'btn-outline-secondary']", vlue: "Secondary" },
            { sltr: "ngb-button", clss: "['btn', 'btn-outline-success']", vlue: "Success" },
            { sltr: "ngb-button", clss: "['btn', 'btn-outline-danger']", vlue: "Danger" },
            { sltr: "ngb-button", clss: "['btn', 'btn-outline-warning']", vlue: "Warning" },
            { sltr: "ngb-button", clss: "['btn', 'btn-outline-info']", vlue: "Info" },
            { sltr: "ngb-button", clss: "['btn', 'btn-outline-light']", vlue: "Light" },
            { sltr: "ngb-button", clss: "['btn', 'btn-outline-dark']", vlue: "Dark" },
        ];
        this.bttnSize = [
            { sltr: "ngb-button", clss: "['btn', 'btn-primary', 'btn-sm']", vlue: "Small button" },
            { sltr: "ngb-button", clss: "['btn', 'btn-secondary', 'btn-sm']", vlue: "Small button" },
            { sltr: "ngb-button", clss: "['btn', 'btn-primary', 'btn-lg']", vlue: "Large button" },
            { sltr: "ngb-button", clss: "['btn', 'btn-secondary', 'btn-lg']", vlue: "Large button" },
        ];
        this.bttnDsbl = [
            { sltr: "ngb-button", clss: "['btn', 'btn-primary', 'btn-lg']", vlue: "Disabled button" },
            { sltr: "ngb-button", clss: "['btn', 'btn-secondary', 'btn-lg']", vlue: "Disabled button" },
        ];
    }
    ngOnInit() {
    }
}
ButtonPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: ButtonPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ButtonPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: ButtonPageComponent, selector: "ngb-button-page", ngImport: i0, template: "<!-- \n    Los botones admiten un conjunto de clases que le dan personalizaci\u00F3n, las clases admitidas son las mismas que se utilizan en **Bootstrap**\n    -->\n    <div class=\"row text-left\">\n        <h2>Buttons</h2>\n        <hr>\n    </div>\n    <!-- botones Ejemplo -->\n    <div class=\"row\">\n        <ngb-card>\n            <div class=\"card-body\">\n                <h5 class=\"card-title\">Ejemplos</h5>\n                <div class=\"row \">\n                    <div class=\"col-lg-12\">\n                        <ngb-button [clss]=\"['btn', 'btn-primary']\">Primary</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-secondary']\" class=\"example-button\">Secondary</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-success']\" class=\"example-button\">Success</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-danger']\" class=\"example-button\">Danger</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-warning']\" class=\"example-button\">Warning</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-info']\" class=\"example-button\">Info</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-light']\" class=\"example-button\">Light</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-dark']\" class=\"example-button\">Dark</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-link']\" class=\"example-button\">Link</ngb-button>\n                    </div>\n    \n                </div>\n            </div>\n            <div class=\"card-footer\">\n    \n                <code *ngFor=\"let bttn of bttnXmpl\">&lt;{{ bttn.sltr }}\n                    <span class=\"code-gray\">[clss]</span>=<span class=\"code-blue\">\"{{ bttn.clss }}\"</span> &gt;<span style=\"color: black;\"> {{ bttn.vlue }}</span> &lt;/{{ bttn.sltr }}&gt;\n                    <br>\n                </code>\n            </div>\n        </ngb-card>\n    </div>\n    <!-- #end botones ejemplo -->\n    <br>\n    <!-- botones outlines -->\n    <div class=\"row\">\n        <ngb-card>\n            <div class=\"card-body\">\n                <h5 class=\"card-title\">Botones Outlines</h5>\n                <div class=\"row \">\n                    <div class=\"col-lg-12\">\n                        <ngb-button [clss]=\"['btn', 'btn-outline-primary']\">Primary</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-outline-secondary']\" class=\"example-button\">Secondary</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-outline-success']\" class=\"example-button\">Success</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-outline-danger']\" class=\"example-button\">Danger</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-outline-warning']\" class=\"example-button\">Warning</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-outline-info']\" class=\"example-button\">Info</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-outline-light']\" class=\"example-button\">Light</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-outline-dark']\" class=\"example-button\">Dark</ngb-button>\n                    </div>\n    \n                </div>\n            </div>\n            <div class=\"card-footer\">\n                <code *ngFor=\"let bttn of bttnOtln\">&lt;{{ bttn.sltr }}\n                <span class=\"code-gray\">[clss]</span>=<span class=\"code-blue\">\"{{ bttn.clss }}\"</span> &gt;<span style=\"color: black;\"> {{ bttn.vlue }}</span> &lt;/{{ bttn.sltr }}&gt;\n                <br>\n            </code>\n            </div>\n        </ngb-card>\n    </div>\n    <!-- #end botones outlines-->\n    <br>\n    \n    \n    <!-- botones sizes -->\n    <div class=\"row\">\n        <ngb-card>\n            <div class=\"card-body\">\n                <h5 class=\"card-title\">Botones Tama\u00F1os y Disabled</h5>\n                <div class=\"row\">\n                    <div class=\"col-lg-12\" style=\"display: flex; align-items: flex-end;\">\n                        <ngb-button [clss]=\"['btn', 'btn-primary', 'btn-sm']\">Small button</ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-secondary', 'btn-sm']\" class=\"example-button\">Small button\n                        </ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-primary', 'btn-lg']\" class=\"example-button\">Large button\n                        </ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-secondary', 'btn-lg']\" class=\"example-button\">Large button\n                        </ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-lg', 'btn-primary']\" [dsbl]=\"true\" class=\"example-button\">Disabled\n                        </ngb-button>\n                        <ngb-button [clss]=\"['btn', 'btn-secondary', 'btn-lg']\" [dsbl]=\"true\" class=\"example-button\">\n                            Disabled</ngb-button>\n                    </div>\n    \n                </div>\n            </div>\n            <div class=\"card-footer\">\n                <code *ngFor=\"let bttn of bttnSize\">&lt;{{ bttn.sltr }}\n                <span class=\"code-gray\">[clss]</span>=<span class=\"code-blue\">\"{{ bttn.clss }}\"</span> &gt;\n                <span style=\"color: black;\"> {{ bttn.vlue }}</span> &lt;/{{ bttn.sltr }}&gt;\n                <br></code>\n                <code *ngFor=\"let bttn of bttnDsbl\">&lt;{{ bttn.sltr }}\n                    <span class=\"code-gray\">[clss]</span>=<span class=\"code-blue\">\"{{ bttn.clss }}\"</span> <span class=\"code-gray\"> [dsbl]</span>=<span class=\"code-blue\">\"true\"</span> &gt;\n                    <span style=\"color: black;\"> {{ bttn.vlue }}</span> &lt;/{{ bttn.sltr }}&gt;\n                    <br>\n                </code>\n            </div>\n        </ngb-card>\n    </div>\n    <!-- #end botones sizes-->\n", styles: ["\n  .example-button{\n    margin-left:1rem;\n  }\n  .code-blue{\n    color: var(--bs-primary);\n  }\n  .code-gray{\n    color: var(--bs-gray);\n  }\n  .code-black{\n    color: var(--bs-dark);\n  }\n  "], components: [{ type: CardComponent, selector: "ngb-card", inputs: ["clss"] }, { type: ButtonComponent, selector: "ngb-button", inputs: ["clss", "dsbl"], outputs: ["clck"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: ButtonPageComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ngb-button-page',
                    templateUrl: './button.page.html',
                    styles: [`
  .example-button{
    margin-left:1rem;
  }
  .code-blue{
    color: var(--bs-primary);
  }
  .code-gray{
    color: var(--bs-gray);
  }
  .code-black{
    color: var(--bs-dark);
  }
  `]
                }]
        }], ctorParameters: function () { return []; } });

class CardPageComponent {
    constructor() { }
    ngOnInit() {
    }
}
CardPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CardPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CardPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: CardPageComponent, selector: "ngb-card-page", ngImport: i0, template: "<!--\n    About\nA card is a flexible and extensible content container. \nIt includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. \nIf you\u2019re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. \nSimilar functionality to those components is available as modifier classes for cards.\n-->\n<div class=\"row text-left\">\n    <h2>Cards</h2>\n    <hr>\n</div>\n\n<!-- card header, footer, title, subtitle and text-->\n<div class=\"row\">\n    <ngb-card>\n        <div class=\"card-body\">\n            <h5 class=\"card-title\">Ejemplos: titulos, subtitulos, links, header, footer, list</h5>\n            <div class=\"row g-2\">\n                <div class=\"col\">\n                    <ngb-card>\n                        <div class=\"card-body\">\n                            <h5 class=\"card-title\">Card title</h5>\n                            <h6 class=\"card-subtitle mb-2 text-muted\">Card subtitle</h6>\n                            <p class=\"card-text\">Some quick example text to build on the card title and make up the bulk\n                                of the card's content.</p>\n                            <a href=\"#\" class=\"card-link\">Card link</a>\n                            <a href=\"#\" class=\"card-link\">Another link</a>\n                        </div>\n                    </ngb-card>\n                </div>\n                <div class=\"col\">\n                    <ngb-card>\n                        <div class=\"card-header\">\n                            Featured\n                        </div>\n                        <div class=\"card-body\" style=\"height: 5.8rem;\">\n\n                            <h6 class=\"card-subtitle mb-2 text-muted\">Card subtitle</h6>\n                            <p class=\"card-text\">Some quick example t.</p>\n\n                        </div>\n                        <div class=\"card-footer\">\n                            Card footer\n                        </div>\n                    </ngb-card>\n                </div>\n                <div class=\"col\">\n                    <ngb-card>\n                        <div class=\"card-body\" style=\"height: 11rem;\">\n                            <ul class=\"list-group list-group-flush\">\n                                <li class=\"list-group-item\">An item</li>\n                                <li class=\"list-group-item\">A second item</li>\n                                <li class=\"list-group-item\">A third item</li>\n                            </ul>\n                        </div>\n                    </ngb-card>\n                </div>\n            </div>\n        </div>\n        <div class=\"card-footer\">\n            <code>&lt;ngb-card&gt;<br>\n                &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-body\"</span>&gt;<br>\n                &lt;h5 <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-title\"</span>&gt;<span style=\"color: black;\">Card title</span>&lt;/h5&gt;<br>\n                &lt;h6 <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-subtitle mb-2 text-muted\"</span>&gt;<span style=\"color: black;\">Card subtitle</span>&lt;/h6&gt;<br>\n                &lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<span style=\"color: black;\">Some quick example t.</span>&lt;/p&gt;<br>\n                &lt;a href=\"#\" <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-link\"</span>&gt;<span class=\"code-blue\">Card link</span>&lt;/a&gt;<br>\n                &lt;a href=\"#\" <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-link\"</span>&gt;<span class=\"code-blue\">Another link</span>&lt;/a&gt;<br>\n                &lt;/div&gt;<br>\n                &lt;/ngb-card&gt;     \n            <br></code>\n            <hr>\n            <code>&lt;ngb-card&gt;<br>\n                &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-header\"</span>&gt;<span style=\"color: black;\">Featured</span> &lt;/div&gt;<br>\n                &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-body\"</span>&gt;<br>\n                &lt;h6 <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-subtitle mb-2 text-muted\"</span>&gt;<span style=\"color: black;\">Card subtitle</span>&lt;/h6&gt;<br>\n                &lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<span style=\"color: black;\">Some quick example text to build on the card title and make up the bulk of the card's content.</span>&lt;/p&gt;<br>\n                &lt;/div&gt;<br>\n                &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-footer\"</span>&gt;<span style=\"color: black;\">Card footer</span> &lt;/div&gt;<br>\n                &lt;/ngb-card&gt;     \n            <br></code>\n            <hr>\n            <code>&lt;ngb-card&gt;<br>\n                &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-body\"</span>&gt;<br>\n                &lt;li <span class=\"code-gray\">class</span><span class=\"code-blue\">\"list-group-item\"</span>&gt;<span style=\"color: black;\">An item</span>&lt;/li&gt;<br>\n                &lt;li <span class=\"code-gray\">class</span><span class=\"code-blue\">\"list-group-item\"</span>&gt;<span style=\"color: black;\">A second item</span>&lt;/li&gt;<br>\n                &lt;li <span class=\"code-gray\">class</span><span class=\"code-blue\">\"list-group-item\"</span>&gt;<span style=\"color: black;\">A third item</span>&lt;/li&gt;<br>\n                &lt;/div&gt;<br>\n                \n                &lt;/ngb-card&gt;     \n            <br></code>\n        </div>\n    </ngb-card>\n</div>\n<!-- #end card header, footer, title, subtitle and text-->\n\n<br>\n<!-- card images-->\n<div class=\"row\">\n    <ngb-card>\n        <div class=\"card-body\">\n            <h5 class=\"card-title\">Ejemplos: titulos, subtitulos, links, header, footer, list</h5>\n            <div class=\"row g-2\">\n                <div class=\"col-4\">\n                    <ngb-card>\n                        <img src=\"https://raw.githubusercontent.com/hectorcrispens/anglBstpUI/master/angl-bstp-ui/src/assets/imag/imag02.jpg\"\n                            class=\"card-img-top\" alt=\"...\">\n                        <div class=\"card-body\">\n                            <h5 class=\"card-title\">Card title</h5>\n                            <p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to\n                                additional content. This content is a little bit longer.</p>\n                            <p class=\"card-text\"><small class=\"text-muted\">Last updated 3 mins ago</small></p>\n                        </div>\n                    </ngb-card>\n                </div>\n                <div class=\"col-4\">\n                    <ngb-card>\n                        <div class=\"card-body\">\n                            <h5 class=\"card-title\">Card title</h5>\n                            <p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to\n                                additional content. This content is a little bit longer.</p>\n                            <p class=\"card-text\"><small class=\"text-muted\">Last updated 3 mins ago</small></p>\n                        </div>\n                        <img src=\"https://raw.githubusercontent.com/hectorcrispens/anglBstpUI/master/angl-bstp-ui/src/assets/imag/imag02.jpg\"\n                            class=\"card-img-bottom\" alt=\"...\">\n                    </ngb-card>\n                </div>\n                <div class=\"col-4\">\n                    <ngb-card [clss]=\"['bg-dark', 'text-white']\">\n                        <img src=\"https://raw.githubusercontent.com/hectorcrispens/anglBstpUI/master/angl-bstp-ui/src/assets/imag/imag01.jpg\"\n                            class=\"card-img\" alt=\"...\">\n                        <div class=\"card-img-overlay\">\n                            <h5 class=\"card-title\">Card title</h5>\n                            <p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to\n                                additional content. This content is a little bit longer.</p>\n                            <p class=\"card-text\">Last updated 3 mins ago</p>\n                        </div>\n                    </ngb-card>\n                </div>\n            </div>\n        </div>\n        <div class=\"card-footer\">\n            <code>\n                &lt;ngb-card&gt;<br>\n                &lt;img <span class=\"code-gray\">src</span>=<span class=\"code-blue\">\"imag02.jpg\" </span> <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-img-top\"</span> <span class=\"code-gray\">alt</span>=\"...\"&gt;\n                <br>&lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-body\"</span>&gt;\n                <br>&lt;h5 <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-title\"</span>&gt;<span style=\"color: black;\">Card title</span>&lt;/h5&gt;<br>\n                &lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<span style=\"color: black;\">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</span>&lt;/p&gt;<br>\n                &lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<br>\n                &lt;small <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"text-muted\"</span>&gt;<span style=\"color: black;\">Last updated 3 mins ago</span>&lt;/small&gt;<br>\n                &lt;/p&gt;<br>\n                &lt;/div&gt;<br>\n                &lt;/ngb-card&gt;\n            <br></code>\n            <hr>\n            <code>\n                &lt;ngb-card&gt;<br>\n                &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-body\"</span>&gt;<br>\n                &lt;h5 <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-title\"</span>&gt;<span class=\"code-black\">Card title</span>&lt;/h5&gt;<br>\n                &lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<span class=\"code-black\">This is a wider card with supporting text below as a natural lead-in toadditional content. This content is a little bit longer.</span>&lt;/p&gt;<br>\n                &lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<br>\n                &lt;small <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"text-muted\"</span>&gt;Last updated 3 mins ago&lt;/small&gt;<br>\n                &lt;/p&gt;<br>\n                &lt;/div&gt;<br>\n                &lt;img <span class=\"code-gray\">src</span>=\"imag02.jpg\" <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-img-bottom\"</span> <span class=\"code-gray\">alt</span>=\"...\"&gt;<br>\n                &lt;/ngb-card&gt;\n            <br></code>\n            <hr>\n            <code>\n                &lt;ngb-card  <span class=\"code-gray\">[clss]</span>=<span class=\"code-blue\">\"[bg-dark, text-white]\"</span>&gt;<br>\n                &lt;img <span class=\"code-gray\">src</span>=\"imag01.jpg\" <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-img\"</span> <span class=\"code-gray\">alt</span>=\"...\"&gt;<br>\n                &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-img-overlay\"</span>&gt;<br>\n                &lt;h5 <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-title\"</span>&gt;<span class=\"code-black\">Card title</span>&lt;/h5&gt;<br>\n                &lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<span class=\"code-black\">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</span>&lt;/p&gt;<br>\n                &lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<span class=\"code-black\">Last updated 3 mins ago</span>&lt;/p&gt;<br>\n                &lt;/div&gt;<br>\n                &lt;/ngb-card&gt;\n            <br></code>\n        </div>\n    </ngb-card>\n</div>\n<!-- #end card images-->\n<br>\n<!-- card background color-->\n<div class=\"row\">\n    <ngb-card>\n        <div class=\"card-body\">\n            <h5 class=\"card-title\">Background color</h5>\n            <div class=\"row g-2\">\n                <div class=\"col-4\">\n                    <ngb-card [clss]=\"['text-white', 'bg-primary', 'mb-3']\">\n                        <div class=\"card-header\">Header</div>\n                        <div class=\"card-body\">\n                            <h5 class=\"card-title\">Primary card title</h5>\n                            <p class=\"card-text\">Some quick example text to build on the card title and make up the bulk\n                                of the card's content.</p>\n                        </div>\n                    </ngb-card>\n                </div>\n                <div class=\"col-4\">\n                    <ngb-card [clss]=\"['text-white', 'bg-secondary', 'mb-3']\">\n                        <div class=\"card-header\">Header</div>\n                        <div class=\"card-body\">\n                            <h5 class=\"card-title\">Secondary card title</h5>\n                            <p class=\"card-text\">Some quick example text to build on the card title and make up the bulk\n                                of the card's content.</p>\n                        </div>\n                    </ngb-card>\n                </div>\n                <div class=\"col-4\">\n                    <ngb-card [clss]=\"['text-white', 'bg-success', 'mb-3']\">\n                        <div class=\"card-header\">Header</div>\n                        <div class=\"card-body\">\n                            <h5 class=\"card-title\">Success card title</h5>\n                            <p class=\"card-text\">Some quick example text to build on the card title and make up the bulk\n                                of the card's content.</p>\n                        </div>\n                    </ngb-card>\n                </div>\n            </div>\n            <div class=\"row g-2\">\n                <div class=\"col-4\">\n                    <ngb-card [clss]=\"['text-white', 'bg-danger', 'mb-3']\">\n                        <div class=\"card-header\">Header</div>\n                        <div class=\"card-body\">\n                            <h5 class=\"card-title\">Danger card title</h5>\n                            <p class=\"card-text\">Some quick example text to build on the card title and make up the bulk\n                                of the card's content.</p>\n                        </div>\n                    </ngb-card>\n                </div>\n                <div class=\"col-4\">\n                    <ngb-card [clss]=\"['text-dark', 'bg-warning', 'mb-3']\">\n                        <div class=\"card-header\">Header</div>\n                        <div class=\"card-body\">\n                            <h5 class=\"card-title\">Warning card title</h5>\n                            <p class=\"card-text\">Some quick example text to build on the card title and make up the bulk\n                                of the card's content.</p>\n                        </div>\n                    </ngb-card>\n                </div>\n                <div class=\"col-4\">\n                    <ngb-card [clss]=\"['text-dark', 'bg-info', 'mb-3']\">\n                        <div class=\"card-header\">Header</div>\n                        <div class=\"card-body\">\n                            <h5 class=\"card-title\">Info card title</h5>\n                            <p class=\"card-text\">Some quick example text to build on the card title and make up the bulk\n                                of the card's content.</p>\n                        </div>\n                    </ngb-card>\n                </div>\n            </div>\n        </div>\n        <div class=\"card-footer\">\n            <code>\n&lt;ngb-card <span class=\"code-gray\">[clss]</span>=\"['text-white', 'bg-primary', 'mb-3']\"&gt;<br>\n&lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-header\"</span>&gt;<span class=\"code-black\">Header</span>&lt;/div&gt;<br>\n&lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-body\"</span>&gt;<br>\n&lt;h5 <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-title\"</span>&gt;<span class=\"code-black\">Primary card title</span>&lt;/h5&gt;<br>\n&lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<span class=\"code-black\">Some quick example text to build on the card title and make up the bulkof the cards content.</span>&lt;/p&gt;<br>\n&lt;/div&gt;<br>\n&lt;/ngb-card&gt;\n            <br>\n        </code>\n            <hr>\n            <code>\n                &lt;ngb-card <span class=\"code-gray\">[clss]</span>=\"['text-white', 'bg-secondary', 'mb-3']\"&gt;<br>\n&lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-header\"</span>&gt;<span class=\"code-black\">Header</span>&lt;/div&gt;<br>\n&lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-body\"</span>&gt;<br>\n&lt;h5 <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-title\"</span>&gt;<span class=\"code-black\">Secondary card title</span>&lt;/h5&gt;<br>\n&lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<span class=\"code-black\">Some quick example text to build on the card title and make up the bulkof the cards content.</span>&lt;/p&gt;<br>\n&lt;/div&gt;<br>\n&lt;/ngb-card&gt;\n            <br>\n        </code>\n            <hr>\n            <code>\n                &lt;ngb-card <span class=\"code-gray\">[clss]</span>=\"['text-white', 'bg-success', 'mb-3']\"&gt;<br>\n                &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-header\"</span>&gt;<span class=\"code-black\">Header</span>&lt;/div&gt;<br>\n                &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-body\"</span>&gt;<br>\n                &lt;h5 <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-title\"</span>&gt;<span class=\"code-black\">Success card title</span>&lt;/h5&gt;<br>\n                &lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<span class=\"code-black\">Some quick example text to build on the card title and make up the bulkof the cards content.</span>&lt;/p&gt;<br>\n                &lt;/div&gt;<br>\n                &lt;/ngb-card&gt;\n            <br>\n        </code>\n        <hr>\n        <code>\n            &lt;ngb-card <span class=\"code-gray\">[clss]</span>=\"['text-white', 'bg-danger', 'mb-3']\"&gt;<br>\n            &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-header\"</span>&gt;<span class=\"code-black\">Header</span>&lt;/div&gt;<br>\n            &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-body\"</span>&gt;<br>\n            &lt;h5 <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-title\"</span>&gt;<span class=\"code-black\">Danger card title</span>&lt;/h5&gt;<br>\n            &lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<span class=\"code-black\">Some quick example text to build on the card title and make up the bulkof the cards content.</span>&lt;/p&gt;<br>\n            &lt;/div&gt;<br>\n            &lt;/ngb-card&gt;\n        <br>\n    </code>\n    <hr>\n    <code>\n        &lt;ngb-card <span class=\"code-gray\">[clss]</span>=\"['text-dark', 'bg-warning', 'mb-3']\"&gt;<br>\n        &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-header\"</span>&gt;<span class=\"code-black\">Header</span>&lt;/div&gt;<br>\n        &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-body\"</span>&gt;<br>\n        &lt;h5 <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-title\"</span>&gt;<span class=\"code-black\">Warning card title</span>&lt;/h5&gt;<br>\n        &lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<span class=\"code-black\">Some quick example text to build on the card title and make up the bulkof the cards content.</span>&lt;/p&gt;<br>\n        &lt;/div&gt;<br>\n        &lt;/ngb-card&gt;\n    <br>\n</code>\n<hr>\n<code>\n    &lt;ngb-card <span class=\"code-gray\">[clss]</span>=\"['text-dark', 'bg-info', 'mb-3']\"&gt;<br>\n    &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-header\"</span>&gt;<span class=\"code-black\">Header</span>&lt;/div&gt;<br>\n    &lt;div <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-body\"</span>&gt;<br>\n    &lt;h5 <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-title\"</span>&gt;<span class=\"code-black\">Info card title</span>&lt;/h5&gt;<br>\n    &lt;p <span class=\"code-gray\">class</span>=<span class=\"code-blue\">\"card-text\"</span>&gt;<span class=\"code-black\">Some quick example text to build on the card title and make up the bulkof the cards content.</span>&lt;/p&gt;<br>\n    &lt;/div&gt;<br>\n    &lt;/ngb-card&gt;\n<br>\n</code>\n        </div>\n    </ngb-card>\n</div>\n<!-- #end card backround color-->", styles: ["\n  .code-blue{\n    color: var(--bs-primary);\n  }\n  .code-gray{\n    color: var(--bs-gray);\n  }\n  .code-black{\n    color: var(--bs-dark);\n  }\n  "], components: [{ type: CardComponent, selector: "ngb-card", inputs: ["clss"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CardPageComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ngb-card-page',
                    templateUrl: './card.page.html',
                    styles: [`
  .code-blue{
    color: var(--bs-primary);
  }
  .code-gray{
    color: var(--bs-gray);
  }
  .code-black{
    color: var(--bs-dark);
  }
  `]
                }]
        }], ctorParameters: function () { return []; } });

class AnglBstpUIComponent {
    constructor() { }
    ngOnInit() {
    }
}
AnglBstpUIComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: AnglBstpUIComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AnglBstpUIComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: AnglBstpUIComponent, selector: "ngb-anglBstpUI", viewQueries: [{ propertyName: "div", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<div class=\"row text-center\">\n    <h1 class=\"display-1\">anglBstpUI</h1>\n</div>\n\n<ngb-button-page></ngb-button-page>\n\n<br><br>\n\n<ngb-card-page></ngb-card-page>", styles: [".example-button{\n      margin-left:1rem;\n    }\n    .code-blue{\n      color: var(--bs-primary);\n    }\n    .code-gray{\n      color: var(--bs-gray);\n    }\n    .code-black{\n      color: var(--bs-dark);\n    }\n    .bg-light-gray{\n      --bs-bg-opacity: 1;\n      background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity))!important\n    }\n    "], components: [{ type: ButtonPageComponent, selector: "ngb-button-page" }, { type: CardPageComponent, selector: "ngb-card-page" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: AnglBstpUIComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ngb-anglBstpUI',
                    templateUrl: './angl-bstp-ui.component.html',
                    styles: [
                        `.example-button{
      margin-left:1rem;
    }
    .code-blue{
      color: var(--bs-primary);
    }
    .code-gray{
      color: var(--bs-gray);
    }
    .code-black{
      color: var(--bs-dark);
    }
    .bg-light-gray{
      --bs-bg-opacity: 1;
      background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity))!important
    }
    `
                    ]
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { div: [{
                type: ViewChild,
                args: ['modal']
            }] } });

class ModalComponent {
    constructor(render) {
        this.render = render;
        this.stte = new EventEmitter();
        this.dialogBase = ["modal-dialog"];
        this.isOpen = false;
    }
    ngOnInit() {
    }
    tgle() {
        this.isOpen = !this.isOpen;
    }
    _getStat() {
        this.stte.emit(this.isOpen ? 'open' : 'close');
    }
}
ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: ModalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: ModalComponent, selector: "ngb-modal", inputs: { dialogType: ["dlog", "dialogType"] }, outputs: { stte: "stte" }, viewQueries: [{ propertyName: "backdrop", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<div [@stateModal]=\"isOpen ? 'show' : 'hide'\" class=\"modal\" [ngStyle]=\"isOpen ? {display: 'block'} : {display:'none'}\">\n    <div  [ngClass]=\"dialogType == undefined ? dialogBase : dialogBase.concat(dialogType)\">\n      <div class=\"modal-content\">\n        <ng-content></ng-content>        \n      </div>\n    </div>\n</div>\n<div #backdrop [ngClass]=\"isOpen ? ['modal-backdrop', 'show'] : ['modal-backdrop']\" [ngStyle]=\"isOpen ? {display: 'block'} : {display:'none'}\"></div>\n", styles: [":host ::ng-deep .modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}:host ::ng-deep .modal-header .btn-close{padding:.5rem;margin:-.5rem -.5rem -.5rem auto}:host ::ng-deep .modal-title{margin-bottom:0;line-height:1.5}:host ::ng-deep .modal-footer{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:flex-end;padding:.75rem;border-top:1px solid #dee2e6;border-bottom-right-radius:calc(.3rem - 1px);border-bottom-left-radius:calc(.3rem - 1px)}:host ::ng-deep .modal-footer>*{margin:.25rem}:host ::ng-deep .modal-body{position:relative;flex:1 1 auto;padding:1rem}.modal{position:fixed;top:0;left:0;z-index:1055;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal .modal-dialog{transition:transform .3s ease-out;transform:translateY(-50px)}@media (prefers-reduced-motion:reduce){.modal .modal-dialog{transition:none}}.modal .show .modal-dialog{transform:none}.modal .modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1050;width:100vw;height:100vh;background-color:#000}.modal-backdrop .fade{opacity:0}.modal-backdrop .show{opacity:.5}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-scrollable{height:calc(100% - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{max-width:800px}}@media (min-width:1200px){.modal-xl{max-width:1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen :host ::ng-deep .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen :host ::ng-deep .modal-header{border-radius:0}.modal-fullscreen :host ::ng-deep .modal-body{overflow-y:auto}.modal-fullscreen :host ::ng-deep .modal-footer{border-radius:0}@media (max-width:575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down :host ::ng-deep .modal-header{border-radius:0}.modal-fullscreen-sm-down :host ::ng-deep .modal-body{overflow-y:auto}.modal-fullscreen-sm-down :host ::ng-deep .modal-footer{border-radius:0}}@media (max-width:767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down :host ::ng-deep .modal-header{border-radius:0}.modal-fullscreen-md-down :host ::ng-deep .modal-body{overflow-y:auto}.modal-fullscreen-md-down :host ::ng-deep .modal-footer{border-radius:0}}@media (max-width:991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down :host ::ng-deep .modal-header{border-radius:0}.modal-fullscreen-lg-down :host ::ng-deep .modal-body{overflow-y:auto}.modal-fullscreen-lg-down :host ::ng-deep .modal-footer{border-radius:0}}@media (max-width:1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down :host ::ng-deep .modal-header{border-radius:0}.modal-fullscreen-xl-down :host ::ng-deep .modal-body{overflow-y:auto}.modal-fullscreen-xl-down :host ::ng-deep .modal-footer{border-radius:0}}@media (max-width:1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down :host ::ng-deep .modal-header{border-radius:0}.modal-fullscreen-xxl-down :host ::ng-deep .modal-body{overflow-y:auto}.modal-fullscreen-xxl-down :host ::ng-deep .modal-footer{border-radius:0}}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
        trigger('stateModal', [
            state('hide', style({
                opacity: 0,
                transform: 'translate(0, -50px)',
            })),
            state('show', style({
                opacity: 1,
                transform: 'none',
            })),
            transition('hide => show', animate('0.3s ease-in')),
            transition('show => hide', animate('0.3s ease-out'))
        ])
    ] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: ModalComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ngb-modal',
                    templateUrl: './modal.component.html',
                    styleUrls: ['./modal.component.css'],
                    animations: [
                        trigger('stateModal', [
                            state('hide', style({
                                opacity: 0,
                                transform: 'translate(0, -50px)',
                            })),
                            state('show', style({
                                opacity: 1,
                                transform: 'none',
                            })),
                            transition('hide => show', animate('0.3s ease-in')),
                            transition('show => hide', animate('0.3s ease-out'))
                        ])
                    ]
                }]
        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { backdrop: [{
                type: ViewChild,
                args: ['backdrop']
            }], dialogType: [{
                type: Input,
                args: ["dlog"]
            }], stte: [{
                type: Output
            }] } });

//endregion Pages
class AnglBstpUIModule {
}
AnglBstpUIModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: AnglBstpUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AnglBstpUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: AnglBstpUIModule, declarations: [AnglBstpUIComponent,
        ButtonComponent,
        ModalComponent,
        CardComponent,
        CardPageComponent,
        ButtonPageComponent], imports: [CommonModule,
        BrowserAnimationsModule], exports: [AnglBstpUIComponent,
        ButtonComponent,
        ModalComponent,
        CardComponent] });
AnglBstpUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: AnglBstpUIModule, imports: [[
            CommonModule,
            BrowserAnimationsModule,
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: AnglBstpUIModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        AnglBstpUIComponent,
                        ButtonComponent,
                        ModalComponent,
                        CardComponent,
                        CardPageComponent,
                        ButtonPageComponent
                    ],
                    imports: [
                        CommonModule,
                        BrowserAnimationsModule,
                    ],
                    exports: [
                        AnglBstpUIComponent,
                        ButtonComponent,
                        ModalComponent,
                        CardComponent,
                    ]
                }]
        }] });

/*
 * Public API Surface of angl-bstp-ui
 */

/**
 * Generated bundle index. Do not edit.
 */

export { AnglBstpUIComponent, AnglBstpUIModule, AnglBstpUIService, ButtonComponent, CardComponent, ModalComponent };
//# sourceMappingURL=angl-bstp-ui.js.map
