@coreui/angular
Version:
CoreUI Components Library for Angular
903 lines (878 loc) • 525 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, booleanAttribute, untracked, NgModule, computed, Injectable, Component, afterNextRender, linkedSignal, output, signal, contentChildren, numberAttribute, DestroyRef, DOCUMENT, RendererFactory2, PLATFORM_ID, forwardRef, NgZone, ChangeDetectorRef, contentChild, afterEveryRender, viewChild, ViewContainerRef, model, Pipe, Input, ViewChild, HostBinding, ContentChildren, ChangeDetectionStrategy, HostListener, Injector, runInInjectionContext } from '@angular/core';
import { NgTemplateOutlet, NgClass, 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, Router, ActivatedRoute, NavigationEnd, RouterLink } from '@angular/router';
import { filter, tap, finalize, zipWith, withLatestFrom, debounceTime } from 'rxjs/operators';
import { createPopper } from '@popperjs/core';
import * as i1$1 from '@angular/cdk/a11y';
import { FocusKeyManager, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
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 {
elementRef = inject(ElementRef);
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ElementRefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: ElementRefDirective, isStandalone: true, selector: "[cElementRef]", exportAs: ["cElementRef"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ElementRefDirective, decorators: [{
type: Directive,
args: [{
selector: '[cElementRef]',
exportAs: 'cElementRef'
}]
}] });
class HtmlAttributesDirective {
cHtmlAttr = input();
#renderer = inject(Renderer2);
#elementRef = inject(ElementRef);
#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]);
}
}
});
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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: HtmlAttributesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", 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: "20.0.3", ngImport: i0, type: HtmlAttributesDirective, decorators: [{
type: Directive,
args: [{
selector: '[cHtmlAttr]',
exportAs: 'cHtmlAttr'
}]
}] });
class TemplateIdDirective {
templateRef = inject(TemplateRef);
cTemplateId = input.required();
get id() {
return this.cTemplateId();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TemplateIdDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: TemplateIdDirective, isStandalone: true, selector: "[cTemplateId]", inputs: { cTemplateId: { classPropertyName: "cTemplateId", publicName: "cTemplateId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TemplateIdDirective, decorators: [{
type: Directive,
args: [{
selector: '[cTemplateId]'
}]
}] });
class ThemeDirective {
#hostElement = inject(ElementRef);
#renderer = inject(Renderer2);
/**
* Add dark theme attribute.
* @return 'dark' | 'light' | undefined
*/
colorScheme = input();
#colorSchemeChange = effect(() => {
const colorScheme = this.colorScheme();
colorScheme ? this.setTheme(colorScheme) : this.unsetTheme();
});
dark = input(false, { transform: booleanAttribute });
#darkChange = effect(() => {
const darkTheme = this.dark() || untracked(this.colorScheme) === 'dark';
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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: ThemeDirective, isStandalone: true, selector: "[cTheme]", inputs: { colorScheme: { classPropertyName: "colorScheme", publicName: "colorScheme", isSignal: true, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["cTheme"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ThemeDirective, decorators: [{
type: Directive,
args: [{
selector: '[cTheme]',
exportAs: 'cTheme'
}]
}] });
class SharedModule {
static forRoot() {
return {
ngModule: SharedModule,
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: SharedModule, imports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective], exports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SharedModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SharedModule, decorators: [{
type: NgModule,
args: [{
imports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective],
exports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective],
}]
}] });
class AccordionButtonDirective {
/**
* Toggles an accordion button collapsed state. Use in accordionHeaderTemplate. [docs]
* @type boolean
*/
collapsed = input(undefined);
/**
* Default type for cAccordionButton. [docs]
* @type string
* @default 'button'
*/
type = input('button');
hostClasses = computed(() => {
return {
'accordion-button': true,
collapsed: this.collapsed()
};
});
ariaExpanded = computed(() => !this.collapsed());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AccordionButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", 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: "20.0.3", ngImport: i0, type: AccordionButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[cAccordionButton]',
host: { '[class]': 'hostClasses()', '[attr.type]': 'type()', '[attr.aria-expanded]': 'ariaExpanded()' }
}]
}] });
class AccordionService {
items = [];
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.itemVisible.update((value) => !value);
this.closeOtherItems(item);
}
closeOtherItems(openItem) {
if (!this.alwaysOpen) {
this.items.forEach((item) => {
if (item !== openItem) {
item.itemVisible.set(false);
}
});
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AccordionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AccordionService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AccordionService, decorators: [{
type: Injectable
}] });
class AccordionComponent {
#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
*/
flush = input(false, { transform: booleanAttribute });
/**
* Make accordion items stay open when another item is opened
* @type boolean
*/
alwaysOpen = input(false, { transform: booleanAttribute });
#alwaysOpenEffect = effect(() => {
this.#accordionService.alwaysOpen = this.alwaysOpen();
});
hostClasses = computed(() => ({
accordion: true,
'accordion-flush': this.flush()
}));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.3", 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: "20.0.3", ngImport: i0, type: AccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'c-accordion', template: '<ng-content />', exportAs: 'cAccordionItem', providers: [AccordionService], 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 {
#animationBuilder = inject(AnimationBuilder);
#hostElement = inject(ElementRef);
#renderer = inject(Renderer2);
#player = undefined;
constructor() {
afterNextRender({
read: () => {
this.#initialized.set(true);
}
});
}
/**
* @ignore
*/
animateInput = input(true, { transform: booleanAttribute, alias: 'animate' });
animate = linkedSignal({
source: this.animateInput,
computation: (value) => value
});
/**
* Set horizontal collapsing to transition the width instead of height.
* @type boolean
* @default false
*/
horizontal = input(false, { transform: booleanAttribute });
/**
* Toggle the visibility of collapsible element.
* @type boolean
* @default false
*/
visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' });
visibleChange = output();
visible = linkedSignal({ source: this.visibleInput, computation: (value) => value });
#initialized = signal(false);
#visibleEffect = effect(() => {
const visible = this.visible();
if (this.#initialized()) {
this.createPlayer(visible);
}
});
/**
* Add `navbar` prop for grouping and hiding navbar contents by a parent breakpoint.
* @type boolean
* @default false
*/
navbar = input(false, { transform: booleanAttribute });
/**
* @ignore
*/
duration = input('350ms');
/**
* @ignore
*/
transition = input('ease');
/**
* Event emitted on visibility change. [docs]
* @type string
*/
collapseChange = output();
hostClasses = computed(() => {
return {
'navbar-collapse': this.navbar(),
'collapse-horizontal': this.horizontal()
};
});
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` : '');
if (this.#player) {
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');
}
if (this.#player) {
this.collapseChange?.emit(visible ? 'open' : 'collapsed');
this.visibleChange?.emit(visible);
}
this.destroyPlayer();
});
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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CollapseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", 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: "20.0.3", ngImport: i0, type: CollapseDirective, decorators: [{
type: Directive,
args: [{
selector: '[cCollapse]',
exportAs: 'cCollapse',
host: { '[class]': 'hostClasses()', '[style]': '{ display: "none" }' }
}]
}], ctorParameters: () => [] });
class CollapseModule {
static forRoot() {
return { ngModule: CollapseModule, providers: [] };
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: CollapseModule, imports: [CollapseDirective], exports: [CollapseDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CollapseModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CollapseModule, decorators: [{
type: NgModule,
args: [{
exports: [CollapseDirective],
imports: [CollapseDirective]
}]
}] });
let nextId$2 = 0;
class AccordionItemComponent {
#accordionService = inject(AccordionService);
/**
* Toggle an accordion item programmatically
* @return boolean
* @default false
*/
// eslint-disable-next-line @angular-eslint/no-input-rename
visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' });
itemVisible = signal(false);
#visibleInputChange = effect(() => {
this.visible = this.visibleInput();
});
set visible(value) {
this.itemVisible.set(value);
}
get visible() {
return this.itemVisible();
}
contentId = `accordion-item-${nextId$2++}`;
get itemContext() {
return { $implicit: this.itemVisible() };
}
contentTemplates = contentChildren(TemplateIdDirective, { descendants: true });
templates = computed(() => {
return this.contentTemplates().reduce((acc, child) => {
acc[child.id] = child.templateRef;
return acc;
}, {});
});
ngOnInit() {
this.#accordionService.addItem(this);
}
ngOnDestroy() {
this.#accordionService.removeItem(this);
}
toggleItem() {
this.#accordionService.toggleItem(this);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.3", type: AccordionItemComponent, isStandalone: true, selector: "c-accordion-item", inputs: { visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, 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]=\"itemVisible()\" [attr.aria-expanded]=\"itemVisible()\" [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]=\"!itemVisible()\" [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: "20.0.3", ngImport: i0, type: AccordionItemComponent, decorators: [{
type: Component,
args: [{ selector: 'c-accordion-item', exportAs: 'cAccordionItem', 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]=\"itemVisible()\" [attr.aria-expanded]=\"itemVisible()\" [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]=\"!itemVisible()\" [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"] }]
}] });
class AccordionModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: AccordionModule, imports: [AccordionButtonDirective,
AccordionComponent,
AccordionItemComponent], exports: [AccordionComponent,
AccordionButtonDirective,
AccordionItemComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AccordionModule, providers: [
AccordionService
] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AccordionModule, decorators: [{
type: NgModule,
args: [{
imports: [
AccordionButtonDirective,
AccordionComponent,
AccordionItemComponent
],
exports: [
AccordionComponent,
AccordionButtonDirective,
AccordionItemComponent
],
providers: [
AccordionService
]
}]
}] });
class AlertHeadingDirective {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AlertHeadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: AlertHeadingDirective, isStandalone: true, selector: "[cAlertHeading]", host: { classAttribute: "alert-heading" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AlertHeadingDirective, decorators: [{
type: Directive,
args: [{
selector: '[cAlertHeading]',
host: { class: 'alert-heading' }
}]
}] });
class AlertLinkDirective {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AlertLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: AlertLinkDirective, isStandalone: true, selector: "[cAlertLink]", host: { classAttribute: "alert-link" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AlertLinkDirective, decorators: [{
type: Directive,
args: [{
selector: '[cAlertLink]',
host: { class: 'alert-link' }
}]
}] });
class ButtonDirective {
static ngAcceptInputType_active;
static ngAcceptInputType_disabled;
/**
* Toggle the active state for the component. [docs]
* @type InputSignalWithTransform<boolean, unknown>
*/
active = input(false, { transform: booleanAttribute });
/**
* Sets the color context of the component to one of CoreUI’s themed colors. [docs]
* @type InputSignal<Colors>
*/
color = input('primary');
/**
* Toggle the disabled state for the component.
* @type InputSignalWithTransform<boolean, unknown>
*/
disabled = input(false, { transform: booleanAttribute });
/**
* Select the shape of the component.
* @type InputSignal<Shapes>
*/
shape = input();
/**
* Size the component small or large.
* @type InputSignal<'sm' | 'lg' | ''>
*/
size = input('');
/**
* The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
*/
tabindex = input(undefined, { transform: numberAttribute });
/**
* 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'
*/
type = input('button');
/**
* Set the button variant to an outlined button or a ghost button.
* @type InputSignal<'ghost' | 'outline' | undefined>
*/
variant = input();
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()
};
});
_disabled = computed(() => this.disabled());
ariaDisabled = computed(() => {
return this._disabled() ? true : null;
});
attrDisabled = computed(() => {
return this._disabled() ? '' : null;
});
tabIndex = computed(() => {
return this._disabled() ? '-1' : (this.tabindex() ?? null);
});
isActive = computed(() => {
return this.active() || null;
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", 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 }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", 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: "20.0.3", ngImport: i0, type: ButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[cButton]',
exportAs: 'cButton',
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 {
/**
* Change the default color to white.
* @type boolean
* @deprecated 5.0.0. Use `cButtonClose.dark` instead.
*/
white = input(false, { transform: booleanAttribute });
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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ButtonCloseDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", 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: "20.0.3", ngImport: i0, type: ButtonCloseDirective, decorators: [{
type: Directive,
args: [{
selector: '[cButtonClose]',
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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ButtonModule, imports: [ButtonDirective,
ButtonCloseDirective], exports: [ButtonDirective,
ButtonCloseDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ButtonModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ButtonModule, decorators: [{
type: NgModule,
args: [{
imports: [
ButtonDirective,
ButtonCloseDirective
],
exports: [
ButtonDirective,
ButtonCloseDirective
]
}]
}] });
class AlertComponent {
/**
* Sets the color context of the component to one of CoreUI’s themed colors.
* @return Colors
* @default 'primary'
*/
color = input('primary');
/**
* Default role for alert. [docs]
* @return string
* @default 'alert'
*/
role = input('alert');
/**
* Set the alert variant to a solid.
* @return string
*/
variant = input();
/**
* Optionally adds a close button to alert and allow it to self dismiss.
* @return boolean
* @default false
*/
dismissibleInput = input(false, { transform: booleanAttribute, alias: 'dismissible' });
#dismissible = linkedSignal({
source: this.dismissibleInput,
computation: (value) => {
return value;
}
});
set dismissible(value) {
this.#dismissible.set(value);
}
get dismissible() {
return this.#dismissible();
}
/**
* Adds animation for dismissible alert.
* @return boolean
*/
fade = input(false, { transform: booleanAttribute });
/**
* Toggle the visibility of alert component.
* @return boolean
*/
visibleInput = input(true, { transform: booleanAttribute, alias: 'visible' });
#visible = linkedSignal({
source: this.visibleInput,
computation: (value) => {
return value;
}
});
set visible(value) {
if (this.#visible() !== value) {
this.#visible.set(value);
this.visibleChange?.emit(value);
}
}
get visible() {
return this.#visible();
}
hide = signal(false);
/**
* Event triggered on the alert dismiss.
*/
visibleChange = output();
contentTemplates = contentChildren(TemplateIdDirective, { descendants: true });
templates = computed(() => {
return this.contentTemplates().reduce((acc, child) => {
acc[child.id] = child.templateRef;
return acc;
}, {});
});
get animateType() {
return this.visible ? 'show' : 'hide';
}
hostClasses = computed(() => {
const color = this.color();
const variant = this.variant();
return {
alert: true,
'alert-dismissible': this.dismissible,
fade: this.fade(),
show: !this.hide(),
[`alert-${color}`]: !!color && variant !== 'solid',
[`bg-${color}`]: !!color && variant === 'solid',
'text-white': !!color && variant === 'solid'
};
});
onAnimationStart($event) {
this.onAnimationEvent($event);
}
onAnimationDone($event) {
this.onAnimationEvent($event);
}
onAnimationEvent(event) {
this.hide.set(event.phaseName === 'start' && event.toState === 'show');
if (event.phaseName === 'done') {
this.hide.set(event.toState === 'hide' || event.toState === 'void');
if (event.toState === 'show') {
this.hide.set(false);
}
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: AlertComponent, isStandalone: true, selector: "c-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissibleInput: { classPropertyName: "dismissibleInput", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "fade", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@fadeInOut.start": "onAnimationStart($event)", "@fadeInOut.done": "onAnimationDone($event)" }, properties: { "@.disabled": "!fade()", "@fadeInOut": "animateType", "attr.role": "role()", "class": "hostClasses()" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: 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: "20.0.3", ngImport: i0, type: AlertComponent, decorators: [{
type: Component,
args: [{ selector: 'c-alert', exportAs: 'cAlert', 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')])
])
], host: {
'[@.disabled]': '!fade()',
'[@fadeInOut]': 'animateType',
'[attr.role]': 'role()',
'[class]': 'hostClasses()',
'(@fadeInOut.start)': 'onAnimationStart($event)',
'(@fadeInOut.done)': 'onAnimationDone($event)'
}, 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"] }]
}] });
class AlertModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: AlertModule, imports: [AlertComponent,
AlertHeadingDirective,
AlertLinkDirective], exports: [AlertComponent,
AlertHeadingDirective,
AlertLinkDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AlertModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AlertModule, decorators: [{
type: NgModule,
args: [{
imports: [
AlertComponent,
AlertHeadingDirective,
AlertLinkDirective
],
exports: [
AlertComponent,
AlertHeadingDirective,
AlertLinkDirective
]
}]
}] });
class AlignDirective {
/**
* Set vertical alignment of inline, inline-block, inline-table, and table cell elements
* @return Alignment
*/
align = input(undefined, { alias: 'cAlign' });
hostClasses = computed(() => {
const align = this.align();
return {
[`align-${align}`]: !!align
};
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AlignDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: AlignDirective, isStandalone: true, selector: "[cAlign]", inputs: { align: { classPropertyName: "align", publicName: "cAlign", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, exportAs: ["cAlign"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AlignDirective, decorators: [{
type: Directive,
args: [{
selector: '[cAlign]',
exportAs: 'cAlign',
host: { '[class]': 'hostClasses()' }
}]
}] });
class BgColorDirective {
/**
* Set the background of an element to any contextual class
*/
cBgColor = input('');
/**
* Add linear gradient as background image to the backgrounds.
* @return boolean
*/
gradient = input();
hostClasses = computed(() => {
const color = this.cBgColor();
return {
[`bg-${color}`]: !!color,
'bg-gradient': this.gradient()
};
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: BgColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: BgColorDirective, isStandalone: true, selector: "[cBgColor]", inputs: { cBgColor: { classPropertyName: "cBgColor", publicName: "cBgColor", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, exportAs: ["cBgColor"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: BgColorDirective, decorators: [{
type: Directive,
args: [{
selector: '[cBgColor]',
exportAs: 'cBgColor',
host: { '[class]': 'hostClasses()' }
}]
}] });
class BorderDirective {
/**
* Add or remove an element’s borders
* @return Border
*/
cBorder = input(true);
hostClasses = computed(() => {
const border = this.cBorder();
if (typeof border === 'boolean') {
return { border: border };
}
if (typeof border === 'number' || typeof border === 'string') {
return {
border: true,
[`border-${border}`]: true
};
}
if (typeof border === 'object') {
const borderObj = {
top: undefined,
end: undefined,
bottom: undefined,
start: undefined,
color: undefined,