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 button +
+ +

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. +

+
+

Inputs

description
-
Optional description to be displayed below the title in the item’s header.
+ +
Optional description to be displayed below the title in the item’s header. + The description is displayed with an innerHTML block, so it can contain simple HTML markup.
expanded
Boolean controlling the state of the item: expanded when true. @@ -57,15 +84,20 @@

Outputs

-

Directive

+

Directives

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.

Static accordion item:

{{code}}
+

Static accordion item with extra content in its description:

+
{{codeWithExtraContent}}
+

updateContentHeight method

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 = ` `; + codeWithExtraContent = ` + +

Some extra description content

+ Some button + + +

Some content

+
+`; + conditionalExampleTemplate = ` +
+ +
diff --git a/projects/pastanaga-angular/src/lib/accordion/accordion-item/accordion-item.component.ts b/projects/pastanaga-angular/src/lib/accordion/accordion-item/accordion-item.component.ts index 40bf8e15..9f4718cc 100644 --- a/projects/pastanaga-angular/src/lib/accordion/accordion-item/accordion-item.component.ts +++ b/projects/pastanaga-angular/src/lib/accordion/accordion-item/accordion-item.component.ts @@ -22,6 +22,12 @@ import { PaTranslateModule } from '../../translate'; }) export class AccordionBodyDirective {} +@Directive({ + selector: 'pa-accordion-item-extra-description', + standalone: true, +}) +export class AccordionExtraDescriptionDirective {} + @Component({ selector: 'pa-accordion-item', standalone: true,