Skip to content

Commit

Permalink
Merge pull request #14357 from primefaces/demo-update
Browse files Browse the repository at this point in the history 
Demo update
  • Loading branch information
@cetincakiroglu
cetincakiroglu authored Dec 13, 2023
2 parents b63c3ca + c8c387e commit 61b4fe1
Show file tree
Hide file tree
Showing 188 changed files with 5,918 additions and 1,954 deletions.
3 changes: 3 additions & 0 deletions angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,5 +118,8 @@
}
}
}
},
"cli": {
"analytics": false
}
}
10 changes: 10 additions & 0 deletions src/app/components/calendar/calendar.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,16 @@ export interface CalendarTemplates {
* Custom header template.
*/
header(): TemplateRef<any>;
/**
* Custom input icon template.
* @param {Object} context - input icon template params.
*/
inputIconTemplate(context: {
/**
* Click callback
*/
clickCallBack: () => void;
}): TemplateRef<{ clickCallBack: Function }>;
/**
* Custom previous icon template.
*/
Expand Down
29 changes: 26 additions & 3 deletions src/app/components/calendar/calendar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,19 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
@Component({
selector: 'p-calendar',
template: `
<span #container [ngClass]="{ 'p-calendar': true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-calendar-disabled': disabled, 'p-focus': focus || overlayVisible }" [ngStyle]="style" [class]="styleClass">
<span
#container
[ngClass]="{
'p-calendar': true,
'p-input-icon-right': showIcon && iconDisplay === 'input',
'p-calendar-w-btn': showIcon && iconDisplay === 'button',
'p-calendar-timeonly': timeOnly,
'p-calendar-disabled': disabled,
'p-focus': focus || overlayVisible
}"
[ngStyle]="style"
[class]="styleClass"
>
<ng-template [ngIf]="!inline">
<input
#inputfield
Expand Down Expand Up @@ -95,7 +107,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
[attr.aria-controls]="panelId"
pButton
pRipple
*ngIf="showIcon"
*ngIf="showIcon && iconDisplay === 'button'"
(click)="onButtonClick($event, inputfield)"
class="p-datepicker-trigger p-button-icon-only"
[disabled]="disabled"
Expand All @@ -107,6 +119,10 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
<ng-template *ngTemplateOutlet="triggerIconTemplate"></ng-template>
</ng-container>
</button>
<ng-container *ngIf="iconDisplay === 'input' && showIcon">
<CalendarIcon *ngIf="!inputIconTemplate" (click)="onButtonClick($event)" />
<ng-container *ngTemplateOutlet="inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
</ng-container>
</ng-template>
<div
#contentWrapper
Expand Down Expand Up @@ -442,6 +458,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
styleUrls: ['./calendar.css']
})
export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
@Input() iconDisplay: 'input' | 'button' = 'button';
/**
* Inline style of the component.
* @group Props
Expand Down Expand Up @@ -1048,6 +1065,8 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {

incrementIconTemplate: Nullable<TemplateRef<any>>;

inputIconTemplate: Nullable<TemplateRef<any>>;

_disabledDates!: Array<Date>;

_disabledDays!: Array<number>;
Expand Down Expand Up @@ -1156,6 +1175,10 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
this.headerTemplate = item.template;
break;

case 'inputicon':
this.inputIconTemplate = item.template;
break;

case 'previousicon':
this.previousIconTemplate = item.template;
break;
Expand Down Expand Up @@ -1884,7 +1907,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
this.onModelTouched();
}

onButtonClick(event: Event, inputfield: any) {
onButtonClick(event: Event, inputfield: any = this.inputfieldViewChild?.nativeElement) {
if (!this.overlayVisible) {
inputfield.focus();
this.showOverlay();
Expand Down
10 changes: 9 additions & 1 deletion src/app/components/confirmdialog/confirmdialog.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ export interface ConfirmDialogTemplates {
/**
* Custom template of message.
*/
message(): TemplateRef<any>;
message(context:{
$implicit?:any
}): TemplateRef<any>;
/**
* Custom template of icon.
*/
Expand All @@ -28,4 +30,10 @@ export interface ConfirmDialogTemplates {
* Custom template of accepticon.
*/
accepticon(): TemplateRef<any>;
/**
* Headless template.
*/
headless(context:{
$implicit?:any
}): TemplateRef<any>;
}
135 changes: 73 additions & 62 deletions src/app/components/confirmdialog/confirmdialog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,71 +56,76 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
[attr.aria-labelledby]="getAriaLabelledBy()"
[attr.aria-modal]="true"
>
<div class="p-dialog-header" *ngIf="headerTemplate">
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
</div>
<div class="p-dialog-header" *ngIf="!headerTemplate">
<span class="p-dialog-title" [id]="getAriaLabelledBy()" *ngIf="option('header')">{{ option('header') }}</span>
<div class="p-dialog-header-icons">
<button *ngIf="closable" type="button" role="button" [attr.aria-label]="closeAriaLabel" [ngClass]="{ 'p-dialog-header-icon p-dialog-header-close p-link': true }" (click)="close($event)" (keydown.enter)="close($event)">
<TimesIcon />
</button>
<ng-container *ngIf="headlessTemplate; else notHeadless">
<ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: confirmation }"></ng-container>
</ng-container>
<ng-template #notHeadless>
<div class="p-dialog-header" *ngIf="headerTemplate">
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
</div>
<div class="p-dialog-header" *ngIf="!headerTemplate">
<span class="p-dialog-title" [id]="getAriaLabelledBy()" *ngIf="option('header')">{{ option('header') }}</span>
<div class="p-dialog-header-icons">
<button *ngIf="closable" type="button" role="button" [attr.aria-label]="closeAriaLabel" [ngClass]="{ 'p-dialog-header-icon p-dialog-header-close p-link': true }" (click)="close($event)" (keydown.enter)="close($event)">
<TimesIcon />
</button>
</div>
</div>
</div>
<div #content class="p-dialog-content">
<i [ngClass]="'p-confirm-dialog-icon'" [class]="option('icon')" *ngIf="!iconTemplate && option('icon')"></i>
<ng-container *ngIf="iconTemplate">
<ng-template *ngTemplateOutlet="iconTemplate"></ng-template>
</ng-container>
<span class="p-confirm-dialog-message" *ngIf="!messageTemplate" [innerHTML]="option('message')"></span>
<ng-container *ngIf="messageTemplate">
<ng-template *ngTemplateOutlet="messageTemplate"></ng-template>
</ng-container>
</div>
<div class="p-dialog-footer" *ngIf="footer || footerTemplate">
<ng-content select="p-footer"></ng-content>
<ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
</div>
<div class="p-dialog-footer" *ngIf="!footer && !footerTemplate">
<button
type="button"
pRipple
pButton
[label]="rejectButtonLabel"
(click)="reject()"
[ngClass]="'p-confirm-dialog-reject'"
[class]="option('rejectButtonStyleClass')"
*ngIf="option('rejectVisible')"
[attr.aria-label]="rejectAriaLabel"
>
<ng-container *ngIf="!rejectIconTemplate">
<i *ngIf="option('rejectIcon')" [class]="option('rejectIcon')"></i>
<TimesIcon *ngIf="!option('rejectIcon')" [styleClass]="'p-button-icon-left'" />
<div #content class="p-dialog-content">
<i [ngClass]="'p-confirm-dialog-icon'" [class]="option('icon')" *ngIf="!iconTemplate && option('icon')"></i>
<ng-container *ngIf="iconTemplate">
<ng-template *ngTemplateOutlet="iconTemplate"></ng-template>
</ng-container>
<span *ngIf="rejectIconTemplate" class="p-button-icon-left">
<ng-template *ngTemplateOutlet="rejectIconTemplate"></ng-template>
</span>
</button>
<button
type="button"
pRipple
pButton
[label]="acceptButtonLabel"
(click)="accept()"
[ngClass]="'p-confirm-dialog-accept'"
[class]="option('acceptButtonStyleClass')"
*ngIf="option('acceptVisible')"
[attr.aria-label]="acceptAriaLabel"
>
<ng-container *ngIf="!acceptIconTemplate">
<i *ngIf="option('acceptIcon')" [class]="option('acceptIcon')"></i>
<CheckIcon *ngIf="!option('acceptIcon')" [styleClass]="'p-button-icon-left'" />
<span class="p-confirm-dialog-message" *ngIf="!messageTemplate" [innerHTML]="option('message')"></span>
<ng-container *ngIf="messageTemplate">
<ng-template *ngTemplateOutlet="messageTemplate; context: { $implicit: confirmation }"></ng-template>
</ng-container>
<span *ngIf="acceptIconTemplate" class="p-button-icon-left">
<ng-template *ngTemplateOutlet="acceptIconTemplate"></ng-template>
</span>
</button>
</div>
</div>
<div class="p-dialog-footer" *ngIf="footer || footerTemplate">
<ng-content select="p-footer"></ng-content>
<ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
</div>
<div class="p-dialog-footer" *ngIf="!footer && !footerTemplate">
<button
type="button"
pRipple
pButton
[label]="rejectButtonLabel"
(click)="reject()"
[ngClass]="'p-confirm-dialog-reject'"
[class]="option('rejectButtonStyleClass')"
*ngIf="option('rejectVisible')"
[attr.aria-label]="rejectAriaLabel"
>
<ng-container *ngIf="!rejectIconTemplate">
<i *ngIf="option('rejectIcon')" [class]="option('rejectIcon')"></i>
<TimesIcon *ngIf="!option('rejectIcon')" [styleClass]="'p-button-icon-left'" />
</ng-container>
<span *ngIf="rejectIconTemplate" class="p-button-icon-left">
<ng-template *ngTemplateOutlet="rejectIconTemplate"></ng-template>
</span>
</button>
<button
type="button"
pRipple
pButton
[label]="acceptButtonLabel"
(click)="accept()"
[ngClass]="'p-confirm-dialog-accept'"
[class]="option('acceptButtonStyleClass')"
*ngIf="option('acceptVisible')"
[attr.aria-label]="acceptAriaLabel"
>
<ng-container *ngIf="!acceptIconTemplate">
<i *ngIf="option('acceptIcon')" [class]="option('acceptIcon')"></i>
<CheckIcon *ngIf="!option('acceptIcon')" [styleClass]="'p-button-icon-left'" />
</ng-container>
<span *ngIf="acceptIconTemplate" class="p-button-icon-left">
<ng-template *ngTemplateOutlet="acceptIconTemplate"></ng-template>
</span>
</button>
</div>
</ng-template>
</div>
</div>
`,
Expand Down Expand Up @@ -377,6 +382,10 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
case 'accepticon':
this.acceptIconTemplate = item.template;
break;

case 'headless':
this.headlessTemplate = item.template;
break;
}
});
}
Expand All @@ -393,6 +402,8 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {

iconTemplate: Nullable<TemplateRef<any>>;

headlessTemplate: Nullable<TemplateRef<any>>;

confirmation: Nullable<Confirmation>;

_visible: boolean | undefined;
Expand Down
12 changes: 12 additions & 0 deletions src/app/components/confirmpopup/confirmpopup.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ import { TemplateRef } from '@angular/core';
* @group Templates
*/
export interface ConfirmPopupTemplates {
/**
* Custom content template.
*/
content(context:{
$implicit?:any
}): TemplateRef<any>;
/**
* Custom template of rejecticon.
*/
Expand All @@ -13,4 +19,10 @@ export interface ConfirmPopupTemplates {
* Custom template of accepticon.
*/
accepticon(): TemplateRef<any>;
/**
* Headless template.
*/
headless(context:{
$implicit?:any
}): TemplateRef<any>;
}
28 changes: 25 additions & 3 deletions src/app/components/confirmpopup/confirmpopup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,18 @@ import { Subscription } from 'rxjs';
(@animation.start)="onAnimationStart($event)"
(@animation.done)="onAnimationEnd($event)"
>
<div #content class="p-confirm-popup-content">
<i [ngClass]="'p-confirm-popup-icon'" [class]="confirmation?.icon" *ngIf="confirmation?.icon"></i>
<span class="p-confirm-popup-message">{{ confirmation?.message }}</span>
<ng-container *ngIf="headlessTemplate; else notHeadless">
<ng-container *ngTemplateOutlet="headlessTemplate; context:{$implicit:confirmation}"></ng-container>
</ng-container>
<ng-template #notHeadless>
<div #content class="p-confirm-popup-content">
<ng-container *ngIf="contentTemplate; else withoutContentTemplate">
<ng-container *ngTemplateOutlet="contentTemplate; context:{$implicit:confirmation}"></ng-container>
</ng-container>
<ng-template #withoutContentTemplate>
<i [ngClass]="'p-confirm-popup-icon'" [class]="confirmation?.icon" *ngIf="confirmation?.icon"></i>
<span class="p-confirm-popup-message">{{ confirmation?.message }}</span>
</ng-template>
</div>
<div class="p-confirm-popup-footer">
<button
Expand Down Expand Up @@ -74,6 +83,7 @@ import { Subscription } from 'rxjs';
<ng-template #accepticon *ngTemplateOutlet="acceptIconTemplate"></ng-template>
</button>
</div>
</ng-template>
</div>
`,
animations: [
Expand Down Expand Up @@ -164,10 +174,14 @@ export class ConfirmPopup implements AfterContentInit, OnDestroy {

confirmation: Nullable<Confirmation>;

contentTemplate: Nullable<TemplateRef<any>>;

acceptIconTemplate: Nullable<TemplateRef<any>>;

rejectIconTemplate: Nullable<TemplateRef<any>>;

headlessTemplate: Nullable<TemplateRef<any>>;

_visible: boolean | undefined;

documentClickListener: VoidListener;
Expand Down Expand Up @@ -214,13 +228,21 @@ export class ConfirmPopup implements AfterContentInit, OnDestroy {
ngAfterContentInit() {
this.templates?.forEach((item) => {
switch (item.getType()) {
case 'content':
this.contentTemplate = item.template;
break;

case 'rejecticon':
this.rejectIconTemplate = item.template;
break;

case 'accepticon':
this.acceptIconTemplate = item.template;
break;

case 'headless':
this.headlessTemplate = item.template;
break;
}
});
}
Expand Down
Loading

0 comments on commit 61b4fe1

Please sign in to comment.