Merge pull request #15425 from primefaces/demo-update-new

Demo update new

src/app/components/api/megamenuitem.ts

@@ -122,4 +122,8 @@ export interface MegaMenuItem {
     state?: {
         [k: string]: any;
     };
+    /**
+     * Optional
+     */
+    [key: string]: any;
 }

src/app/components/api/primengconfig.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
 import { Subject } from 'rxjs';
 import { FilterMatchMode } from './filtermatchmode';
 import { OverlayOptions } from './overlayoptions';
@@ -8,7 +8,7 @@ import { Translation } from './translation';
 export class PrimeNGConfig {
     ripple: boolean = false;
 
-    inputStyle: 'outlined' | 'filled' = 'outlined';
+    inputStyle = signal<'outlined' | 'filled'>('outlined');
 
     overlayOptions: OverlayOptions = {};
 

src/app/components/api/treenode.ts

@@ -75,4 +75,9 @@ export interface TreeNode<T = any> {
      * Mandatory unique key of the node.
      */
     key?: string;
+     /**
+     * Mandatory unique key of the node.
+     */
+    loading?: boolean;
+
 }

src/app/components/autocomplete/autocomplete.ts

@@ -104,7 +104,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
             <ul
                 *ngIf="multiple"
                 #multiContainer
-                [class]="multiContainerClass"
+                [ngClass]="multiContainerClass"
                 [tabindex]="-1"
                 role="listbox"
                 [attr.aria-orientation]="'horizontal'"
@@ -611,6 +611,11 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
      * @group Props
      */
     @Input({ transform: booleanAttribute }) focusOnHover: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @group Props
+     */
+    @Input() variant: 'filled' | 'outlined' = 'outlined';
     /**
      * Callback to invoke to search for suggestions.
      * @param {AutoCompleteCompleteEvent} event - Custom complete event.
@@ -809,21 +814,22 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
     }
 
     get multiContainerClass() {
-        return 'p-autocomplete-multiple-container p-component p-inputtext';
+        return { 'p-autocomplete-multiple-container p-component p-inputtext': true, 'p-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled' };
     }
 
     get panelClass() {
         return {
             'p-autocomplete-panel p-component': true,
-            'p-input-filled': this.config.inputStyle === 'filled',
+            'p-input-filled': this.config.inputStyle() === 'filled',
             'p-ripple-disabled': this.config.ripple === false
         };
     }
 
     get inputClass() {
         return {
             'p-autocomplete-input p-inputtext p-component': !this.multiple,
-            'p-autocomplete-dd-input': this.dropdown
+            'p-autocomplete-dd-input': this.dropdown,
+            'p-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled'
         };
     }
 

src/app/components/breadcrumb/breadcrumb.interface.ts

@@ -5,7 +5,18 @@ import { Breadcrumb } from './breadcrumb';
  * Defines valid templates in Breadcumb.
  * @group Templates
  */
+
 export interface BreadcumbTemplates {
+    /**
+     * Custom template of item.
+     */
+    item(context: {
+        /**
+         * Data of the item.
+         */
+        $implicit: MenuItem;
+    }): TemplateRef<{ $implicit: MenuItem }>;
+
     /**
      * Custom template of separator.
      */

src/app/components/breadcrumb/breadcrumb.ts

@@ -220,9 +220,11 @@ export class Breadcrumb implements AfterContentInit {
                 case 'separator':
                     this.separatorTemplate = item.template;
                     break;
+
                 case 'item':
                     this.itemTemplate = item.template;
                     break;
+
                 default:
                     this.itemTemplate = item.template;
                     break;

src/app/components/calendar/calendar.ts

@@ -93,7 +93,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
                     [disabled]="disabled"
                     [attr.tabindex]="tabindex"
                     [attr.inputmode]="touchUI ? 'off' : null"
-                    [ngClass]="'p-inputtext p-component'"
+                    [ngClass]="inputClass"
                     autocomplete="off"
                     pAutoFocus
                     [autofocus]="autofocus"
@@ -744,6 +744,11 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
      * @group Props
      */
     @Input({ transform: numberAttribute }) tabindex: number | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @group Props
+     */
+    @Input() variant: 'filled' | 'outlined' = 'outlined';
     /**
      * The minimum selectable date.
      * @group Props
@@ -908,6 +913,13 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
             this.createMonths(this.currentMonth, this.currentYear);
         }
     }
+    get inputClass() {
+        return {
+            'p-inputtext p-component': true,
+            'p-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled'
+        };
+    }
+
     /**
      * Callback to invoke on focus of input field.
      * @param {Event} event - browser event.

src/app/components/cascadeselect/cascadeselect.interface.ts

@@ -102,4 +102,8 @@ export interface CascadeSelectTemplates {
      * Custom option group icon template.
      */
     optiongroupicon(): TemplateRef<any>;
+    /**
+     * Custom loading icon template.
+     */
+    loadingicon(): TemplateRef<any>;
 }

src/app/components/cascadeselect/cascadeselect.ts

@@ -275,10 +275,21 @@ export class CascadeSelectSub implements OnInit {
         </ng-container>
 
         <div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [attr.data-pc-section]="'dropdownIcon'" [attr.aria-hidden]="true">
-            <ChevronDownIcon *ngIf="!triggerIconTemplate" [styleClass]="'p-cascadeselect-trigger-icon'" />
-            <span *ngIf="triggerIconTemplate" class="p-cascadeselect-trigger-icon">
-                <ng-template *ngTemplateOutlet="triggerIconTemplate"></ng-template>
-            </span>
+            <ng-container *ngIf="loading; else elseBlock">
+                <ng-container *ngIf="loadingIconTemplate">
+                    <ng-container *ngTemplateOutlet="loadingIconTemplate"></ng-container>
+                </ng-container>
+                <ng-container *ngIf="!loadingIconTemplate">
+                    <span *ngIf="loadingIcon" [ngClass]="'p-cascadeselect-trigger-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
+                    <span *ngIf="!loadingIcon" [class]="'p-cascadeselect-trigger-icon pi pi-spinner pi-spin'" aria-hidden="true"></span>
+                </ng-container>
+            </ng-container>
+            <ng-template #elseBlock>
+                <ChevronDownIcon *ngIf="!triggerIconTemplate" [styleClass]="'p-cascadeselect-trigger-icon'" />
+                <span *ngIf="triggerIconTemplate" class="p-cascadeselect-trigger-icon">
+                    <ng-template *ngTemplateOutlet="triggerIconTemplate"></ng-template>
+                </span>
+            </ng-template>
         </div>
         <span role="status" aria-live="polite" class="p-hidden-accessible">
             {{ searchResultMessageText }}
@@ -517,6 +528,21 @@ export class CascadeSelect implements OnInit, AfterContentInit {
         this._showTransitionOptions = val;
         console.warn('The showTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');
     }
+    /**
+     * Specifies the input variant of the component.
+     * @group Props
+     */
+    @Input() variant: 'filled' | 'outlined' = 'outlined';
+    /**
+     * Whether the dropdown is in loading state.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) loading: boolean | undefined = false;
+    /**
+     * Icon to display in loading state.
+     * @group Props
+     */
+    @Input() loadingIcon: string | undefined;
     /**
      * Transition options of the hide animation.
      * @group Props
@@ -615,6 +641,8 @@ export class CascadeSelect implements OnInit, AfterContentInit {
 
     triggerIconTemplate: Nullable<TemplateRef<any>>;
 
+    loadingIconTemplate: Nullable<TemplateRef<any>>;
+
     groupIconTemplate: Nullable<TemplateRef<any>>;
 
     clearIconTemplate: Nullable<TemplateRef<any>>;
@@ -637,6 +665,7 @@ export class CascadeSelect implements OnInit, AfterContentInit {
             'p-disabled': this.disabled,
             'p-focus': this.focused,
             'p-inputwrapper-filled': this.modelValue(),
+            'p-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled',
             'p-inputwrapper-focus': this.focused || this.overlayVisible,
             'p-overlay-open': this.overlayVisible
         };
@@ -770,7 +799,7 @@ export class CascadeSelect implements OnInit, AfterContentInit {
     }
 
     onInputKeyDown(event: KeyboardEvent) {
-        if (this.disabled) {
+        if (this.disabled || this.loading) {
             event.preventDefault();
 
             return;
@@ -1053,7 +1082,7 @@ export class CascadeSelect implements OnInit, AfterContentInit {
     }
 
     onContainerClick(event: MouseEvent) {
-        if (this.disabled) {
+        if (this.disabled || this.loading) {
             return;
         }
 
@@ -1303,6 +1332,10 @@ export class CascadeSelect implements OnInit, AfterContentInit {
                     this.triggerIconTemplate = item.template;
                     break;
 
+                case 'loadingicon':
+                    this.loadingIconTemplate = item.template;
+                    break;
+
                 case 'clearicon':
                     this.clearIconTemplate = item.template;
                     break;

src/app/components/checkbox/checkbox.ts

@@ -19,7 +19,7 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { PrimeTemplate, SharedModule } from 'primeng/api';
+import { PrimeTemplate, SharedModule, PrimeNGConfig } from 'primeng/api';
 import { AutoFocusModule } from 'primeng/autofocus';
 import { CheckIcon } from 'primeng/icons/check';
 import { Nullable } from 'primeng/ts-helpers';
@@ -40,7 +40,13 @@ export const CHECKBOX_VALUE_ACCESSOR: any = {
     template: `
         <div
             [ngStyle]="style"
-            [ngClass]="{ 'p-checkbox p-component': true, 'p-checkbox-checked': checked(), 'p-checkbox-disabled': disabled, 'p-checkbox-focused': focused }"
+            [ngClass]="{
+                'p-checkbox p-component': true,
+                'p-checkbox-checked': checked(),
+                'p-checkbox-disabled': disabled,
+                'p-checkbox-focused': focused,
+                'p-variant-filled': variant === 'filled' || config.inputStyle() === 'filled'
+            }"
             [class]="styleClass"
             [attr.data-pc-name]="'checkbox'"
             [attr.data-pc-section]="'root'"
@@ -203,6 +209,11 @@ export class Checkbox implements ControlValueAccessor {
      * @group Props
      */
     @Input() falseValue: any = false;
+    /**
+     * Specifies the input variant of the component.
+     * @group Props
+     */
+    @Input() variant: 'filled' | 'outlined' = 'outlined';
     /**
      * Callback to invoke on value change.
      * @param {CheckboxChangeEvent} event - Custom value change event.
@@ -236,7 +247,7 @@ export class Checkbox implements ControlValueAccessor {
 
     focused: boolean = false;
 
-    constructor(public cd: ChangeDetectorRef, private readonly injector: Injector) {}
+    constructor(public cd: ChangeDetectorRef, private readonly injector: Injector, public config: PrimeNGConfig) {}
 
     ngAfterContentInit() {
         this.templates.forEach((item) => {

src/app/components/chips/chips.ts

@@ -20,7 +20,7 @@ import {
     numberAttribute
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { PrimeTemplate, SharedModule } from 'primeng/api';
+import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api';
 import { AutoFocusModule } from 'primeng/autofocus';
 import { TimesIcon } from 'primeng/icons/times';
 import { TimesCircleIcon } from 'primeng/icons/timescircle';
@@ -56,7 +56,7 @@ export const CHIPS_VALUE_ACCESSOR: any = {
         >
             <ul
                 #container
-                [ngClass]="{ 'p-inputtext p-chips-multiple-container': true }"
+                [ngClass]="{ 'p-inputtext p-chips-multiple-container': true, 'p-variant-filled': variant === 'filled' || config.inputStyle() === 'filled' }"
                 tabindex="-1"
                 role="listbox"
                 [attr.aria-labelledby]="ariaLabelledBy"
@@ -233,6 +233,11 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
      * @group Props
      */
     @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @group Props
+     */
+    @Input() variant: 'filled' | 'outlined' = 'outlined';
     /**
      * Callback to invoke on chip add.
      * @param {ChipsAddEvent} event - Custom chip add event.
@@ -305,7 +310,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
         return this.max && this.value && this.max === this.value.length;
     }
 
-    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public cd: ChangeDetectorRef) {}
+    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
 
     ngAfterContentInit() {
         this.templates.forEach((item) => {

src/app/components/contextmenu/contextmenu.interface.ts

@@ -0,0 +1,23 @@
+import { TemplateRef } from '@angular/core';
+import { MenuItem } from '../api/menuitem';
+
+/**
+ * Defines valid templates in ContextMenu.
+ * @group Templates
+ */
+export interface ContextMenuTemplates {
+    /**
+     * Custom item template.
+     */
+    item(context: {
+        /**
+         * Item instance.
+         */
+        $implicit: MenuItem
+
+    }): TemplateRef<{ $implicit: MenuItem }>;
+    /**
+     * Custom template of submenuicon.
+     */
+    submenuicon(): TemplateRef<any>;
+}