Skip to content

Commit

Permalink
Merge pull request #12433 from primefaces/issue-12432
Browse files Browse the repository at this point in the history 
Issue 12432
  • Loading branch information
@cetincakiroglu
cetincakiroglu committed Jan 16, 2023
2 parents 8c019aa + 6e6c2c8 commit c5acb47
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 26 deletions.
9 changes: 9 additions & 0 deletions src/app/components/accordion/accordion.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,12 @@
.p-accordion .p-accordion-tab-active > .p-toggleable-content:not(.ng-animating) {
overflow: inherit;
}

.p-accordion-toggle-icon-end {
order: 1;
margin-left: auto;
}

.p-accordion-toggle-icon{
order: 0;
}
67 changes: 41 additions & 26 deletions src/app/components/accordion/accordion.ts
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,29 @@
import {
NgModule,
Component,
ElementRef,
AfterContentInit,
OnDestroy,
Input,
Output,
EventEmitter,
ContentChildren,
QueryList,
ChangeDetectorRef,
Inject,
forwardRef,
TemplateRef,
ViewRef,
ChangeDetectionStrategy,
ViewEncapsulation
} from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { CommonModule } from '@angular/common';
import { SharedModule, Header, PrimeTemplate, BlockableUI } from 'primeng/api';
import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Inject, Input, NgModule, OnDestroy, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';
import { BlockableUI, Header, PrimeTemplate, SharedModule } from 'primeng/api';
import { Subscription } from 'rxjs';

let idx: number = 0;

@Component({
selector: 'p-accordionTab',
template: `
<div class="p-accordion-tab" [ngClass]="{ 'p-accordion-tab-active': selected }">
<div class="p-accordion-header" [ngClass]="{ 'p-highlight': selected, 'p-disabled': disabled }">
<a role="tab" class="p-accordion-header-link" (click)="toggle($event)" (keydown)="onKeydown($event)" [attr.tabindex]="disabled ? null : 0" [attr.id]="id" [attr.aria-controls]="id + '-content'" [attr.aria-expanded]="selected">
<span class="p-accordion-toggle-icon" [ngClass]="selected ? accordion.collapseIcon : accordion.expandIcon"></span>
<div class="p-accordion-tab" [class.p-accordion-tab-active]="selected" [ngClass]="tabStyleClass" [ngStyle]="tabStyle">
<div class="p-accordion-header" [class.p-highlight]="selected" [class.p-disabled]="disabled">
<a
[ngClass]="headerStyleClass"
[style]="headerStyle"
role="tab"
class="p-accordion-header-link"
(click)="toggle($event)"
(keydown)="onKeydown($event)"
[attr.tabindex]="disabled ? null : 0"
[attr.id]="id"
[attr.aria-controls]="id + '-content'"
[attr.aria-expanded]="selected"
>
<span [class]="iconClass" [ngClass]="selected ? accordion.collapseIcon : accordion.expandIcon"></span>
<span class="p-accordion-header-text" *ngIf="!hasHeaderFacet">
{{ header }}
</span>
Expand All @@ -46,7 +39,7 @@ let idx: number = 0;
[attr.aria-hidden]="!selected"
[attr.aria-labelledby]="id"
>
<div class="p-accordion-content">
<div class="p-accordion-content" [ngClass]="contentStyleClass" [ngStyle]="contentStyle">
<ng-content></ng-content>
<ng-container *ngIf="contentTemplate && (cache ? loaded : selected)">
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
Expand Down Expand Up @@ -83,6 +76,18 @@ let idx: number = 0;
export class AccordionTab implements AfterContentInit, OnDestroy {
@Input() header: string;

@Input() headerStyle: any;

@Input() tabStyle: any;

@Input() contentStyle: any;

@Input() tabStyleClass: string;

@Input() headerStyleClass: string;

@Input() contentStyleClass: string;

@Input() disabled: boolean;

@Input() cache: boolean = true;
Expand All @@ -91,6 +96,8 @@ export class AccordionTab implements AfterContentInit, OnDestroy {

@Input() transitionOptions: string = '400ms cubic-bezier(0.86, 0, 0.07, 1)';

@Input() iconPos: string = 'start';

@ContentChildren(Header) headerFacet: QueryList<Header>;

@ContentChildren(PrimeTemplate) templates: QueryList<any>;
Expand All @@ -113,6 +120,14 @@ export class AccordionTab implements AfterContentInit, OnDestroy {
}
}

get iconClass() {
if (this.iconPos === 'end') {
return 'p-accordion-toggle-icon-end';
} else {
return 'p-accordion-toggle-icon';
}
}

contentTemplate: TemplateRef<any>;

headerTemplate: TemplateRef<any>;
Expand Down
42 changes: 42 additions & 0 deletions src/app/showcase/components/accordion/accordiondemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,12 +292,48 @@ <h5>Properties for Accordion</h5>
<td>null</td>
<td>Inline style of the component.</td>
</tr>
<tr>
<td>headerStyle</td>
<td>string</td>
<td>null</td>
<td>Inline style of the header section.</td>
</tr>
<tr>
<td>contentStyle</td>
<td>string</td>
<td>null</td>
<td>Inline style of the content section.</td>
</tr>
<tr>
<td>tabStyle</td>
<td>string</td>
<td>null</td>
<td>Inline style of the accordion tab.</td>
</tr>
<tr>
<td>styleClass</td>
<td>string</td>
<td>false</td>
<td>Style class of the component.</td>
</tr>
<tr>
<td>headerStyleClass</td>
<td>string</td>
<td>false</td>
<td>Style class of the header section.</td>
</tr>
<tr>
<td>tabStyleClass</td>
<td>string</td>
<td>false</td>
<td>Style class of the accordion tab.</td>
</tr>
<tr>
<td>contentStyleClass</td>
<td>string</td>
<td>false</td>
<td>Style class of the content section.</td>
</tr>
<tr>
<td>activeIndex</td>
<td>any</td>
Expand All @@ -316,6 +352,12 @@ <h5>Properties for Accordion</h5>
<td>pi pi-fw pi-chevron-down</td>
<td>Icon of an expanded tab.</td>
</tr>
<tr>
<td>iconPos</td>
<td>string</td>
<td>start</td>
<td>Position of the icon, valid values are "end", "start".</td>
</tr>
</tbody>
</table>
</div>
Expand Down

0 comments on commit c5acb47

Please sign in to comment.