diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b009e02..8dc5affd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +# 2.67.4 (2024-08-30) + +### Improvements + +- **Accordion**: Support extra description content in accordion items. + # 2.67.3 (2024-08-29) ### Bug fix diff --git a/projects/demo/src/app/demo/pages/accordion-page/accordion-item-page.component.html b/projects/demo/src/app/demo/pages/accordion-page/accordion-item-page.component.html index e4a225d9..b4e53b99 100644 --- a/projects/demo/src/app/demo/pages/accordion-page/accordion-item-page.component.html +++ b/projects/demo/src/app/demo/pages/accordion-page/accordion-item-page.component.html @@ -28,13 +28,40 @@
+
+ Any extra content can be added within
+ pa-accordion-item-extra-description
+ directive.
+
Some content
+Some content that can be long or short.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. +
+innerHTML
block, so it can contain simple HTML markup.The item content must be wrapped in pa-accordion-item-body
tag.
Whenever you need to display some components in the accordion item description, you can use the pa-accordion-item-extra-description
directive.
{{code}}
+ {{codeWithExtraContent}}
+
diff --git a/projects/demo/src/app/demo/pages/accordion-page/accordion-item-page.component.ts b/projects/demo/src/app/demo/pages/accordion-page/accordion-item-page.component.ts
index 4124ca90..77b17406 100644
--- a/projects/demo/src/app/demo/pages/accordion-page/accordion-item-page.component.ts
+++ b/projects/demo/src/app/demo/pages/accordion-page/accordion-item-page.component.ts
@@ -1,16 +1,29 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { PaDemoModule } from '../../demo.module';
-import { AccordionBodyDirective, AccordionItemComponent } from '@guillotinaweb/pastanaga-angular';
+import {
+ AccordionBodyDirective,
+ AccordionExtraDescriptionDirective,
+ AccordionItemComponent,
+ PaButtonModule,
+} from '@guillotinaweb/pastanaga-angular';
import { RouterLink } from '@angular/router';
@Component({
standalone: true,
- imports: [PaDemoModule, AccordionItemComponent, AccordionBodyDirective, RouterLink],
+ imports: [
+ PaDemoModule,
+ AccordionItemComponent,
+ AccordionBodyDirective,
+ RouterLink,
+ AccordionExtraDescriptionDirective,
+ PaButtonModule,
+ ],
templateUrl: './accordion-item-page.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AccordionItemPageComponent {
expanded = false;
+ expanded2 = false;
code = ` Some extra description content Some content