From 6b9d2b354f8e1c406cb00c241840491716d9134a Mon Sep 17 00:00:00 2001
From: Johan Compagner <jcompagner@servoy.com>
Date: Wed, 14 Feb 2024 10:42:28 +0100
Subject: [PATCH] SVY-18890 upgrade to angular 17.x and also change the builder
 to the "application" (esbuild) builder

fix the default accordion to use the new directives instead of tags.

The one that doesn't work yet is the preventDefault() of the tabchange
and only change the tab on a server call that says ok.
(because the tab is now always switched by the ngbAccordionButton
directive)
see:
https://github.com/ng-bootstrap/ng-bootstrap/issues/4674
---
 .../src/lib/accordion/accordion.html          | 20 +++++++++----------
 .../src/lib/accordion/accordion.ts            | 13 ++++--------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.html b/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.html
index 025158c6e5..114354356d 100644
--- a/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.html
+++ b/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.html
@@ -1,14 +1,14 @@
-<ngb-accordion [activeIds]="getSelectedTabId()" (panelChange)="onTabChange($event)"  class="svy-accordion"  [id]="servoyApi.getMarkupId()" [sabloTabseq]="tabSeq" [sabloTabseqConfig]="{container: true, reservedGap: 50}">
-    <ngb-panel *ngFor="let tab of tabs;let i = index" [disabled]="tab.disabled || !tab.containsFormId" [id]="tab._id">
-      <ng-template ngbPanelHeader>
-            <button ngbPanelToggle class="accordion-button" (click)="tabClicked(tab, i , $event)">
+<div ngbAccordion [closeOthers]="true" #element class="svy-accordion"  [id]="servoyApi.getMarkupId()" [sabloTabseq]="tabSeq" [sabloTabseqConfig]="{container: true, reservedGap: 50}">
+    <div ngbAccordionItem *ngFor="let tab of tabs;let i = index" [disabled]="tab.disabled || !tab.containsFormId" [id]="tab._id" [collapsed]="getSelectedTabId() !== tab._id">
+      <div ngbAccordionHeader>
+            <button ngbAccordionButton class="accordion-button" (click)="tabClicked(tab, i , $event)">
                 <span [innerHTML]='tab?.text'></span>
             </button>
-      </ng-template>
-      <ng-template ngbPanelContent>
-      	<div #element style="position: relative;overflow: auto;top: 0px;bottom: 0px;left: 0px;right: 0px;" [style.height.px]="panelHeight">
+      </div>
+      <div ngbAccordionCollapse>
+      	<div  ngbAccordionBody style="position: relative;overflow: auto;top: 0px;bottom: 0px;left: 0px;right: 0px;" [style.height.px]="panelHeight">
       		<ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{name:getForm(tab)}"></ng-template>
       	</div>
-      </ng-template>
-    </ngb-panel>
-</ngb-accordion>
+      </div>
+    </div>
+</div>
diff --git a/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.ts b/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.ts
index c2887e3170..350778c499 100644
--- a/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.ts
+++ b/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.ts
@@ -2,7 +2,6 @@ import { Component, Renderer2, Input, Output, EventEmitter, ViewChild, SimpleCha
 import { WindowRefService } from '@servoy/public';
 
 import { BaseTabpanel,Tab } from '../tabpanel/basetabpanel';
-import { NgbPanelChangeEvent } from '@ng-bootstrap/ng-bootstrap';
 import { LoggerFactory } from '@servoy/public';
 
 @Component({
@@ -31,6 +30,7 @@ export class ServoyDefaultAccordion extends BaseTabpanel {
     }
 
     private updateContentHeight() {
+        
         let totalHeight : number;
         let wrapper = null;
         if (this.elementRef) {
@@ -45,11 +45,6 @@ export class ServoyDefaultAccordion extends BaseTabpanel {
         this.panelHeight = totalHeight;
     }
 
-    onTabChange( event: NgbPanelChangeEvent ) {
-        // do prevent it by default, so that hte server side can decide of the swich can happen.
-        event.preventDefault();
-    }
-
     selectTabAt( selectionIndex: number ) {
         if ( selectionIndex >= 0 && selectionIndex < this.tabs.length ) {
             let tabToSelect = this.tabs[selectionIndex];
@@ -59,13 +54,13 @@ export class ServoyDefaultAccordion extends BaseTabpanel {
             this.select( tabToSelect );
         }
     }
-    
+
     getSelectedTabId() : any{
-        let id = super.getSelectedTabId();
+        const id = super.getSelectedTabId();
         if (id == null) return [];
         return id;
     }
-    
+
     tabClicked(tab: Tab,tabIndexClicked: number, event){
         this.select( this.tabs[tabIndexClicked] );
     }