+
{{ label() || 'empty' }}
@@ -263,11 +275,17 @@ export class MultiSelectItem {
[attr.aria-checked]="allSelected()"
[ngClass]="{ 'p-highlight': allSelected(), 'p-focus': headerCheckboxFocus, 'p-disabled': disabled || toggleAllDisabled }"
>
-
-
+
+
+
+
@@ -349,6 +367,7 @@ export class MultiSelectItem {
[disabled]="isOptionDisabled(option)"
[template]="itemTemplate"
[checkIconTemplate]="checkIconTemplate"
+ [itemCheckboxIconTemplate]="itemCheckboxIconTemplate"
[itemSize]="scrollerOptions.itemSize"
[focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
[ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
@@ -921,6 +940,8 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
_selectionLimit: number | undefined;
+ _disableTooltip = false;
+
value: any[];
public _filteredOptions: any[] | undefined | null;
@@ -965,6 +986,10 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
dropdownIconTemplate: TemplateRef | undefined;
+ itemCheckboxIconTemplate: TemplateRef | undefined;
+
+ headerCheckboxIconTemplate: TemplateRef | undefined;
+
public headerCheckboxFocus: boolean | undefined;
filterOptions: MultiSelectFilterOptions | undefined;
@@ -1196,6 +1221,11 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
case 'checkicon':
this.checkIconTemplate = item.template;
+ console.warn('checkicon is deprecated and will removed in v18. Use itemcheckboxicon or headercheckboxicon templates instead.');
+ break;
+
+ case 'headercheckboxicon':
+ this.headerCheckboxIconTemplate = item.template;
break;
case 'filtericon':
@@ -1218,6 +1248,10 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
this.dropdownIconTemplate = item.template;
break;
+ case 'itemcheckboxicon':
+ this.itemCheckboxIconTemplate = item.template;
+ break;
+
default:
this.itemTemplate = item.template;
break;
@@ -1872,6 +1906,11 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
}
}
+ if (this.partialSelected()) {
+ this.selectedOptions = null;
+ this.cd.markForCheck();
+ }
+
this.onChange.emit({ originalEvent: event, value: this.value });
DomHandler.focus(this.headerCheckboxViewChild?.nativeElement);
this.headerCheckboxFocus = true;
@@ -1932,6 +1971,10 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
return this.selectAll !== null ? this.selectAll : ObjectUtils.isNotEmpty(this.visibleOptions()) && this.visibleOptions().every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option));
}
+ partialSelected() {
+ return this.selectedOptions && this.selectedOptions.length > 0 && this.selectedOptions.length < this.options.length;
+ }
+
/**
* Displays the panel.
* @group Method
@@ -2025,10 +2068,15 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
this.updateModel(null, event);
this.selectedOptions = null;
this.onClear.emit();
+ this._disableTooltip = true;
event.stopPropagation();
}
+ labelContainerMouseLeave() {
+ if (this._disableTooltip) this._disableTooltip = false;
+ }
+
removeOption(optionValue, event) {
let value = this.modelValue().filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey()));
@@ -2160,7 +2208,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
}
@NgModule({
- imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, AutoFocusModule, CheckIcon, SearchIcon, TimesCircleIcon, TimesIcon, ChevronDownIcon, CheckIcon],
+ imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, AutoFocusModule, CheckIcon, SearchIcon, TimesCircleIcon, TimesIcon, ChevronDownIcon, CheckIcon, MinusIcon],
exports: [MultiSelect, OverlayModule, SharedModule, ScrollerModule],
declarations: [MultiSelect, MultiSelectItem]
})
diff --git a/src/app/components/overlaypanel/overlaypanel.ts b/src/app/components/overlaypanel/overlaypanel.ts
index d272d24637a..7c198fc2482 100755
--- a/src/app/components/overlaypanel/overlaypanel.ts
+++ b/src/app/components/overlaypanel/overlaypanel.ts
@@ -340,7 +340,7 @@ export class OverlayPanel implements AfterContentInit, OnDestroy {
ZIndexUtils.set('overlay', this.container, this.baseZIndex + this.config.zIndex.overlay);
}
- DomHandler.absolutePosition(this.container, this.target);
+ DomHandler.absolutePosition(this.container, this.target, false);
const containerOffset = DomHandler.getOffset(this.container);
const targetOffset = DomHandler.getOffset(this.target);
diff --git a/src/app/components/package.json b/src/app/components/package.json
index c84b358ef67..4418e8a2d97 100644
--- a/src/app/components/package.json
+++ b/src/app/components/package.json
@@ -1,6 +1,6 @@
{
"name": "primeng",
- "version": "17.14.1",
+ "version": "17.15.0",
"repository": {
"type": "git",
"url": "https://github.com/primefaces/primeng"
diff --git a/src/app/components/speeddial/speeddial.css b/src/app/components/speeddial/speeddial.css
index f6f7dd57b38..c2fd94184a9 100755
--- a/src/app/components/speeddial/speeddial.css
+++ b/src/app/components/speeddial/speeddial.css
@@ -5,6 +5,14 @@
z-index: 1;
}
+ .p-speeddial:not(.p-speeddial-opened) {
+ pointer-events: none;
+ }
+
+ .p-speeddial:not(.p-speeddial-opened) .p-speeddial-button {
+ pointer-events: auto;
+ }
+
.p-speeddial-list {
margin: 0;
padding: 0;
diff --git a/src/app/components/speeddial/speeddial.ts b/src/app/components/speeddial/speeddial.ts
index c0445e208b9..4db568de217 100644
--- a/src/app/components/speeddial/speeddial.ts
+++ b/src/app/components/speeddial/speeddial.ts
@@ -92,7 +92,7 @@ import { asapScheduler } from 'rxjs';
item.id === this.focusedOptionIndex);
+ const itemIndex = [...items].findIndex((item) => item.id === this.focusedOptionIndex());
this.onItemClick(event, this.model[itemIndex]);
this.onBlur(event);
diff --git a/src/app/components/stepper/stepper.ts b/src/app/components/stepper/stepper.ts
index eec4da175fc..95fb22be473 100755
--- a/src/app/components/stepper/stepper.ts
+++ b/src/app/components/stepper/stepper.ts
@@ -129,10 +129,6 @@ export class StepperContent {
@Output() nextCallback = new EventEmitter();
}
-/**
- * StepperPanel is a helper component for Stepper component.
- * @group Components
- */
@Component({
selector: 'p-stepperPanel',
template: ` >;
diff --git a/src/app/components/stepper/stepperpanel.interface.ts b/src/app/components/stepper/stepperpanel.interface.ts
index d894fc32d4d..52e1e2fd634 100644
--- a/src/app/components/stepper/stepperpanel.interface.ts
+++ b/src/app/components/stepper/stepperpanel.interface.ts
@@ -1,4 +1,15 @@
import { TemplateRef } from '@angular/core';
+/**
+ * StepperPanel is a helper component for Stepper component.
+ * @group Components
+ */
+export interface StepperPanelProps {
+ /**
+ * Orientation of tab headers.
+ * @group Props
+ */
+ header: string | undefined;
+}
/**
* Defines valid templates in StepperPanel.
@@ -8,11 +19,11 @@ export interface StepperPanelTemplates {
/**
* Custom header template.
*/
- header(context: StepperPanelHeaderProps): TemplateRef;
+ header(context: StepperPanelHeaderTemplate): TemplateRef;
/**
* Custom header template.
*/
- content(context: StepperPanelContentProps): TemplateRef;
+ content(context: StepperPanelContentTemplate): TemplateRef;
/**
* Custom separator template.
*/
@@ -23,7 +34,7 @@ export interface StepperPanelTemplates {
* Props of stepper panel header.
* @group Interface
*/
-export interface StepperPanelHeaderProps {
+export interface StepperPanelHeaderTemplate {
/**
* Index of the stepperpanel.
*/
@@ -62,7 +73,7 @@ export interface StepperPanelHeaderProps {
* Props of stepper panel content.
* @group Interface
*/
-export interface StepperPanelContentProps {
+export interface StepperPanelContentTemplate {
/**
* Index of the stepperpanel.
*/
diff --git a/src/app/components/table/columnfilter.interface.ts b/src/app/components/table/columnfilter.interface.ts
index e752589f0a6..e7b3b01d700 100644
--- a/src/app/components/table/columnfilter.interface.ts
+++ b/src/app/components/table/columnfilter.interface.ts
@@ -1,4 +1,5 @@
import { TemplateRef } from '@angular/core';
+import { SelectItem } from 'primeng/api';
/**
* Defines valid templates in Column Filter.
@@ -8,7 +9,68 @@ export interface TableColumnFilterTemplates {
/**
* Custom filter template.
*/
- filterTemplate(): TemplateRef;
+ filterTemplate(context: {
+ /**
+ * filterConstraint.value.
+ */
+ $implicit?: string;
+ /**
+ * filter callback.
+ */
+ filterCallback?: (value: string) => void;
+ /**
+ * Type of the input.
+ */
+ type?: string;
+ /**
+ * Filter constraint.
+ */
+ filterConstraint?: string;
+ /**
+ * Input placeholder.
+ */
+ placeholder?: boolean;
+ /**
+ * Minimum fraction of digits.
+ */
+ minFractionDigits?: number;
+ /**
+ * Maximum fraction of digits.
+ */
+ maxFractionDigits?: number;
+ /**
+ * Input prefix.
+ */
+ prefix?: string;
+ /**
+ * Input suffix.
+ */
+ suffix?: string;
+ /**
+ * Locale.
+ */
+ locale?: string;
+ /**
+ * Locale matcher.
+ */
+ localeMatcher?: string;
+ /**
+ * Enables currency input.
+ */
+ currency?: boolean;
+ /**
+ * Display of the currency input.
+ */
+ currencyDisplay?: boolean;
+ /**
+ * Defines if filter grouping will be enabled.
+ */
+ useGrouping?: boolean;
+ /**
+ * Defines the visibility of buttons.
+ */
+ showButtons?: boolean;
+ }): TemplateRef;
/**
* Custom header template.
*/
@@ -34,3 +96,154 @@ export interface TableColumnFilterTemplates {
*/
clearFilterIconTemplate(): TemplateRef;
}
+
+/**
+ * Defines valid properties in ColumnFilter component.
+ * @group Components
+ */
+export interface ColumnFilterProps {
+ /**
+ * Property represented by the column.
+ * @defaultValue text
+ * @group Props
+ */
+ field: string | undefined;
+ /**
+ * Type of the input.
+ * @defaultValue text
+ * @group Props
+ */
+ type: string;
+ /**
+ * Filter display.
+ * @defaultValue row
+ * @group Props
+ */
+ display: string;
+ /**
+ * Decides whether to display filter menu popup.
+ * @defaultValue true
+ * @group Props
+ */
+ showMenu: boolean;
+ /**
+ * Filter match mode.
+ * @group Props
+ */
+ matchMode: string | undefined;
+ /**
+ * Filter operator.
+ * @defaultValue 'AND'
+ * @group Props
+ */
+ operator: string;
+ /**
+ * Decides whether to display filter operator.
+ * @defaultValue true
+ * @group Props
+ */
+ showOperator: boolean;
+ /**
+ * Decides whether to display clear filter button.
+ * @defaultValue true
+ * @group Props
+ */
+ showClearButton: boolean;
+ /**
+ * Decides whether to display apply filter button.
+ * @defaultValue true
+ * @group Props
+ */
+ showApplyButton: boolean;
+ /**
+ * Decides whether to display filter match modes.
+ * @defaultValue true
+ * @group Props
+ */
+ showMatchModes: boolean;
+ /**
+ * Decides whether to display add filter button.
+ * @defaultValue true
+ * @group Props
+ */
+ showAddButton: boolean;
+ /**
+ * Decides whether to close popup on clear button click.
+ * @defaultValue true
+ * @group Props
+ */
+ hideOnClear: boolean;
+ /**
+ * Filter placeholder.
+ * @group Props
+ */
+ placeholder: string | undefined;
+ /**
+ * Filter match mode options.
+ * @group Props
+ */
+ matchModeOptions: SelectItem[] | undefined;
+ /**
+ * Defines maximum amount of constraints.
+ * @defaultValue 2
+ * @group Props
+ */
+ maxConstraints: number;
+ /**
+ * Defines minimum fraction of digits.
+ * @group Props
+ */
+ minFractionDigits: number | undefined;
+ /**
+ * Defines maximum fraction of digits.
+ * @group Props
+ */
+ maxFractionDigits: number | undefined;
+ /**
+ * Defines prefix of the filter.
+ * @group Props
+ */
+ prefix: string | undefined;
+ /**
+ * Defines suffix of the filter.
+ * @group Props
+ */
+ suffix: string | undefined;
+ /**
+ * Defines filter locale.
+ * @group Props
+ */
+ locale: string | undefined;
+ /**
+ * Defines filter locale matcher.
+ * @group Props
+ */
+ localeMatcher: string | undefined;
+ /**
+ * Enables currency input.
+ * @group Props
+ */
+ currency: boolean | undefined;
+ /**
+ * Defines the display of the currency input.
+ * @group Props
+ */
+ currencyDisplay: string | undefined;
+ /**
+ * Defines if filter grouping will be enabled.
+ * @defaultValue true
+ * @group Props
+ */
+ useGrouping: boolean;
+ /**
+ * Defines the visibility of buttons.
+ * @defaultValue true
+ * @group Props
+ */
+ showButtons: boolean;
+ /**
+ * Defines the aria-label of the form element.
+ * @group Props
+ */
+ ariaLabel: string | undefined;
+}
diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
index 9d08e9b4e86..92b17555df0 100644
--- a/src/app/components/table/table.ts
+++ b/src/app/components/table/table.ts
@@ -708,7 +708,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
* The breakpoint to define the maximum width boundary when using stack responsive layout.
* @group Props
*/
- @Input() breakpoint: string = '640px';
+ @Input() breakpoint: string = '960px';
/**
* Locale to be used in paginator formatting.
* @group Props
@@ -2483,7 +2483,11 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
let containerLeft = DomHandler.getOffset(this.containerViewChild?.nativeElement).left;
this.resizeColumnElement = event.target.parentElement;
this.columnResizing = true;
- this.lastResizerHelperX = event.pageX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft;
+ if (event.type == 'touchstart') {
+ this.lastResizerHelperX = event.changedTouches[0].clientX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft;
+ } else {
+ this.lastResizerHelperX = event.pageX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft;
+ }
this.onColumnResize(event);
event.preventDefault();
}
@@ -2493,8 +2497,11 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
DomHandler.addClass(this.containerViewChild?.nativeElement, 'p-unselectable-text');
(this.resizeHelperViewChild).nativeElement.style.height = this.containerViewChild?.nativeElement.offsetHeight + 'px';
(this.resizeHelperViewChild).nativeElement.style.top = 0 + 'px';
- (this.resizeHelperViewChild).nativeElement.style.left = event.pageX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft + 'px';
-
+ if (event.type == 'touchmove') {
+ (this.resizeHelperViewChild).nativeElement.style.left = event.changedTouches[0].clientX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft + 'px';
+ } else {
+ (this.resizeHelperViewChild).nativeElement.style.left = event.pageX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft + 'px';
+ }
(this.resizeHelperViewChild).nativeElement.style.display = 'block';
}
@@ -3305,11 +3312,22 @@ export class FrozenColumn implements AfterViewInit {
ngAfterViewInit() {
this.zone.runOutsideAngular(() => {
setTimeout(() => {
- this.updateStickyPosition();
+ this.recalculateColumns();
}, 1000);
});
}
+ @HostListener('window:resize', ['$event'])
+ recalculateColumns() {
+ const siblings = DomHandler.siblings(this.el.nativeElement);
+ const index = DomHandler.index(this.el.nativeElement);
+ const time = (siblings.length - index + 1) * 50;
+
+ setTimeout(() => {
+ this.updateStickyPosition();
+ }, time);
+ }
+
_frozen: boolean = true;
updateStickyPosition() {
@@ -3904,6 +3922,12 @@ export class ResizableColumn implements AfterViewInit, OnDestroy {
resizerMouseDownListener: VoidListener;
+ resizerTouchStartListener: VoidListener;
+
+ resizerTouchMoveListener: VoidListener;
+
+ resizerTouchEndListener: VoidListener;
+
documentMouseMoveListener: VoidListener;
documentMouseUpListener: VoidListener;
@@ -3920,6 +3944,7 @@ export class ResizableColumn implements AfterViewInit, OnDestroy {
this.zone.runOutsideAngular(() => {
this.resizerMouseDownListener = this.renderer.listen(this.resizer, 'mousedown', this.onMouseDown.bind(this));
+ this.resizerTouchStartListener = this.renderer.listen(this.resizer, 'touchstart', this.onTouchStart.bind(this));
});
}
}
@@ -3929,6 +3954,8 @@ export class ResizableColumn implements AfterViewInit, OnDestroy {
this.zone.runOutsideAngular(() => {
this.documentMouseMoveListener = this.renderer.listen(this.document, 'mousemove', this.onDocumentMouseMove.bind(this));
this.documentMouseUpListener = this.renderer.listen(this.document, 'mouseup', this.onDocumentMouseUp.bind(this));
+ this.resizerTouchMoveListener = this.renderer.listen(this.resizer, 'touchmove', this.onTouchMove.bind(this));
+ this.resizerTouchEndListener = this.renderer.listen(this.resizer, 'touchend', this.onTouchEnd.bind(this));
});
}
@@ -3942,15 +3969,30 @@ export class ResizableColumn implements AfterViewInit, OnDestroy {
this.documentMouseUpListener();
this.documentMouseUpListener = null;
}
+ if (this.resizerTouchMoveListener) {
+ this.resizerTouchMoveListener();
+ this.resizerTouchMoveListener = null;
+ }
+
+ if (this.resizerTouchEndListener) {
+ this.resizerTouchEndListener();
+ this.resizerTouchEndListener = null;
+ }
}
onMouseDown(event: MouseEvent) {
- if (event.which === 1) {
- this.dt.onColumnResizeBegin(event);
- this.bindDocumentEvents();
- }
+ this.dt.onColumnResizeBegin(event);
+ this.bindDocumentEvents();
+ }
+
+ onTouchStart(event: TouchEvent) {
+ this.dt.onColumnResizeBegin(event);
+ this.bindDocumentEvents();
}
+ onTouchMove(event: TouchEvent) {
+ this.dt.onColumnResize(event);
+ }
onDocumentMouseMove(event: MouseEvent) {
this.dt.onColumnResize(event);
}
@@ -3960,6 +4002,11 @@ export class ResizableColumn implements AfterViewInit, OnDestroy {
this.unbindDocumentEvents();
}
+ onTouchEnd(event: TouchEvent) {
+ this.dt.onColumnResizeEnd();
+ this.unbindDocumentEvents();
+ }
+
isEnabled() {
return this.pResizableColumnDisabled !== true;
}
@@ -4943,10 +4990,7 @@ export class ReorderableRow implements AfterViewInit {
this.unbindEvents();
}
}
-/**
- * Column Filter element of Table.
- * @group Components
- */
+
@Component({
selector: 'p-columnFilter',
template: `
@@ -5199,7 +5243,7 @@ export class ColumnFilter implements AfterContentInit {
* Enables currency input.
* @group Props
*/
- @Input() currency: string | undefined;
+ @Input({ transform: booleanAttribute }) currency: boolean | undefined;
/**
* Defines the display of the currency input.
* @group Props
diff --git a/src/app/components/tree/tree.ts b/src/app/components/tree/tree.ts
index 8a69c548c94..c5affadc7d4 100755
--- a/src/app/components/tree/tree.ts
+++ b/src/app/components/tree/tree.ts
@@ -737,64 +737,65 @@ export class UITreeNode implements OnInit {
-
+
-
- -
-
-
+
+
-
+
-
-
-
diff --git a/src/app/components/treeselect/treeselect.ts b/src/app/components/treeselect/treeselect.ts
index 8fbf0cee626..f2527508518 100755
--- a/src/app/components/treeselect/treeselect.ts
+++ b/src/app/components/treeselect/treeselect.ts
@@ -26,7 +26,7 @@ import { SearchIcon } from 'primeng/icons/search';
import { TimesIcon } from 'primeng/icons/times';
import { Overlay, OverlayModule } from 'primeng/overlay';
import { RippleModule } from 'primeng/ripple';
-import { Tree, TreeModule, TreeNodeSelectEvent, TreeNodeUnSelectEvent } from 'primeng/tree';
+import { Tree, TreeFilterEvent, TreeModule, TreeNodeSelectEvent, TreeNodeUnSelectEvent } from 'primeng/tree';
import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
import { Nullable } from 'primeng/ts-helpers';
import { AutoFocusModule } from 'primeng/autofocus';
@@ -126,7 +126,7 @@ export const TREESELECT_VALUE_ACCESSOR: any = {
+
+
+
+`,
html: `
- ![Animation Feature Image]()
+ ![Animation Feature Image]()
= new EventEmitter();
+ @Output() onFilter: EventEmitter = new EventEmitter();
/**
* Callback to invoke when a node is unselected.
* @param {TreeNodeUnSelectEvent} event - node unselect event.
@@ -699,7 +699,7 @@ export class TreeSelect implements AfterContentInit {
this.filterValue = (event.target as HTMLInputElement).value;
this.treeViewChild?._filter(this.filterValue);
this.onFilter.emit({
- originalEvent: event,
+ filter: this.filterValue,
filteredValue: this.treeViewChild?.filteredNodes
});
setTimeout(() => {
@@ -937,8 +937,8 @@ export class TreeSelect implements AfterContentInit {
setDisabledState(val: boolean): void {
setTimeout(() => {
this.disabled = val;
+ this.cd.markForCheck();
});
- this.cd.markForCheck();
}
containerClass() {
diff --git a/src/app/showcase/data/news.json b/src/app/showcase/data/news.json
index 11e037f46b1..3042354cc33 100644
--- a/src/app/showcase/data/news.json
+++ b/src/app/showcase/data/news.json
@@ -1,6 +1,6 @@
{
- "id": 63,
- "content": "Introducing the new Aura theme",
+ "id": 64,
+ "content": "🌸 Spring Sale: Save Up to 50% on Premium Templates and More.",
"linkText": "Learn More",
- "linkHref": "https://primeng.org/theming"
-}
+ "linkHref": "https://primefaces.org/store"
+}
\ No newline at end of file
diff --git a/src/app/showcase/data/versions.json b/src/app/showcase/data/versions.json
index a643e0881f0..02f1ff0aab2 100644
--- a/src/app/showcase/data/versions.json
+++ b/src/app/showcase/data/versions.json
@@ -1,6 +1,6 @@
[
{
- "version": "v17.14.1",
+ "version": "v17.15.0",
"name": "v17",
"url": "https://primeng.org"
},
diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json
index 755a5317b33..f1506b4ddb3 100644
--- a/src/app/showcase/doc/apidoc/index.json
+++ b/src/app/showcase/doc/apidoc/index.json
@@ -4470,6 +4470,14 @@
"type": "\"large\" | \"xlarge\"",
"description": "Size of the badge, valid options are \"large\" and \"xlarge\"."
},
+ {
+ "name": "size",
+ "optional": false,
+ "readonly": false,
+ "type": "\"large\" | \"xlarge\"",
+ "description": "Size of the badge, valid options are \"large\" and \"xlarge\".",
+ "deprecated": "use badgeSize instead."
+ },
{
"name": "severity",
"optional": false,
@@ -4534,6 +4542,14 @@
"type": "boolean",
"default": "false",
"description": "When specified, disables the component."
+ },
+ {
+ "name": "size",
+ "optional": false,
+ "readonly": false,
+ "type": "\"large\" | \"xlarge\"",
+ "description": "Size of the badge, valid options are \"large\" and \"xlarge\".",
+ "deprecated": "use badgeSize instead."
}
]
}
@@ -6005,7 +6021,7 @@
"name": "style",
"optional": false,
"readonly": false,
- "type": "Object",
+ "type": null,
"description": "Inline style of the element."
},
{
@@ -10297,7 +10313,7 @@
"description": "item data."
}
],
- "description": "Custom header template."
+ "description": "Custom item template."
},
{
"parent": "dropdown",
@@ -16530,7 +16546,30 @@
"parent": "multiselect",
"name": "checkicon",
"parameters": [],
- "description": "Custom check icon template."
+ "description": "Custom check icon template.",
+ "deprecated": "Use headercheckboxicon or itemcheckboxicon instead."
+ },
+ {
+ "parent": "multiselect",
+ "name": "headercheckboxicon",
+ "parameters": [
+ {
+ "name": "context",
+ "type": "{\n \t $implicit: boolean, // Defines if all items are selected.\n \t partialSelected: boolean, // Defines if items are partially selected.\n }"
+ }
+ ],
+ "description": "Custom check icon template for the header checkbox."
+ },
+ {
+ "parent": "multiselect",
+ "name": "itemcheckboxicon",
+ "parameters": [
+ {
+ "name": "context",
+ "type": "{\n \t $implicit: boolean, // Selection status of the item.\n }"
+ }
+ ],
+ "description": "Custom check icon template for the item checkbox."
},
{
"parent": "multiselect",
@@ -22045,21 +22084,6 @@
},
"stepper": {
"components": {
- "StepperPanel": {
- "description": "StepperPanel is a helper component for Stepper component.",
- "props": {
- "description": "Defines the input properties of the component.",
- "values": [
- {
- "name": "header",
- "optional": false,
- "readonly": false,
- "type": "string",
- "description": "Orientation of tab headers."
- }
- ]
- }
- },
"Stepper": {
"description": "The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression.",
"props": {
@@ -22157,7 +22181,23 @@
},
"stepperpanel": {
"interfaces": {
- "components": {},
+ "components": {
+ "StepperPanelProps": {
+ "description": "StepperPanel is a helper component for Stepper component.",
+ "props": {
+ "description": "Defines the input properties of the component.",
+ "values": [
+ {
+ "name": "header",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "description": "Orientation of tab headers."
+ }
+ ]
+ }
+ }
+ },
"templates": {
"description": "Defines the templates used by the component.",
"values": [
@@ -22167,7 +22207,7 @@
"parameters": [
{
"name": "context",
- "type": "StepperPanelHeaderProps"
+ "type": "StepperPanelHeaderTemplate"
}
],
"description": "Custom header template."
@@ -22178,7 +22218,7 @@
"parameters": [
{
"name": "context",
- "type": "StepperPanelContentProps"
+ "type": "StepperPanelContentTemplate"
}
],
"description": "Custom header template."
@@ -22200,7 +22240,7 @@
"description": "Defines the custom interfaces used by the module.",
"values": [
{
- "name": "StepperPanelHeaderProps",
+ "name": "StepperPanelHeaderTemplate",
"description": "Props of stepper panel header.",
"props": [
{
@@ -22261,7 +22301,7 @@
]
},
{
- "name": "StepperPanelContentProps",
+ "name": "StepperPanelContentTemplate",
"description": "Props of stepper panel content.",
"props": [
{
@@ -22538,14 +22578,220 @@
},
"columnfilter": {
"interfaces": {
- "components": {},
+ "components": {
+ "ColumnFilterProps": {
+ "description": "Defines valid properties in ColumnFilter component.",
+ "props": {
+ "description": "Defines the input properties of the component.",
+ "values": [
+ {
+ "name": "field",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "description": "Property represented by the column."
+ },
+ {
+ "name": "type",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "description": "Type of the input."
+ },
+ {
+ "name": "display",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "description": "Filter display."
+ },
+ {
+ "name": "showMenu",
+ "optional": false,
+ "readonly": false,
+ "type": "boolean",
+ "default": "false",
+ "description": "Decides whether to display filter menu popup."
+ },
+ {
+ "name": "matchMode",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "description": "Filter match mode."
+ },
+ {
+ "name": "operator",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "description": "Filter operator."
+ },
+ {
+ "name": "showOperator",
+ "optional": false,
+ "readonly": false,
+ "type": "boolean",
+ "default": "false",
+ "description": "Decides whether to display filter operator."
+ },
+ {
+ "name": "showClearButton",
+ "optional": false,
+ "readonly": false,
+ "type": "boolean",
+ "default": "false",
+ "description": "Decides whether to display clear filter button."
+ },
+ {
+ "name": "showApplyButton",
+ "optional": false,
+ "readonly": false,
+ "type": "boolean",
+ "default": "false",
+ "description": "Decides whether to display apply filter button."
+ },
+ {
+ "name": "showMatchModes",
+ "optional": false,
+ "readonly": false,
+ "type": "boolean",
+ "default": "false",
+ "description": "Decides whether to display filter match modes."
+ },
+ {
+ "name": "showAddButton",
+ "optional": false,
+ "readonly": false,
+ "type": "boolean",
+ "default": "false",
+ "description": "Decides whether to display add filter button."
+ },
+ {
+ "name": "hideOnClear",
+ "optional": false,
+ "readonly": false,
+ "type": "boolean",
+ "default": "false",
+ "description": "Decides whether to close popup on clear button click."
+ },
+ {
+ "name": "placeholder",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "description": "Filter placeholder."
+ },
+ {
+ "name": "matchModeOptions",
+ "optional": false,
+ "readonly": false,
+ "type": "SelectItem[]",
+ "description": "Filter match mode options."
+ },
+ {
+ "name": "maxConstraints",
+ "optional": false,
+ "readonly": false,
+ "type": "number",
+ "description": "Defines maximum amount of constraints."
+ },
+ {
+ "name": "minFractionDigits",
+ "optional": false,
+ "readonly": false,
+ "type": "number",
+ "description": "Defines minimum fraction of digits."
+ },
+ {
+ "name": "maxFractionDigits",
+ "optional": false,
+ "readonly": false,
+ "type": "number",
+ "description": "Defines maximum fraction of digits."
+ },
+ {
+ "name": "prefix",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "description": "Defines prefix of the filter."
+ },
+ {
+ "name": "suffix",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "description": "Defines suffix of the filter."
+ },
+ {
+ "name": "locale",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "description": "Defines filter locale."
+ },
+ {
+ "name": "localeMatcher",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "description": "Defines filter locale matcher."
+ },
+ {
+ "name": "currency",
+ "optional": false,
+ "readonly": false,
+ "type": "boolean",
+ "default": "false",
+ "description": "Enables currency input."
+ },
+ {
+ "name": "currencyDisplay",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "description": "Defines the display of the currency input."
+ },
+ {
+ "name": "useGrouping",
+ "optional": false,
+ "readonly": false,
+ "type": "boolean",
+ "default": "false",
+ "description": "Defines if filter grouping will be enabled."
+ },
+ {
+ "name": "showButtons",
+ "optional": false,
+ "readonly": false,
+ "type": "boolean",
+ "default": "false",
+ "description": "Defines the visibility of buttons."
+ },
+ {
+ "name": "ariaLabel",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "description": "Defines the aria-label of the form element."
+ }
+ ]
+ }
+ }
+ },
"templates": {
"description": "Defines the templates used by the component.",
"values": [
{
"parent": "columnfilter",
"name": "filterTemplate",
- "parameters": [],
+ "parameters": [
+ {
+ "name": "context",
+ "type": "{\n \t $implicit: string, // filterConstraint.value.\n \t filterCallback: undefined, // undefined\n \t type: string, // Type of the input.\n \t filterConstraint: string, // Filter constraint.\n \t placeholder: boolean, // Input placeholder.\n \t minFractionDigits: number, // Minimum fraction of digits.\n \t maxFractionDigits: number, // Maximum fraction of digits.\n \t prefix: string, // Input prefix.\n \t suffix: string, // Input suffix.\n \t locale: string, // Locale.\n \t localeMatcher: string, // Locale matcher.\n \t currency: boolean, // Enables currency input.\n \t currencyDisplay: boolean, // Display of the currency input.\n \t useGrouping: boolean, // Defines if filter grouping will be enabled.\n \t showButtons: boolean, // Defines the visibility of buttons.\n }"
+ }
+ ],
"description": "Custom filter template."
},
{
@@ -23150,7 +23396,7 @@
"optional": false,
"readonly": false,
"type": "string",
- "default": "640px",
+ "default": "960px",
"description": "The breakpoint to define the maximum width boundary when using stack responsive layout."
},
{
@@ -23527,209 +23773,6 @@
}
]
}
- },
- "ColumnFilter": {
- "description": "Column Filter element of Table.",
- "props": {
- "description": "Defines the input properties of the component.",
- "values": [
- {
- "name": "field",
- "optional": false,
- "readonly": false,
- "type": "string",
- "description": "Property represented by the column."
- },
- {
- "name": "type",
- "optional": false,
- "readonly": false,
- "type": "string",
- "default": "text",
- "description": "Type of the input."
- },
- {
- "name": "display",
- "optional": false,
- "readonly": false,
- "type": "string",
- "default": "row",
- "description": "Filter display."
- },
- {
- "name": "showMenu",
- "optional": false,
- "readonly": false,
- "type": "boolean",
- "default": "true",
- "description": "Decides whether to display filter menu popup."
- },
- {
- "name": "matchMode",
- "optional": false,
- "readonly": false,
- "type": "string",
- "description": "Filter match mode."
- },
- {
- "name": "operator",
- "optional": false,
- "readonly": false,
- "type": "string",
- "default": "FilterOperator.AND",
- "description": "Filter operator."
- },
- {
- "name": "showOperator",
- "optional": false,
- "readonly": false,
- "type": "boolean",
- "default": "true",
- "description": "Decides whether to display filter operator."
- },
- {
- "name": "showClearButton",
- "optional": false,
- "readonly": false,
- "type": "boolean",
- "default": "true",
- "description": "Decides whether to display clear filter button."
- },
- {
- "name": "showApplyButton",
- "optional": false,
- "readonly": false,
- "type": "boolean",
- "default": "true",
- "description": "Decides whether to display apply filter button."
- },
- {
- "name": "showMatchModes",
- "optional": false,
- "readonly": false,
- "type": "boolean",
- "default": "true",
- "description": "Decides whether to display filter match modes."
- },
- {
- "name": "showAddButton",
- "optional": false,
- "readonly": false,
- "type": "boolean",
- "default": "true",
- "description": "Decides whether to display add filter button."
- },
- {
- "name": "hideOnClear",
- "optional": false,
- "readonly": false,
- "type": "boolean",
- "default": "false",
- "description": "Decides whether to close popup on clear button click."
- },
- {
- "name": "placeholder",
- "optional": false,
- "readonly": false,
- "type": "string",
- "description": "Filter placeholder."
- },
- {
- "name": "matchModeOptions",
- "optional": false,
- "readonly": false,
- "type": "SelectItem[]",
- "description": "Filter match mode options."
- },
- {
- "name": "maxConstraints",
- "optional": false,
- "readonly": false,
- "type": "number",
- "default": "2",
- "description": "Defines maximum amount of constraints."
- },
- {
- "name": "minFractionDigits",
- "optional": false,
- "readonly": false,
- "type": "number",
- "description": "Defines minimum fraction of digits."
- },
- {
- "name": "maxFractionDigits",
- "optional": false,
- "readonly": false,
- "type": "number",
- "description": "Defines maximum fraction of digits."
- },
- {
- "name": "prefix",
- "optional": false,
- "readonly": false,
- "type": "string",
- "description": "Defines prefix of the filter."
- },
- {
- "name": "suffix",
- "optional": false,
- "readonly": false,
- "type": "string",
- "description": "Defines suffix of the filter."
- },
- {
- "name": "locale",
- "optional": false,
- "readonly": false,
- "type": "string",
- "description": "Defines filter locale."
- },
- {
- "name": "localeMatcher",
- "optional": false,
- "readonly": false,
- "type": "string",
- "description": "Defines filter locale matcher."
- },
- {
- "name": "currency",
- "optional": false,
- "readonly": false,
- "type": "string",
- "description": "Enables currency input."
- },
- {
- "name": "currencyDisplay",
- "optional": false,
- "readonly": false,
- "type": "string",
- "description": "Defines the display of the currency input."
- },
- {
- "name": "useGrouping",
- "optional": false,
- "readonly": false,
- "type": "boolean",
- "default": "true",
- "description": "Defines if filter grouping will be enabled."
- },
- {
- "name": "showButtons",
- "optional": false,
- "readonly": false,
- "type": "boolean",
- "default": "true",
- "description": "Defines the visibility of buttons."
- },
- {
- "name": "ariaLabel",
- "optional": false,
- "readonly": false,
- "type": "string",
- "description": "Defines the aria-label of the form element."
- }
- ]
- }
}
},
"interfaces": {
diff --git a/src/app/showcase/doc/icons/listdoc.ts b/src/app/showcase/doc/icons/listdoc.ts
index b7320fdd727..d3662298b22 100644
--- a/src/app/showcase/doc/icons/listdoc.ts
+++ b/src/app/showcase/doc/icons/listdoc.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
-import { IconService } from '../../service/iconservice';
+import { Component } from '@angular/core';
+import { default as IconData } from 'src/assets/showcase/data/icons.json';
@Component({
selector: 'list-doc',
@@ -21,31 +21,19 @@ import { IconService } from '../../service/iconservice';
`
})
export class ListDoc {
- icons: any[];
+ icons: any;
filteredIcons: any[];
selectedIcon: any;
- constructor(private iconService: IconService, private cd: ChangeDetectorRef) {}
-
ngOnInit() {
- this.iconService.getIcons().subscribe((data) => {
- data = data.filter((value) => {
- return value.icon.tags.indexOf('deprecate') === -1;
- });
-
- let icons = data;
- icons.sort((icon1, icon2) => {
- if (icon1.properties.name < icon2.properties.name) return -1;
- else if (icon1.properties.name < icon2.properties.name) return 1;
- else return 0;
- });
-
- this.icons = icons;
- this.filteredIcons = data;
- this.cd.markForCheck();
+ this.icons = IconData.icons.sort((icon1, icon2) => {
+ if (icon1.properties.name < icon2.properties.name) return -1;
+ else if (icon1.properties.name < icon2.properties.name) return 1;
+ else return 0;
});
+ this.filteredIcons = IconData.icons;
}
onFilter(event: KeyboardEvent): void {
diff --git a/src/app/showcase/doc/keyfilter/regexdoc.ts b/src/app/showcase/doc/keyfilter/regexdoc.ts
index 79d4ba028f5..138dd5d5a18 100644
--- a/src/app/showcase/doc/keyfilter/regexdoc.ts
+++ b/src/app/showcase/doc/keyfilter/regexdoc.ts
@@ -21,8 +21,7 @@ import { Code } from '../../domain/code';
`
})
export class RegexDoc {
- blockSpace: RegExp = /[^\s]/;
-
+ blockSpace: RegExp = /^[^\s]+$/;
blockChars: RegExp = /^[^<>*!]+$/;
code: Code = {
@@ -49,8 +48,8 @@ import { Component } from '@angular/core';
templateUrl: './key-filter-reg-exp-demo.html'
})
export class KeyFilterRegExpDemo {
- blockSpace: RegExp = /[^\s]/;
-
+ blockSpace: RegExp = /[^\s]/;
+
blockChars: RegExp = /^[^<>*!]+$/;
}`
};
diff --git a/src/app/showcase/doc/multiselect/virtualscrolldoc.ts b/src/app/showcase/doc/multiselect/virtualscrolldoc.ts
index 56ef5821fbe..f624aafef33 100644
--- a/src/app/showcase/doc/multiselect/virtualscrolldoc.ts
+++ b/src/app/showcase/doc/multiselect/virtualscrolldoc.ts
@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
import { Code } from '../../domain/code';
+import { MultiSelect } from 'primeng/multiselect';
@Component({
selector: 'virtual-scroll-doc',
@@ -23,13 +24,20 @@ import { Code } from '../../domain/code';
class="multiselect-custom-virtual-scroll"
placeholder="Select Cities"
(onSelectAllChange)="onSelectAllChange($event)"
- (onChange)="onChange($event)"
- >
+ #ms
+ >
+
+
+
+
+
@@ -76,34 +84,37 @@ export class VirtualScrollDoc {
class="multiselect-custom-virtual-scroll"
placeholder="Select Cities"
(onSelectAllChange)="onSelectAllChange($event)"
- (onChange)="onChange($event)"
- >
+ #ms
+ >
+
+
+
+
+
`,
typescript: `
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { MultiSelect } from 'primeng/multiselect';
@Component({
selector: 'multi-select-virtual-scroll-demo',
templateUrl: './multi-select-virtual-scroll-demo.html'
})
export class MultiSelectVirtualScrollDemo {
+ @ViewChild('ms') ms: MultiSelect;
+
items = Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
selectedItems!: any[];
- selectAll = false;
+ selectAll: boolean = false;
onSelectAllChange(event) {
- this.selectedItems = event.checked ? [...this.items] : [];
+ this.selectedItems = event.checked ? [...this.ms.visibleOptions()] : [];
this.selectAll = event.checked;
}
- onChange(event) {
- const { originalEvent, value } = event
- if(value) this.selectAll = value.length === this.items.length;
- }
-
}`
};
}
diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts
index 0bd454b220c..e1a9b2b4d64 100644
--- a/src/app/showcase/layout/app.component.ts
+++ b/src/app/showcase/layout/app.component.ts
@@ -1,4 +1,4 @@
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, IMAGE_CONFIG } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Component, Inject, OnInit, PLATFORM_ID, Renderer2, afterNextRender } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -10,7 +10,6 @@ import { CarService } from '../service/carservice';
import { CountryService } from '../service/countryservice';
import { CustomerService } from '../service/customerservice';
import { EventService } from '../service/eventservice';
-import { IconService } from '../service/iconservice';
import { NodeService } from '../service/nodeservice';
import { PhotoService } from '../service/photoservice';
import { ProductService } from '../service/productservice';
@@ -25,7 +24,23 @@ import { AppTopBarComponent } from './topbar/app.topbar.component';
templateUrl: './app.component.html',
standalone: true,
imports: [RouterOutlet, FormsModule, ReactiveFormsModule, HttpClientModule, AppMainComponent, LandingComponent, AppNewsComponent, AppConfigComponent, AppTopBarComponent, AppMenuComponent],
- providers: [CarService, CountryService, EventService, NodeService, IconService, CustomerService, PhotoService, AppConfigService, ProductService]
+ providers: [
+ CarService,
+ CountryService,
+ EventService,
+ NodeService,
+ CustomerService,
+ PhotoService,
+ AppConfigService,
+ ProductService,
+ {
+ provide: IMAGE_CONFIG,
+ useValue: {
+ disableImageSizeWarning: true,
+ disableImageLazyLoadWarning: true
+ }
+ }
+ ]
})
export class AppComponent implements OnInit {
constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, private primeng: PrimeNGConfig, private configService: AppConfigService, private router: Router, @Inject(PLATFORM_ID) private platformId: any) {
diff --git a/src/app/showcase/layout/app.main.component.ts b/src/app/showcase/layout/app.main.component.ts
index 36387dd142b..4d3ea671fb6 100644
--- a/src/app/showcase/layout/app.main.component.ts
+++ b/src/app/showcase/layout/app.main.component.ts
@@ -1,4 +1,4 @@
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { CommonModule, DOCUMENT, IMAGE_CONFIG } from '@angular/common';
import { Component, Inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { DomHandler } from 'primeng/dom';
diff --git a/src/app/showcase/layout/doc/app.docapisection.component.ts b/src/app/showcase/layout/doc/app.docapisection.component.ts
index ed62f296589..d747452e951 100644
--- a/src/app/showcase/layout/doc/app.docapisection.component.ts
+++ b/src/app/showcase/layout/doc/app.docapisection.component.ts
@@ -3,6 +3,7 @@ import { Location } from '@angular/common';
import { Router } from '@angular/router';
import APIDoc from 'src/app/showcase/doc/apidoc/index.json';
import { AppDocApiTable } from './app.docapitable.component';
+import { ObjectUtils } from 'primeng/utils';
@Component({
selector: 'app-docapisection',
@@ -62,7 +63,14 @@ export class AppDocApiSection {
};
if (module) {
- let props = module.components && module.components[docName] ? module.components[docName].props : module.props ? module.props : undefined;
+ let props =
+ module.components && module.components[docName]
+ ? module.components[docName].props
+ : module.props
+ ? module.props
+ : module.interfaces && ObjectUtils.isNotEmpty(module.interfaces.components)
+ ? module.interfaces.components[`${docName}Props`].props
+ : undefined;
let emits = module.components && module.components[docName] ? module.components[docName].emits : module.emits ? module.emits : undefined;
let templates = module.interfaces ? module.interfaces.templates : undefined;
let events = module.interfaces ? module.interfaces.events : undefined;
diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts
index 048e2c304c7..bbcd55065a7 100644
--- a/src/app/showcase/layout/doc/codeeditor/templates.ts
+++ b/src/app/showcase/layout/doc/codeeditor/templates.ts
@@ -15,7 +15,7 @@ export interface Props {
const app_dependencies = pkg ? pkg.devDependencies : {};
const PrimeNG = {
- version: '17.14.1',
+ version: '17.15.0',
description:
'PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.'
};
@@ -529,6 +529,7 @@ import { DynamicDialogModule } from 'primeng/dynamicdialog';
import { EditorModule } from 'primeng/editor';
import { FieldsetModule } from 'primeng/fieldset';
import { FileUploadModule } from 'primeng/fileupload';
+import { FloatLabelModule } from 'primeng/floatlabel';
import { GalleriaModule } from 'primeng/galleria';
import { InplaceModule } from 'primeng/inplace';
import { InputMaskModule } from 'primeng/inputmask';
@@ -539,6 +540,8 @@ import { InputTextareaModule } from 'primeng/inputtextarea';
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
import { InputGroupModule } from 'primeng/inputgroup'
import { InputOtpModule } from 'primeng/inputotp'
+import { IconFieldModule } from 'primeng/iconfield';
+import { InputIconModule } from 'primeng/inputicon';
import { ImageModule } from 'primeng/image';
import { KnobModule } from 'primeng/knob';
import { ListboxModule } from 'primeng/listbox';
@@ -596,6 +599,7 @@ import { ProgressSpinnerModule } from 'primeng/progressspinner';
import { RippleModule } from 'primeng/ripple';
import { StyleClassModule } from 'primeng/styleclass';
import { MessageService } from 'primeng/api';
+
${serviceImports}
@NgModule({
@@ -635,6 +639,7 @@ ${serviceImports}
EditorModule,
FieldsetModule,
FileUploadModule,
+ FloatLabelModule,
GalleriaModule,
InplaceModule,
InputMaskModule,
@@ -645,6 +650,8 @@ ${serviceImports}
InputGroupModule,
InputGroupAddonModule,
InputOtpModule,
+ IconFieldModule,
+ InputIconModule,
ImageModule,
KnobModule,
ListboxModule,
diff --git a/src/app/showcase/layout/templates/templatefeaturesanimation/templatefeaturesanimation.ts b/src/app/showcase/layout/templates/templatefeaturesanimation/templatefeaturesanimation.ts
index 2d70cdb19f2..5c42920b35e 100644
--- a/src/app/showcase/layout/templates/templatefeaturesanimation/templatefeaturesanimation.ts
+++ b/src/app/showcase/layout/templates/templatefeaturesanimation/templatefeaturesanimation.ts
@@ -46,7 +46,7 @@ import { TemplateFeaturesAnimationInlineModule } from './templatefeaturesanimati
>