Merge branch 'master' of https://github.com/primefaces/primeng

primefaces · Dec 13, 2023 · 5cfb22f · 5cfb22f
2 parents e8730ad + 61b4fe1
commit 5cfb22f
Show file tree

Hide file tree

Showing 195 changed files with 6,079 additions and 2,306 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts
@@ -8,6 +8,7 @@ import {
     Component,
     computed,
     ContentChildren,
+    effect,
     ElementRef,
     EventEmitter,
     forwardRef,
@@ -734,7 +735,14 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
 
     focused: boolean = false;
 
-    filled: number | boolean | undefined;
+    _filled: boolean;
+
+    get filled() {
+        return this._filled;
+    }
+    set filled(value: any) {
+        this._filled = value;
+    }
 
     loading: Nullable<boolean>;
 
@@ -758,7 +766,6 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
 
     inputValue = computed(() => {
         const modelValue = this.modelValue();
-        this.filled = ObjectUtils.isNotEmpty(this.modelValue());
         if (modelValue) {
             if (typeof modelValue === 'object') {
                 const label = this.getOptionLabel(modelValue);
@@ -787,7 +794,6 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
             'p-focus': this.focused,
             'p-autocomplete-dd': this.dropdown,
             'p-autocomplete-multiple': this.multiple,
-            'p-inputwrapper-filled': this.modelValue() || ObjectUtils.isNotEmpty(this.inputValue),
             'p-inputwrapper-focus': this.focused,
             'p-overlay-open': this.overlayVisible
         };
@@ -844,7 +850,11 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
         return !this.virtualScroll;
     }
 
-    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public config: PrimeNGConfig, public overlayService: OverlayService, private zone: NgZone) {}
+    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public config: PrimeNGConfig, public overlayService: OverlayService, private zone: NgZone) {
+        effect(() => {
+            this.filled = ObjectUtils.isNotEmpty(this.modelValue());
+        });
+    }
 
     ngOnInit() {
         this.id = this.id || UniqueComponentId();
@@ -1517,7 +1527,6 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
 
     writeValue(value: any): void {
         this.value = value;
-        this.filled = this.value && this.value.length ? true : false;
         this.modelValue.set(value);
         this.updateInputValue();
         this.cd.markForCheck();

diff --git a/src/app/components/calendar/calendar.interface.ts b/src/app/components/calendar/calendar.interface.ts
@@ -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.
      */

diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts
@@ -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
@@ -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"
@@ -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
@@ -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
@@ -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>;
@@ -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;
@@ -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();

diff --git a/src/app/components/confirmdialog/confirmdialog.interface.ts b/src/app/components/confirmdialog/confirmdialog.interface.ts
@@ -15,7 +15,9 @@ export interface ConfirmDialogTemplates {
     /**
      * Custom template of message.
      */
-    message(): TemplateRef<any>;
+    message(context:{
+        $implicit?:any
+    }): TemplateRef<any>;
     /**
      * Custom template of icon.
      */
@@ -28,4 +30,10 @@ export interface ConfirmDialogTemplates {
      * Custom template of accepticon.
      */
     accepticon(): TemplateRef<any>;
+    /**
+     * Headless template.
+     */
+    headless(context:{
+        $implicit?:any
+    }): TemplateRef<any>;
 }
diff --git a/src/app/components/confirmdialog/confirmdialog.ts b/src/app/components/confirmdialog/confirmdialog.ts
@@ -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>
     `,
@@ -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;
             }
         });
     }
@@ -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;

diff --git a/src/app/components/confirmpopup/confirmpopup.interface.ts b/src/app/components/confirmpopup/confirmpopup.interface.ts
@@ -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.
      */
@@ -13,4 +19,10 @@ export interface ConfirmPopupTemplates {
      * Custom template of accepticon.
      */
     accepticon(): TemplateRef<any>;
+    /**
+     * Headless template.
+     */
+    headless(context:{
+        $implicit?:any
+    }): TemplateRef<any>;
 }