import { Component } from '@angular/core';
import { SelectItem } from 'primeng';
import { TooltipModule } from 'primeng/primeng';
import { Component, OnInit } from '@angular/core';
import { TreeNode, MenuItem } from 'primeng/primeng';
import { BreadcrumbService } from './services/breadcrumb';
declare var $: any
@Component({
selector: 'my-app',
templateUrl: 'app/app.template.html'
})
export class AppComponent implements OnInit{
display: boolean = false;
showDialog() {
this.display = true;
}
showDialog1() {
this.display = true;
}
customer = {"id": 1, "name": "Smith", "firstname": "John"};
customers = [
{"id": 1, "name": "Smith", "firstname": "John"},
{"id": 2, "name": "Doe", "firstname": "John"},
{"id": 3, "name": "Smith", "firstname": "Jane"}
];
customerResults: Array = [];
searchCustomers(event): void {
this.customerResults = this.customers.filter(c => c.name.startsWith(event.query));
}
products: SelectItem[] = [
{ label: 'Product 1', value: '1'},
{ label: 'Product 2', value: '2'},
{ label: 'Product 3', value: '3'}
];
customProducts: SelectItem[] = [
{ label: 'Product 01', value: { id: '1', name: 'Product 01' } },
{ label: 'Product 02', value: { id: '2', name: 'Product 02' } },
{ label: 'Product 03', value: { id: '3', name: 'PProduc 03' } }
];
items: MenuItem[];
ngOnInit() {
this.items = [];
this.items.push({label:'Page Secion 1'});
this.items.push({label:'Page Section 2'});
this.items.push({label:'Current Page'});
}
constructor() {
}
}
// export class BreadcrumbDemo implements OnInit {
// items: MenuItem[];
// ngOnInit() {
// this.items = [];
// this.items.push({label:'Categories'});
// this.items.push({label:'Sports'});
// this.items.push({label:'Football'});
// this.items.push({label:'Countries'});
// this.items.push({label:'Spain'});
// this.items.push({label:'F.C. Barcelona'});
// this.items.push({label:'Squad'});
// this.items.push({label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'});
// }
// }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
// Import PrimeNG modules
import {PaginatorModule} from 'primeng';
import { DropdownModule } from 'primeng';
import {DialogModule} from 'primeng';
import { TooltipModule } from 'primeng';
import {InputSwitchModule} from 'primeng';
import {DataTableModule,SharedModule, TooltipModule} from 'primeng';
import {MultiSelectModule} from 'primeng';
import {MessagesModule} from 'primeng';
import {AccordionModule} from 'primeng';
import {BreadcrumbModule} from 'primeng';
import {MenubarModule,MenuItem} from 'primeng';
import {MegaMenuModule} from 'primeng';
import {MenuModule} from 'primeng/primeng';
import {MenubarModule} from 'primeng/primeng';
import {CalendarModule} from 'primeng';
import {FileUploadModule} from 'primeng';
declare var $: any
//
@NgModule({
imports: [ BrowserModule,
BrowserAnimationsModule,
DropdownModule,
TooltipModule,
MessagesModule,
PaginatorModule,
InputSwitchModule,
MultiSelectModule,
AccordionModule,
FileUploadModule,
CalendarModule,
DialogModule,
BreadcrumbModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { FileUploadDemo } from './app.module';
declare var $: any
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
platform.bootstrapModule(FileUploadDemo);
body {
padding: 2em;
font-family: "Open Sans" !important;
background-color: #eff2f6 !important;
}
/**{*/
/* font-family: "Open Sans";*/
/*}*/
.baner-title {
background-color: #205081;
color: #FFFFFF;
font-size: 24px;
font-weight: 400;
text-align: left;
padding: 20px 10px;
margin: 0;
}
/*3 Column Grid System As per LF UI Standards reference class name is: lf-md-4 */
.col-md-4.lf-md-4 {
/*lf-md-4 class : for 3 grid layout*/
position: relative !important;
min-height: 1px !important;
padding-right: 25px !important;
padding-left: 25px !important;
}
/*Typography As per LF UI 8.10[1] Standards*/
.lf-heading1 {
font-family: 'OpenSansRegular';
font-weight: 300;
line-height: 26px;
font-size: 21px;
}
.lf-heading2 {
font-family: 'OpenSansRegular';
font-weight: 400;
line-height: 24px;
font-size: 18px;
}
.lf-heading3 {
font-family: 'OpenSansRegular';
font-weight: 700;
line-height: 18px;
font-size: 14px;
}
.lf-heading4_1 {
font-family: 'OpenSansRegular';
font-weight: 700;
line-height: 18px;
font-size: 12px;
}
.lf-heading4_2 {
font-family: 'OpenSansRegular';
font-weight: 400;
line-height: 18px;
font-size: 12px;
}
.lf-categoryTitle {
font-family: 'OpenSansRegular';
font-weight: 300;
line-height: 26px;
font-size: 21px;
}
.lf-Paragraph2 {
font-family: 'OpenSansRegular';
font-weight: 400 !important;
line-height: 18px;
font-size: 13px;
}
.lf-italic-body {
font-family: ‘OpenSansRegular’;
font-style: Italic;
font-weight: 400;
font-size: 13px;
line-height: 18px;
}
/* Color Codes As per LF UI 8.10[1] Standards */
.lf-primary-text {
color: #205081;
}
.lf-success-text {
color: #68b537;
}
.lf-warning-text {
color: #ffb837;
}
.lf-primary-bg {
background-color: #205081;
}
.lf-primarylight-text {
color: #4e7498;
}
.lf-primarylight-bg {
background-color: #4e7498;
}
.lf-primary-lightest-text {
color: #c4d0db;
}
.lf-primary-lightest-bg {
background-color: #c4d0db;
}
.lf-base-text {
color: #212121;
}
.lf-base-bg {
background-color: #212121;
}
.lf-disabled-text {
color: #4c5a68;
}
.lf-disabled-bg {
color: #4c5a68;
}
.lf-greylight-text {
color: #989898;
}
.lf-greylight-bg {
background-color: #989898;
}
.lf-whitecolor {
color: #FFFFFF;
}
.lf-whitecolor-bg {
background-color: #FFFFFF;
}
/* Color codes for Backgrounds */
.lf-primary-lightest-bg {
background-color: #c4d0db;
}
.lf-bg-coolblue-light {
background-color: #dee5ec;
}
.lf-bg-coolblue-lighter {
background-color: #eff2f6;
}
.lf-bg-gray-lightest {
background-color: #f0f0f0;
}
/* End of Color codes for Backgrounds */
/*Error (or) Warning color codes */
.lf-errMessage {
padding-top: 5px;
/* Error messgae to disply bellow the textbox*/
font-size: 12px;
}
.lf-redcolor-text {
color: #ee1c25;
}
.lf-redcolor-bg {
background-color: #ee1c25;
}
.lf-redcolor-border {
border: 1px solid #ee1c25;
}
.lf-lightred-color-text {
color: #ff4343;
}
.lf-lightred-color-bg {
background-color: #ff4343;
}
.lf-lightred-color-border {
border: 1px solid #ff4343;
}
.lf-darkredcolor-text {
color: #ad1023;
}
.lf-darkredcolor-bg {
background-color: #ad1023;
}
.lf-darkredcolor-border {
border: 1px solid #ad1023;
}
.lf-darkestredcolor-text {
color: #ad1023;
}
.lf-darkestredcolor-bg {
background-color: #ad1023;
}
.lf-darkestredcolor-border {
border: 1px solid #ad1023;
}
.lf-lightest-red-text {
color: #f9d2d9;
}
.lf-lightest-red-bg {
background-color: #f9d2d9;
}
.lf-lightest-red-border {
border: 1px solid #f9d2d9;
}
/*End of Error (or) Warning color codes*/
/*Hyperlink As per LF UI standards v8.10[1]*/
a.lf-hyperlink-text {
color: #205081;
/* Hyperlink font color for different states*/
text-decoration: underline;
}
a.lf-hyperlink-text:visited {
color: #6757aa;
text-decoration: underline;
}
a.lf-hyperlink-text:focus {
color: #1877b7;
text-decoration: underline;
}
/*Content Tabs Styling As per LF UI Standards*/
/*.lf-content-tabView .nav-tabs {*/
/* height: 31px;*/
/* border-bottom: 1px solid #c4d0db!important;*/
/*}*/
/*.lf-content-tabView .nav-tabs>li>a {*/
/* margin-right: -1px;*/
/* border-radius: 0 0 0 0;*/
/* height: 31px !important;*/
/* border: 1px solid #ccc;*/
/* border-bottom: 0px;*/
/*}*/
/*.lf-content-tabView .nav-tabs>li,*/
/*.lf-content-tabView .nav-tabs>li:active,*/
/*.lf-content-tabView .nav-tabs>li:hover,*/
/*.lf-content-tabView .nav-tabs>li>a:visited {*/
/* border-bottom: 1px solid #c4d0db!important;*/
/*}*/
/*.lf-content-tabView .nav-tabs>li,*/
/*.lf-content-tabView .nav-tabs>li:active,*/
/*.lf-content-tabView .nav-tabs>li:hover {*/
/* margin-top: 1px;*/
/*}*/
/*.lf-content-tabView .nav-tabs>li {*/
/* margin-right: -1px;*/
/* margin-left: 1em;*/
/* border-right: 1px solid #c4d0db;*/
/* border-radius: 0 0 0 0;*/
/* height: 30px!important;*/
/* background: #f0f0f0;*/
/*}*/
/*.lf-content-tabView .nav-tabs>li>a:focus,*/
/*.lf-content-tabView .nav-tabs>li>a:visited {*/
/* margin-right: -1px;*/
/* border-top: 1px solid #c4d0db;*/
/* border-right: 1px solid #c4d0db;*/
/* border-radius: 0 0 0 0;*/
/* height: 30px!important;*/
/* border: 1px solid #c4d0db;*/
/* border-bottom: 0;*/
/*}*/
/*.lf-content-tabView .nav-tabs>li>a:focus,*/
/*.lf-content-tabView .nav-tabs>li>a:visited {*/
/* margin-right: -1px;*/
/* border-top: 1px solid #c4d0db;*/
/* border-right: 1px solid #c4d0db;*/
/* border-radius: 0 0 0 0;*/
/* height: 30px!important;*/
/* border: 1px solid #c4d0db;*/
/* border-bottom: 0;*/
/*}*/
/*.lf-content-tabView .nav-tabs li a {*/
/* color: #ccc !important;*/
/*}*/
/*.lf-content-tabView .nav-tabs li.active a {*/
/* color: #000!important;*/
/* font-size: 13px;*/
/* font-weight: inherit;*/
/* border-bottom: 0!important;*/
/* background-color: #FFFFFF !important;*/
/*}*/
/*.lf-content-tabView .nav-tabs>li:active {*/
/* margin-right: -1px;*/
/* margin-left: 1em;*/
/* border-right: 1px solid #c4d0db;*/
/* border-radius: 0 0 0 0;*/
/* height: 30px!important;*/
/* color: #000;*/
/*}*/
/*.lf-content-tabView .nav-tabs>li>a,*/
/*.nav-tabs>li>a:hover {*/
/* -webkit-text-decoration: none;*/
/* -moz-text-decoration: none;*/
/* -ms-text-decoration: none;*/
/* -o-text-decoration: none;*/
/* text-decoration: none;*/
/* color: #ccc !important;*/
/* font-size: 13px;*/
/* font-weight: 800;*/
/*}*/
/*.lf-content-tabView .nav>li>a {*/
/* padding: 5px 20px!important;*/
/*}*/
/*.lf-content-tabView .nav-tabs>li {*/
/* margin-right: -1px;*/
/* margin-left: 1em;*/
/* border-right: 1px solid #c4d0db;*/
/* border-radius: 0 0 0 0;*/
/* height: 30px!important;*/
/* background: #f0f0f0;*/
/*}*/
/*.lf-content-tabView .nav-tabs>li>a {*/
/* margin-right: -1px;*/
/* border-radius: 0 0 0 0;*/
/* height: 30px!important;*/
/* border: 1px solid #ccc;*/
/* border-bottom: 0!important;*/
/*}*/
/*#myTabContent {*/
/* padding: 0px;*/
/* margin: 0px;*/
/* border: 0px;*/
/*}*/
.tabView .nav-tabs>li>a {
margin-right: -1px;
border-radius: 0 0 0 0;
height: 30px !important;
border: 1px solid #ccc;
border-bottom: 0px !important;
}
.tabView .nav-tabs>li,
.tabView .nav-tabs>li:hover,
.tabView .nav-tabs>li:active {
margin-top: 1px;
}
.tabView .nav-tabs {
height: 31px;
border-bottom: 1px solid #c4d0db !important;
}
.tabView .nav-tabs>li,
.tabView .nav-tabs>li:active,
.tabView .nav-tabs>li>a:visited,
.tabView .nav-tabs>li:hover {
border-bottom: none;
}
.tabView .nav-tabs>li>a:hover {
margin-right: -1px;
/*border-top: 1px solid #c4d0db;
border-right: 1px solid #c4d0db;
border-left: 1px solid #c4d0db;*/
border-bottom: 1px solid #c4d0db !important;
border-radius: 0 0 0 0;
height: 30px !important;
border: 1px solid #c4d0db;
}
.tabView .nav-tabs>li>a:focus,
.tabView .nav-tabs>li>a:visited {
margin-right: -1px;
border-top: 1px solid #c4d0db;
border-right: 1px solid #c4d0db;
border-radius: 0 0 0 0;
height: 30px !important;
border: 1px solid #c4d0db;
border-bottom: 0px;
}
.tabView .nav-tabs>li {
margin-right: -1px;
margin-left: 1em;
/*border-top: 1px solid #c4d0db;*/
border-right: 1px solid #c4d0db;
border-radius: 0 0 0 0;
height: 30px !important;
background: #f0f0f0;
}
/*.tabView .nav-tabs>li:active,.tabView .nav-tabs>li>a:visited {*/
/* margin-right: -1px;*/
/* margin-left: 1em;*/
/*border-top: 1px solid #c4d0db;*/
/* border-right: 1px solid #c4d0db;*/
/* border-radius: 0 0 0 0;*/
/* height: 30px !important;*/
/* color: #212121;*/
/*}*/
.tabView .nav-tabs li.active a {
color: #212121 !important;
font-size: 13px;
font-weight: inherit;
border-bottom: 0px !important;
}
tabView .nav-tabs > li:active,
.tabView .nav-tabs > li > a:visited {
margin-right: -1px;
margin-left: 1em;
color: rgb(0, 0, 0);
height: 30px;
border-right: 1px solid rgb(196, 208, 219);
border-radius: 0px;
}
.tabView .nav-tabs>li,
.tabView .nav-tabs>li:active,
.tabView .nav-tabs>li>a:visited,
.tabView .nav-tabs>li:hover {
border-bottom: 1px solid #c4d0db !important;
}
.tabView .nav-tabs > li > a:focus,
.tabView .nav-tabs > li > a:visited {}
.tabView .nav-tabs > li > a:hover {
margin-right: -1px;
height: 30px;
border-radius: 0px;
border-width: 1px 1px 1px;
border-style: solid solid solid;
border-color: rgb(196, 208, 219) rgb(196, 208, 219) rgb(196, 208, 219);
border-image: initial;
}
/*.tabView .nav-tabs li a*/
/*{*/
/* color:#ccc !important;*/
/*}*/
.tabView .nav-tabs > li:active {
margin-right: -1px;
margin-left: 1em;
color: rgb(0, 0, 0);
height: 30px;
border-right: 1px solid rgb(196, 208, 219);
border-radius: 0px;
}
.tabView .nav-tabs>li>a,
.nav-tabs>li>a:hover {
-webkit-text-decoration: none;
-moz-text-decoration: none;
-ms-text-decoration: none;
-o-text-decoration: none;
text-decoration: none;
color: #212121;
font-size: 13px;
font-weight: 800;
}
.tabView .nav>li>a {
padding: 5px 20px !important;
}
.tab-content {
border: 1px solid #d2dce6;
border-top: none;
padding: 20px 20px 20px 20px
}
/**********************************************/
/*Drop own for List As pr LF Standards*/
#lf-detaildrodown .ui-dropdown-label.ui-inputtext.ui-corner-all {
color: #212121;
font-weight: 700;
font-size: 13px;
line-height: 18px;
border-radius: 0px !important;
}
/*p-dropdown#lf-detaildrodown ui-dropdown.ui-widget.ui-state-default.ui-corner-all.ui-helper-clearfix {*/
/* border: none;*/
/* border: 1px solid #c4d0db !important;*/
/* border-radius: 0px !important;*/
/* min-width: 200px !important;*/
/*}*/
p-dropdown#lf-detaildrodown .ui-dropdown.ui-widget.ui-state-default.ui-corner-all.ui-helper-clearfix {
border: none;
border: 1px solid #c4d0db !important;
border-radius: 0px !important;
min-width: 200px !important;
}
#lf-detaildrodown .ui-dropdown-trigger.ui-state-default.ui-corner-right {
border-left: none;
color: #205081;
}
#lf-detaildrodown .ui-dropdown-panel.ui-dropdown-list:hover {
background-color: #eff2f6 !important;
color: #212121 !important;
}
#lf-detaildrodown .ui-dropdown-item {
border-radius: 0px !important;
font-weight: 400;
font-size: 13px;
color: #212121;
line-height: 18px;
padding: 5px;
}
#lf-detaildrodown .ui-inputtext.ui-state-focus,
.ui-inputtext:focus {
box-shadow: none !important;
}
#lf-detaildrodown .ui-dropdown-panel:not(.ui-state-highlight).ui-dropdown-item:hover {
color: #212121 !important;
background: #eff2f6 !important;
}
#lf-detaildrodown .ui-dropdown-items.ui-dropdown-list {
font-weight: 400;
font-size: 13px;
color: #212121;
line-height: 18px;
padding: 0px;
}
.ui-state-active,
.ui-state-highlight {
background-color: #dee5ec !important;
}
#lf-detaildrodown .ui-widget-header.ui-state-highlight,
.ui-widget-content.ui-state-highlight,
.ui-state-highlight.ui-widget-header.ui-state-highlight,
.ui-widget-content.ui-state-highlight,
.ui-state-highlight {
/*background-color: #F00 !important;*/
/*background-color: #dee5ec !important;*/
color: #205081 !important;
background: transparent !important;
font-weight: 700 !important;
}
#lf-detaildrodown .ui-dropdown-panel .ui-dropdown-item:not(.ui-state-highlight):hover {
/*background-color: #ef2f6;*/
background: #eff2f6 !important;
}
/* LF Standard Drop-down for Grid*/
.lf-dropdown .ui-dropdown-label.ui-inputtext.ui-corner-all {
color: #212121;
font-weight: 700;
font-size: 13px;
line-height: 18px;
}
.lf-dropdown label.ui-dropdown-label.ui-inputtext.ui-corner-all {
/*border: 1px solid rgba(0, 0, 0, 0.15);*/
}
.lf-dropdown .ui-dropdown.ui-widget.ui-state-default.ui-corner-all.ui-helper-clearfix {
border: none;
border: 1px solid #c4d0db;
border-radius: 0px;
width: 100% !important;
}
.lf-dropdown .ui-dropdown-panel .ui-dropdown-item:not(.ui-state-highlight):hover {
background: #eff2f6 !important;
}
.lf-dropdown .ui-dropdown-trigger.ui-state-default.ui-corner-right {
border-left: none;
color: #205081;
}
.lf-dropdown .ui-dropdown-panel.ui-dropdown-list:hover {
background-color: #eff2f6 !important;
color: #212121 !important;
}
.lf-dropdown .ui-dropdown-item {
border-radius: 0px !important;
}
.lf-dropdown .ui-inputtext.ui-state-focus,
.ui-inputtext:focus {
box-shadow: none !important;
}
.lf-dropdown .ui-dropdown-panel:not(.ui-state-highlight).ui-dropdown-item:hover {
color: #212121 !important;
background: #eff2f6 !important;
}
.lf-dropdown .ui-dropdown-items.ui-dropdown-list {
font-weight: 400;
font-size: 13px;
color: #212121;
line-height: 18px;
padding: 0px;
}
.ui-state-active,
.ui-state-highlight {
background-color: #dee5ec !important;
}
.lf-dropdown .ui-widget-header.ui-state-highlight,
.ui-widget-content.ui-state-highlight,
.ui-state-highlight.ui-widget-header.ui-state-highlight,
.ui-widget-content.ui-state-highlight,
.ui-state-highlight {
/*background-color: #F00 !important;*/
/*background-color: #dee5ec !important;*/
color: #205081 !important;
background: transparent !important;
font-weight: 700 !important;
}
/***************End of Dropdown Styling**************/
/* textBox Styles As per LF GuideLines*/
input[type="text"] {}
.lf-textbox_label,
.lf-label_textarea {
font-weight: 700;
font-size: 12px;
color: #212121;
line-height: 18px;
}
.lf-textbox {
height: 32px;
}
.lf-compressed-textbox {
height: 28px;
}
.lf-form-textbox {
font-weight: 700;
font-size: 12px;
color: #212121;
line-height: 18px;
height: 28px;
width: 100%;
padding: 0px 10px;
border: 1px solid #c4d0db;
}
.lf-normal_textbox {
font-weight: 700;
font-size: 12px;
color: #212121;
line-height: 18px;
/*height: 32px;*/
width: 100%;
padding: 0px 10px;
border: 1px solid #c4d0db;
}
.lf-normal_textbox:focus {
border: 1px solid #55bee6;
}
.lf-err_textbox {
/*height: 32px;*/
width: 100%;
font-size: 12px;
line-height: 18px;
padding: 0px 10px;
border: 1px solid #d70026;
}
.lf-disabled_textbox {
/*height: 32px;*/
width: 100%;
color: #212121;
padding: 0px 10px;
background-color: #f0f0f0;
border: 1px solid #c4d0db;
}
/*Textarea as per LF UI Standards*/
.lf-label_textarea {}
.lf-textarea {
min-height: 80px;
width: 100%;
font-weight: 400;
font-size: 13px;
padding: 0px 10px;
color: #989898;
line-height: 18px;
font-style: italic;
border: 1px solid #c4d0db;
}
.lf-textarea_disabled {
min-height: 80px;
width: 100%;
font-weight: 400;
font-size: 13px;
color: #989898;
padding: 0px 10px;
background-color: #f0f0f0;
border: 1px solid #c4d0db;
}
/**************** Buttons Styling As per LF UI standards V8.10 ****************/
/*Normal Primary Button Styling*/
.lf-primary-btn-md {
min-width: 110px;
height: 32px;
color: #FFFFFF;
background-color: #205081;
font-size: 14px;
font-weight: 700;
border: none;
}
.lf-primary-btn-md:hover {
min-width: 110px;
height: 32px;
color: #FFFFFF;
background-color: #1877b7;
font-size: 14px;
font-weight: 700;
border: none;
}
.lf-primary-btn-md:focus {
min-width: 110px;
height: 32px;
color: #FFFFFF;
background-color: #2d96c4;
font-size: 14px;
font-weight: 700;
border: none;
}
/* Red colored or Error Buttons styling Starts here*/
.lf-danger-btn-md {
min-width: 110px;
height: 32px;
color: #FFFFFF;
background-color: #ee1c25;
font-size: 14px;
font-weight: 700;
border: none;
}
/*.lf-danger-btn-md:active{*/
/* border: 1px solid #ff4343 !important;*/
/*}*/
.lf-danger-btn-md:hover {
min-width: 110px;
height: 32px;
color: #FFFFFF;
background-color: #ff4343;
font-size: 14px;
font-weight: 700;
border: none;
}
.lf-danger-btn-md:focus {
min-width: 110px;
height: 32px;
color: #FFFFFF;
background-color: #d70026;
font-size: 14px;
font-weight: 700;
border: none;
}
/* End of Red or Error Buttons styling*/
/*Disabled Button As per LF UI standards V8.10[1]*/
.lf-disabled-btn {
border: 1px solid transparent;
height: 32px;
font-size: 14px;
font-weight: 700;
color: #4C5A68;
background-color: #f0f0f0;
/*For Disabled Button Styling*/
}
/* ********** End of primary Button **********/
/* ********** Secondary Button Styling As per LF Standards V8.10 **********/
.lf-secondary-btn-md {
min-width: 110px;
height: 32px;
color: #205081;
border: 1px solid #205081;
background-color: #FFFFFF;
font-size: 14px;
font-weight: 700;
}
.lf-secondary-btn-md:hover {
min-width: 110px;
height: 32px;
color: #1877b7;
border: 1px solid #2d96c4;
background-color: #FFFFFF;
font-size: 14px;
font-weight: 700;
}
.lf-secondary-btn-md:focus {
min-width: 110px;
height: 32px;
color: #2d96c4;
border: 1px solid #eff2f6;
background-color: #FFFFFF;
font-size: 14px;
font-weight: 700;
}
.lf-secondary-btn-spl {
min-width: 110px;
height: 32px;
color: #212121;
border: 1px solid #c4d0db;
background-color: #eff2f6;
font-size: 14px;
font-weight: 700;
}
.lf-secondary-btn-spl:hover {
min-width: 110px;
height: 32px;
color: #2d96c4;
border: 1px solid #c4d0db;
background-color: #eff2f6;
font-size: 14px;
font-weight: 700;
}
.lf-secondary-btn-spl:focus {
min-width: 110px;
height: 32px;
color: #1877b7;
border: 1px solid #c4d0db;
background-color: #dee5ec;
font-size: 14px;
font-weight: 700;
}
/* Icon Size As per LF UI Standards*/
.lf_iconSize {
width: 24px;
height: 24px;
}
/**/
/* ********** End of Secondary Button **********/
/*Checkbox Styling*/
.checkbox.disabled label {
/* As per LF Standards we are using Paragraph2 Typography*/
}
.checkbox,
.radio {
margin-top: 0px !important;
}
/*Styling for Tooltip as per LF UI Standards V8.10*/
/*.pTooltip{*/
/* color: #0F0 !important;*/
/*}*/
/*.tooltipStyleClass{*/
/* background-color: Red !important;*/
/*}*/
/*.ui-tooltip-text{*/
/* padding: 10px;*/
/* line-height: 18px;*/
/*}*/
/*.tooltip.top .tooltip-arrow {*/
/* border-top-color: red!important;*/
/* width: 14px !important;*/
/*}*/
.ui-tooltip-text.ui-shadow.ui-corner-all {
background-color: rgba(33, 33, 33, 0.9);
font-weight: 700;
font-size: 13px;
color: #FFFFFF;
border-radius: 0px;
padding: 10px;
}
/************** Alerts Styling *******************/
.lf-alert_body {
padding: 0px 25px;
color: #212121;
font-size: 13px;
}
.lf-alert-icon {
display: table-cell !important;
}
.lf-alert {
border-radius: 0px !important;
padding: 10px 30px 10px 10px!important;
}
.lf-alert_title {
/*here, we have to use same as Heading3 style
which mentioned in UI standards */
color: #212121;
padding-left: 10px;
display: table-cell;
}
.lf-primary_alert {
background-color: #dee5ec;
}
.lf-success-alert {
background-color: #e5f1d4;
}
.lf-warning-alert {
background-color: #fff6d2;
}
.lf-danger-alert {
background-color: #f9d2d9;
}
.close.lf-success-close-icon {
opacity: 1 !important;
padding: 0px 3px!important;
border-radius: 10px;
background-color: #68b537 !important;
color: #FFF !important;
font-size: 15px !important;
text-shadow: none;
}
.close.lf-primary-close-icon {
opacity: 1 !important;
padding: 0px 3px!important;
border-radius: 10px;
background-color: #205081 !important;
color: #FFF !important;
font-size: 15px !important;
text-shadow: none;
}
.close.lf-warning-close-icon {
opacity: 1 !important;
padding: 0px 3px!important;
border-radius: 10px;
background-color: #ffb837 !important;
color: #FFF !important;
font-size: 15px !important;
text-shadow: none;
}
.close.lf-danger-close-icon {
opacity: 1 !important;
padding: 0px 3px!important;
border-radius: 10px;
background-color: #d70026 !important;
color: #FFF !important;
font-size: 15px !important;
text-shadow: none;
}
/*.lf-primary-close-icon{*/
/* color: #205081;*/
/*}*/
.lf-pri .lf-warning_alert {}
.lf-success_alert {}
/************End of Alert Styling***********/
/* Styling for Lables */
.lf-label-lg {
display: inline;
padding: 2px;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
width: 16px;
height: 20px;
border-radius: 0;
}
.lf-label-sm {
display: inline;
padding: 2px;
font-size: 12px;
font-weight: 700;
line-height: 16px;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
width: 16px;
height: 16px;
border-radius: 0;
}
.lf-label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
width: 16px;
height: 16px;
border-radius: 0;
}
.lf-default-label {
background-color: #777777;
}
.lf-success-label {
background-color: #68b537;
}
.lf-primary-label {
background-color: #2d96c4;
}
.lf-warning-label {
background-color: #ffb837;
}
.lf-error-label {
background-color: #ad1023;
}
.lf-red-label {
background-color: #ee1c25;
}
/* End of lables Styling*/
/*********** Paginator Styling As per LF Standards ************/
.lf_paginator .ui-paginator.ui-paginator-page.ui-state-active {
border-radius: 0;
background-color: #205081 !important;
color: #FFFFFF !Important;
}
.lf_paginator .ui-widget-header {
background: transparent !important;
color: #205081 !important;
border: 1px solid transparent !important;
line-height: 26px !important;
}
.lf_paginator .ui-widget-header a {
color: #205081;
height: 26px;
width: 26px;
padding: 0px !important;
font-size: 12px;
font-weight: 700;
border-radius: 0 !important;
border: none !important;
}
.lf_paginator .ui-widget-header a:hover {
background-color: #c4d0db !important;
color: #205081 !important;
height: 26px;
width: 26px;
padding: 0px !important;
font-size: 12px;
font-weight: 700;
border-radius: 0 !important;
border: none !important;
}
.lf_paginator.ui-state-default {
border: none !important;
}
a.ui-paginator-prev.ui-paginator-element:hover,
a.ui-paginator-next.ui-paginator-element:hover {
background-color: transparent !important;
border: none !important;
}
.lf_paginator .ui-state-active {
background-color: #205081 !important;
color: #FFFFFF !important;
}
.lf_paginator a.ui-state-active:hover {
background-color: #205081 !important;
color: #FFFFFF !important;
}
.lf_paginator .ui-paginator {
background-color: transparent !important;
}
.lf_paginator .fa-backward:before {
content: "\f0d9" !important;
}
.lf_paginator .fa-forward:before {
content: "\f0da" !important;
}
.lf_paginator#lf_id_paginator .fa-step-backward:before,
.fa-step-forward:before {
display: none;
}
/* TOGGLE INPUT SWITCHING*/
.lf_inputSwitch#lf_id_inputSwitch .ui-inputswitch.ui-widget.ui-widget-content.ui-corner-all {
border-radius: 0 !important;
border: 1px solid #205081 !important;
}
.lf_inputSwitch#lf_id_inputSwitch .ui-inputswitch-offlabel {
font-size: 12px !important;
/*width: 18px !important;*/
color: #989898 !important;
}
.lf_inputSwitch#lf_id_inputSwitch .ui-inputswitch-onlabel {
font-size: 12px !important;
/*width: 18px !important;*/
}
.lf_inputSwitch#lf_id_inputSwitch .ui-inputswitch-on {
background-color: #205081 !important;
color: #FFFFFF !important;
}
.ui-widget .ui-tooltip.ui-tooltip-top {
top: 10px !important;
}
/* BreadCrumb As per LF UI V8.10*/
p-breadcrumb.lf_breadcrumb_menu ul li.ui-breadcrumb-home.fa.fa-home {
display: none !important;
}
.ui-breadcrumb ul li:nth-child(3) {
color: #F00;
}
p-breadcrumb.lf_breadcrumb_menu .ui-breadcrumb a:nth-child(1) {
padding-left: 0px;
}
p-breadcrumb.lf_breadcrumb_menu ul li:nth-child(2) {
display: none;
}
ul li.menuitem > a.ui-menuitem-link:nth-child(2) {
color: #F00 !important;
}
p-breadcrumb.lf_breadcrumb_menu .ui-breadcrumb a:nth-child(n) {
padding: 0px;
padding: 0px 10px 0px 10px;
}
p-breadcrumb.lf_breadcrumb_menu ul li a {
color: #205081;
}
p-breadcrumb.lf_breadcrumb_menu ul li > a:hover {
color: #212121;
}
p-breadcrumb .ui-breadcrumb.ui-widget.ui-widget-header {
background-color: transparent !important;
}
p-breadcrumb.lf_breadcrumb_menu .ui-breadcrumb.ui-widget.ui-widget-header.ui-helper-clearfix.ui-corner-all {
background-color: transparent !important;
background: #FFFFFF;
border: none;
}
p-breadcrumb.lf_breadcrumb_menu .ui-breadcrumb-chevron.fa.fa-chevron-right {
color: #205081;
}
/*.ui-breadcrumb ul li:nth-child(2){*/
/* color: #F00;*/
/*}*/
/******************************************/
.lf-upload {
border: 1px dashed #c4d0db;
height: 80px;
text-align: center;
}
.lf-upload-label {
padding: 5%;
text-decoration: underline;
}
.lf-upload-drag {
background-color: #eff2f6;
border: 1px dashed #4e7498;
text-align: center;
}
.upload_link {
cursor: pointer;
text-decoration: underline;
font-size: 17px !important;
font-family: Open Sans;
}
.upload_label {
width: 100%;
text-align: center;
padding: 10%;
}
.upload_button {
margin-bottom: 7px;
}
/*Accordian Panel Styling As per LF UI Standards*/
p-accordion.lf_accordion .ui-accordion .ui-accordion-header {
margin-top: 0px;
}
p-accordion.lf_accordion .ui-accordion .ui-accordion-header a {
color: #212121 !important;
}
p-accordion.lf_accordion .ui-accordion .ui-accordion-header>.fa {
position: absolute !important;
/* left: .5em; */
top: 50% !important;
margin-top: -.5em !important;
right: .5em !important;
left: auto !important;
color: #205081;
}
p-accordion.lf_accordion .ui-accordion .fa-caret-right:before {
content: "\f0d8" !important;
}
p-accordion.lf_accordion .ui-accordion .ui-accordion-header a {
padding: 0px;
padding: 10px 10px 10px 20px;
}
p-accordion.lf_accordion .ui-accordion .ui-accordion-header a:hover {
text-decoration: none;
}
p-accordion.lf_accordion .ui-accordion .ui-accordion-content {
background-color: #c4d0db;
padding: 20px !important;
font-weight: 400;
font-size: 13px;
color: #212121;
line-height: 18px;
}
p-accordion.lf_accordion .ui-accordion .ui-accordion-header a:focus {
text-decoration: none !important;
}
p-accordion.lf_accordion .ui-accordion.ui-accordion-header {
background-color: #c4d0db!important;
border-bottom: 1px solid #F00;
}
p-accordion.lf_accordion .ui-accordion-header .ui-state-default.ui-corner-all {
background-color: #FFFFFF !important;
}
p-accordion.lf_accordion .ui-accordion .ui-accordion-header.ui-state-active {
background-color: #c4d0db !important;
border-bottom: 1px solid #c4d0db !important;
}
p-accordion.lf_accordion .ui-accordion .ui-accordion-header:not(.ui-state-active):not(.ui-state-disabled):hover {
background-color: #FFFFFF !important;
border: none;
border-top: 1px solid #c4d0db;
/*border-bottom: 1px solid #c4d0db;*/
}
p-accordion.lf_accordion .ui-accordion .ui-accordion-header:not(.ui-state-active):not(.ui-state-disabled) {
border: none;
border-top: 1px solid #c4d0db;
/*border-bottom: 1px solid #c4d0db;*/
background-color: #FFFFFF;
}
p-accordion.lf_accordion .ui-accordion .ui-accordion-header:not(.ui-state-active):not(.ui-state-disabled):hover a {
background-color: #eff2f6 !important;
}
p-accordion .ui-accordion:nth-child(1) {
color: #F00 !important;
border: none;
/*border-top: 1px solid #c4d0db;*/
border-bottom: 1px solid #c4d0db;
}
/* End of Accordion Panel Styling */
/*Action Buttons Styling*/
.lf-crudDiv {
border-bottom: 1px solid #ddd;
height: 34px;
/* padding-left: 5px; */
padding: 5px;
}
.lf-btn-icon {
/*width: 18px;
height: 18px;*/
margin-top: -2px;
color: #205081;
}
.saveIcon {
margin-top: -2px;
}
.lf-action-btn {
float: left;
border: none;
background: white;
font-weight: 700 !important;
font-size: 12px !important;
line-height: 18px;
margin-right: 5px;
border-right: 1px solid #c4d0db;
height: 20px;
margin-top: 2px;
}
.lf-action-btn label {
font-weight: 700 !important;
font-size: 12px !important;
color: #212121;
padding-right: 10px;
height: 20px;
vertical-align: baseline;
}
/*End of Action Buttons Styling*/
/*Dialog box as per LF Standards reference class name is: lf-small-dialog*/
.lf-footer-btn-space {
margin: 0 10px;
}
p-dialog.lf-small-prompt .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-shadow.ui-dialog-draggable.ng-trigger.ng-trigger-dialogState {
display: block !important;
width: 460px !important;
height: 300px !important;
left: 409px;
top: 100px !important;
z-index: 1019;
opacity: 1;
border-radius: 0px;
}
p-dialog.lf-small-prompt .ui-dialog-titlebar.ui-widget-header.ui-helper-clearfix.ui-corner-top {
padding: 20px 20px 20px 20px !important;
border-bottom: none !important;
background: none;
color: #205081;
}
p-dialog.lf-small-prompt a.ui-dialog-titlebar-icon.ui-dialog-titlebar-close.ui-corner-all {
padding: 3px 2px !important;
border-radius: 20px !important;
border: 1px solid #1d4f83 !important;
-o-border-image: none !important;
border-image: none !important;
color: #fff !important;
font-size: 12px !important;
margin-left: 10px !important;
background-color: #1d4f83 !important;
margin: 0px !important;
}
p-dialog.lf-small-prompt .ui-dialog-content.ui-widget-content {
padding: 0px;
font-weight: 400;
font-size: 15px;
color: #212121;
line-height: 21px;
padding: 20px;
padding-top: 0px;
}
/*Radio Button Styling*/
input[type='radio'] {
height: 20px;
width: 20px;
margin-left: 3px;
}
.radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-item input[type='radio'] {
display: none;
}
.radio-item label {
color: #91C2E3;
font-weight: normal;
}
.radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid #c4d0db;
background-color: #fff;
}
.radio-item input[type=radio]:checked + label:after {
border-radius: 11px;
width: 10px;
height: 10px;
position: absolute;
top: 10px;
left: 11px;
content: " ";
display: block;
background: #205081 !important;
}
/*Warning Prompt Styling as per LF UI Standards*/
.modal-message.modal-warning .modal-header {
color: #e46f61;
border-bottom: 3px solid #e46f61;
}
.alertContent {
/*min-width: 381px;*/
/*height: 170px;*/
/*display: block;*/
display: inline-table;
border-radius: 0px;
background: #fff;
min-width: 460px;
min-height: 120px !important;
width: 460px !important;
height: 120px !important;
}
.alertBody {
/*font-weight: 400;*/
/*font-size: 15px !important;*/
/*color: #212121;*/
/*line-height: 21px;*/
/*text-align: left;*/
/*margin-left: 20px;*/
font-weight: 400;
font-size: 15px !important;
color: #212121;
line-height: 21px;
text-align: left;
padding: 20px;
padding-top: 0px;
}
.alertHeader {
font-weight: 300;
font-size: 21px !important;
line-height: 26px;
color: #ee1c25;
background: #fff;
padding: 20px;
text-align: left;
/*padding-bottom: 15px;*/
}
.lf-prompt-footer {
float: right;
/*padding: 15px;*/
/*padding-left:20px;*/
padding:15px 20px;
}
#lf-warning-prompt .modal-dialog {
top: 100px;
}
/*.buttonOK {*/
/* background: #ee1c25;*/
/* font-weight: 700;*/
/* font-size: 14px !important;*/
/* color: #fff;*/
/* padding: 0px 20px;*/
/* border-radius: 0px;*/
/* height: 28px;*/
/* float: right;*/
/* margin: 20px;*/
/*}*/
/*.buttonOK:hover {*/
/* font-weight: 700;*/
/* font-size: 14px !important;*/
/* color: #fff;*/
/* padding: 0px 20px;*/
/* border-radius: 0px;*/
/* height: 28px;*/
/* float: right;*/
/* margin: 20px;*/
/* background: #ff4343;*/
/*}*/
/*.buttonOK:active,.buttonOK:focus {*/
/* font-weight: 700;*/
/* font-size: 14px !important;*/
/* color: #fff;*/
/* padding: 0px 20px;*/
/* border-radius: 0px;*/
/* height: 28px;*/
/* float: right;*/
/* margin: 20px;*/
/* background: #d70026;*/
/*}*/
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- PrimeNG style dependencies -->
<link rel="stylesheet" href="https://unpkg.com/primeng@4.0.0-rc.4/resources/themes/omega/theme.css" />
<!--<link rel="stylesheet" href="https://unpkg.com/primeng@4.0.0-rc.4/resources/themes/bootstrap/theme.css" />-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/primeng@4.0.0-rc.4/resources/primeng.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- 1. Load libraries -->
<!-- Polyfill for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<!--Bootstrap JS Library-->
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script src="JScommons.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
// Copy of compiler options in standard tsconfig.json
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@2.0.3/lib/typescript.js',
'primeng': 'npm:primeng@4.0.1/primeng.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
primeng: {
defaultExtension: 'js'
}
}
});
if (!global.noBootstrap) { bootstrap(); }
// Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
function bootstrap() {
console.log('Auto-bootstrapping');
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));
// bootstrap and launch the app (equivalent to standard main.ts)
Promise.all([
System.import('@angular/platform-browser-dynamic'),
getAppModule()
])
.then(function (imports) {
var platform = imports[0];
var app = imports[1];
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
})
.catch(function(err){ console.error(err); });
}
// Import AppModule or make the default AppModule if there isn't one
// returns a promise for the AppModule
function getAppModule() {
if (global.noAppModule) {
return makeAppModule();
}
return System.import('app/app.module').catch(makeAppModule)
}
function makeAppModule() {
console.log('No AppModule; making a bare-bones, default AppModule');
return Promise.all([
System.import('@angular/core'),
System.import('@angular/platform-browser'),
System.import('app/app.component')
])
.then(function (imports) {
var core = imports[0];
var browser = imports[1];
var appComp = imports[2].AppComponent;
var AppModule = function() {}
AppModule.annotations = [
new core.NgModule({
imports: [ browser.BrowserModule ],
declarations: [ appComp ],
bootstrap: [ appComp ]
})
]
return {AppModule: AppModule};
})
}
})(this);
<div class="container" style=" background-color: #FFFFFF; padding-bottom: 20px;">
<div class="row baner-title">
As per LF Platform Design Standards - V.8.10
</div>
<div class="row">
<div class="col-md-6">
<h3>Typography - <span class="lf-heading3 lf-redcolor-text">(As per LF Standards)</span></h3>
<hr />
<div class="row-container lf-heading1 lf-primary-text">Heading 1 - <span class="lf-heading3 lf-redcolor-text">(As per LF Standards, Reference Class Name: lf-heading1)</span></div>
<div class="row-container lf-heading2 lf-primary-text">Heading 2 - <span class="lf-heading3 lf-redcolor-text">(As per LF Standards, Reference Class Name: lf-heading2)</span></div>
<div class="row-container lf-heading3 lf-base-text">Heading 3 - <span class="lf-heading3 lf-redcolor-text">(As per LF Standards, Reference Class Name: lf-heading3)</span></div>
<div class="row-container lf-heading4_1 lf-primary-text">Heading 4.1 - <span class="lf-heading3 lf-redcolor-text">(As per LF Standards, Reference Class Name: lf-heading4_1)</span></div>
<div class="row-container lf-heading4_2 lf-primary-text">Heading 4.2 - <span class="lf-heading3 lf-redcolor-text">(As per LF Standards, Reference Class Name: lf-heading4_2)</span></div>
<div lass="row-container lf-categoryTitle lf-base-text">Category Title - <span class="lf-heading3 lf-redcolor-text">(As per LF Standards, Reference Class Name: lf-categoryTitle)</span></div>
<div class="row-container lf-Paragraph1 lf-base-text">Paragraph 1 - <span class="lf-heading3 lf-redcolor-text">(As per LF Standards, Reference Class Name: lf-Paragraph1)</span></div>
<div class="row-container lf-Paragraph2 lf-base-text">Paragraph 2 - <span class="lf-heading3 lf-redcolor-text">(As per LF Standards, Reference Class Name: lf-Paragraph2)</span></div>
<div class="row-container lf-italic-body lf-base-text">Italic body - <span class="lf-heading3 lf-redcolor-text">(As per LF Standards, Reference Class Name: lf-italic-body)</span></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3>Original p-dropdown from primeNG</h3>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p-dropdown [options]="customProducts">
<ng-template let-item pTemplate="item">
{{ item.value.name }}
</ng-template>
</p-dropdown>
</div>
</div>
<h3>Dropdown Component As per LF UI Standards</h3>
<div class="row">
<div class="col-md-3">
<p-dropdown class="lf-dropdown" [options]="customProducts">
<ng-template let-item pTemplate="item">
{{ item.value.name }}
</ng-template>
</p-dropdown>
</div>
<div class="col-md-3">
<p-dropdown class="lf-dropdown" [options]="customProducts">
<ng-template let-item pTemplate="item">
{{ item.value.name }}
</ng-template>
</p-dropdown>
</div>
<div class="col-md-3">
<p-dropdown class="lf-dropdown" [options]="customProducts">
<ng-template let-item pTemplate="item">
{{ item.value.name }}
</ng-template>
</p-dropdown>
</div>
<div class="col-md-3">
<p-dropdown class="lf-dropdown" [options]="customProducts">
<ng-template let-item pTemplate="item">
{{ item.value.name }}
</ng-template>
</p-dropdown>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6">
<p-dropdown class="lf-dropdown" [options]="customProducts">
<ng-template let-item pTemplate="item">
{{ item.value.name }}
</ng-template>
</p-dropdown>
</div>
<div class="col-md-6">
<p-dropdown class="lf-dropdown" [options]="customProducts">
<ng-template let-item pTemplate="item">
{{ item.value.name }}
</ng-template>
</p-dropdown>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 lf-md-4">
<p-dropdown class="lf-dropdown" [options]="customProducts">
<ng-template let-item pTemplate="item">
{{ item.value.name }}
</ng-template>
</p-dropdown>
</div>
<div class="col-md-4 lf-md-4">
<p-dropdown class="lf-dropdown" [options]="customProducts">
<ng-template let-item pTemplate="item">
{{ item.value.name }}
</ng-template>
</p-dropdown>
</div>
<div class="col-md-4 lf-md-4">
<p-dropdown class="lf-dropdown" [options]="customProducts">
<ng-template let-item pTemplate="item">
{{ item.value.name }}
</ng-template>
</p-dropdown>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<p-dropdown class="lf-dropdown" [options]="customProducts">
<ng-template let-item pTemplate="item">
{{ item.value.name }}
</ng-template>
</p-dropdown>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<h3> Drop down for List page</h3>
<!--<div id="lf-detaildropdown">-->
<p-dropdown id="lf-detaildrodown" [options]="customProducts">
<ng-template let-item pTemplate="item">
{{ item.value.name }}
</ng-template>
</p-dropdown>
<!--</div>-->
</div>
</div>
<!--<h3>p-multiselect Dropdown From PrimeNG</h3>-->
<!--<div class="row">-->
<!-- <p-multiSelect [options]="cities" [(ngModel)]="selectedCities"></p-multiSelect>-->
<!--</div>-->
<h3 class="lf-heading1">Text inputs and Text Area (As per LF UI standards V8.10[1] : Heading 1)</h3>
<div class="row">
<div class="col-md-4">
<label>Normal Textbox from PrimeNG</label>
<br />
<input type="text" pInputText placeholder="Normal text" />
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 lf-md-4">
<label class="lf-textbox_label">Normal Textbox (as per LF Standards)</label>
<br />
<input type="text" pInputText class="lf-compressed-textbox lf-normal_textbox" placeholder="Normal text" />
</div>
<div class="col-md-4 lf-md-4">
<label class="lf-textbox_label">Textbox with input error (as per LF Standards)</label>
<br />
<input type="text" pInputText class="lf-compressed-textbox lf-err_textbox" placeholder="placeholder" />
</div>
<div class="col-md-4 lf-md-4">
<label class="lf-textbox_label">Textbox when disabled (as per LF Standards)</label>
<br />
<input type="text" pInputText class="lf-compressed-textbox lf-disabled_textbox lf-heading4_2" placeholder="Disabled textbox" />
</div>
</div>
<br/>
<div class="row">
<div class="col-md-4">
<h3>p-autocomplete from PrimeNG</h3>
<!--<p-autoComplete [(ngModel)]="customer" [suggestions]="customerResults" (completeMethod)="searchCustomers($event)" field="name">-->
<!-- <ng-template let-customer pTemplate="item">-->
<!-- {{customer.name}} {{customer.firstname}}-->
<!-- </ng-template>-->
<!-- <ng-template let-customer pTemplate="selectedItem">-->
<!-- {{customer.name}} {{customer.firstname}}-->
<!-- </ng-template>-->
<!--</p-autoComplete>-->
</div>
</div>
<div class="row">
<div class="col-md-4 lf-md-4">
<label class="lflabel_textarea">Text Area label(As per PrimeNG)</label>
<br/>
<textarea [rows]="5" [cols]="30" pInputTextarea autoResize="autoResize" placeholder="Text area from PrimeNG"></textarea>
</div>
<div class="col-md-4 lf-md-4">
<label class="lf-label_textarea">Text Area label(As per LF UI Standards)</label>
<br/>
<textarea class="lf-textarea" [rows]="5" [cols]="30" pInputTextarea autoResize="autoResize" placeholder="text area placeholder"></textarea>
</div>
<div class="col-md-4 lf-md-4">
<label class="lf-label_textarea">Text Area label(As per LF UI Standards)</label>
<br/>
<textarea class="lf-textarea_disabled" [rows]="5" [cols]="30" pInputTextarea autoResize="autoResize" placeholder="text area placeholder"></textarea>
</div>
</div>
<br />
<h3>Button Style Category Wise(As per PrimeNG)</h3>
<div class="row">
<div class="col-md-3">
<label> Default Button (As per PrimeNG)</label>
<br/>
<button type="button" (click)="onclick()" label="Click">Default</button>
</div>
<div class="col-md-3">
<label> Primary Button-i (As per LF Standards)</label>
<br/>
<button type="button" class="lf-primary-btn-md" (click)="onclick()" label="Click">Primary Button</button>
</div>
<div class="col-md-3">
<label> Primary Button-ii (As per LF Standards)</label>
<br/>
<button type="button" class="lf-danger-btn-md" (click)="onclick()" label="Click">Primary Button</button>
</div>
<div class="col-md-3">
<label> Primary Button-iii(Disabled Button)(As per LF)</label>
<br/>
<button type="button" class="lf-disabled-btn" (click)="onclick()" label="Click">Disabled Button</button>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-3">
<label class=""> Secondary Button-i (As per LF UI Standards)</label>
<br/>
<button type="button" class="lf-secondary-btn-md" (click)="onclick()" label="Click">Secondary Button</button>
</div>
<div class="col-md-3">
<label class=""> Secondary Button-ii (As per LF UI Standards)</label>
<br/>
<button type="button" class="lf-secondary-btn-spl" (click)="onclick()" label="Click">Secondary Button</button>
</div>
</div>
<br/>
<div class="row">
<!--<h3>Hyperlink (As per LF UI Standards)</h3>-->
<div class="col-md-3">
<label>Hyperlink (As per LF UI Standards)</label>
<br/> This is sample<a href="#" class="lf-hyperlink-text">Hyperlink</a>
</div>
<!--<div class="col-md-3">-->
<!-- <label>Checkbox With Label(As per LF Standards)</label>-->
<!-- <br />-->
<!-- <form>-->
<!-- <label class="checkbox-inline">-->
<!-- <input type="checkbox" value="">Option 1-->
<!-- </label>-->
<!-- <label class="checkbox-inline">-->
<!-- <input type="checkbox" value="">Option 2-->
<!-- </label>-->
<!-- <label class="checkbox-inline">-->
<!-- <input type="checkbox" value="">Option 3-->
<!-- </label>-->
<!-- </form>-->
<!--</div>-->
<div class="col-md-3">
<label>Checkboxs (As per LF Standards)</label>
<br />
<div class="checkbox">
<label class="lf-Paragraph2">
<input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label class="lf-Paragraph2">
<input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label class="lf-Paragraph2">
<input type="checkbox" value="" disabled>Option 3</label>
</div>
</div>
<div class="col-md-3">
<label>Radio Buttons (As per LF Standards)</label>
<br/>
<!--<div class="radio">-->
<div class="radio-item">
<label class="lf-Paragraph2">
<input type="radio" name="optradio">Option 1</label>
</div>
<!--</div>-->
<div class="radio">
<label class="lf-Paragraph2">
<input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label class="lf-Paragraph2">
<input type="radio" name="optradio" disabled>Option 3</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Tooltips in different directions(As per LF Standards)</h3>
<div class="col-md-3">
<input type="text" class="lf-compressed-textbox lf-normal_textbox" pTooltip="Enter your username" tooltipPosition="top">
</div>
<div class="col-md-3">
<input type="text" class="lf-compressed-textbox lf-normal_textbox" pTooltip="Enter your username" tooltipPosition="right">
</div>
<div class="col-md-3">
<input type="text" class="lf-compressed-textbox lf-normal_textbox" pTooltip="Enter your username" tooltipPosition="bottom">
</div>
<div class="col-md-3">
<input type="text" class="lf-compressed-textbox lf-err_textbox" pTooltip="Enter your username" tooltipPosition="left">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Sample Alerts Boxes As per LF UI Standards(Using Bootstrap)</h3>
<div class="alert lf-alert alert-success lf-success-alert alert-dismissable">
<a href="#" class="close lf-success-close-icon" data-dismiss="alert" aria-label="close">×</a>
<span class="glyphicon glyphicon-ok-sign lf-success-text lf-alert-icon"></span>
<div class="lf-heading3 lf-alert_title">Success State</div>
<div class="lf-alert_body lf-paragraph2">
<p class="lf-paragraph2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
</div>
</div>
<div class="alert lf-alert lf-warning-alert alert-dismissable">
<a href="#" class="close lf-warning-close-icon" data-dismiss="alert" aria-label="close">×</a>
<span class="glyphicon glyphicon-exclamation-sign lf-warning-text lf-alert-icon"></span>
<div class="lf-heading3 lf-alert_title">Warning State</div>
<div class="lf-alert_body lf-paragraph2">
<p class="lf-paragraph2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
</div>
</div>
<div class="alert lf-alert lf-danger-alert alert-dismissable">
<a href="#" class="close lf-danger-close-icon" data-dismiss="alert" aria-label="close">×</a>
<span class="glyphicon glyphicon-warning-sign lf-redcolor-text lf-alert-icon"></span>
<div class="lf-heading3 lf-alert_title">Error State</div>
<div class="lf-alert_body lf-paragraph2">
<p class="lf-paragraph2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
</div>
</div>
<div class="alert lf-alert lf-primary_alert alert-dismissable lf-primary-close-icon">
<a href="#" class="close lf-primary-close-icon" data-dismiss="alert" aria-label="close">×</a>
<span class="glyphicon glyphicon-info-sign lf-primary-text lf-alert-icon"></span>
<p class="lf-heading3 lf-alert_title">Informative State</p>
<div class="lf-alert_body lf-paragraph2">
<p class="lf-paragraph2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
</div>
</div>
<!--<br/>-->
<!--<div class="alert lf-alert alert-danger alert-dismissable">-->
<!-- <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>-->
<!-- <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.-->
<!--</div>-->
</div>
<div class="col-md-6">
<h3>Paginator As per primeNG</h3>
<p-paginator rows="10" totalRecords="100" pageLinkSize="3"></p-paginator>
<hr />
<h3>Paginator As per LF UI Standards</h3>
<p-paginator rows="10" totalRecords="100" pageLinkSize="3" class="lf_paginator" id="lf_id_paginator"></p-paginator>
<hr />
<h3 class="lf-heading4_1 lf-redcolor-text">TOGGLE BUTTONS (As per PrimeNG)</h3>
<p-inputSwitch formControlName="enabled"></p-inputSwitch>
<h3 class="lf-heading4_1 lf-redcolor-text">TOGGLE BUTTONS (As per LF Standards)</h3>
<p-inputSwitch formControlName="enabled" class="lf_inputSwitch" id="lf_id_inputSwitch"></p-inputSwitch>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4>Different Lables (Small)- As per LF UI Standards</h4>
<label class="lf-label-sm lf-default-label">label Default</label>
<label class="lf-label-sm lf-success-label">label Success</label>
<label class="lf-label-sm lf-primary-label">label Primary</label>
<label class="lf-label-sm lf-red-label">label Red Color</label>
<label class="lf-label-sm lf-warning-label">label Warning</label>
<label class="lf-label-sm lf-error-label">label Error</label>
</div>
<div class="col-md-6">
<h4>Different Lables (Large)- As per LF UI Standards</h4>
<label class="lf-label-lg lf-default-label">label Default</label>
<label class="lf-label-lg lf-success-label">label Success</label>
<label class="lf-label-lg lf-primary-label">label Primary</label>
<label class="lf-label-lg lf-red-label">label Red Color</label>
<label class="lf-label-lg lf-warning-label">label Warning</label>
<label class="lf-label-lg lf-error-label">label Error</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Breadcrumb (As per PrimeNG)</h3>
<p-breadcrumb [model]="items"></p-breadcrumb>
</div>
<div class="col-md-6">
<h3>Breadcrumb (As per LF UI Standards)</h3>
<p-breadcrumb class="lf_breadcrumb_menu lf-Paragraph2 lf-primary-text" [model]="items"></p-breadcrumb>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Fie Upload A per PrimeNG</h3>
<p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple" accept="image/*" auto="auto"></p-fileUpload>
</div>
<div class="col-md-6">
<h3>File Up As per LF UI Standards</h3>
<div class="lf-heading3">Inactive</div>
<div class="lf-upload">
<label class="lf-upload-label lf-primary-text lf-Paragraph2">Choose File <span class="lf-primary-text lf-Paragraph2" style="text-decoraton:none;">(or) Drag it here</span></label>
</div>
<div class="lf-heading3">Dragging</div>
<div class="lf-upload-drag">
<label class="lf-upload-label lf-primary-text lf-Paragraph2">Choose File <span class="lf-primary-text lf-Paragraph2" style="text-decoraton:none;">(or) Drag it here</span></label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Accordion Panels As per PrimeNG</h3>
<p-accordion [multiple]="true">
<p-accordionTab header="Header 1">
Content 1
</p-accordionTab>
<p-accordionTab header="Header 2">
Content 2
</p-accordionTab>
<p-accordionTab header="Header 3">
Content 3
</p-accordionTab>
</p-accordion>
</div>
<div class="col-md-6">
<h3>Accordion Panels As per LF UI Standards</h3>
<p-accordion class="lf_accordion" [multiple]="true">
<p-accordionTab [selected]="true">
<p-header class="lf-heading3">
Header Content-1
</p-header>
<p>
Lorem ipsum dolor sit amet, an eius fugit omnes pro, no usu mutat perpetua, te dicat tempor mucius vix. Ea pro vero consulatu splendide, sumo aperiam detracto et vis. Eam cetero integre interesset ex, ei mel tota detracto explicari. Ad ullamcorper instructior
vim, mea essent aliquid id. No his urbanitas contentiones, vis ne case intellegat, eum apeirian moderatius in. In sit modus ponderum definitionem, mei ei iusto detracto.
</p>
</p-accordionTab>
<p-accordionTab [selected]="true">
<p-header class="lf-heading3">
Header Content-2
</p-header>
Content Body 2
</p-accordionTab>
<p-accordionTab header="Header 3" [selected]="true">
<p-header class="lf-heading3">
Header Content-3
</p-header>
Content Body 3
</p-accordionTab>
<p-accordionTab header="Header 3" [selected]="true">
<p-header class="lf-heading3">
Header Content-4
</p-header>
Content Body 4
</p-accordionTab>
</p-accordion>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Buttons with icons As per LF UI Standards</h3>
<div class="lf-crudDiv">
<button class="lf-action-btn" (click)="copyItem.closeCopy()">
<!--<img src="./assets/img/actionicon_cancel.svg" class="addIcon"/>-->
<span class="glyphicon glyphicon-remove lf-btn-icon lf_iconSize"></span>
<label>Cancel</label>
</button>
<button class="lf-action-btn" (click)="copyItem.updateCopyWCST(copyItem.editItemForm.valid)">
<!--<img src="./assets/img/actionicon_save.svg" class="saveIcon"/>-->
<a href="#">
<span class="glyphicon glyphicon-floppy-disk lf-btn-icon lf_iconSize"></span>
</a>
<label>Save</label>
</button>
<button class="lf-action-btn" (click)="copyItem.updateCopyWCST(copyItem.editItemForm.valid)">
<!--<img src="./assets/img/actionicon_save.svg" class="saveIcon"/>-->
<i class="fa fa-trash-o lf-btn-icon lf_iconSize" aria-hidden="true"></i>
<label>Delete</label>
</button>
</div>
</div>
<div class="col-md-6">
<h3>Content Tabs As per LF Standards(Using Bootstrap Libraby)</h3>
<div class="tabView">
<ul id="ViewItemTabs" class="nav nav-tabs">
<li class="nav"><a data-toggle="tab" href="#costSheet" role="tab">Tab Title</a></li>
<li class="nav"><a data-toggle="tab" href="#relatedItems" role="tab">Tab Title</a></li>
<li class="nav"><a data-toggle="tab" href="#attachment" role="tab">This is long Title</a></li>
<li class="nav"><a data-toggle="tab" href="#itemContact" role="tab">Tab Title</a></li>
</ul>
</div>
<div id="myTabContent" class="tab-content">
<!--<div id="costSheet" class="tab-pane fade in " role="tabpanel">-->
<!-- <label>Costing Tab Panel Body</label>-->
<!--</div>-->
<!--<div id="relatedItems" class="tab-pane fade in" role="tabpanel">-->
<!--<span>Hiii</span>-->
<!--</div>-->
</div>
</div>
</div>
<p-dialog class="lf-small-prompt" header="Section Heading" [(visible)]="display" modal="modal" [responsive]="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. There are many variations of passages of lorem lpsum available.</p>
<p>The majority have suffered alteration in some form, sed do eiusmod tempor.</p>
<!--<p-footer>-->
<!-- <button type="button" pButton icon="fa-check" (click)="display=false" label="Yes"></button>-->
<!-- <button type="button" pButton icon="fa-close" (click)="display=false" label="No"></button>-->
<!--</p-footer> Prompt with button-->
</p-dialog>
<div class="row">
<div class="col-md-6">
<label class="lf-heading3">Prompt (Popup Boxes)(Dialog, Confirm Dialog) As per LF</label>
<br/>
<button class="lf-primary-btn-md" (click)="showDialog()" icon="" label="Small Dialog">Small Prompt</button>
<button class="lf-primary-btn-md" (click)="showDialog1()" icon="" label="Small Dialog">Prompt With Buttons</button>
<button type="button" class="lf-danger-btn-md" data-toggle="modal" data-target="#lf-warning-prompt">Prompt with Warning</button>
</div>
</div>
<!--Prompt with error Prompt styling using Bootstrap Library-->
<div id="lf-warning-prompt" class="modal modal-message modal-warning fade" role="dialog">
<div class="modal-dialog">
<div class="alertContent">
<!-- Modal content-->
<!--<div class="modal-content">-->
<!--<div class="modal-header">-->
<!-- <button type="button" class="close" data-dismiss="modal">×</button>-->
<!-- <h4 class="modal-title">Modal Header</h4>-->
<!--</div>-->
<div class="alertHeader">
<!--<button type="button" class="close" data-dismiss="modal">×</button>-->
Warning
</div>
<!--<div class="modal-body">-->
<!-- <p>Some text in the modal.</p>-->
<!--</div>-->
<div class="alertBody">
<div style="font-size:15px!important">At least one change must be made before the new Item can be saved.</div>
</div>
<!--<div class="modal-footer">-->
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
<!--</div>-->
<div class="lf-prompt-footer">
<button type="button" class="lf-secondary-btn-md lf-footer-btn-space" data-dismiss="modal">Button</button>
<button type="button" class="lf-danger-btn-md" data-dismiss="modal">Button</button>
</div>
<!--</div>-->
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-4">
<label class="lf-heading3">Search Bar with Icon(As per PrimeNG)</label>
<br/>
<div class="ui-inputgroup">
<input type="text" pInputText placeholder="Keyword">
<button pButton type="button" icon="fa-search" class="ui-button-secondary"></button>
</div>
</div>
</div>
<div class="row">
<!--<ul class="nav nav-tabs" id="tabs" style=" border-radius: 0px;">-->
<!-- <li id="li1" class="tab-border tab current">-->
<!-- <a href="javascript:void(0)" pTooltip="">-->
<!-- <button type="button" class="tabIcon" (click)="">-->
<!-- <span>-->
<!--<img src="./assets/img/bttnicon_close_tab.svg"/>-->
<!-- </span>-->
<!-- </button>-->
<!-- </a>-->
<!--</ng-container>-->
<!--<ng-container *ngIf="sch.getTabTitle().length<16">-->
<!-- <a href="javascript:void(0)">abc-->
<!--{{sch.getTabTitle()}}-->
<!-- <button type="button" class="tabIcon" (click)="" [hidden]="" >-->
<!-- <span>-->
<!--<img src="./assets/img/bttnicon_close_tab.svg"/>-->
<!-- </span>-->
<!-- </button>-->
<!-- </a>-->
<!--</ng-container>-->
<!-- </li>-->
<!--</ul>-->
<div class="row">
<div class="radio-item">
<input type="radio" style="vertical-align: -10px;" [id]="" name="xx">
<label [for]="">Sample Radio Button -1</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
</div>
</div>
</div>
# PrimeNG Issue Template
Please create a test case and attach the link of the plunkr to your github issue report.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});