refactor(accordion): deprecate prop open in favour of visible

Author: xidedix

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

@@ -2,7 +2,7 @@
   <div class="accordion-header">
     <ng-container *ngTemplateOutlet="templates?.accordionHeaderTemplate || defaultAccordionHeaderTemplate; context: itemContext"></ng-container>
   </div>
-  <div class="accordion-collapse" cCollapse [visible]="open" [attr.aria-expanded]="open" [id]="contentId">
+  <div class="accordion-collapse" cCollapse [visible]="visible" [attr.aria-expanded]="open" [id]="contentId">
     <ng-container *ngTemplateOutlet="templates?.accordionBodyTemplate || defaultAccordionBodyTemplate; context: itemContext"></ng-container>
   </div>
 </ng-container>

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

@@ -23,8 +23,13 @@ export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentIn
   /**
    * Toggle an accordion item programmatically
    * @type boolean
+   * @default false
    */
-  @Input() open = false;
+  @Input() 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;
+  }
 
   @HostBinding('class')
   get hostClasses(): any {
@@ -33,7 +38,7 @@ export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentIn
     };
   }
   contentId = `accordion-item-${nextId++}`;
-  itemContext = { $implicit: this.open };
+  itemContext = { $implicit: this.visible };
   templates: any = {};
 
   @ContentChildren(TemplateIdDirective, {descendants: true}) contentTemplates!: QueryList<TemplateIdDirective>;

projects/coreui-angular/src/lib/accordion/accordion.service.ts

@@ -21,15 +21,15 @@ export class AccordionService {
   }
 
   toggelItem(item: AccordionItemComponent): void {
-    item.open = !item.open;
+    item.visible = !item.visible;
     this.closeOtherItems(item);
   }
 
   closeOtherItems(openItem: AccordionItemComponent): void {
     if (!this.alwaysOpen) {
       this.items.forEach((item: AccordionItemComponent) => {
         if (item !== openItem) {
-          item.open = false;
+          item.visible = false;
         }
       });
     }