primeng 17.0.0-rc.1 → 17.1.0

package/resources/themes/tailwind-light/theme.css

@@ -897,6 +897,10 @@
     margin-left: 0.5rem;
   }
 
+  p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
+    border-color: #f0a9a7;
+  }
+
   .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
     border-color: #d4d4d8;
   }
@@ -1088,6 +1092,10 @@
     background-color: transparent;
   }
 
+  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
+    border-color: #f0a9a7;
+  }
+
   .p-inputgroup-addon {
     background: #fafafa;
     color: #71717a;
@@ -1232,7 +1240,7 @@
     background: #4338ca;
   }
 
-  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
+  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider {
     border-color: #f0a9a7;
   }
 

package/resources/themes/vela-blue/theme.css

@@ -861,6 +861,10 @@
     margin-left: 0.5rem;
   }
 
+  p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
+    border-color: #ef9a9a;
+  }
+
   .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
     border-color: #64B5F6;
   }
@@ -1052,6 +1056,10 @@
     background-color: transparent;
   }
 
+  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
+    border-color: #ef9a9a;
+  }
+
   .p-inputgroup-addon {
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.6);
@@ -1196,7 +1204,7 @@
     background: #43a5f4;
   }
 
-  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
+  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider {
     border-color: #ef9a9a;
   }
 

package/resources/themes/vela-green/theme.css

@@ -861,6 +861,10 @@
     margin-left: 0.5rem;
   }
 
+  p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
+    border-color: #ef9a9a;
+  }
+
   .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
     border-color: #81C784;
   }
@@ -1052,6 +1056,10 @@
     background-color: transparent;
   }
 
+  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
+    border-color: #ef9a9a;
+  }
+
   .p-inputgroup-addon {
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.6);
@@ -1196,7 +1204,7 @@
     background: #6abd6e;
   }
 
-  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
+  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider {
     border-color: #ef9a9a;
   }
 

package/resources/themes/vela-orange/theme.css

@@ -861,6 +861,10 @@
     margin-left: 0.5rem;
   }
 
+  p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
+    border-color: #ef9a9a;
+  }
+
   .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
     border-color: #FFD54F;
   }
@@ -1052,6 +1056,10 @@
     background-color: transparent;
   }
 
+  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
+    border-color: #ef9a9a;
+  }
+
   .p-inputgroup-addon {
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.6);
@@ -1196,7 +1204,7 @@
     background: #ffcd2e;
   }
 
-  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
+  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider {
     border-color: #ef9a9a;
   }
 

package/resources/themes/vela-purple/theme.css

@@ -861,6 +861,10 @@
     margin-left: 0.5rem;
   }
 
+  p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
+    border-color: #ef9a9a;
+  }
+
   .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
     border-color: #BA68C8;
   }
@@ -1052,6 +1056,10 @@
     background-color: transparent;
   }
 
+  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
+    border-color: #ef9a9a;
+  }
+
   .p-inputgroup-addon {
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.6);
@@ -1196,7 +1204,7 @@
     background: #b052c0;
   }
 
-  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
+  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider {
     border-color: #ef9a9a;
   }
 

package/resources/themes/viva-dark/theme.css

@@ -891,6 +891,10 @@
     margin-left: 0.5rem;
   }
 
+  p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
+    border-color: #f78c79;
+  }
+
   .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
     border-color: #2d3e44;
   }
@@ -1082,6 +1086,10 @@
     background-color: transparent;
   }
 
+  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
+    border-color: #f78c79;
+  }
+
   .p-inputgroup-addon {
     background: #161d21;
     color: rgba(255, 255, 255, 0.6);
@@ -1226,7 +1234,7 @@
     background: #8fa0e2;
   }
 
-  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
+  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider {
     border-color: #f78c79;
   }
 

package/resources/themes/viva-light/theme.css

@@ -892,6 +892,10 @@
     margin-left: 0.5rem;
   }
 
+  p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
+    border-color: #f88c79;
+  }
+
   .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
     border-color: #cecece;
   }
@@ -1083,6 +1087,10 @@
     background-color: transparent;
   }
 
+  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
+    border-color: #f88c79;
+  }
+
   .p-inputgroup-addon {
     background: #f5f5f5;
     color: #898989;
@@ -1227,7 +1235,7 @@
     background: #4868d1;
   }
 
-  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
+  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider {
     border-color: #f88c79;
   }
 

package/sidebar/sidebar.d.ts

@@ -127,6 +127,7 @@ export declare class Sidebar implements AfterViewInit, AfterContentInit, OnDestr
     headerTemplate: Nullable<TemplateRef<any>>;
     footerTemplate: Nullable<TemplateRef<any>>;
     closeIconTemplate: Nullable<TemplateRef<any>>;
+    headlessTemplate: Nullable<TemplateRef<any>>;
     constructor(document: Document, el: ElementRef, renderer: Renderer2, cd: ChangeDetectorRef, config: PrimeNGConfig);
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;

package/sidebar/sidebar.interface.d.ts

@@ -20,4 +20,8 @@ export interface SidebarTemplates {
      * Custom template of closeicon.
      */
     closeicon(): TemplateRef<any>;
+    /**
+     * Headless template.
+     */
+    headless(): TemplateRef<any>;
 }

package/table/table.d.ts

@@ -5,7 +5,7 @@ import { ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { Scroller } from 'primeng/scroller';
 import { ScrollerOptions } from 'primeng/api';
 import { Subscription } from 'rxjs';
-import { TableColResizeEvent, TableColumnReorderEvent, TableContextMenuSelectEvent, TableEditCancelEvent, TableEditCompleteEvent, TableEditInitEvent, TableFilterEvent, TableHeaderCheckboxToggleEvent, TableLazyLoadEvent, TablePageEvent, TableRowCollapseEvent, TableRowExpandEvent, TableRowReorderEvent, TableRowSelectEvent, TableRowUnSelectEvent, TableSelectAllChangeEvent } from './table.interface';
+import { ExportCSVOptions, TableColResizeEvent, TableColumnReorderEvent, TableContextMenuSelectEvent, TableEditCancelEvent, TableEditCompleteEvent, TableEditInitEvent, TableFilterEvent, TableHeaderCheckboxToggleEvent, TableLazyLoadEvent, TablePageEvent, TableRowCollapseEvent, TableRowExpandEvent, TableRowReorderEvent, TableRowSelectEvent, TableRowUnSelectEvent, TableSelectAllChangeEvent } from './table.interface';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
@@ -793,10 +793,10 @@ export declare class Table implements OnInit, AfterViewInit, AfterContentInit, B
     getExportHeader(column: any): any;
     /**
      * Data export method.
-     * @param {Object} object - Export options.
+     * @param {ExportCSVOptions} object - Export options.
      * @group Method
      */
-    exportCSV(options?: any): void;
+    exportCSV(options?: ExportCSVOptions): void;
     onLazyItemLoad(event: LazyLoadMeta): void;
     /**
      * Resets scroll to top.
@@ -1315,6 +1315,20 @@ export declare class ColumnFilter implements AfterContentInit {
     overlayEventListener: any;
     private window;
     overlayId: any;
+    get fieldConstraints(): FilterMetadata[] | undefined | null;
+    get showRemoveIcon(): boolean;
+    get showMenuButton(): boolean;
+    get isShowOperator(): boolean;
+    get isShowAddConstraint(): boolean | undefined | null;
+    get applyButtonLabel(): string;
+    get clearButtonLabel(): string;
+    get addRuleButtonLabel(): string;
+    get removeRuleButtonLabel(): string;
+    get noFilterLabel(): string;
+    get filterMenuButtonAriaLabel(): string;
+    get removeRuleButtonAriaLabel(): string;
+    get filterOperatorAriaLabel(): string;
+    get filterConstraintAriaLabel(): string;
     constructor(document: Document, el: ElementRef, dt: Table, renderer: Renderer2, config: PrimeNGConfig, overlayService: OverlayService, cd: ChangeDetectorRef);
     ngOnInit(): void;
     generateMatchModeOptions(): void;
@@ -1341,16 +1355,6 @@ export declare class ColumnFilter implements AfterContentInit {
     getDefaultMatchMode(): string;
     getDefaultOperator(): string | undefined;
     hasRowFilter(): boolean;
-    get fieldConstraints(): FilterMetadata[] | undefined | null;
-    get showRemoveIcon(): boolean;
-    get showMenuButton(): boolean;
-    get isShowOperator(): boolean;
-    get isShowAddConstraint(): boolean | undefined | null;
-    get applyButtonLabel(): string;
-    get clearButtonLabel(): string;
-    get addRuleButtonLabel(): string;
-    get removeRuleButtonLabel(): string;
-    get noFilterLabel(): string;
     hasFilter(): boolean;
     isOutsideClicked(event: any): boolean;
     bindDocumentClickListener(): void;

package/table/table.interface.d.ts

@@ -258,6 +258,19 @@ export interface TableSelectAllChangeEvent {
      */
     checked: boolean;
 }
+/**
+ * Custom CSV export options.
+ */
+export interface ExportCSVOptions {
+    /**
+     * Boolean value determining whether to export all selected values.
+     */
+    selectionOnly?: boolean;
+    /**
+     * Boolean value determining whether to export all values.
+     */
+    allValues?: boolean;
+}
 /**
  * Defines valid templates in Table.
  * @group Templates

package/tieredmenu/tieredmenu.interface.d.ts

@@ -4,6 +4,22 @@ import { TemplateRef } from '@angular/core';
  * @group Templates
  */
 export interface TieredMenuTemplates {
+    /**
+     * Custom template of item.
+     */
+    item(context: {
+        /**
+         * Item instance.
+         */
+        $implicit: any;
+        /**
+         * Submenu control of the item.
+         */
+        hasSubmenu: boolean;
+    }): TemplateRef<{
+        $implicit: any;
+        hasSubmenu: boolean;
+    }>;
     /**
      * Custom template of submenuicon.
      */

package/toast/toast.d.ts

@@ -14,10 +14,12 @@ import * as i7 from "primeng/icons/times";
 import * as i8 from "primeng/api";
 export declare class ToastItem implements AfterViewInit, OnDestroy {
     private zone;
+    private config;
     message: Message | null | undefined;
     index: number | null | undefined;
     life: number;
     template: TemplateRef<any> | undefined;
+    headlessTemplate: TemplateRef<any> | undefined;
     showTransformOptions: string | undefined;
     hideTransformOptions: string | undefined;
     showTransitionOptions: string | undefined;
@@ -25,16 +27,17 @@ export declare class ToastItem implements AfterViewInit, OnDestroy {
     onClose: EventEmitter<ToastItemCloseEvent>;
     containerViewChild: ElementRef | undefined;
     timeout: any;
-    constructor(zone: NgZone);
+    constructor(zone: NgZone, config: PrimeNGConfig);
     ngAfterViewInit(): void;
     initTimeout(): void;
     clearTimeout(): void;
     onMouseEnter(): void;
     onMouseLeave(): void;
     onCloseIconClick(event: Event): void;
+    get closeAriaLabel(): string;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToastItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToastItem, "p-toastItem", never, { "message": { "alias": "message"; "required": false; }; "index": { "alias": "index"; "required": false; }; "life": { "alias": "life"; "required": false; }; "template": { "alias": "template"; "required": false; }; "showTransformOptions": { "alias": "showTransformOptions"; "required": false; }; "hideTransformOptions": { "alias": "hideTransformOptions"; "required": false; }; "showTransitionOptions": { "alias": "showTransitionOptions"; "required": false; }; "hideTransitionOptions": { "alias": "hideTransitionOptions"; "required": false; }; }, { "onClose": "onClose"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToastItem, "p-toastItem", never, { "message": { "alias": "message"; "required": false; }; "index": { "alias": "index"; "required": false; }; "life": { "alias": "life"; "required": false; }; "template": { "alias": "template"; "required": false; }; "headlessTemplate": { "alias": "headlessTemplate"; "required": false; }; "showTransformOptions": { "alias": "showTransformOptions"; "required": false; }; "hideTransformOptions": { "alias": "hideTransformOptions"; "required": false; }; "showTransitionOptions": { "alias": "showTransitionOptions"; "required": false; }; "hideTransitionOptions": { "alias": "hideTransitionOptions"; "required": false; }; }, { "onClose": "onClose"; }, never, never, false, never>;
 }
 /**
  * Toast is used to display messages in an overlay.
@@ -134,6 +137,7 @@ export declare class Toast implements OnInit, AfterContentInit, OnDestroy {
     messages: Message[] | null | undefined;
     messagesArchieve: Message[] | undefined;
     template: TemplateRef<any> | undefined;
+    headlessTemplate: TemplateRef<any> | undefined;
     _position: ToastPositionType;
     constructor(document: Document, renderer: Renderer2, messageService: MessageService, cd: ChangeDetectorRef, config: PrimeNGConfig);
     styleElement: any;

package/toast/toast.interface.d.ts

@@ -16,6 +16,17 @@ export interface ToastTemplates {
     }): TemplateRef<{
         $implicit: any;
     }>;
+    /**
+     * Headless template.
+     */
+    headless(context: {
+        /**
+         * Data of the message.
+         */
+        $implicit: any;
+    }): TemplateRef<{
+        $implicit: any;
+    }>;
 }
 /**
  * Custom close event.

package/togglebutton/togglebutton.d.ts

@@ -1,9 +1,12 @@
-import { ChangeDetectorRef, EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, QueryList, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { ToggleButtonChangeEvent } from './togglebutton.interface';
+import { Nullable } from 'primeng/ts-helpers';
+import { PrimeTemplate } from 'primeng/api';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "primeng/ripple";
+import * as i3 from "primeng/api";
 export declare const TOGGLEBUTTON_VALUE_ACCESSOR: any;
 /**
  * ToggleButton is used to select a boolean value using a button.
@@ -77,10 +80,13 @@ export declare class ToggleButton implements ControlValueAccessor {
      * @group Emits
      */
     onChange: EventEmitter<ToggleButtonChangeEvent>;
+    templates: QueryList<PrimeTemplate>;
+    iconTemplate: Nullable<TemplateRef<any>>;
     checked: boolean;
     onModelChange: Function;
     onModelTouched: Function;
     constructor(cd: ChangeDetectorRef);
+    ngAfterContentInit(): void;
     toggle(event: Event): void;
     onKeyDown(event: KeyboardEvent): void;
     onBlur(): void;
@@ -91,10 +97,10 @@ export declare class ToggleButton implements ControlValueAccessor {
     get hasOnLabel(): boolean;
     get hasOffLabel(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToggleButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleButton, "p-toggleButton", never, { "onLabel": { "alias": "onLabel"; "required": false; }; "offLabel": { "alias": "offLabel"; "required": false; }; "onIcon": { "alias": "onIcon"; "required": false; }; "offIcon": { "alias": "offIcon"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "iconPos": { "alias": "iconPos"; "required": false; }; }, { "onChange": "onChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleButton, "p-toggleButton", never, { "onLabel": { "alias": "onLabel"; "required": false; }; "offLabel": { "alias": "offLabel"; "required": false; }; "onIcon": { "alias": "onIcon"; "required": false; }; "offIcon": { "alias": "offIcon"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "iconPos": { "alias": "iconPos"; "required": false; }; }, { "onChange": "onChange"; }, ["templates"], never, false, never>;
 }
 export declare class ToggleButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ToggleButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ToggleButtonModule, [typeof ToggleButton], [typeof i1.CommonModule, typeof i2.RippleModule], [typeof ToggleButton]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ToggleButtonModule, [typeof ToggleButton], [typeof i1.CommonModule, typeof i2.RippleModule, typeof i3.SharedModule], [typeof ToggleButton, typeof i3.SharedModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ToggleButtonModule>;
 }

package/togglebutton/togglebutton.interface.d.ts

@@ -1,3 +1,4 @@
+import { TemplateRef } from '@angular/core';
 /**
  * Custom change event.
  * @see {@link ToggleButton.onChange}
@@ -13,3 +14,21 @@ export interface ToggleButtonChangeEvent {
      */
     checked: boolean | undefined;
 }
+/**
+ * Defines valid templates in ToggleButton.
+ * @group Templates
+ */
+export interface ToggleButtonTemplates {
+    /**
+     * Custom icon template.
+     * @param {boolean} context - checked state as boolean.
+     */
+    icon(context: {
+        /**
+         * Checked.
+         */
+        $implicit: boolean;
+    }): TemplateRef<{
+        $implicit: boolean;
+    }>;
+}

package/treetable/treetable.d.ts

@@ -1,5 +1,5 @@
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
-import { BlockableUI, FilterMetadata, FilterService, PrimeTemplate, ScrollerOptions, SortMeta, TreeNode, TreeTableNode } from 'primeng/api';
+import { BlockableUI, FilterMetadata, FilterService, PrimeNGConfig, PrimeTemplate, ScrollerOptions, SortMeta, TreeNode, TreeTableNode } from 'primeng/api';
 import { Scroller } from 'primeng/scroller';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { Subscription } from 'rxjs';
@@ -913,8 +913,10 @@ export declare class TTRow {
 }
 export declare class TreeTableToggler {
     tt: TreeTable;
+    private config;
     rowNode: any;
-    constructor(tt: TreeTable);
+    constructor(tt: TreeTable, config: PrimeNGConfig);
+    get toggleButtonAriaLabel(): string;
     onClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TreeTableToggler, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TreeTableToggler, "p-treeTableToggler", never, { "rowNode": { "alias": "rowNode"; "required": false; }; }, {}, never, never, false, never>;

package/resources/components/tristatecheckbox/tristatecheckbox.css

@@ -1,5 +0,0 @@
-@layer primeng {
-    .p-tristatecheckbox-label {
-        cursor: pointer;
-    }
-}