@ascentgl/ads-ui 21.43.0 → 21.44.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -6893,6 +6893,9 @@ class AdsExpansionPanelComponent {
     constructor(registry, elementRef) {
         this.registry = registry;
         this.elementRef = elementRef;
+        this.panelHeader = null;
+        this.panelContent = null;
+        this.panelElement = null;
         /** The unique id of the chip */
         this.id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
         /** The header text */
@@ -6919,23 +6922,42 @@ class AdsExpansionPanelComponent {
         this.noBorder = input(false, ...(ngDevMode ? [{ debugName: "noBorder" }] : []));
         this.expandedChange = output();
         this.registry.register([adsIconChevronDown, adsIconChevronUp]);
+        effect(() => {
+            const headerPadding = this.headerPadding();
+            if (this.panelHeader) {
+                this.panelHeader.style.padding = headerPadding || '';
+            }
+        });
+        effect(() => {
+            const contentPadding = this.contentPadding();
+            if (this.panelContent) {
+                this.panelContent.style.padding = contentPadding || '';
+            }
+        });
+        effect(() => {
+            const noBorder = this.noBorder();
+            if (this.panelElement) {
+                this.panelElement.style.border = noBorder ? 'none' : '';
+            }
+        });
     }
     get expanded() {
         return this.panel.expanded;
     }
     ngAfterContentInit() {
         // Scope the query to this component instance instead of the entire document
-        const panelHeader = this.elementRef.nativeElement.querySelector('.mat-expansion-panel-header');
-        const contentPadding = this.elementRef.nativeElement.querySelector('.mat-expansion-panel-body');
-        const panelElement = this.elementRef.nativeElement.querySelector('.mat-expansion-panel');
-        if (panelHeader && !!this.headerPadding()) {
-            panelHeader.style.padding = this.headerPadding();
-        }
-        if (contentPadding && !!this.contentPadding()) {
-            contentPadding.style.padding = this.contentPadding();
-        }
-        if (panelElement && this.noBorder()) {
-            panelElement.style.border = 'none';
+        this.panelHeader = this.elementRef.nativeElement.querySelector('.mat-expansion-panel-header');
+        this.panelContent = this.elementRef.nativeElement.querySelector('.mat-expansion-panel-body');
+        this.panelElement = this.elementRef.nativeElement.querySelector('.mat-expansion-panel');
+        // Apply initial values
+        if (this.panelHeader && this.headerPadding()) {
+            this.panelHeader.style.padding = this.headerPadding();
+        }
+        if (this.panelContent && this.contentPadding()) {
+            this.panelContent.style.padding = this.contentPadding();
+        }
+        if (this.panelElement && this.noBorder()) {
+            this.panelElement.style.border = 'none';
         }
         this.panel.expandedChange.subscribe(value => this.expandedChange.emit(value));
     }