File
C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-core-lib/src/lib/components/tibco-cloud-widget-header/tibco-cloud-widget-header.component.ts
Description
Header bar for small widgets (like recent cases etc on home)
Example
<tc-tibco-cloud-widget-header></tc-tibco-cloud-widget-header>Metadata
| selector | tc-tibco-cloud-widget-header |
| styleUrls | ./tibco-cloud-widget-header.component.css |
| templateUrl | ./tibco-cloud-widget-header.component.html |
Index
Properties |
|
Methods |
Inputs |
Outputs |
Accessors |
Constructor
constructor()
|
Inputs
| headerText | |
Type : string
|
|
|
Text shown in menu bar |
|
| icon | |
Type : string
|
|
|
icon name (svg key - needs to be registered) |
|
| showHeader | |
Type : boolean
|
|
| toolbarButtons | |
Type : ToolbarButton[]
|
|
|
buttons to display in the menu bar |
|
Outputs
| toolbarButtonEvent | |
Type : EventEmitter<string>
|
|
|
~event toolbarButtonEvent : Button Clicked ~payload string : tells caller a button was clicked - outputs button Id |
|
Methods
| toolbarButtonClick | ||||
toolbarButtonClick(id)
|
||||
|
Parameters :
Returns :
void
|
Properties
| Public showHeader |
Type : boolean
|
Default value : true
|
|
Whether to show the header bar in the widget - eg. favorites on home page (contains icon etc) - if off icons still appear without bar |
Accessors
| ShowHeader | ||||||
setShowHeader(showHeader: boolean)
|
||||||
|
Parameters :
Returns :
void
|
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {ToolbarButton} from '../../models/tc-widget-header';
/**
* Header bar for small widgets (like recent cases etc on home)
*
* 
*
*@example <tc-tibco-cloud-widget-header></tc-tibco-cloud-widget-header>
*/
@Component({
selector: 'tc-tibco-cloud-widget-header',
templateUrl: './tibco-cloud-widget-header.component.html',
styleUrls: ['./tibco-cloud-widget-header.component.css']
})
export class TibcoCloudWidgetHeaderComponent {
/**
* Text shown in menu bar
*/
@Input() headerText: string;
/**
* icon name (svg key - needs to be registered)
*/
@Input() icon: string;
/**
* buttons to display in the menu bar
*/
@Input() toolbarButtons: ToolbarButton[];
/**
* Whether to show the header bar in the widget - eg. favorites on home page (contains icon etc) - if off icons still appear without bar
*/
public showHeader: boolean = true;
@Input('showHeader') set ShowHeader(showHeader: boolean) {
if (showHeader){
this.showHeader = showHeader;
}
}
/**
* ~event toolbarButtonEvent : Button Clicked
* ~payload string : tells caller a button was clicked - outputs button Id
*/
@Output() toolbarButtonEvent: EventEmitter<string> = new EventEmitter<string>();
constructor() {
}
toolbarButtonClick(id) {
this.toolbarButtonEvent.emit(id);
}
}
<div *ngIf="showHeader" class="tcs-widget-header" fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayoutAlign="start center">
<mat-icon class="tcs-widget-header-icon" svgIcon="{{icon}}"></mat-icon>
<div class="tcs-widget-header-text">{{headerText}}</div>
</div>
<div class="tcs-widget-toolbar" fxLayout="row" fxLayoutAlign="end center">
<div class="tcs-widget-toolbar-button-div" *ngFor="let toolbarButton of toolbarButtons">
<mat-icon *ngIf="toolbarButton.visible" (click)="toolbarButtonClick(toolbarButton.id)" class="tcs-widget-toolbar-button" [matTooltip]="toolbarButton.tooltip" matTooltipPosition="left" matTooltipShowDelay="1000" [svgIcon]="toolbarButton.icon"></mat-icon>
</div>
</div>
</div>
<div *ngIf="!showHeader" class="tcs-widget-toolbar" style="margin-top: 5px; margin-bottom: 5px" fxLayout="row" fxLayoutAlign="end center">
<div class="tcs-widget-toolbar-button-div" *ngFor="let toolbarButton of toolbarButtons">
<mat-icon *ngIf="toolbarButton.visible" (click)="toolbarButtonClick(toolbarButton.id)" class="tcs-widget-toolbar-button" [matTooltip]="toolbarButton.tooltip" matTooltipPosition="left" matTooltipShowDelay="1000" [svgIcon]="toolbarButton.icon"></mat-icon>
</div>
</div>
./tibco-cloud-widget-header.component.css
.tcs-widget-header-icon {
height: 24px;
width: 24px;
}
.tcs-widget-toolbar-button {
height: 20px;
width: 20px;
margin-left: 5px;
margin-right: 5px;
}
:host ::ng-deep .tcs-widget-toolbar-button:hover path.svg-content {
fill: #0081cb;
cursor: pointer;
}
:host ::ng-deep .tcs-widget-toolbar-button:hover g.svg-content {
fill: #0081cb;
cursor: pointer;
}
.tcs-widget-header {
height: 40px;
border-radius: 3px 3px 0px 0px;
box-shadow: 0 1px 2px 0 #dedede;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 5px;
}
.tcs-widget-header-text {
margin-left: 10px;
font-family: Source Sans Pro;
font-size: 18px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: 0.3px;
}
Legend
Html element
Component
Html element with directive