@coreui/angular
Version:
CoreUI for Angular UI components library
1,032 lines (1,010 loc) • 485 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, Inject, ViewChild, forwardRef, Optional, ContentChild, ElementRef, PLATFORM_ID, TemplateRef, ViewContainerRef, Pipe, ChangeDetectionStrategy, VERSION } from '@angular/core';
import * as i1$1 from '@angular/common';
import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import * as i1 from '@angular/animations';
import { animation, style, animate, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
import * as i3 from '@angular/router';
import { NavigationEnd, RouterModule } from '@angular/router';
import { BehaviorSubject, Observable, Subject } from 'rxjs';
import { filter } from 'rxjs/operators';
import { createPopper } from '@popperjs/core';
import * as i1$2 from '@angular/cdk/layout';
import * as i1$3 from '@angular/cdk/a11y';
import { A11yModule } from '@angular/cdk/a11y';
import * as i5 from '@coreui/icons-angular';
import { IconModule } from '@coreui/icons-angular';
var BreakpointInfix;
(function (BreakpointInfix) {
BreakpointInfix["xs"] = "xs";
BreakpointInfix["sm"] = "sm";
BreakpointInfix["md"] = "md";
BreakpointInfix["lg"] = "lg";
BreakpointInfix["xl"] = "xl";
BreakpointInfix["xxl"] = "xxl";
})(BreakpointInfix || (BreakpointInfix = {}));
class HtmlAttributesDirective {
constructor(renderer, el) {
this.renderer = renderer;
this.el = el;
}
ngOnInit() {
const attribs = this.cHtmlAttr;
for (const attr in attribs) {
if (attr === 'style' && typeof (attribs[attr]) === 'object') {
this.setStyle(attribs[attr]);
}
else if (attr === 'class') {
this.addClass(attribs[attr]);
}
else {
this.setAttrib(attr, attribs[attr]);
}
}
}
setStyle(styles) {
for (const style in styles) {
if (style) {
this.renderer.setStyle(this.el.nativeElement, style, styles[style]);
}
}
}
addClass(classes) {
const classArray = (Array.isArray(classes) ? classes : classes.split(' '));
classArray.filter((element) => element.length > 0).forEach(element => {
this.renderer.addClass(this.el.nativeElement, element);
});
}
setAttrib(key, value) {
value !== null ?
this.renderer.setAttribute(this.el.nativeElement, key, value) :
this.renderer.removeAttribute(this.el.nativeElement, key);
}
}
HtmlAttributesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: HtmlAttributesDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
HtmlAttributesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: { cHtmlAttr: "cHtmlAttr" }, exportAs: ["cHtmlAttr"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: HtmlAttributesDirective, decorators: [{
type: Directive,
args: [{
selector: '[cHtmlAttr]',
exportAs: 'cHtmlAttr'
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { cHtmlAttr: [{
type: Input
}] } });
class TemplateIdDirective {
constructor(templateRef) {
this.templateRef = templateRef;
}
}
TemplateIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TemplateIdDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
TemplateIdDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TemplateIdDirective, selector: "[cTemplateId]", inputs: { id: ["cTemplateId", "id"] }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TemplateIdDirective, decorators: [{
type: Directive,
args: [{
selector: '[cTemplateId]'
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { id: [{
type: Input,
args: ['cTemplateId']
}] } });
class SharedModule {
static forRoot() {
return {
ngModule: SharedModule,
// providers: [
// {provide: OutClickService}
// ]
};
}
}
SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SharedModule, declarations: [
// OutClickDirective,
HtmlAttributesDirective,
TemplateIdDirective
], imports: [CommonModule], exports: [
// OutClickDirective,
HtmlAttributesDirective,
TemplateIdDirective
] });
SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SharedModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SharedModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule
],
declarations: [
// OutClickDirective,
HtmlAttributesDirective,
TemplateIdDirective
],
exports: [
// OutClickDirective,
HtmlAttributesDirective,
TemplateIdDirective
],
providers: []
}]
}] });
class AccordionButtonDirective {
constructor() {
/**
* Default type for cAccordionButton. [docs]
* @type string
* @default 'button'
*/
this.type = 'button';
}
get hostClasses() {
return {
'accordion-button': true,
collapsed: this.collapsed
};
}
get ariaExpanded() {
return !this.collapsed;
}
}
AccordionButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AccordionButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
AccordionButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: AccordionButtonDirective, selector: "[cAccordionButton]", inputs: { collapsed: "collapsed", type: "type" }, host: { properties: { "attr.type": "this.type", "class": "this.hostClasses", "attr.aria-expanded": "this.ariaExpanded" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AccordionButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[cAccordionButton]'
}]
}], propDecorators: { collapsed: [{
type: Input
}], type: [{
type: HostBinding,
args: ['attr.type']
}, {
type: Input
}], hostClasses: [{
type: HostBinding,
args: ['class']
}], ariaExpanded: [{
type: HostBinding,
args: ['attr.aria-expanded']
}] } });
class AccordionService {
constructor() {
this.items = [];
this.alwaysOpen = false;
}
addItem(item) {
this.items.push(item);
}
removeItem(item) {
const index = this.items.indexOf(item);
if (index !== -1) {
this.items.splice(index, 1);
}
}
toggleItem(item) {
item.visible = !item.visible;
this.closeOtherItems(item);
}
closeOtherItems(openItem) {
if (!this.alwaysOpen) {
this.items.forEach((item) => {
if (item !== openItem) {
item.visible = false;
}
});
}
}
}
AccordionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AccordionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
AccordionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AccordionService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AccordionService, decorators: [{
type: Injectable
}], ctorParameters: function () { return []; } });
class AccordionComponent {
constructor(accordionService) {
this.accordionService = accordionService;
}
/**
* Make accordion items stay open when another item is opened
* @type boolean
*/
set alwaysOpen(value) {
this.accordionService.alwaysOpen = coerceBooleanProperty(value);
}
get alwaysOpen() {
return this.accordionService.alwaysOpen;
}
get hostClasses() {
return {
accordion: true,
'accordion-flush': !!this.flush
};
}
}
AccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AccordionComponent, deps: [{ token: AccordionService }], target: i0.ɵɵFactoryTarget.Component });
AccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: AccordionComponent, selector: "c-accordion", inputs: { flush: "flush", alwaysOpen: "alwaysOpen" }, host: { properties: { "class": "this.hostClasses" } }, providers: [AccordionService], exportAs: ["cAccordionItem"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'c-accordion', template: `<ng-content></ng-content>`, exportAs: 'cAccordionItem', providers: [AccordionService], styles: [":host{display:block}\n"] }]
}], ctorParameters: function () { return [{ type: AccordionService }]; }, propDecorators: { flush: [{
type: Input
}], alwaysOpen: [{
type: Input
}], hostClasses: [{
type: HostBinding,
args: ['class']
}] } });
const expandAnimation = animation([
style({ height: 0, visibility: 'hidden', paddingTop: 0, paddingBottom: 0 }),
animate('{{ time }} {{ easing }}', style({ height: '*', visibility: 'visible', paddingTop: '*', paddingBottom: '*', minHeight: '*' })),
animate('{{ time }}', style({ opacity: '*' })),
]);
const collapseAnimation = animation([
style({ height: '*', visibility: 'visible', paddingTop: '*', paddingBottom: '*', minHeight: '*' }),
animate('{{ time }} {{ easing }}', style({ height: 0, visibility: 'hidden', opacity: 0, paddingTop: 0, paddingBottom: 0, minHeight: 0 }))
]);
const expandHorizontalAnimation = animation([
style({ width: 0, visibility: 'hidden', paddingLeft: 0, paddingRight: 0 }),
animate('{{ time }} {{ easing }}', style({ width: '*', visibility: 'visible', paddingLeft: '*', paddingRight: '*', minWidth: '*' })),
animate('{{ time }}', style({ opacity: '*' })),
]);
const collapseHorizontalAnimation = animation([
style({ width: '*', visibility: 'visible', paddingLeft: '*', paddingRight: '*', minWidth: '*' }),
animate('{{ time }} {{ easing }}', style({ width: 0, visibility: 'hidden', opacity: 0, paddingLeft: 0, paddingRight: 0, minWidth: 0 }))
]);
// todo
// tslint:disable-next-line:no-conflicting-lifecycle
class CollapseDirective {
constructor(hostElement, renderer, animationBuilder) {
this.hostElement = hostElement;
this.renderer = renderer;
this.animationBuilder = animationBuilder;
this._animate = true;
this._horizontal = false;
this._visible = false;
this._navbar = false;
/**
* @ignore
*/
this.duration = '350ms';
/**
* @ignore
*/
this.transition = 'ease';
/**
* Event emitted on visibility change. [docs]
* @type string
*/
this.collapseChange = new EventEmitter();
this.collapsing = false;
this.host = this.hostElement.nativeElement;
this.renderer.setStyle(this.host, 'display', 'none');
}
/**
* @ignore
*/
set animate(value) {
this._animate = value;
}
get animate() {
return this._animate;
}
/**
* Set horizontal collapsing to transition the width instead of height.
*/
set horizontal(value) {
this._horizontal = coerceBooleanProperty(value);
}
get horizontal() {
return this._horizontal;
}
/**
* Toggle the visibility of collapsible element.
*/
set visible(value) {
this._visible = value;
}
get visible() {
return this._visible;
}
/**
* Add `navbar` prop for grouping and hiding navbar contents by a parent breakpoint.
*/
set navbar(value) {
this._navbar = coerceBooleanProperty(value);
}
;
get navbar() {
return this._navbar;
}
get hostClasses() {
return {
'navbar-collapse': this.navbar,
show: this.visible,
'collapse-horizontal': this.horizontal,
collapsing: this.collapsing
// collapse: !this.collapsing && !this.visible
};
}
ngAfterViewInit() {
if (this.visible) {
this.toggle();
}
}
ngOnDestroy() {
this.destroyPlayer();
}
ngOnChanges(changes) {
if (changes['visible']) {
if (!changes['visible'].firstChange || !changes['visible'].currentValue) {
this.toggle(changes['visible'].currentValue);
}
}
}
ngDoCheck() {
if (this._visible !== this.visible) {
this.toggle();
}
}
toggle(visible = this.visible) {
var _a;
this.createPlayer(visible);
(_a = this.player) === null || _a === void 0 ? void 0 : _a.play();
}
destroyPlayer() {
var _a;
(_a = this.player) === null || _a === void 0 ? void 0 : _a.destroy();
}
createPlayer(visible = this.visible) {
var _a;
if ((_a = this.player) === null || _a === void 0 ? void 0 : _a.hasStarted()) {
this.destroyPlayer();
}
if (visible) {
this.renderer.removeStyle(this.host, 'display');
}
const duration = this.animate ? this.duration : '0ms';
const expand = this.horizontal ? expandHorizontalAnimation : expandAnimation;
const collapse = this.horizontal ? collapseHorizontalAnimation : collapseAnimation;
const animationFactory = this.animationBuilder.build(useAnimation(visible ? expand : collapse, { params: { time: duration, easing: this.transition } }));
this.player = animationFactory.create(this.host);
this.player.onStart(() => {
this.setMaxSize();
this.visible = visible;
this.collapsing = true;
this.collapseChange.emit(visible ? 'opening' : 'collapsing');
});
this.player.onDone(() => {
this.collapsing = false;
this.collapseChange.emit(visible ? 'open' : 'collapsed');
});
}
setMaxSize() {
setTimeout(() => {
if (this.horizontal) {
this.scrollWidth = this.host.scrollWidth;
this.scrollWidth > 0 && this.renderer.setStyle(this.host, 'maxWidth', `${this.scrollWidth}px`);
// } else {
// this.scrollHeight = this.host.scrollHeight;
// this.scrollHeight > 0 && this.renderer.setStyle(this.host, 'maxHeight', `${this.scrollHeight}px`);
}
});
}
}
CollapseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CollapseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Directive });
CollapseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CollapseDirective, selector: "[cCollapse]", inputs: { animate: "animate", horizontal: "horizontal", visible: "visible", navbar: "navbar", duration: "duration", transition: "transition" }, outputs: { collapseChange: "collapseChange" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cCollapse"], usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CollapseDirective, decorators: [{
type: Directive,
args: [{
selector: '[cCollapse]',
exportAs: 'cCollapse'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.AnimationBuilder }]; }, propDecorators: { animate: [{
type: Input
}], horizontal: [{
type: Input
}], visible: [{
type: Input
}], navbar: [{
type: Input
}], duration: [{
type: Input
}], transition: [{
type: Input
}], collapseChange: [{
type: Output
}], hostClasses: [{
type: HostBinding,
args: ['class']
}] } });
let nextId$1 = 0;
class AccordionItemComponent {
constructor(accordionService) {
this.accordionService = accordionService;
this._visible = false;
this.contentId = `accordion-item-${nextId$1++}`;
this.itemContext = { $implicit: this.visible };
this.templates = {};
}
/**
* Toggle an accordion item programmatically
* @type boolean
* @default false
*/
set visible(value) {
this._visible = coerceBooleanProperty(value);
}
get visible() {
return this._visible;
}
set open(value) {
console.warn('c-accordion-item "open" prop is deprecated, use "visible" prop instead.');
this.visible = value || this.visible;
}
get open() {
return this.visible;
}
get hostClasses() {
return {
'accordion-item': true,
};
}
ngOnInit() {
this.accordionService.addItem(this);
}
ngOnDestroy() {
this.accordionService.removeItem(this);
}
toggleItem() {
this.accordionService.toggleItem(this);
}
ngAfterContentInit() {
this.contentTemplates.forEach((child) => {
this.templates[child.id] = child.templateRef;
});
}
}
AccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AccordionItemComponent, deps: [{ token: AccordionService }], target: i0.ɵɵFactoryTarget.Component });
AccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: AccordionItemComponent, selector: "c-accordion-item", inputs: { visible: "visible", open: "open" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cAccordionItem"], ngImport: i0, template: "<ng-container>\r\n <div class=\"accordion-header\">\r\n <ng-container *ngTemplateOutlet=\"templates['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\"></ng-container>\r\n </div>\r\n <div class=\"accordion-collapse\" cCollapse [visible]=\"visible\" [attr.aria-expanded]=\"visible\" [id]=\"contentId\">\r\n <ng-container *ngTemplateOutlet=\"templates['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\"></ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #defaultAccordionHeaderTemplate>\r\n <button cAccordionButton [collapsed]=\"!visible\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\">\r\n </ng-container>\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionHeaderContentTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionBodyTemplate>\r\n <div class=\"accordion-body\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionBodyContentTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:block;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar", "duration", "transition"], outputs: ["collapseChange"], exportAs: ["cCollapse"] }, { kind: "directive", type: AccordionButtonDirective, selector: "[cAccordionButton]", inputs: ["collapsed", "type"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AccordionItemComponent, decorators: [{
type: Component,
args: [{ selector: 'c-accordion-item', exportAs: 'cAccordionItem', template: "<ng-container>\r\n <div class=\"accordion-header\">\r\n <ng-container *ngTemplateOutlet=\"templates['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\"></ng-container>\r\n </div>\r\n <div class=\"accordion-collapse\" cCollapse [visible]=\"visible\" [attr.aria-expanded]=\"visible\" [id]=\"contentId\">\r\n <ng-container *ngTemplateOutlet=\"templates['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\"></ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #defaultAccordionHeaderTemplate>\r\n <button cAccordionButton [collapsed]=\"!visible\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\">\r\n </ng-container>\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionHeaderContentTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionBodyTemplate>\r\n <div class=\"accordion-body\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionBodyContentTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:block;overflow:hidden}\n"] }]
}], ctorParameters: function () { return [{ type: AccordionService }]; }, propDecorators: { visible: [{
type: Input
}], open: [{
type: Input
}], hostClasses: [{
type: HostBinding,
args: ['class']
}], contentTemplates: [{
type: ContentChildren,
args: [TemplateIdDirective, { descendants: true }]
}] } });
class CollapseModule {
static forRoot() {
return { ngModule: CollapseModule, providers: [] };
}
}
CollapseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CollapseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: CollapseModule, declarations: [CollapseDirective], imports: [CommonModule], exports: [CollapseDirective] });
CollapseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CollapseModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CollapseModule, decorators: [{
type: NgModule,
args: [{
declarations: [CollapseDirective],
exports: [CollapseDirective],
imports: [
CommonModule
]
}]
}] });
class AccordionModule {
}
AccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: AccordionModule, declarations: [AccordionComponent,
AccordionButtonDirective,
AccordionItemComponent], imports: [CommonModule,
CollapseModule,
SharedModule], exports: [AccordionComponent,
AccordionButtonDirective,
AccordionItemComponent] });
AccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AccordionModule, providers: [
AccordionService
], imports: [CommonModule,
CollapseModule,
SharedModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AccordionModule, decorators: [{
type: NgModule,
args: [{
declarations: [
AccordionComponent,
AccordionButtonDirective,
AccordionItemComponent,
],
imports: [
CommonModule,
CollapseModule,
SharedModule
],
exports: [
AccordionComponent,
AccordionButtonDirective,
AccordionItemComponent,
],
providers: [
AccordionService
]
}]
}] });
class AlertHeadingDirective {
constructor() { }
get hostClasses() {
return {
'alert-heading': true,
};
}
}
AlertHeadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AlertHeadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
AlertHeadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: AlertHeadingDirective, selector: "[cAlertHeading]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AlertHeadingDirective, decorators: [{
type: Directive,
args: [{
selector: '[cAlertHeading]'
}]
}], ctorParameters: function () { return []; }, propDecorators: { hostClasses: [{
type: HostBinding,
args: ['class']
}] } });
class AlertLinkDirective {
constructor() { }
get hostClasses() {
return {
'alert-link': true,
};
}
}
AlertLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AlertLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
AlertLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: AlertLinkDirective, selector: "[cAlertLink]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AlertLinkDirective, decorators: [{
type: Directive,
args: [{
selector: '[cAlertLink]'
}]
}], ctorParameters: function () { return []; }, propDecorators: { hostClasses: [{
type: HostBinding,
args: ['class']
}] } });
class ButtonDirective {
constructor() {
this._active = false;
this._disabled = false;
/**
* Sets the color context of the component to one of CoreUI’s themed colors. [docs]
* @type Colors
*/
this.color = 'primary';
/**
* Size the component small or large.
* @type {'sm' | 'lg'}
*/
this.size = '';
/**
* Specifies the type of button. Always specify the type attribute for the `<button>` element.
* Different browsers may use different default types for the `<button>` element.
*/
this.type = 'button';
}
/**
* Toggle the active state for the component. [docs]
* @type boolean
*/
get active() {
return this._active;
}
set active(value) {
this._active = coerceBooleanProperty(value);
}
/**
* Toggle the disabled state for the component.
* @type boolean
*/
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = coerceBooleanProperty(value);
}
get hostClasses() {
return {
btn: true,
[`btn-${this.color}`]: !!this.color && !this.variant,
[`btn-${this.variant}`]: !!this.variant && !this.color,
[`btn-${this.variant}-${this.color}`]: !!this.variant && !!this.color,
[`btn-${this.size}`]: !!this.size,
[`${this.shape}`]: !!this.shape,
disabled: this.disabled,
active: this.active
};
}
get ariaDisabled() {
return this.disabled || null;
}
;
get isActive() {
return this.active || null;
}
get attrDisabled() {
return this.disabled ? '' : null;
}
;
get tabIndex() {
return this.disabled ? '-1' : null;
}
}
ButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: ButtonDirective, selector: "[cButton]", inputs: { active: "active", color: "color", disabled: "disabled", shape: "shape", size: "size", type: "type", variant: "variant" }, host: { properties: { "attr.type": "this.type", "class": "this.hostClasses", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-pressed": "this.isActive", "attr.disabled": "this.attrDisabled", "attr.tabindex": "this.tabIndex" } }, exportAs: ["cButton"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[cButton]',
exportAs: 'cButton'
}]
}], ctorParameters: function () { return []; }, propDecorators: { active: [{
type: Input
}], color: [{
type: Input
}], disabled: [{
type: Input
}], shape: [{
type: Input
}], size: [{
type: Input
}], type: [{
type: HostBinding,
args: ['attr.type']
}, {
type: Input
}], variant: [{
type: Input
}], hostClasses: [{
type: HostBinding,
args: ['class']
}], ariaDisabled: [{
type: HostBinding,
args: ['attr.aria-disabled']
}], isActive: [{
type: HostBinding,
args: ['attr.aria-pressed']
}], attrDisabled: [{
type: HostBinding,
args: ['attr.disabled']
}], tabIndex: [{
type: HostBinding,
args: ['attr.tabindex']
}] } });
class ButtonCloseDirective extends ButtonDirective {
constructor() {
super(...arguments);
this._white = false;
}
/**
* Change the default color to white.
* @type boolean
*/
get white() {
return this._white;
}
set white(value) {
this._white = coerceBooleanProperty(value);
}
get hostClasses() {
return {
btn: true,
'btn-close': true,
'btn-close-white': this.white,
[`btn-${this.size}`]: !!this.size,
disabled: this.disabled,
active: this.active,
};
}
}
ButtonCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ButtonCloseDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
ButtonCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: { white: "white" }, host: { properties: { "class": "this.hostClasses" } }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ButtonCloseDirective, decorators: [{
type: Directive,
args: [{
selector: '[cButtonClose]'
}]
}], propDecorators: { white: [{
type: Input
}], hostClasses: [{
type: HostBinding,
args: ['class']
}] } });
class AlertComponent {
constructor() {
/**
* Sets the color context of the component to one of CoreUI’s themed colors.
*
* @type Colors
* @default 'primary'
*/
this.color = 'primary';
this._dismissible = false;
this._fade = false;
/**
* Default role for alert. [docs]
* @type string
* @default 'alert'
*/
this.role = 'alert';
this._visible = true;
/**
* Event triggered on the alert dismiss.
*/
this.visibleChange = new EventEmitter();
this.templates = {};
}
/**
* Optionally adds a close button to alert and allow it to self dismiss.
* @type boolean
*/
get dismissible() {
return this._dismissible;
}
set dismissible(value) {
this._dismissible = coerceBooleanProperty(value);
}
/**
* Adds animation for dismissible alert.
* @type boolean
*/
get fade() {
return this._fade;
}
set fade(value) {
this._fade = coerceBooleanProperty(value);
}
/**
* Toggle the visibility of alert component.
* @type boolean
*/
set visible(value) {
if (this._visible !== value) {
this._visible = coerceBooleanProperty(value);
this.visibleChange.emit(value);
}
}
;
get visible() {
return this._visible;
}
get animationDisabled() {
return !this.fade;
}
get animateType() {
return this.visible ? 'show' : 'hide';
}
get hostClasses() {
return {
alert: true,
'alert-dismissible': this.dismissible,
fade: this.fade,
show: !this.hide,
[`alert-${this.color}`]: !!this.color && this.variant !== 'solid',
[`bg-${this.color}`]: !!this.color && this.variant === 'solid',
'text-white': !!this.color && this.variant === 'solid'
};
}
onAnimationStart($event) {
this.onAnimationEvent($event);
}
onAnimationDone($event) {
this.onAnimationEvent($event);
}
ngAfterContentInit() {
this.contentTemplates.forEach((child) => {
this.templates[child.id] = child.templateRef;
});
}
onAnimationEvent(event) {
this.hide = event.phaseName === 'start' && event.toState === 'show';
if (event.phaseName === 'done') {
this.hide = (event.toState === 'hide' || event.toState === 'void');
if (event.toState === 'show') {
this.hide = false;
}
}
}
}
AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: AlertComponent, selector: "c-alert", inputs: { color: "color", dismissible: "dismissible", fade: "fade", role: "role", variant: "variant", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@fadeInOut.start": "onAnimationStart($event)", "@fadeInOut.done": "onAnimationDone($event)" }, properties: { "attr.role": "this.role", "@.disabled": "this.animationDisabled", "@fadeInOut": "this.animateType", "class": "this.hostClasses" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cAlert"], ngImport: i0, template: "<ng-container *ngIf=\"visible || !hide\">\n <ng-template [ngIf]=\"dismissible\">\n <ng-container *ngTemplateOutlet=\"templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate\">\n </ng-container>\n </ng-template>\n <ng-content></ng-content>\n</ng-container>\n\n<ng-template #defaultAlertButtonCloseTemplate>\n <button (click)=\"visible=false\" aria-label=\"Close\" cButtonClose></button>\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }], animations: [
trigger('fadeInOut', [
state('show', style({ opacity: 1, height: '*', padding: '*', border: '*', margin: '*' })),
state('hide', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
state('void', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
transition('show => hide', [
animate('.3s ease-out'),
]),
transition('hide => show', [
animate('.3s ease-in'),
]),
transition('show => void', [
animate('.3s ease-out'),
]),
transition('void => show', [
animate('.3s ease-in'),
]),
])
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AlertComponent, decorators: [{
type: Component,
args: [{ selector: 'c-alert', exportAs: 'cAlert', animations: [
trigger('fadeInOut', [
state('show', style({ opacity: 1, height: '*', padding: '*', border: '*', margin: '*' })),
state('hide', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
state('void', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
transition('show => hide', [
animate('.3s ease-out'),
]),
transition('hide => show', [
animate('.3s ease-in'),
]),
transition('show => void', [
animate('.3s ease-out'),
]),
transition('void => show', [
animate('.3s ease-in'),
]),
])
], template: "<ng-container *ngIf=\"visible || !hide\">\n <ng-template [ngIf]=\"dismissible\">\n <ng-container *ngTemplateOutlet=\"templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate\">\n </ng-container>\n </ng-template>\n <ng-content></ng-content>\n</ng-container>\n\n<ng-template #defaultAlertButtonCloseTemplate>\n <button (click)=\"visible=false\" aria-label=\"Close\" cButtonClose></button>\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"] }]
}], propDecorators: { color: [{
type: Input
}], dismissible: [{
type: Input
}], fade: [{
type: Input
}], role: [{
type: HostBinding,
args: ['attr.role']
}, {
type: Input
}], variant: [{
type: Input
}], visible: [{
type: Input
}], visibleChange: [{
type: Output
}], contentTemplates: [{
type: ContentChildren,
args: [TemplateIdDirective, { descendants: true }]
}], animationDisabled: [{
type: HostBinding,
args: ['@.disabled']
}], animateType: [{
type: HostBinding,
args: ['@fadeInOut']
}], hostClasses: [{
type: HostBinding,
args: ['class']
}], onAnimationStart: [{
type: HostListener,
args: ['@fadeInOut.start', ['$event']]
}], onAnimationDone: [{
type: HostListener,
args: ['@fadeInOut.done', ['$event']]
}] } });
class ButtonModule {
}
ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: ButtonModule, declarations: [ButtonDirective,
ButtonCloseDirective], imports: [CommonModule], exports: [ButtonDirective,
ButtonCloseDirective] });
ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ButtonModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ButtonModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ButtonDirective,
ButtonCloseDirective,
],
imports: [
CommonModule,
],
exports: [
ButtonDirective,
ButtonCloseDirective,
]
}]
}] });
class AlertModule {
}
AlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: AlertModule, declarations: [AlertComponent,
AlertHeadingDirective,
AlertLinkDirective], imports: [CommonModule,
ButtonModule], exports: [AlertComponent,
AlertHeadingDirective,
AlertLinkDirective] });
AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AlertModule, imports: [CommonModule,
ButtonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AlertModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
ButtonModule
],
exports: [
AlertComponent,
AlertHeadingDirective,
AlertLinkDirective
],
declarations: [
AlertComponent,
AlertHeadingDirective,
AlertLinkDirective
]
}]
}] });
class AvatarComponent {
constructor() {
/**
* Size the component small, large, or extra large.
* @default 'md'
*/
this.size = 'md';
}
get statusClass() {
return {
'avatar-status': true,
[`bg-${this.status}`]: !!this.status
};
}
get hostClasses() {
return {
avatar: true,
[`avatar-${this.size}`]: !!this.size,
[`bg-${this.color}`]: !!this.color,
[`${this.shape}`]: !!this.shape,
[`text-${this.textColor}`]: !!this.textColor
};
}
}
AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: AvatarComponent, selector: "c-avatar", inputs: { color: "color", shape: "shape", size: "size", src: "src", status: "status", textColor: "textColor" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-container>\n <ng-container *ngTemplateOutlet=\"defaultImageTemplate\"></ng-container>\n <span *ngIf=\"!!status\" [ngClass]=\"statusClass\"></span>\n</ng-container>\n\n<ng-template #defaultImageTemplate>\n <img *ngIf=\"!!src; else imageContent\" [src]=\"src\" class=\"avatar-img\" />\n <ng-template #imageContent>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AvatarComponent, decorators: [{
type: Component,
args: [{ selector: 'c-avatar', template: "<ng-container>\n <ng-container *ngTemplateOutlet=\"defaultImageTemplate\"></ng-container>\n <span *ngIf=\"!!status\" [ngClass]=\"statusClass\"></span>\n</ng-container>\n\n<ng-template #defaultImageTemplate>\n <img *ngIf=\"!!src; else imageContent\" [src]=\"src\" class=\"avatar-img\" />\n <ng-template #imageContent>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { color: [{
type: Input
}], shape: [{
type: Input
}], size: [{
type: Input
}], src: [{
type: Input
}], status: [{
type: Input
}], textColor: [{
type: Input
}], hostClasses: [{
type: HostBinding,
args: ['class']
}] } });
class AvatarModule {
}
AvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: AvatarModule, declarations: [AvatarComponent], imports: [CommonModule], exports: [AvatarComponent] });
AvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AvatarModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AvatarModule, decorators: [{
type: NgModule,
args: [{
declarations: [
AvatarComponent
],
imports: [
CommonModule
],