C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-core-lib/src/lib/components/tibco-cloud-splash-screen/tibco-cloud-splash-screen.component.ts
Splash Screen
<tc-tibco-cloud-splash-screen></tc-tibco-cloud-splash-screen>| selector | tc-tibco-cloud-splash-screen |
| styleUrls | tibco-cloud-splash-screen.component.css |
| templateUrl | tibco-cloud-splash-screen.component.html |
Properties |
|
Inputs |
Outputs |
Accessors |
constructor()
|
|
Shows Application Overview like Configured |
| actionButtons | |
Type : ActionButtonConfig[]
|
|
|
Buttons configuration with text and route to go. |
|
| backGroundImage | |
Type : string
|
|
|
Splash Configured Background Image URL to a SVG, PNG or Jpeg |
|
| highlights | |
Type : LandingPageItemConfig[]
|
|
|
Bullet Point Item Configuration with Icon's and Text |
|
| subTitle | |
Type : string
|
|
|
Splash Sub-Title |
|
| title | |
Type : string
|
|
|
Splash Screen main Title |
|
| topMargin | |
Type : string
|
|
| getStartedEvent | |
Type : EventEmitter<RouteAction>
|
|
|
~event getStartedEvent : Get Started Clicked ~payload string : emits that user clicked get started button on cloud splash screen |
|
| getStartedClick |
Default value : () => {...}
|
|
Get Started Click to open the Application |
| Public topMargin |
Type : string
|
Default value : '0px'
|
|
Space above the highlight panel. Default is 0px |
| TopMargin | ||||||
setTopMargin(topMargin: string)
|
||||||
|
Parameters :
Returns :
void
|
import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { TcCoreCommonFunctions } from '../../common/tc-core-common-functions';
import { Location } from '@angular/common';
import { LandingPageItemConfig, ActionButtonConfig } from '../../models/tc-general-landing-page-config';
import { RouteAction } from '../../models/tc-routing-actions';
/**
* Splash Screen
*
*@example <tc-tibco-cloud-splash-screen></tc-tibco-cloud-splash-screen>
*/
@Component({
selector: 'tc-tibco-cloud-splash-screen',
templateUrl: 'tibco-cloud-splash-screen.component.html',
styleUrls: ['tibco-cloud-splash-screen.component.css'],
})
export class TibcoCloudSplashScreenComponent implements OnInit {
/**
* Splash Screen main Title
*/
@Input() title: string;
/**
* Splash Sub-Title
*/
@Input() subTitle: string;
/**
* Splash Configured Background Image URL to a SVG, PNG or Jpeg
*/
@Input() backGroundImage: string;
/**
* Space above the highlight panel. Default is 0px
*/
public topMargin: string = '0px';
@Input('topMargin') set TopMargin(topMargin: string) {
if (topMargin){
this.topMargin = topMargin;
}
}
/**
* Bullet Point Item Configuration with Icon's and Text
*/
@Input() highlights: LandingPageItemConfig[];
/**
* Buttons configuration with text and route to go.
*/
@Input() actionButtons: ActionButtonConfig[];
/**
* ~event getStartedEvent : Get Started Clicked
* ~payload string : emits that user clicked get started button on cloud splash screen
*/
@Output() getStartedEvent: EventEmitter<RouteAction> = new EventEmitter<RouteAction>();
/**
* Shows Application Overview like Configured
*/
constructor() {
}
/**
* @ignore
*/
ngOnInit(): void {
console.log(this);
}
/**
* Get Started Click to open the Application
*/
getStartedClick = (route: string): void => {
this.getStartedEvent.emit(new RouteAction('buttonClicked', route));
}
}
<div class="tcs-splash-content" fxFill fxLayout="column" fxFill>
<div fxFill [ngClass]="backGroundImage ? 'custom-splash-bg' : 'default-splash-bg'" [ngStyle]="backGroundImage ? {'background-repeat': 'round', 'background-color': '#FFF', 'background-image': 'url(' + backGroundImage + ')'} : ''">
<div class="text-center" id="initscreen">
<div class="splash-heading-pane">
<div ngClass.lt-md="splash-welcome-small" ngClass.gt-sm="splash-welcome-large" class="splash-welcome">
{{title}}</div>
<div ngClass.lt-md="splash-welcome-message-small" ngClass.gt-sm="splash-welcome-message-large"
class="splash-welcome-message">
<span>{{subTitle}}</span>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="start center" [ngStyle]="{'margin-top': topMargin}">
<div class="splash-modal" ngClass.lt-md="splash-modal-small" ngClass.gt-sm="splash-modal-large">
<table class="splash-highlightstable">
<tbody fxLayout="column" fxLayoutGap="30px">
<tr *ngFor="let highlight of highlights" fxLayoutAlign="start center" fxLayoutGap="30px"
fxLayout="row">
<td>
<div class="splash-oval" ngStyle.gt-sm="height: 86px; width: 86px;" fxLayout="row"
fxLayoutAlign="center center">
<mat-icon ngStyle.gt-sm="height: 50px; width: 50px;" class="splash-svg"
ngStyle.lt-md="padding: 2px;" [svgIcon]="highlight.iconURL"></mat-icon>
</div>
</td>
<td fxLayout="column" fxLayoutAlign="space-around start">
<span class="splash-highlight-item-title">{{highlight.title}}</span>
<span class="splash-highlight-item-content">{{highlight.content}}</span>
</td>
</tr>
</tbody>
</table>
<div fxLayoutGap="10px">
<button *ngFor="let actionButton of actionButtons" (click)="getStartedClick(actionButton.route)" cdkFocusInitial class="splash-get-started-button" mat-button>{{actionButton.text}}</button>
</div>
</div>
</div>
</div>
</div>
</div>
tibco-cloud-splash-screen.component.css
/*
@font-face {
font-family: Source Sans Pro;
src: url(/assets/fonts/tibco_fonts_Source_Sans_Pro_Source Sans Pro-Regular.ttf);
}
@font-face {
font-family: Source Sans ProBold;
src: url(/assets/fonts/tibco_fonts_Source_Sans_Pro_Source Sans Pro-Bold.ttf);
}*/
.splash-welcome {
font-family: Source Sans Pro;
font-weight: 300;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.3px;
text-align: center;
color: #ffffff;
text-shadow: 0 2px 8px rgba(6, 46, 121, 0.5);
}
.splash-welcome-large {
font-family: Source Sans Pro;
font-size: 48px;
margin-top: 88px;
}
.splash-welcome-small {
font-family: Source Sans Pro;
font-size: 22px;
margin-top: 5px;
}
.splash-welcome-message {
font-family: Source Sans Pro;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
text-align: center;
color: #ffffff;
text-shadow: 0 2px 8px rgba(6, 46, 121, 0.5);
}
.splash-welcome-message-large {
font-size: 20px;
margin-top: 19px;
margin-bottom: 32px;
}
.splash-welcome-message-small {
font-size: 15px;
margin-top: 19px;
margin-bottom: 32px;
}
.splash-heading-pane {
margin-left: 10px;
margin-right: 10px;
}
.splash-modal {
margin: auto;
max-width: 676px;
}
.splash-modal-large {
border-radius: 10px;
box-shadow: 10px 10px 20px 0 rgba(33, 33, 33, 0.04);
background-color: #ffffff;
}
.splash-modal-small {
box-shadow: 10px 10px 20px 0 rgba(33, 33, 33, 0.04);
background-color: #ffffff;
width: 100%;
}
.splash-oval {
/* border: solid 3px #349bed; */
/* background-color: #349bed; */
border: solid 3px #c8d4e8;
border-radius: 43px;
align-content: center;
background-position: center;
background-repeat: no-repeat;
}
.splash-oval mat-icon {
}
.tcs-splash-content {
overflow: auto;
}
.splash-svg {
}
.splash-modal-small .splash-highlightstable {
border-spacing: 25px;
}
.splash-highlightstable {
border: 0;
padding-top: 3px;
padding-bottom: 0px;
border-spacing: 45px;
text-align: left;
border-collapse: separate;
}
.splash-get-started-button {
width: 117px;
height: 40px;
border-radius: 3px;
background-color: #349bed;
border: solid 1px #349bed;
margin-bottom: 58px;
font-family: Source Sans Pro;
font-size: 16px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.3px;
text-align: center;
color: #ffffff;
}
.splash-get-started-button:hover{
border: solid 1px #74bee4;
background-color: #74bee4;
}
.splash-highlight-item-title {
font-family: Source Sans Pro;
font-size: 16px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.25;
letter-spacing: 0.1px;
color: #062e79;
}
.splash-modal-small .splash-highlight-item-content {
font-size: 14px;
}
.splash-highlight-item-content {
font-family: Source Sans Pro;
font-size: 16px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.25;
letter-spacing: 0.1px;
color: #062e79;
padding-top: 12px;
}
.default-splash-bg {
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTQ0MHB4IiBoZWlnaHQ9IjU3M3B4IiB2aWV3Qm94PSIwIDAgMTQ0MCA1NzMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogc2tldGNodG9vbCA1MS4xICg1NzUwMSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+OTJDNzNCQTEtMjg0MS00NzJBLTg2MzctMTA5Nzc3QTkwOUNFPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBza2V0Y2h0b29sLjwvZGVzYz4KICAgIDxkZWZzPgogICAgICAgIDxyZWN0IGlkPSJwYXRoLTEiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNDQwIiBoZWlnaHQ9IjU3MyI+PC9yZWN0PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iNTAlIiB5MT0iMTEuMTA2MTI4NiUiIHgyPSI1MCUiIHkyPSIxMTEuNjMwMzIlIiBpZD0ibGluZWFyR3JhZGllbnQtMyI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiM0OUIzRDMiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0MyRkZFQSIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjUwJSIgeTE9IjYuNDQ3NzkxNDIlIiB4Mj0iNTAlIiB5Mj0iMTExLjE4NDk5OCUiIGlkPSJsaW5lYXJHcmFkaWVudC00Ij4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNzhGNyIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjREVGRkI4IiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPGcgaWQ9IldlbGNvbWUtc2NyZWVucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImxhbmRpbmctcGFnZS1iZyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIC00MC4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9ImJhY2tncm91bmQtaW1nIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgNDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSJ3aGl0ZSI+CiAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgIDwvbWFzaz4KICAgICAgICAgICAgICAgIDxnIGlkPSJNYXNrIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgbWFzaz0idXJsKCNtYXNrLTIpIj4KICAgICAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzguMDAwMDAwLCAtMTcyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjkuMDQ0MDgzMSwzOTguNzY4Nzg0IEMzNC41NzY4OTQxLDQ3NC42Njk0NjkgNzQuNTE0NzMwOCw1MzIuNTMwNzM1IDE0NC40NzM2NzYsNTY2LjA2OTY0NSBDMjAzLjgxODI2MSw1OTQuNTIxMDc4IDI3MS43MjkxNzcsNjAyLjQ3ODY3NCAzMzYuODA4MDczLDYwMy4yMzA0OTMgQzQ0OC45OTg0MTEsNjA0LjUyNTAxIDU1OC44MDEyMTYsNTcwLjk4MTAyIDY3MS4xNDczMzYsNTc2LjM3NDEzNSBDNzc0LjU4MzM4Nyw1ODEuMzM5Njk2IDg2Ny4xNTYxNjMsNjQzLjI5NjE3MyA5NTYuNjM0NDYsNjg5LjEyMzI1NyBDMTA2OC4yODIxLDc0Ni4zMDM4MjIgMTIwMS4xMjYyOSw3NTguNjg5MzYxIDEzMjIuNzQ5OTIsNzMwLjQ1MzgyMiBDMTQyMC4xNDc3Miw3MDcuODQxNjg0IDE1MjguODA2NzEsNjU3LjM5MzYyMyAxNTcyLjQ3NDAxLDU2MS4zMjQyMTIgQzE2MDIuMTA2NTEsNDk2LjEzMjcxMiAxNTk1LjMzMzM2LDAgMTU5NS4zMzMzNiwwIEwwLDAuMzU4OTc2NTcgQzAsMC4zNTg5NzY1NyAyOS4wMjYzMDM2LDM5OC41MTQ3OTEgMjkuMDQ0MDgzMSwzOTguNzY4Nzg0IiBpZD0iYm90dG9tIiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTMpIiBvcGFjaXR5PSIwLjY5OTk5OTk4OCI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNTguMTUxMTg5Miw2NjYuMDE5NTg4IEM1OC41MTUwMDgxLDY3MS4wODM1NTQgNzMuOTQyODk3Nyw2ODAuMzM1NTM2IDc3LjM1ODIwNyw2ODIuNzY4MzcgQzk3LjI5MjA0MzMsNjk2Ljk3MTIzOCAxMjAuMzAzNTkxLDcwNi43NDYwMDQgMTQzLjY2MDExMSw3MTMuNzE5MjAxIEMyNDcuNTU0MTgxLDc0NC43MzQ3NjUgMzYzLjM1NDMwOCw3MjUuMTU0OTE1IDQ2NS40NDgxMyw2OTcuMTY3ODk3IEM1MzkuMzM3Nzg5LDY3Ni45MTIwMzIgNjA5LjYzNTk2Niw2NDQuODc4NzU4IDY4My44ODIwNyw2MjYuMDUyNzY3IEM3NTkuNzIxOTMxLDYwNi44MjExNjYgODQ5LjkwNDc3OSw2MDMuMTYzMzExIDkyMy4yOTcwNTYsNjMzLjA5ODA3MSBDOTcwLjcwMTY4LDY1Mi40MzM3MzcgMTAxNi42ODIxNyw2NzQuODUwMzkxIDEwNjQuNzc1MSw2OTIuNTgxNjQ4IEMxMjAxLjE0MDgzLDc0Mi44NTY2NzMgMTM1NC4zNDIyLDc2My40ODM3MzIgMTQ4OC40ODI0LDY5NC44MTYxODUgQzE0OTkuODE1NjksNjg5LjAxMzkyOCAxNTEwLjg3Mjg0LDY4Mi42NzU3NzYgMTUyMS42MjEwNiw2NzUuODUyNTMyIEwxNTMzLjkxMjI0LDExNy44MzI5NDQgTDE4LDEwOCBDMTgsMTA4IDU4LjE1MDM2OTcsNjY2LjAxMzAzMyA1OC4xNTExODkyLDY2Ni4wMTk1ODgiIGlkPSJ0b3AiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtNCkiIG9wYWNpdHk9IjAuNjk5OTk5OTg4Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJncmFkaWVudC1jaXJjbGVzIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0Mi4wMDAwMDAsIDEyNS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNi1Db3B5LTIiIGZpbGw9IiNGRkZGRkYiIG9wYWNpdHk9IjAuMDQ5OTk5OTk3IiBjeD0iNDU2LjUiIGN5PSI0NTYuNSIgcj0iNDU2LjUiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC02LUNvcHkiIGZpbGw9IiNGRkZGRkYiIG9wYWNpdHk9IjAuMDU5OTk5OTk4NyIgY3g9IjQ1NiIgY3k9IjQ1NyIgcj0iMzEwIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNiIgZmlsbD0iI0ZGRkZGRiIgb3BhY2l0eT0iMC4wNzAwMDAwMDAzIiBjeD0iNDU2IiBjeT0iNDU3IiByPSIxNTciPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJvdmVybGF5LWNpcmNsZXMiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTE4LjAwMDAwMCwgNDk2LjAwMDAwMCkiIG9wYWNpdHk9IjAuMDc2MzYyIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNyIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjE0IiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6IG92ZXJsYXk7IiBjeD0iMTM0MiIgY3k9IjEzMiIgcj0iNTEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC03LUNvcHktMiIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjEwIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6IG92ZXJsYXk7IiBjeD0iMjI0LjUiIGN5PSIxMDAuNSIgcj0iMjIuNSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTctQ29weS0zIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMTQiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTogb3ZlcmxheTsiIGN4PSI1OCIgY3k9IjEzMSIgcj0iNTEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC03LUNvcHkiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIxMCIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBvdmVybGF5OyIgY3g9IjExOTAuNSIgY3k9IjIyLjUiIHI9IjE3LjUiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=") no-repeat;
background-size: 100%;
}
.custom-splash-bg {
}