File
Implements
Metadata
selector |
kiewit-card |
styleUrls |
kiewit-card.component.scss |
templateUrl |
./kiewit-card.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
Outputs
kcsAddCardClick
|
$event type: EventEmitter<any>
|
|
kcsCardClick
|
$event type: EventEmitter<any>
|
|
kcsCardHeaderMenuIconClick
|
$event type: EventEmitter<any>
|
|
kcsElipsisOptionClick
|
$event type: EventEmitter<any>
|
|
Methods
getOptionsPopUpClass
|
getOptionsPopUpClass()
|
|
|
getOptionsPopUpTrianngleClass
|
getOptionsPopUpTrianngleClass()
|
|
|
innerCardMouseEnter
|
innerCardMouseEnter()
|
|
|
kiewitAddCardClicked
|
kiewitAddCardClicked()
|
|
|
kiewitCardClicked
|
kiewitCardClicked(card: any)
|
|
Parameters :
Name |
Type |
Optional |
Description |
card |
any
|
|
|
|
kiewitCardElipsisClick
|
kiewitCardElipsisClick(event: any, cardidex: number)
|
|
Parameters :
Name |
Type |
Optional |
Description |
event |
any
|
|
|
cardidex |
number
|
|
|
|
kiewitElipsisOptionClicked
|
kiewitElipsisOptionClicked(card: , menu: )
|
|
Parameters :
Name |
Type |
Optional |
Description |
card |
|
|
|
menu |
|
|
|
|
kiewitHeaderMenuIconClicked
|
kiewitHeaderMenuIconClicked(card: , menu: )
|
|
Parameters :
Name |
Type |
Optional |
Description |
card |
|
|
|
menu |
|
|
|
|
ngOnChanges
|
ngOnChanges()
|
|
|
showAllDivsWithDefaultStyles
|
showAllDivsWithDefaultStyles()
|
|
|
showDivWithHoverStyles
|
showDivWithHoverStyles(id: number, cardHoverStateBgColor: string)
|
|
Parameters :
Name |
Type |
Optional |
Description |
id |
number
|
|
|
cardHoverStateBgColor |
string
|
|
|
|
Private displayElipsisOption
|
displayElipsisOption:
|
|
Private displayHeaderOptions
|
displayHeaderOptions:
|
|
Private elicpseClickedCardId
|
elicpseClickedCardId: number
|
Type : number
|
|
Private hoveredDivStyles
|
hoveredDivStyles:
|
|
Private isDisplayElipsisOption
|
isDisplayElipsisOption: boolean
|
Type : boolean
|
Default value : false
|
|
Private isShowOptionsLeft
|
isShowOptionsLeft: boolean
|
Type : boolean
|
Default value : false
|
|
Private start
|
start: any[]
|
Type : any[]
|
|
import { Component, Input, OnChanges, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
import { KiewitCard } from './kiewit-card';
@Component({
selector: 'kiewit-card',
templateUrl: './kiewit-card.component.html',
styleUrls: ['./kiewit-card.component.scss']
})
export class KiewitCardComponent implements OnChanges {
@Input() cardList: KiewitCard[];
@Output() kcsAddCardClick: EventEmitter<any> = new EventEmitter();
@Output() kcsCardClick: EventEmitter<any> = new EventEmitter();
@Output() kcsElipsisOptionClick: EventEmitter<any> = new EventEmitter();
@Output() kcsCardHeaderMenuIconClick: EventEmitter<any> = new EventEmitter();
@ViewChild('cardTitle') cardTitle: ElementRef;
private start: any[];
private hoveredDivId: number;
private elicpseClickedCardId: number;
private hoveredDivStyles = { 'background-color': '#F2F2F2' };
private displayHeaderOptions = { 'display': 'inline-block' };
private displayElipsisOption = { 'visibility': 'visible' };
private isDisplayElipsisOption: boolean = false;
private isShowOptionsLeft: boolean = false;
//for testing the input data
ngOnChanges(): void {
this.start = this.cardList;
}
showDivWithHoverStyles(id: number, cardHoverStateBgColor:string): void {
this.hoveredDivId = id;
if (cardHoverStateBgColor) {
this.hoveredDivStyles = { 'background-color': '' + cardHoverStateBgColor + '' };
} else {
this.hoveredDivStyles = { 'background-color': '#F2F2F2' };
}
}
showAllDivsWithDefaultStyles(): void {
this.hoveredDivId = null;
}
kiewitCardElipsisClick(event: any, cardidex: number): void {
let screenWidth = window.screen.availWidth;
if (screenWidth == 1366 && cardidex == 3) {
this.isShowOptionsLeft = true;
}
else if(screenWidth == 1600 && cardidex == 5) {
this.isShowOptionsLeft = true;
}else {
this.isShowOptionsLeft = false;
}
this.elicpseClickedCardId = cardidex;
this.isDisplayElipsisOption = !this.isDisplayElipsisOption;
event.stopPropagation();
}
innerCardMouseEnter() {
this.isDisplayElipsisOption = false;
}
getOptionsPopUpClass(): string {
if (this.isShowOptionsLeft) {
return 'kiewit-card-options-text-left';
} else {
return 'kiewit-card-options-text';
}
}
getOptionsPopUpTrianngleClass(): string {
if (this.isShowOptionsLeft) {
return 'spanoftriangle-left';
} else {
return 'spanoftriangle';
}
}
//events to export
kiewitAddCardClicked() {
this.kcsAddCardClick.emit();
};
kiewitCardClicked(card:any) {
this.kcsCardClick.emit(card);
}
kiewitElipsisOptionClicked(card, menu) {
this.kcsElipsisOptionClick.emit({ card: card, menu: menu });
}
kiewitHeaderMenuIconClicked(card,menu) {
this.kcsCardHeaderMenuIconClick.emit({ card: card, menu: menu });
event.stopPropagation();
}
}
<div class="container-fulid">
<div class="">
<div class="core-float-left kiewit-card-outer-div" *ngFor="let card of cardList; let id = index" id="{{card.CardId}}">
<div id="{{id}}" class="kiewit-card-inner-div"
[style.height]='card.CardHeight'
[style.width]='card.CardWidth'
[ngStyle]="hoveredDivId === id ? hoveredDivStyles:''"
(mouseover)="showDivWithHoverStyles(id,card.CardHoverStateBGColor)"
(mouseout)="showAllDivsWithDefaultStyles()"
(mouseenter)="innerCardMouseEnter()"
(click)="kiewitCardClicked(card)">
<div class="kiewit-card-header" [style.background-color]='card.HeaderBGColor'
[ngClass]="{'kiewit-card-header-official': card.TagIsOfficialPlan}"
[style.height]='card.HeaderMenuHeight'>
<!--Header menu options start-->
<span class="kiewit-icon-content kiewit-card-options-menu text-align-center"
[ngClass]="{'kiewit-icon-contentbg-official': card.TagIsOfficialPlan}"
[ngStyle]="hoveredDivId === id ? displayHeaderOptions:''"
(click)="kiewitCardElipsisClick($event,id)">
<i fa class="kiewit-icon fa fa-ellipsis-v"
title="more options"
[ngClass]="{'kiewit-icon-content-official': card.TagIsOfficialPlan}"
[style.color]='card.HeaderMenuIconColor'></i>
<!--Elipse popup options start -->
<span [ngClass]="getOptionsPopUpClass()"
*ngIf='card.OptionsMenuItems && card.OptionsMenuItems.length && isDisplayElipsisOption && elicpseClickedCardId === id'>
<span class="mouse-hover-shadow white-space-nowrap height30px display-block"
*ngFor="let optionItem of card.OptionsMenuItems | slice:0:10;"
[ngClass]="{'kiewit-disabled':optionItem.OptionsMenuItemIconDisabled}"
[attr.disabled]="optionItem.OptionsMenuItemIconDisabled"
title="{{optionItem.OptionsMenuItemIconToolTip}}"
(click)="kiewitElipsisOptionClicked(card,optionItem)">
<i class="kiewit-options-icon"
[ngClass]="optionItem.OptionsMenuItemIcon"
[style.visibility]="optionItem.OptionsMenuItemIconHidden?'hidden':'visible'">
</i>
<span class="kiewit-opition-text">
{{optionItem.OptionsMenuItemIconTitle}}
</span>
</span>
</span>
<span [ngClass]="getOptionsPopUpTrianngleClass()" *ngIf='card.OptionsMenuItems && card.OptionsMenuItems.length && isDisplayElipsisOption && elicpseClickedCardId === id'></span>
<!--Elipse popup options end-->
</span>
<span *ngFor="let menuItem of card.HeaderMenuItems | slice:0:5;"
[ngClass]="{'kiewit-icon-contentbg-official': card.TagIsOfficialPlan}"
class="kiewit-icon-content margin-right2px"
[style.visibility]="menuItem.HeaderMenuIconHidden?'hidden':'visible'"
[style.width]='card.HeaderMenuIconContentWidth'>
<i title="{{menuItem.HeaderMenuToolTip}}"
[attr.disabled]="menuItem.HeaderMenuIconDisabled"
[style.visibility]="menuItem.HeaderMenuIconHidden?'hidden':'visible'"
class="kiewit-icon {{menuItem.HeaderMenuIcon}}"
[style.color]='card.HeaderMenuIconColor'
[ngClass]="{'kiewit-icon-content-official': card.TagIsOfficialPlan,'kiewit-disabled':menuItem.HeaderMenuIconDisabled}"
[style.width]='card.HeaderMenuIconWidth'
(click)="kiewitHeaderMenuIconClicked(card,menuItem)">
</i>
</span>
<!--Header menu options end-->
</div>
<div class="kiewit-card-mainbody">
<span *ngIf='card.Title.length>=30' title={{card.Title}} [style.font-family]='card.TitleFont' [style.font-size]='card.TitleFontSize' class="kiewit-card-title">{{card.Title}}</span>
<span *ngIf='card.Title.length<30' [style.font-family]='card.TitleFont' [style.font-size]='card.TitleFontSize' class="kiewit-card-title">{{card.Title}}</span><br />
<span [style.font-family]='card.TitleDescription1Font' [style.font-size]='card.TitleDescription1FontSize' [ngClass]="card.kiewit-card-title-description">{{card.TitleDescription1}}</span><br />
<span [style.font-family]='card.TitleDescription2Font' [style.font-size]='card.TitleDescription2FontSize' [ngClass]="card.kiewit-card-title-description">{{card.TitleDescription2}}</span>
</div>
<div class="kiewit-card-tag" *ngIf='!card.TagIsOfficialPlan' [ngClass]='card.TagImage'>
</div>
<div class="kiewit-card-tag official-plan-image" *ngIf='card.TagIsOfficialPlan'>
</div>
<div class="kiewit-card-highlighted" *ngFor="let highlighter of card.Highlighters | slice:0:2;">
<div class="line-height20px" [style.font-family]='highlighter.HighlighterFont' [style.font-size]='highlighter.HighlighterFontSize'>{{highlighter.Highlighter}}<div class="kiewit-card-highlighted-sub" [style.font-family]='highlighter.HighlighterDescriptionFont' [style.font-size]='highlighter.HighlighterDescriptionFontSize'>{{highlighter.HighlighterDescription}}</div></div>
</div>
</div>
</div>
<div class="kiewit-add-card" title="Create New Plan" (click)="kiewitAddCardClicked()">
<div class="kiewit-create-new-card">
<div class="icon-add icon-add-css"></div>
</div>
</div>
</div>
</div>
Implementation
In Type Script File
import { Component } from '@angular/core';
import { KiewitCard, OptionsMenuItem, HeaderMenuItem, Highlighter } from '../../../lib/kiewit-card';
@Component({
selector: 'kiewit-card',
templateUrl: './kiewit-card.component.html',
styleUrls: ['./kiewit-card.component.scss']
})
export class KiewitCardComponent implements OnInit {
public kiewitCardData: any[] = [];
public cardsData: any[] = [];
ngOnInit() {
this.getCardsData();
}
// bining cards data thorugh data base
public getCardsData() {
return this.planService.getcardsData()
.subscribe((data) => this.setCardsData(data, this));
}
setCardsData(data, obj) {
obj.kiewitCardData = [];
obj.cardsData = data;
let index = 0;
if (obj.cardData.length > 0) {
for (var i = 0; i < obj.cardData.length; i++) {
obj.kiewitCardData.push({
CardId: obj.cardData[i].PlanID,
HeaderMenuItems: obj.CardHeaderMenu(obj.cardData[i]),
Title: obj.cardData[i].PlanVersionName,
TitleDescription1: "Last Saved " + obj.datePipe.transform(obj.cardData[i].ModifiedDate ? obj.cardData[i].ModifiedDate : obj.cardData[i].CreatedDate, 'MM-dd-yyyy'),
TitleDescription2: "by " + (obj.cardData[i].ModifiedBy ? obj.cardData[i].ModifiedBy : obj.cardData[i].CreatedBy),
TagIsOfficialPlan: obj.cardData[i].IsOfficialPlan,
Highlighters: obj.CardHighlighters(obj.cardData[i]),
//OptionsMenuItems: obj.CardElipsisOptions(obj.cardData[i]),
CardHoverStateBGColor: "rgb(242, 242, 242)"
});
index++;
}
}
else {
obj.kiewitCardData = [];
}
}
public CardHeaderMenu(data) {
var kiewitCardHeaderMenu = [];
kiewitCardHeaderMenu.push(
{
"HeaderMenuIconName": "Delete",
"HeaderMenuIcon": "icon-edit",
"HeaderMenuToolTip": "Edit Plan Name/Delete Plan",
"HeaderMenuIconDisabled": data.IsOfficialPlan ? true : false,
},
{
"HeaderMenuIconName": data.IsOfficialPlan ? "RemoveOfficial" : "MarkOfficial",
"HeaderMenuIcon": data.IsOfficialPlan ? "official icon-official" : "unOfficial icon-unOfficial",
"HeaderMenuToolTip": data.IsOfficialPlan ? "Remove from Official Plan" : "Mark as Official Plan"
},
{
"HeaderMenuIconName": "copyPlan",
"HeaderMenuIcon": "fa fa-files-o",
"HeaderMenuToolTip": "Copy Plan"
}
);
return kiewitCardHeaderMenu;
}
public CardElipsisOptions(data) {
var kiewitCardElipsisOptions = [];
kiewitCardElipsisOptions.push(
{
"OptionsMenuItemIcon": "icon-unpublish",
"OptionsMenuItemIconHidden": false,
"OptionsMenuItemIconDisabled": false,
"OptionsMenuItemIconTitle": "Unpublish"
},
{
"OptionsMenuItemIcon": data.IsOfficialPlan ? "icon-remove" : "icon-pass",
"OptionsMenuItemIconHidden": false,
"OptionsMenuItemIconDisabled": false,
"OptionsMenuItemIconTitle": data.IsOfficialPlan ? "Remove from Official Plan" : "Mark as Official Plan"
},
);
return kiewitCardElipsisOptions;
}
public CardHighlighters(data) {
var kiewitCardHighlighters = [];
kiewitCardHighlighters.push({
"Highlighter": "5555m",
"HighlighterDescription": "Net Gain"
}, {
"Highlighter": "5555m",
"HighlighterDescription": "Revenue"
});
return kiewitCardHighlighters;
}
AddCardClicked() {
alert('kiewitAddCardClicked');
}
CardClicked(event: any) {
alert('CardClicked');
console.log(event);
}
CardElipsisOptionClick(item: any) {
alert('CardElipsisOptionClicked' + item);
}
CardHeaderMenuIconClicked(iconName: string) {
alert('CardHeaderMenuIconClicked' + iconName);
}
}
In HTML File
<kiewit-card [cardList]="kiewitCardData" (kcsAddCardClick)="AddCardClicked()" (kcsCardClick)="CardClicked($event)" (kcsElipsisOptionClick)="CardElipsisOptionClick($event)" (kcsCardHeaderMenuIconClick)="CardHeaderMenuIconClicked($event)"></kiewit-card>
Legend
Html element with directive