My panel component includes a header with a title and buttons positioned in the right corner. Currently, the downward arrow (chevron) is used to toggle the expansion/minimization of the panel's contents.
When I attempt to make the header clickable to control the expanding/minimizing of the panels contents, it also affects the "+" symbol button's click event, causing the panel to expand/minimize which is not desired.
(click)="toggleShowHide()" shouldn't impact the "+" button.
How can I ensure that the "+" symbol remains unaffected by the clickable event on the whole header? Keep in mind that other buttons may be added beside the "+"" symbol in the future.
https://i.stack.imgur.com/S10nE.jpg
dashboard.html
<div style="width: 600px">
<custom-panel heading="TABLE" enableShowHide="true">
<span class="panel-tools" >
<div class="input-group">
<span title="New content" (click)="addContent()">
<i class="tools-plus fas fa-plus" aria-hidden="true"></i>
</span>
</div>
</span>
//content
</custom-panel>
</div>
panel.html
<div class="panel panel-custom">
<div class="panel-heading" *ngIf="heading" (click)="toggleShowHide()">
{{heading}}
<span *ngIf="enableShowHide" class="float-right panel-chevron" (click)="toggleShowHide()" style="cursor: pointer;">
<i [hidden]="!showPanel" title="Hide" class="tools-plus fas fa-chevron-down" aria-hidden="true"></i>
<i [hidden]="showPanel" title="Show" class="tools-plus fas fa-chevron-right" aria-hidden="true;"></i>
</span>
<span class="float-right">
<ng-content select=".panel-tools"></ng-content>
</span>
</div>
<div class="panel-body" [ngClass]="{'panel-scrolling': panelScrolling }" [hidden]="shouldHidePanel()">
<div class="mb-3">
</div>
<ng-content></ng-content>
</div>
</div>
panel.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'panel',
templateUrl: './panel.component.html',
styleUrls: ['./panel.component.scss']
})
export class PanelComponent {
@Input() heading: string;
@Input() size: string;
@Input() panelScrolling = false;
@Input() enableShowHide = false;
@Input() hideFirst = false;
showPanel = true;
toggleShowHide(): void {
this.showPanel = !this.showPanel;
}
shouldHidePanel(): boolean {
if (this.enableShowHide) {
if (this.hideFirst) {
this.showPanel = false;
this.hideFirst = false;
}
return !this.showPanel;
}
return false;
}
}
panel.scss
.panel-body {
padding: 12px;
}
.panel-custom {
margin: 10px 15px 10px 0;
border: none;
border-radius: 0;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
background-color: white;
.panel-heading {
color: black;
font-size: 16px;
border-bottom: 1px solid black;
padding: 8px 12px;
@media (max-width: 1500px) {
font-size: 14px;
}
}