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
In HTML File
Legend
Html element with directive