fix(accordion-item): visible prop issue

Author: xidedix

projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.html

@@ -1,16 +1,16 @@
 <ng-container>
   <div class="accordion-header">
-    <ng-container *ngTemplateOutlet="templates?.accordionHeaderTemplate || defaultAccordionHeaderTemplate; context: itemContext"></ng-container>
+    <ng-container *ngTemplateOutlet="templates['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext"></ng-container>
   </div>
-  <div class="accordion-collapse" cCollapse [visible]="visible" [attr.aria-expanded]="open" [id]="contentId">
-    <ng-container *ngTemplateOutlet="templates?.accordionBodyTemplate || defaultAccordionBodyTemplate; context: itemContext"></ng-container>
+  <div class="accordion-collapse" cCollapse [visible]="visible" [attr.aria-expanded]="visible" [id]="contentId">
+    <ng-container *ngTemplateOutlet="templates['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext"></ng-container>
   </div>
 </ng-container>
 
 <ng-template #defaultAccordionHeaderTemplate>
-  <button cAccordionButton [collapsed]="!open" [attr.aria-controls]="contentId" (click)="toggleItem()">
+  <button cAccordionButton [collapsed]="!visible" [attr.aria-controls]="contentId" (click)="toggleItem()">
     <ng-container
-      *ngTemplateOutlet="templates?.accordionHeader || defaultAccordionHeaderContentTemplate; context: itemContext">
+      *ngTemplateOutlet="templates['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext">
     </ng-container>
   </button>
 </ng-template>
@@ -22,7 +22,7 @@
 <ng-template #defaultAccordionBodyTemplate>
   <div class="accordion-body">
     <ng-container
-      *ngTemplateOutlet="templates?.accordionBody || defaultAccordionBodyContentTemplate; context: itemContext">
+      *ngTemplateOutlet="templates['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext">
     </ng-container>
   </div>
 </ng-template>

projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.ts

@@ -10,6 +10,7 @@ import {
 
 import { AccordionService } from '../accordion.service';
 import { TemplateIdDirective } from '../../shared';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 let nextId = 0;
 
@@ -20,15 +21,30 @@ let nextId = 0;
   exportAs: 'cAccordionItem',
 })
 export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentInit {
+
+  static ngAcceptInputType_visible: BooleanInput;
+
   /**
    * Toggle an accordion item programmatically
    * @type boolean
    * @default false
    */
-  @Input() visible: boolean = false;
-  @Input() set open(value: boolean) {
+  @Input()
+  set visible(value: boolean){
+    this._visible = coerceBooleanProperty(value);
+  }
+  get visible() {
+    return this._visible;
+  }
+  private _visible: boolean = false;
+
+  @Input()
+  set open(value: boolean) {
     console.warn('c-accordion-item "open" prop is deprecated, use "visible"  prop instead.')
-    this.visible = value ?? false;
+    this.visible = value || this.visible;
+  }
+  get open() {
+    return this.visible;
   }
 
   @HostBinding('class')