@coreui/angular
Version:
CoreUI Components Library for Angular
925 lines (902 loc) • 538 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, Input, booleanAttribute, NgModule, computed, Injectable, Component, signal, output, contentChildren, EventEmitter, HostBinding, Output, ContentChildren, HostListener, DestroyRef, RendererFactory2, PLATFORM_ID, Inject, afterNextRender, ViewChild, forwardRef, ContentChild, Optional, contentChild, afterRender, viewChild, ViewContainerRef, model, numberAttribute, ChangeDetectionStrategy, Pipe, untracked } from '@angular/core';
import { NgTemplateOutlet, DOCUMENT, NgClass, NgOptimizedImage, AsyncPipe, isPlatformServer, isPlatformBrowser, NgStyle } from '@angular/common';
import { animation, animate, style, AnimationBuilder, useAnimation, trigger, state, transition, group, query, animateChild } from '@angular/animations';
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
import { fromEvent, Subject, BehaviorSubject, Observable, merge, takeWhile } from 'rxjs';
import * as i1 from '@angular/router';
import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
import { filter, tap, finalize, zipWith, withLatestFrom, debounceTime } from 'rxjs/operators';
import { createPopper } from '@popperjs/core';
import * as i3 from '@angular/cdk/a11y';
import { FocusKeyManager, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import * as i3$1 from '@angular/cdk/layout';
import { BreakpointObserver } from '@angular/cdk/layout';
import { IconDirective } 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 ElementRefDirective {
constructor() {
this.elementRef = inject(ElementRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ElementRefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: ElementRefDirective, isStandalone: true, selector: "[cElementRef]", exportAs: ["cElementRef"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ElementRefDirective, decorators: [{
type: Directive,
args: [{
selector: '[cElementRef]',
exportAs: 'cElementRef',
standalone: true,
}]
}] });
class HtmlAttributesDirective {
constructor() {
this.cHtmlAttr = input();
this.#renderer = inject(Renderer2);
this.#elementRef = inject(ElementRef);
this.attrEffect = effect(() => {
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]);
}
}
});
}
#renderer;
#elementRef;
setStyle(styles) {
for (const style in styles) {
if (style) {
this.#renderer.setStyle(this.#elementRef.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.#elementRef.nativeElement, element);
});
}
setAttrib(key, value) {
value !== null
? this.#renderer.setAttribute(this.#elementRef.nativeElement, key, value)
: this.#renderer.removeAttribute(this.#elementRef.nativeElement, key);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HtmlAttributesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.12", type: HtmlAttributesDirective, isStandalone: true, selector: "[cHtmlAttr]", inputs: { cHtmlAttr: { classPropertyName: "cHtmlAttr", publicName: "cHtmlAttr", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["cHtmlAttr"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HtmlAttributesDirective, decorators: [{
type: Directive,
args: [{
selector: '[cHtmlAttr]',
exportAs: 'cHtmlAttr',
standalone: true
}]
}] });
class TemplateIdDirective {
constructor() {
this.templateRef = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TemplateIdDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: TemplateIdDirective, isStandalone: true, selector: "[cTemplateId]", inputs: { id: ["cTemplateId", "id"] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TemplateIdDirective, decorators: [{
type: Directive,
args: [{
selector: '[cTemplateId]',
standalone: true,
}]
}], propDecorators: { id: [{
type: Input,
args: ['cTemplateId']
}] } });
class ThemeDirective {
#hostElement = inject(ElementRef);
#renderer = inject(Renderer2);
/**
* Add dark theme attribute.
* @type 'dark' | 'light' | undefined
*/
set colorScheme(scheme) {
!!scheme ? this.setTheme(scheme) : this.unsetTheme();
}
;
/**
* Add dark theme attribute.
* @type boolean
*/
set dark(darkTheme) {
darkTheme ? this.setTheme('dark') : this.unsetTheme();
}
;
setTheme(theme) {
if (theme) {
this.#renderer.setAttribute(this.#hostElement.nativeElement, 'data-coreui-theme', theme);
}
}
unsetTheme() {
this.#renderer.removeAttribute(this.#hostElement.nativeElement, 'data-coreui-theme');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.12", type: ThemeDirective, isStandalone: true, selector: "[cTheme]", inputs: { colorScheme: "colorScheme", dark: ["dark", "dark", booleanAttribute] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ThemeDirective, decorators: [{
type: Directive,
args: [{
selector: '[cTheme]',
standalone: true
}]
}], propDecorators: { colorScheme: [{
type: Input
}], dark: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
class SharedModule {
static forRoot() {
return {
ngModule: SharedModule,
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: SharedModule, imports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective], exports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SharedModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SharedModule, decorators: [{
type: NgModule,
args: [{
imports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective],
exports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective],
}]
}] });
class AccordionButtonDirective {
constructor() {
/**
* Toggles an accordion button collapsed state. Use in accordionHeaderTemplate. [docs]
* @type boolean
*/
this.collapsed = input(undefined);
/**
* Default type for cAccordionButton. [docs]
* @type string
* @default 'button'
*/
this.type = input('button');
this.hostClasses = computed(() => {
return {
'accordion-button': true,
collapsed: this.collapsed()
};
});
this.ariaExpanded = computed(() => !this.collapsed());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.12", type: AccordionButtonDirective, isStandalone: true, selector: "[cAccordionButton]", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.type": "type()", "attr.aria-expanded": "ariaExpanded()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[cAccordionButton]',
standalone: true,
host: { '[class]': 'hostClasses()', '[attr.type]': 'type()', '[attr.aria-expanded]': 'ariaExpanded()' }
}]
}] });
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;
}
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionService, decorators: [{
type: Injectable
}] });
class AccordionComponent {
constructor() {
this.#accordionService = inject(AccordionService);
/**
* Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
* @type boolean
*/
this.flush = input(false, { transform: booleanAttribute });
/**
* Make accordion items stay open when another item is opened
* @type boolean
*/
this.alwaysOpen = input(false, { transform: booleanAttribute });
this.#alwaysOpenEffect = effect(() => {
this.#accordionService.alwaysOpen = this.alwaysOpen();
});
this.hostClasses = computed(() => ({
accordion: true,
'accordion-flush': this.flush()
}));
}
#accordionService;
#alwaysOpenEffect;
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.12", type: AccordionComponent, isStandalone: true, selector: "c-accordion", inputs: { flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, alwaysOpen: { classPropertyName: "alwaysOpen", publicName: "alwaysOpen", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, providers: [AccordionService], exportAs: ["cAccordionItem"], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'c-accordion', template: '<ng-content />', exportAs: 'cAccordionItem', providers: [AccordionService], standalone: true, host: { '[class]': 'hostClasses()' }, styles: [":host{display:block}\n"] }]
}] });
const expandAnimation = animation([animate('{{ time }} {{ easing }}')]);
const collapseAnimation = animation([
style({ height: '*', minHeight: '*' }),
animate('{{ time }} {{ easing }}', style({ height: 0, minHeight: 0 }))
]);
const expandHorizontalAnimation = animation([animate('{{ time }} {{ easing }}')]);
const collapseHorizontalAnimation = animation([animate('{{ time }} {{ easing }}')]);
class CollapseDirective {
constructor() {
this.#hostElement = inject(ElementRef);
this.#renderer = inject(Renderer2);
this.#animationBuilder = inject(AnimationBuilder);
this.#player = undefined;
/**
* @ignore
*/
this.animateInput = input(true, { transform: booleanAttribute, alias: 'animate' });
this.animate = signal(true);
this.animateInputEffect = effect(() => {
this.animate.set(this.animateInput());
}, { allowSignalWrites: true });
/**
* Set horizontal collapsing to transition the width instead of height.
* @type boolean
* @default false
*/
this.horizontal = input(false, { transform: booleanAttribute });
/**
* Toggle the visibility of collapsible element.
* @type boolean
* @default false
*/
this.visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' });
this.visibleChange = output();
this.visibleInputEffect = effect(() => {
this.visible.set(this.visibleInput());
}, { allowSignalWrites: true });
this.visible = signal(false);
this.#init = false;
this.visibleEffect = effect(() => {
const visible = this.visible();
(this.#init || visible) && this.createPlayer(visible);
this.#init = true;
}, { allowSignalWrites: true });
/**
* Add `navbar` prop for grouping and hiding navbar contents by a parent breakpoint.
* @type boolean
* @default false
*/
this.navbar = input(false, { transform: booleanAttribute });
/**
* @ignore
*/
this.duration = input('350ms');
/**
* @ignore
*/
this.transition = input('ease');
/**
* Event emitted on visibility change. [docs]
* @type string
*/
this.collapseChange = output();
this.hostClasses = computed(() => {
return {
'navbar-collapse': this.navbar(),
'collapse-horizontal': this.horizontal()
};
});
}
#hostElement;
#renderer;
#animationBuilder;
#player;
#init;
ngOnDestroy() {
this.destroyPlayer();
}
toggle(visible = !this.visible()) {
this.visible.set(visible);
}
destroyPlayer() {
this.#player?.destroy();
this.#player = undefined;
}
createPlayer(visible = this.visible()) {
if (this.#player?.hasStarted()) {
this.destroyPlayer();
}
const host = this.#hostElement.nativeElement;
if (visible) {
this.#renderer.removeStyle(host, 'display');
}
const duration = this.animate() ? this.duration() : '0ms';
const expand = this.horizontal() ? expandHorizontalAnimation : expandAnimation;
const collapse = this.horizontal() ? collapseHorizontalAnimation : collapseAnimation;
const dimension = this.horizontal() ? 'width' : 'height';
const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1);
const scrollSize = `scroll${capitalizedDimension}`;
const animationFactory = this.#animationBuilder?.build(useAnimation(visible ? expand : collapse, { params: { time: duration, easing: this.transition() } }));
this.#player = animationFactory.create(host);
!visible && host.offsetHeight && host.style[dimension] && host.scrollHeight;
this.#renderer.setStyle(host, dimension, visible ? 0 : `${host.getBoundingClientRect()[dimension]}px`);
this.#player.onStart(() => {
this.setMaxSize();
this.#renderer.removeClass(host, 'collapse');
this.#renderer.addClass(host, 'collapsing');
this.#renderer.removeClass(host, 'show');
this.#renderer.setStyle(host, dimension, visible ? `${host[scrollSize]}px` : '');
this.collapseChange?.emit(visible ? 'opening' : 'collapsing');
});
this.#player.onDone(() => {
this.#renderer.removeClass(host, 'collapsing');
this.#renderer.addClass(host, 'collapse');
if (visible) {
this.#renderer.addClass(host, 'show');
this.#renderer.setStyle(host, dimension, '');
}
else {
this.#renderer.removeClass(host, 'show');
}
this.collapseChange?.emit(visible ? 'open' : 'collapsed');
this.destroyPlayer();
this.visibleChange.emit(visible);
});
this.#player?.play();
}
setMaxSize() {
const host = this.#hostElement.nativeElement;
if (this.horizontal()) {
host.scrollWidth > 0 && this.#renderer.setStyle(host, 'maxWidth', `${host.scrollWidth}px`);
// } else {
// host.scrollHeight > 0 && this.#renderer.setStyle(host, 'maxHeight', `${host.scrollHeight}px`);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CollapseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.12", type: CollapseDirective, isStandalone: true, selector: "[cCollapse]", inputs: { animateInput: { classPropertyName: "animateInput", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, navbar: { classPropertyName: "navbar", publicName: "navbar", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange", collapseChange: "collapseChange" }, host: { properties: { "class": "hostClasses()", "style": "{display: \"none\"}" } }, exportAs: ["cCollapse"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CollapseDirective, decorators: [{
type: Directive,
args: [{
selector: '[cCollapse]',
exportAs: 'cCollapse',
standalone: true,
host: { '[class]': 'hostClasses()', '[style]': '{display: "none"}' }
}]
}] });
class CollapseModule {
static forRoot() {
return { ngModule: CollapseModule, providers: [] };
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: CollapseModule, imports: [CollapseDirective], exports: [CollapseDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CollapseModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CollapseModule, decorators: [{
type: NgModule,
args: [{
exports: [CollapseDirective],
imports: [CollapseDirective]
}]
}] });
let nextId$2 = 0;
class AccordionItemComponent {
constructor() {
this.#accordionService = inject(AccordionService);
/**
* Toggle an accordion item programmatically
* @type boolean
* @default false
*/
this.visible = false;
this.contentId = `accordion-item-${nextId$2++}`;
this.contentTemplates = contentChildren(TemplateIdDirective, { descendants: true });
this.templates = computed(() => {
return this.contentTemplates().reduce((acc, child) => {
acc[child.id] = child.templateRef;
return acc;
}, {});
});
}
#accordionService;
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 itemContext() {
return { $implicit: this.visible };
}
ngOnInit() {
this.#accordionService.addItem(this);
}
ngOnDestroy() {
this.#accordionService.removeItem(this);
}
toggleItem() {
this.#accordionService.toggleItem(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.12", type: AccordionItemComponent, isStandalone: true, selector: "c-accordion-item", inputs: { visible: ["visible", "visible", booleanAttribute], open: "open" }, host: { classAttribute: "accordion-item" }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], exportAs: ["cAccordionItem"], ngImport: i0, template: "@let tmpl = templates();\n<ng-container>\n <div class=\"accordion-header\">\n <ng-container *ngTemplateOutlet=\"tmpl['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\" />\n </div>\n <div class=\"accordion-collapse\" cCollapse [visible]=\"visible\" [attr.aria-expanded]=\"visible\" [id]=\"contentId\">\n <ng-container *ngTemplateOutlet=\"tmpl['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\" />\n </div>\n</ng-container>\n\n<ng-template #defaultAccordionHeaderTemplate>\n <button cAccordionButton [collapsed]=\"!visible\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\n <ng-container\n *ngTemplateOutlet=\"tmpl['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\">\n </ng-container>\n </button>\n</ng-template>\n\n<ng-template #defaultAccordionHeaderContentTemplate>\n <ng-content />\n</ng-template>\n\n<ng-template #defaultAccordionBodyTemplate>\n <div class=\"accordion-body\">\n <ng-container\n *ngTemplateOutlet=\"tmpl['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\">\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultAccordionBodyContentTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: AccordionButtonDirective, selector: "[cAccordionButton]", inputs: ["collapsed", "type"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar", "duration", "transition"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionItemComponent, decorators: [{
type: Component,
args: [{ selector: 'c-accordion-item', exportAs: 'cAccordionItem', standalone: true, imports: [AccordionButtonDirective, NgTemplateOutlet, CollapseDirective], host: { class: 'accordion-item' }, template: "@let tmpl = templates();\n<ng-container>\n <div class=\"accordion-header\">\n <ng-container *ngTemplateOutlet=\"tmpl['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\" />\n </div>\n <div class=\"accordion-collapse\" cCollapse [visible]=\"visible\" [attr.aria-expanded]=\"visible\" [id]=\"contentId\">\n <ng-container *ngTemplateOutlet=\"tmpl['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\" />\n </div>\n</ng-container>\n\n<ng-template #defaultAccordionHeaderTemplate>\n <button cAccordionButton [collapsed]=\"!visible\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\n <ng-container\n *ngTemplateOutlet=\"tmpl['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\">\n </ng-container>\n </button>\n</ng-template>\n\n<ng-template #defaultAccordionHeaderContentTemplate>\n <ng-content />\n</ng-template>\n\n<ng-template #defaultAccordionBodyTemplate>\n <div class=\"accordion-body\">\n <ng-container\n *ngTemplateOutlet=\"tmpl['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\">\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultAccordionBodyContentTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"] }]
}], propDecorators: { visible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], open: [{
type: Input
}] } });
class AccordionModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: AccordionModule, imports: [AccordionButtonDirective,
AccordionComponent,
AccordionItemComponent], exports: [AccordionComponent,
AccordionButtonDirective,
AccordionItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionModule, providers: [
AccordionService
] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionModule, decorators: [{
type: NgModule,
args: [{
imports: [
AccordionButtonDirective,
AccordionComponent,
AccordionItemComponent
],
exports: [
AccordionComponent,
AccordionButtonDirective,
AccordionItemComponent
],
providers: [
AccordionService
]
}]
}] });
class AlertHeadingDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AlertHeadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: AlertHeadingDirective, isStandalone: true, selector: "[cAlertHeading]", host: { classAttribute: "alert-heading" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AlertHeadingDirective, decorators: [{
type: Directive,
args: [{
selector: '[cAlertHeading]',
standalone: true,
host: { class: 'alert-heading' }
}]
}] });
class AlertLinkDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AlertLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: AlertLinkDirective, isStandalone: true, selector: "[cAlertLink]", host: { classAttribute: "alert-link" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AlertLinkDirective, decorators: [{
type: Directive,
args: [{
selector: '[cAlertLink]',
standalone: true,
host: { class: 'alert-link' }
}]
}] });
class ButtonDirective {
constructor() {
/**
* Toggle the active state for the component. [docs]
* @type InputSignalWithTransform<boolean, unknown>
*/
this.active = input(false, { transform: booleanAttribute });
/**
* Sets the color context of the component to one of CoreUI’s themed colors. [docs]
* @type InputSignal<Colors>
*/
this.color = input('primary');
/**
* Toggle the disabled state for the component.
* @type InputSignalWithTransform<boolean, unknown>
*/
this.disabled = input(false, { transform: booleanAttribute });
/**
* Select the shape of the component.
* @type InputSignal<Shapes>
*/
this.shape = input();
/**
* Size the component small or large.
* @type InputSignal<'sm' | 'lg' | ''>
*/
this.size = input('');
/**
* 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.
* @type InputSignal<ButtonType>
* @default 'button'
*/
this.type = input('button');
/**
* Set the button variant to an outlined button or a ghost button.
* @type InputSignal<'ghost' | 'outline' | undefined>
*/
this.variant = input();
this.hostClasses = computed(() => {
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(),
active: this.active(),
disabled: this._disabled()
};
});
this._disabled = computed(() => this.disabled());
this.ariaDisabled = computed(() => {
return this._disabled() ? true : null;
});
this.attrDisabled = computed(() => {
return this._disabled() ? '' : null;
});
this.tabIndex = computed(() => {
return this._disabled() ? '-1' : null;
});
this.isActive = computed(() => {
return this.active() || null;
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.12", type: ButtonDirective, isStandalone: true, selector: "[cButton]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.aria-disabled": "ariaDisabled()", "attr.aria-pressed": "isActive()", "attr.disabled": "attrDisabled()", "attr.tabindex": "tabIndex()", "attr.type": "type()" }, classAttribute: "btn" }, exportAs: ["cButton"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[cButton]',
exportAs: 'cButton',
standalone: true,
host: {
class: 'btn',
'[class]': 'hostClasses()',
'[attr.aria-disabled]': 'ariaDisabled()',
'[attr.aria-pressed]': 'isActive()',
'[attr.disabled]': 'attrDisabled()',
'[attr.tabindex]': 'tabIndex()',
'[attr.type]': 'type()'
}
}]
}] });
class ButtonCloseDirective extends ButtonDirective {
constructor() {
super(...arguments);
/**
* Change the default color to white.
* @type boolean
* @deprecated 5.0.0. Use `cButtonClose.dark` instead.
*/
this.white = input(false, { transform: booleanAttribute });
this.hostClasses = computed(() => {
return {
btn: true,
'btn-close': true,
'btn-close-white': this.white(),
[`btn-${this.size()}`]: !!this.size(),
active: this.active(),
disabled: this._disabled()
};
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ButtonCloseDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.12", type: ButtonCloseDirective, isStandalone: true, selector: "[cButtonClose]", inputs: { white: { classPropertyName: "white", publicName: "white", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.aria-disabled": "ariaDisabled()", "attr.aria-pressed": "isActive()", "attr.disabled": "attrDisabled()", "attr.tabindex": "tabIndex()", "attr.type": "type()" }, classAttribute: "btn btn-close" }, usesInheritance: true, hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ButtonCloseDirective, decorators: [{
type: Directive,
args: [{
selector: '[cButtonClose]',
standalone: true,
hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }],
host: {
class: 'btn btn-close',
'[class]': 'hostClasses()',
'[attr.aria-disabled]': 'ariaDisabled()',
'[attr.aria-pressed]': 'isActive()',
'[attr.disabled]': 'attrDisabled()',
'[attr.tabindex]': 'tabIndex()',
'[attr.type]': 'type()'
}
}]
}] });
class ButtonModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: ButtonModule, imports: [ButtonDirective,
ButtonCloseDirective], exports: [ButtonDirective,
ButtonCloseDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ButtonModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ButtonModule, decorators: [{
type: NgModule,
args: [{
imports: [
ButtonDirective,
ButtonCloseDirective
],
exports: [
ButtonDirective,
ButtonCloseDirective
]
}]
}] });
class AlertComponent {
constructor() {
/**
* Sets the color context of the component to one of CoreUI’s themed colors.
*
* @type Colors
* @default 'primary'
*/
this.color = 'primary';
/**
* Default role for alert. [docs]
* @type string
* @default 'alert'
*/
this.role = 'alert';
/**
* 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
* @default false
*/
this.dismissible = false;
/**
* Adds animation for dismissible alert.
* @type boolean
*/
this.fade = false;
this.#visible = true;
}
/**
* Toggle the visibility of alert component.
* @type boolean
*/
set visible(value) {
if (this.#visible !== value) {
this.#visible = value;
this.visibleChange.emit(value);
}
}
;
get visible() {
return this.#visible;
}
#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;
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: AlertComponent, isStandalone: true, selector: "c-alert", inputs: { color: "color", role: "role", variant: "variant", dismissible: ["dismissible", "dismissible", booleanAttribute], fade: ["fade", "fade", booleanAttribute], visible: ["visible", "visible", booleanAttribute] }, 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: "@if (visible || !hide) {\n @if (dismissible) {\n <ng-container *ngTemplateOutlet=\"templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate\" />\n }\n <ng-content />\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: 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: "18.2.12", ngImport: i0, type: AlertComponent, decorators: [{
type: Component,
args: [{ selector: 'c-alert', exportAs: 'cAlert', standalone: true, imports: [NgTemplateOutlet, ButtonCloseDirective], 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: "@if (visible || !hide) {\n @if (dismissible) {\n <ng-container *ngTemplateOutlet=\"templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate\" />\n }\n <ng-content />\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
}], role: [{
type: HostBinding,
args: ['attr.role']
}, {
type: Input
}], variant: [{
type: Input
}], visibleChange: [{
type: Output
}], contentTemplates: [{
type: ContentChildren,
args: [TemplateIdDirective, { descendants: true }]
}], dismissible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], fade: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], visible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], 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 AlertModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: AlertModule, imports: [AlertComponent,
AlertHeadingDirective,
AlertLinkDirective], exports: [AlertComponent,
AlertHeadingDirective,
AlertLinkDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AlertModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AlertModule, decorators: [{
type: NgModule,
args: [{
imports: [
AlertComponent,
AlertHeadingDirective,
AlertLinkDirective
],
exports: [
AlertComponent,
AlertHeadingDirective,
AlertLinkDirective
]
}]
}] });
class AlignDirective {
get hostClasses() {
return {
[`align-${this.align}`]: !!this.align,
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AlignDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: AlignDirective, isStandalone: true, selector: "[cAlign]", inputs: { align: ["cAlign", "align"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AlignDirective, decorators: [{
type: Directive,
args: [{
selector: '[cAlign]',
standalone: true
}]
}], propDecorators: { align: [{
type: Input,
args: ['cAlign']
}], hostClasses: [{
type: HostBinding,
args: ['class']
}] } });
class BgColorDirective {
constructor() {
/**
* Set the background of an element to any contextual class
*/
this.color = '';
}
get hostClasses() {
return {
[`bg-${this.color}`]: !!this.color,
'bg-gradient': this.gradient
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BgColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: BgColorDirective, isStandalone: true, se