import { Component } from '@angular/core';
import {ConfirmationService} from "primeng/components/common/api";
@Component({
selector: 'my-app',
templateUrl: 'app/app.template.html',
providers: [ConfirmationService]
})
export class AppComponent {
msgs: Message[] = [];
constructor(private confirmationService: ConfirmationService) {}
confirm1() {
this.icon = "fa-question-circle";
this.confirmationService.confirm({
message: 'Confirm-dialog with icon next to message',
header: 'Confirmation',
accept: () => {
},
reject: () => {
}
});
}
confirm2() {
this.icon = null;
this.confirmationService.confirm({
message: 'Confirm-dialog without icon next to message',
header: 'Delete Confirmation',
icon: null,
accept: () => {
},
reject: () => {
}
});
}
confirm3() {
this.icon = null;
this.confirmationService.confirm({
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. There are many variations of passages of lorem lpsum available.The majority have suffered alteration in some form, sed do eiusmod tempor ed do eiusmod tempor.',
header: 'Section Title',
icon: null,
accept: () => {
},
reject: () => {
}
});
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
// Import PrimeNG modules
import {AccordionModule} from 'primeng/primeng';
import {AutoCompleteModule} from 'primeng/primeng';
import {BreadcrumbModule} from 'primeng/primeng';
import {ButtonModule} from 'primeng/primeng';
import {CalendarModule} from 'primeng/primeng';
import {CarouselModule} from 'primeng/primeng';
import {ChartModule} from 'primeng/primeng';
import {CheckboxModule} from 'primeng/primeng';
import {ChipsModule} from 'primeng/primeng';
import {CodeHighlighterModule} from 'primeng/primeng';
import {ConfirmDialogModule} from 'primeng/primeng';
import {SharedModule} from 'primeng/primeng';
import {ContextMenuModule} from 'primeng/primeng';
import {DataGridModule} from 'primeng/primeng';
import {DataListModule} from 'primeng/primeng';
import {DataScrollerModule} from 'primeng/primeng';
import {DataTableModule} from 'primeng/primeng';
import {DialogModule} from 'primeng/primeng';
import {DragDropModule} from 'primeng/primeng';
import {DropdownModule} from 'primeng/primeng';
import {EditorModule} from 'primeng/primeng';
import {FieldsetModule} from 'primeng/primeng';
import {FileUploadModule} from 'primeng/primeng';
import {GalleriaModule} from 'primeng/primeng';
import {GMapModule} from 'primeng/primeng';
import {GrowlModule} from 'primeng/primeng';
import {InputMaskModule} from 'primeng/primeng';
import {InputSwitchModule} from 'primeng/primeng';
import {InputTextModule} from 'primeng/primeng';
import {InputTextareaModule} from 'primeng/primeng';
import {LightboxModule} from 'primeng/primeng';
import {ListboxModule} from 'primeng/primeng';
import {MegaMenuModule} from 'primeng/primeng';
import {MenuModule} from 'primeng/primeng';
import {MenubarModule} from 'primeng/primeng';
import {MessagesModule} from 'primeng/primeng';
import {MultiSelectModule} from 'primeng/primeng';
import {OrderListModule} from 'primeng/primeng';
import {OverlayPanelModule} from 'primeng/primeng';
import {PaginatorModule} from 'primeng/primeng';
import {PanelModule} from 'primeng/primeng';
import {PanelMenuModule} from 'primeng/primeng';
import {PasswordModule} from 'primeng/primeng';
import {PickListModule} from 'primeng/primeng';
import {ProgressBarModule} from 'primeng/primeng';
import {RadioButtonModule} from 'primeng/primeng';
import {RatingModule} from 'primeng/primeng';
import {ScheduleModule} from 'primeng/primeng';
import {SelectButtonModule} from 'primeng/primeng';
import {SlideMenuModule} from 'primeng/primeng';
import {SliderModule} from 'primeng/primeng';
import {SpinnerModule} from 'primeng/primeng';
import {SplitButtonModule} from 'primeng/primeng';
import {StepsModule} from 'primeng/primeng';
import {TabMenuModule} from 'primeng/primeng';
import {TabViewModule} from 'primeng/primeng';
import {TerminalModule} from 'primeng/primeng';
import {TieredMenuModule} from 'primeng/primeng';
import {ToggleButtonModule} from 'primeng/primeng';
import {ToolbarModule} from 'primeng/primeng';
import {TooltipModule} from 'primeng/primeng';
import {TreeModule} from 'primeng/primeng';
import {TreeTableModule} from 'primeng/primeng';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
AccordionModule,
AutoCompleteModule,
BreadcrumbModule,
ButtonModule,
CalendarModule,
CarouselModule,
ChartModule,
CheckboxModule,
ChipsModule,
CodeHighlighterModule,
ConfirmDialogModule,
SharedModule,
ContextMenuModule,
DataGridModule,
DataListModule,
DataScrollerModule,
DataTableModule,
DialogModule,
DragDropModule,
DropdownModule,
EditorModule,
FieldsetModule,
FileUploadModule,
GalleriaModule,
GMapModule,
GrowlModule,
InputMaskModule,
InputSwitchModule,
InputTextModule,
InputTextareaModule,
LightboxModule,
ListboxModule,
MegaMenuModule,
MenuModule,
MenubarModule,
MessagesModule,
MultiSelectModule,
OrderListModule,
OverlayPanelModule,
PaginatorModule,
PanelModule,
PanelMenuModule,
PasswordModule,
PickListModule,
ProgressBarModule,
RadioButtonModule,
RatingModule,
ScheduleModule,
SelectButtonModule,
SlideMenuModule,
SliderModule,
SpinnerModule,
SplitButtonModule,
StepsModule,
TabMenuModule,
TabViewModule,
TerminalModule,
TieredMenuModule,
ToggleButtonModule,
ToolbarModule,
TooltipModule,
TreeModule,
TreeTableModule ],
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';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
body {
padding: 2em;
font-family: Arial, Helvetica, sans-serif;
}
.lf-footer-btn-space {
margin: 0 10px;
}
.lf-btn-md{
min-width: 110px;
height: 32px;
font-size: 14px !important;
font-weight: 700;
cursor: pointer;
box-shadow: none !important;
}
.lf-btn-prompt{
min-width: 80px;
height: 28px;
font-size: 12px !important;
font-weight: 700;
cursor: pointer;
box-shadow: none !important;
}
.lf-primary-btn-md {
color: #FFFFFF;
background-color: #205081;
border: none;
}
.lf-primary-btn-md:hover {
color: #FFFFFF;
background-color: #1877b7;
border: none;
}
/*.lf-primary-btn-md:focus {*/
/* color: #FFFFFF;*/
/* background-color: #2d96c4;*/
/* border: none;*/
/*}*/
.lf-primary-btn-md:active {
color: #FFFFFF;
background-color: #2d96c4;
border: none;
}
.lf-secondary-btn-md {
color: #205081;
border: 1px solid #205081;
background-color: #FFFFFF;
}
.lf-secondary-btn-md:hover {
color: #1877b7;
border: 1px solid #2d96c4;
background-color: #FFFFFF;
}
/*.lf-secondary-btn-md:focus {*/
/* color: #2d96c4;*/
/* border: 1px solid #eff2f6;*/
/* background-color: #FFFFFF;*/
/* border-image: none;*/
/*}*/
p-confirmDialog.lf-confirm-dialog .ui-dialog.ui-confirmdialog {
min-width: 460px;
width: 460px;
min-height: 120px;
height: auto;
border-radius: 0px;
border: none;
top: 100px !important;
}
p-confirmDialog.lf-confirm-dialog .ui-dialog-titlebar.ui-widget-header {
background: transparent;
color: #205081;
padding: 0px;
}
p-confirmDialog.lf-confirm-dialog .ui-dialog.ui-widget .ui-dialog-titlebar .ui-dialog-title {
font-weight: 300;
font-size: 21px !important;
line-height: 26px;
}
.ui-dialog.ui-widget .ui-dialog-titlebar .ui-dialog-title {}
p-confirmDialog.lf-confirm-dialog .ui-dialog.ui-widget .ui-dialog-titlebar {
padding: 20px !important;
}
p-confirmDialog.lf-confirm-dialog .ui-dialog-titlebar-icon.ui-dialog-titlebar-close.ui-corner-all {
/*padding: 3px 1px 2px 1px !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;
padding: 2px 0px;
}
p-confirmDialog.lf-confirm-dialog .ui-confirmdialog.ui-dialog .ui-dialog-content {
/*padding: 0px 20px 20px 0px !important;*/
/*padding: 0px !important;*/
border-left-width: 0px !important;
/*padding: 0px 20px 20px auto !important;*/
/*padding-bottom: 20px;*/
padding-top: 0px !important;
padding-left: 20px !important;
padding-bottom: 20px !important;
}
p-confirmDialog.lf-confirm-dialog .ui-confirmdialog.ui-dialog-content.ui-confirmdialog-message {
padding: 0px 20px !important;
}
.ui-dialog-content.ui-widget-content {}
p-confirmDialog.lf-confirm-dialog .ui-confirmdialog.ui-dialog .ui-dialog-content {
padding: 0px 20px 20px 20px !important;
}
p-confirmDialog.lf-confirm-dialog .ui-dialog-content.ui-widget-content {
padding-bottom: 20px !important;
}
p-confirmDialog.lf-confirm-dialog .ui-dialog-footer {
/*padding: 0px !important;*/
padding: 20px !important;
}
p-confirmDialog.lf-confirm-dialog .ui-dialog-footer.ui-widget-content {
border: none;
}
/*Small propt small dialog box styling starts from here*/
.close.lf-small-prompt-close{
border-radius: 20px !important;
border: 1px solid #1d4f83 !important;
-o-border-image: none !important;
border-image: none !important;
color: #fff !important;
margin-left: 10px !important;
background-color: #1d4f83 !important;
margin: 0px !important;
opacity: 1;
font-weight: 400;
font-size: 15px !important;
padding: 0px 3px !important;
}
.lf-smallpromt-box .modal-dialog{
top: 100px;
min-width: 460px;
min-height: 120px;
border-radius: 0px;
}
.lf-smallpromt-box .modal-dialog .modal-content{
border-radius: 0px;
}
.lf-smallpromt-box .modal-dialog .modal-header{
padding: 20px 20px 20px 20px !important;
border-bottom: none !important;
background: none;
color: #205081;
}
.lf-smallpromt-box .modal-dialog .modal-header .modal-title{
font-weight: 300;
font-size: 21px;
color: #205081;
line-height: 26px;
}
.lf-smallpromt-box .modal-dialog .modal-content .modal-body{
font-weight: 400;
font-size: 15px;
color: #212121;
line-height: 21px;
padding: 20px;
padding-top: 0px;
}
<!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.1.0/resources/themes/omega/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.1.0/resources/primeng.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<!-- 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.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 bundles
'@angular/animations': 'npm:@angular/animations@4.2.6/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations@4.2.6/bundles/animations-browser.umd.js',
'@angular/core': 'npm:@angular/core@4.2.6/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@4.2.6/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@4.2.6/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@4.2.6/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.2.6/bundles/platform-browser-dynamic.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser@4.2.6/bundles/platform-browser-animations.umd.js',
'@angular/http': 'npm:@angular/http@4.2.6/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router@4.2.6/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@4.2.6/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade@4.2.6/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade@4.2.6/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.1.3'
},
// 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);
<!--<h2>PrimeNG Issue Template</h2>-->
<!--<p>Please create a test case and attach the link of the plunkr to your github issue report.</p>-->
<p-confirmDialog class="lf-confirm-dialog">
<p-footer>
<button type="button" class="lf-btn-prompt lf-secondary-btn-md lf-footer-btn-space" (click)="cd.reject()">Button</button>
<button type="button" class="lf-btn-prompt lf-primary-btn-md" (click)="cd.accept()">Button</button>
</p-footer>
</p-confirmDialog>
<!--<button type="button" (click)="confirm1()" pButton label="with icon"></button>-->
<!--<button type="button" (click)="confirm2()" pButton label="without icon"></button>-->
<!--<hr />-->
<h3>PrimeNG Confirmation Dialog as per LF UI Standards</h3>
<button type="button" class="lf-btn-md lf-primary-btn-md" (click)="confirm3()">Confirm Dialog</button>
<hr />
<h3>Small prompt (Bootstrap) as per lf standards</h3>
<button type="button" class="lf-btn-md lf-primary-btn-md" data-toggle="modal" data-target="#lf-rightpanel-1x">Small Prompt Box</button>
<div class="modal lf-smallpromt-box" id="lf-rightpanel-1x" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close lf-small-prompt-close" data-dismiss="modal">×</button>
<h4 class="modal-title">Right Side Panel - 1x</h4>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. There are many variations of passages of lorem lpsum available.
The majority have suffered alteration in some form, sed do eiusmod tempor.
</p>
</div>
<!--<div class="modal-footer lf-right-1x-panelFooter">-->
<!--</div>-->
</div>
</div>
</div>
# PrimeNG Issue Template
Please create a test case and attach the link of the plunkr to your github issue report.