File

src/lib/kiewit-card/kiewit-card.component.ts

Implements

OnChanges

Metadata

selector kiewit-card
styleUrls kiewit-card.component.scss
templateUrl ./kiewit-card.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

cardList

Type: KiewitCard[]

Outputs

kcsAddCardClick $event type: EventEmitter<any>
kcsCardClick $event type: EventEmitter<any>
kcsCardHeaderMenuIconClick $event type: EventEmitter<any>
kcsElipsisOptionClick $event type: EventEmitter<any>

Methods

getOptionsPopUpClass
getOptionsPopUpClass()
Returns : string
getOptionsPopUpTrianngleClass
getOptionsPopUpTrianngleClass()
Returns : string
innerCardMouseEnter
innerCardMouseEnter()
Returns : void
kiewitAddCardClicked
kiewitAddCardClicked()
Returns : void
kiewitCardClicked
kiewitCardClicked(card: any)
Parameters :
Name Type Optional Description
card any
Returns : void
kiewitCardElipsisClick
kiewitCardElipsisClick(event: any, cardidex: number)
Parameters :
Name Type Optional Description
event any
cardidex number
Returns : void
kiewitElipsisOptionClicked
kiewitElipsisOptionClicked(card: , menu: )
Parameters :
Name Type Optional Description
card
menu
Returns : void
kiewitHeaderMenuIconClicked
kiewitHeaderMenuIconClicked(card: , menu: )
Parameters :
Name Type Optional Description
card
menu
Returns : void
ngOnChanges
ngOnChanges()
Returns : void
showAllDivsWithDefaultStyles
showAllDivsWithDefaultStyles()
Returns : void
showDivWithHoverStyles
showDivWithHoverStyles(id: number, cardHoverStateBgColor: string)
Parameters :
Name Type Optional Description
id number
cardHoverStateBgColor string
Returns : void

Properties

cardTitle
cardTitle: ElementRef
Type : ElementRef
Decorators : ViewChild
Private displayElipsisOption
displayElipsisOption:
Private displayHeaderOptions
displayHeaderOptions:
Private elicpseClickedCardId
elicpseClickedCardId: number
Type : number
Private hoveredDivId
hoveredDivId: 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
Component
Html element with directive

results matching ""

    No results matching ""