Expander improvements

- Fix expander style to allow having a card expander inside a "normal" expander.
- Fix `expanded` option to work on card expander (allowing to have the expander open by default also for card expander)

Author: mpellerin42

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 2.64.8 (2024-02-20)
+
+### Improvements
+
+- **Expander**: 
+  - Fix expander style to allow having a card expander inside a "normal" expander.
+  - Fix `expanded` option to work on card expander (allowing to have the expander open by default also for card expander)
+
 # 2.64.7 (2024-02-15)
 
 ### Improvements

projects/demo/src/app/demo/pages/expand-page/expander-page.component.html

@@ -156,7 +156,13 @@ <h3>Inputs</h3>
       <dd>
         Card option allows to change the expander look and feel by displaying toggle button on the right and any
         <code>pa-expander-header-side-block</code>
-        on the left. When this option is set, the expander is collapsed by default.
+        on the left. When this option is set, the expander is collapsed by default
+        <small>
+          This behavior can be overridden by using the
+          <code>expanded</code>
+          property.
+        </small>
+        .
       </dd>
 
       <dt>disabled</dt>

projects/pastanaga-angular/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@guillotinaweb/pastanaga-angular",
     "description": "Provides Pastanaga UI elements as Angular components",
-    "version": "2.64.7",
+    "version": "2.64.8",
     "license": "MIT",
     "keywords": [
         "angular",

projects/pastanaga-angular/src/lib/expander/expander.component.ts

@@ -64,7 +64,7 @@ export class ExpanderComponent implements AfterViewInit, OnChanges, OnDestroy {
         this.collapse();
       }
     }
-    if (changes['card']?.currentValue) {
+    if (changes['card']?.currentValue && !changes['expanded']?.currentValue) {
       this.expanded = false;
       this.contentHidden = true;
     }

projects/pastanaga-angular/src/styles/components/_expander.scss

@@ -65,7 +65,7 @@
       }
     }
 
-    .pa-expander-header {
+    & > .pa-expander-header {
       background: $background-color-expanded-expander-header;
       box-shadow: $box-shadow-expanded-expander-header;
       transition: