@coreui/angular 5.3.1 → 5.3.3

package/README.md

@@ -25,19 +25,12 @@
 
 ## Status
 
-![angular][angular-badge]
 [![npm-coreui-angular-v5-ng19][npm-coreui-angular-badge-v5-ng19]][npm-coreui-angular]
 [![npm-coreui-angular-latest][npm-coreui-angular-badge-latest]][npm-coreui-angular]
 [![npm-coreui-angular-next][npm-coreui-angular-badge-next]][npm-coreui-angular]
 [![NPM downloads][npm-coreui-angular-download]][npm-coreui-angular]  
-[![Build](https://github.com/coreui/coreui-angular/actions/workflows/build-check.yml/badge.svg)](https://github.com/coreui/coreui-angular/actions/workflows/build-check.yml)
+![angular][angular-badge] [![Build](https://github.com/coreui/coreui-angular/actions/workflows/build-check.yml/badge.svg)](https://github.com/coreui/coreui-angular/actions/workflows/build-check.yml)
 
-[npm-coreui-angular-badge-v5-ng19]: https://img.shields.io/npm/v/@coreui/angular/v5-ng19?style=flat-square&color=brightgreen
-[npm-coreui-angular-badge-latest]: https://img.shields.io/npm/v/@coreui/angular/latest?style=flat-square&color=brightgreen
-[npm-coreui-angular-badge-next]: https://img.shields.io/npm/v/@coreui/angular/next?style=flat-square&color=red
-[npm-coreui-angular]: https://www.npmjs.com/package/@coreui/angular
-[npm-coreui-angular-download]: https://img.shields.io/npm/dm/@coreui/angular.svg?style=flat-square
-[angular-badge]: https://img.shields.io/badge/angular-^19.0.0-lightgrey.svg?style=flat-square&logo=angular
 
 ## Table of contents
 
@@ -71,7 +64,7 @@
 Before you begin, make sure your development environment includes `Node.js®` and `npm` package manager.
 
 ###### Node.js
-[**Angular 19**](https://angular.dev/overview) requires `Node.js` LTS version `^18.19` or newer. 
+[**Angular 19**](https://angular.dev/overview) requires `Node.js` LTS version `^18.19`, `^20.11` or `^22.0`. 
 
 - To check your version, run `node -v` in a terminal/console window.
 - To get `Node.js`, go to [nodejs.org](https://nodejs.org/).
@@ -223,3 +216,10 @@ Thanks to all the backers and sponsors! Support this project by [becoming a back
 ## Copyright and license
 
 Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-angular/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+
+[npm-coreui-angular-badge-v5-ng19]: https://img.shields.io/npm/v/@coreui/angular/v5-ng19?style=flat-square&color=brightgreen
+[npm-coreui-angular-badge-latest]: https://img.shields.io/npm/v/@coreui/angular/latest?style=flat-square&color=brightgreen
+[npm-coreui-angular-badge-next]: https://img.shields.io/npm/v/@coreui/angular/next?style=flat-square&color=red
+[npm-coreui-angular]: https://www.npmjs.com/package/@coreui/angular
+[npm-coreui-angular-download]: https://img.shields.io/npm/dm/@coreui/angular.svg?style=flat-square
+[angular-badge]: https://img.shields.io/badge/angular-^19.0.0-lightgrey.svg?style=flat-square&logo=angular

package/fesm2022/coreui-angular.mjs

@@ -1,6 +1,6 @@
 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, Injector, untracked, runInInjectionContext } from '@angular/core';
-import { NgTemplateOutlet, DOCUMENT, NgClass, NgOptimizedImage, AsyncPipe, isPlatformServer, isPlatformBrowser, NgStyle } from '@angular/common';
+import { NgTemplateOutlet, DOCUMENT, 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';
@@ -215,14 +215,14 @@ class AccordionService {
         }
     }
     toggleItem(item) {
-        item.visible = !item.visible;
+        item.itemVisible.update((value) => !value);
         this.closeOtherItems(item);
     }
     closeOtherItems(openItem) {
         if (!this.alwaysOpen) {
             this.items.forEach((item) => {
                 if (item !== openItem) {
-                    item.visible = false;
+                    item.itemVisible.set(false);
                 }
             });
         }
@@ -438,7 +438,14 @@ class AccordionItemComponent {
          * @type boolean
          * @default false
          */
-        this.visible = false;
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' });
+        this.itemVisible = signal(false);
+        this.visibleInputChange = effect(() => {
+            setTimeout(() => {
+                this.itemVisible.set(this.visibleInput());
+            });
+        });
         this.contentId = `accordion-item-${nextId$2++}`;
         this.contentTemplates = contentChildren(TemplateIdDirective, { descendants: true });
         this.templates = computed(() => {
@@ -449,15 +456,14 @@ class AccordionItemComponent {
         });
     }
     #accordionService;
-    set open(value) {
-        console.warn('c-accordion-item "open" prop is deprecated, use "visible"  prop instead.');
-        this.visible = value || this.visible;
+    set visible(value) {
+        this.itemVisible.set(value);
     }
-    get open() {
-        return this.visible;
+    get visible() {
+        return this.itemVisible();
     }
     get itemContext() {
-        return { $implicit: this.visible };
+        return { $implicit: this.itemVisible() };
     }
     ngOnInit() {
         this.#accordionService.addItem(this);
@@ -469,17 +475,12 @@ class AccordionItemComponent {
         this.#accordionService.toggleItem(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", 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: "19.0.1", 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]=\"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
-            }] } });
+            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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -1222,16 +1223,16 @@ class AvatarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: AvatarComponent, isStandalone: true, selector: "c-avatar", inputs: { color: { classPropertyName: "color", publicName: "color", 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 }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "avatar" }, hostDirectives: [{ directive: TextColorDirective, inputs: ["cTextColor", "textColor"] }], ngImport: i0, template: "<ng-content>\n  @if (src()) {\n    @defer (prefetch on idle) {\n      <img [ngSrc]=\"src() ?? ''\" fill=\"\" class=\"avatar-img\" alt=\"{{alt()}}\" />\n    } @placeholder () {\n      <svg aria-label=\"Avatar placeholder\"\n           focusable=\"false\"\n           preserveAspectRatio=\"xMidYMid slice\"\n           role=\"img\"\n           xmlns=\"http://www.w3.org/2000/svg\"\n           class=\"avatar-img\"\n           style=\"position: absolute; width: 100%; height: 100%; inset: 0;\">\n        <rect fill=\"#868e96\" height=\"100%\" width=\"100%\"></rect>\n      </svg>\n    }\n  }\n</ng-content>\n@if (!!status()) {\n  <span [ngClass]=\"statusClass()\"></span>\n}\n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], deferBlockDependencies: [() => [NgOptimizedImage]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: AvatarComponent, isStandalone: true, selector: "c-avatar", inputs: { color: { classPropertyName: "color", publicName: "color", 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 }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "avatar" }, hostDirectives: [{ directive: TextColorDirective, inputs: ["cTextColor", "textColor"] }], ngImport: i0, template: "<ng-content>\n  @if (src()) {\n    @defer (prefetch on idle) {\n      <img src=\"{{src() ?? ''}}\" class=\"avatar-img\" alt=\"{{alt()}}\" />\n    } @placeholder () {\n      <svg aria-label=\"Avatar placeholder\"\n           focusable=\"false\"\n           preserveAspectRatio=\"xMidYMid slice\"\n           role=\"img\"\n           xmlns=\"http://www.w3.org/2000/svg\"\n           class=\"avatar-img\"\n           style=\"position: absolute; width: 100%; height: 100%; inset: 0;\">\n        <rect fill=\"#868e96\" height=\"100%\" width=\"100%\"></rect>\n      </svg>\n    }\n  }\n</ng-content>\n@if (!!status()) {\n  <span [ngClass]=\"statusClass()\"></span>\n}\n\n", styles: [":host .avatar-img{object-fit:cover}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-avatar', imports: [NgClass, NgOptimizedImage], hostDirectives: [
+            args: [{ selector: 'c-avatar', imports: [NgClass], hostDirectives: [
                         {
                             directive: TextColorDirective,
                             inputs: ['cTextColor: textColor']
                         }
-                    ], host: { class: 'avatar', '[class]': 'hostClasses()' }, template: "<ng-content>\n  @if (src()) {\n    @defer (prefetch on idle) {\n      <img [ngSrc]=\"src() ?? ''\" fill=\"\" class=\"avatar-img\" alt=\"{{alt()}}\" />\n    } @placeholder () {\n      <svg aria-label=\"Avatar placeholder\"\n           focusable=\"false\"\n           preserveAspectRatio=\"xMidYMid slice\"\n           role=\"img\"\n           xmlns=\"http://www.w3.org/2000/svg\"\n           class=\"avatar-img\"\n           style=\"position: absolute; width: 100%; height: 100%; inset: 0;\">\n        <rect fill=\"#868e96\" height=\"100%\" width=\"100%\"></rect>\n      </svg>\n    }\n  }\n</ng-content>\n@if (!!status()) {\n  <span [ngClass]=\"statusClass()\"></span>\n}\n\n" }]
+                    ], host: { class: 'avatar', '[class]': 'hostClasses()' }, template: "<ng-content>\n  @if (src()) {\n    @defer (prefetch on idle) {\n      <img src=\"{{src() ?? ''}}\" class=\"avatar-img\" alt=\"{{alt()}}\" />\n    } @placeholder () {\n      <svg aria-label=\"Avatar placeholder\"\n           focusable=\"false\"\n           preserveAspectRatio=\"xMidYMid slice\"\n           role=\"img\"\n           xmlns=\"http://www.w3.org/2000/svg\"\n           class=\"avatar-img\"\n           style=\"position: absolute; width: 100%; height: 100%; inset: 0;\">\n        <rect fill=\"#868e96\" height=\"100%\" width=\"100%\"></rect>\n      </svg>\n    }\n  }\n</ng-content>\n@if (!!status()) {\n  <span [ngClass]=\"statusClass()\"></span>\n}\n\n", styles: [":host .avatar-img{object-fit:cover}\n"] }]
         }] });
 
 class AvatarModule {