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:
ng-bootstrap/ng-bootstrap#4674

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>

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] );
     }