Allow the usage of HTML tags in accordion-item description (#722)

Author: mpellerin42

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 2.67.1 (2024-08-26)
+
+### Improvements
+
+- **Accordion**:
+  - Allow the usage of HTML tags in `accordion-item` description 
+  - Add documentation on how to update the accordion item height
+
 # 2.67.0 (2024-08-08)
 
 ### Improvements

projects/demo/src/app/demo/pages/accordion-page/accordion-item-page.component.html

@@ -63,6 +63,20 @@ <h3>Directive</h3>
   </pa-demo-usage>
 
   <pa-demo-code>
+    <h4>Static accordion item:</h4>
     <pre><code>{{code}}</code></pre>
+
+    <h4>updateContentHeight method</h4>
+    <!-- prettier-ignore -->
+    <p>
+      When the content of an accordion item is dynamically loaded, or when it contains some blocks conditionally
+      visible, you may need the component to update its height. <code>accordion-item</code> component includes a public method <code>updateContentHeight</code> to do so.
+    </p>
+    <p>For example, given the following template:</p>
+    <pre><code>{{conditionalExampleTemplate}}</code></pre>
+
+    <!-- prettier-ignore -->
+    <p>We then reference the accordion item in the component, so we can call <code>updateContentHeight</code> whenever we need.</p>
+    <pre><code>{{updateHeightExample}}</code></pre>
   </pa-demo-code>
 </pa-demo-page>

projects/demo/src/app/demo/pages/accordion-page/accordion-item-page.component.ts

@@ -18,7 +18,32 @@ export class AccordionItemPageComponent {
   description="Some description also visible in the header"
   [(expanded)]="expanded">
   <pa-accordion-item-body>
-    Some content
+    Some static content
   </pa-accordion-item-body>
 </pa-accordion-item>`;
+
+  conditionalExampleTemplate = `<pa-accordion-item
+  #myAccordionItem
+  id="item1"
+  itemTitle="Standalone accordion item"
+  description="Some description also visible in the header"
+  [(expanded)]="expanded">
+  <pa-accordion-item-body>
+    <p>Some static content.</p>
+    @if (dynamicContent) {
+      <p>Some dynamic content.</p>
+    }
+  </pa-accordion-item-body>
+</pa-accordion-item>`;
+
+  updateHeightExample = `export class MyComponent {
+  @ViewChild('myAccordionItem', { read: AccordionItemComponent }) myAccordionItem?: AccordionItemComponent;
+  expanded = false;
+  dynamicContent = false;
+
+  toggleDynamicContent() {
+    this.dynamicContent = !this.dynamicContent;
+    this.myAccordionItem?.updateContentHeight();
+  }
+}`;
 }

projects/pastanaga-angular/package.json

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

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

@@ -10,7 +10,9 @@
   </pa-button>
   <div class="pa-accordion-item-title">
     <div class="title-m">{{ itemTitle }}</div>
-    <div class="body-s">{{ description }}</div>
+    <div
+      class="body-s"
+      [innerHTML]="description"></div>
   </div>
 </div>