From 9a7781f14241840e077fb0e044fa0ee142256e4a Mon Sep 17 00:00:00 2001 From: LcsGa Date: Sun, 28 Jan 2024 23:52:28 +0100 Subject: [PATCH 1/2] feat: add input transform `booleanAttribute` functions on every boolean inputs --- package-lock.json | 4 +- src/app/components/accordion/accordion.ts | 9 +- .../animateonscroll/animateonscroll.ts | 4 +- .../components/autocomplete/autocomplete.ts | 41 +++---- src/app/components/autofocus/autofocus.ts | 4 +- src/app/components/badge/badge.ts | 4 +- src/app/components/baseicon/baseicon.ts | 4 +- src/app/components/blockui/blockui.ts | 22 +++- src/app/components/button/button.ts | 36 ++++-- src/app/components/calendar/calendar.ts | 41 +++---- src/app/components/carousel/carousel.ts | 9 +- .../components/cascadeselect/cascadeselect.ts | 13 ++- src/app/components/chart/chart.ts | 4 +- src/app/components/checkbox/checkbox.ts | 10 +- src/app/components/chip/chip.ts | 4 +- src/app/components/chips/chips.ts | 32 ++++-- src/app/components/colorpicker/colorpicker.ts | 26 ++++- .../components/confirmdialog/confirmdialog.ts | 21 ++-- .../components/confirmpopup/confirmpopup.ts | 5 +- src/app/components/contextmenu/contextmenu.ts | 13 ++- src/app/components/dataview/dataview.ts | 21 ++-- src/app/components/dialog/dialog.ts | 31 +++--- src/app/components/dragdrop/dragdrop.ts | 4 +- src/app/components/dropdown/dropdown.ts | 39 +++---- src/app/components/fieldset/fieldset.ts | 6 +- src/app/components/fileupload/fileupload.ts | 17 +-- src/app/components/focustrap/focustrap.ts | 4 +- src/app/components/galleria/galleria.ts | 43 ++++---- src/app/components/image/image.ts | 22 +++- src/app/components/inplace/inplace.ts | 10 +- src/app/components/inputmask/inputmask.ts | 39 +++++-- src/app/components/inputnumber/inputnumber.ts | 17 +-- src/app/components/inputswitch/inputswitch.ts | 6 +- .../components/inputtextarea/inputtextarea.ts | 4 +- src/app/components/keyfilter/keyfilter.ts | 4 +- src/app/components/knob/knob.ts | 8 +- src/app/components/listbox/listbox.ts | 31 +++--- src/app/components/megamenu/megamenu.ts | 7 +- src/app/components/menu/menu.ts | 5 +- src/app/components/menubar/menubar.ts | 15 +-- src/app/components/message/message.ts | 4 +- src/app/components/messages/messages.ts | 25 ++++- src/app/components/multiselect/multiselect.ts | 37 ++++--- src/app/components/orderlist/orderlist.ts | 13 ++- .../organizationchart/organizationchart.ts | 28 ++++- .../components/overlaypanel/overlaypanel.ts | 9 +- src/app/components/paginator/paginator.ts | 32 ++++-- src/app/components/panel/panel.ts | 8 +- src/app/components/panelmenu/panelmenu.ts | 13 ++- src/app/components/password/password.ts | 11 +- src/app/components/picklist/picklist.ts | 23 ++-- src/app/components/progressbar/progressbar.ts | 4 +- src/app/components/radiobutton/radiobutton.ts | 4 +- src/app/components/rating/rating.ts | 8 +- .../components/selectbutton/selectbutton.ts | 10 +- src/app/components/sidebar/sidebar.ts | 15 +-- src/app/components/slidemenu/slidemenu.ts | 17 +-- src/app/components/slider/slider.ts | 8 +- src/app/components/speeddial/speeddial.ts | 9 +- src/app/components/spinner/spinner.ts | 10 +- src/app/components/splitbutton/splitbutton.ts | 4 +- src/app/components/steps/steps.ts | 6 +- src/app/components/styleclass/styleclass.ts | 6 +- src/app/components/table/table.ts | 103 +++++++++--------- src/app/components/tabmenu/tabmenu.ts | 5 +- src/app/components/tabview/tabview.ts | 13 ++- src/app/components/tag/tag.ts | 4 +- src/app/components/tieredmenu/tieredmenu.ts | 17 +-- src/app/components/toast/toast.ts | 9 +- .../components/togglebutton/togglebutton.ts | 4 +- src/app/components/tooltip/tooltip.ts | 10 +- src/app/components/tree/tree.ts | 27 ++--- src/app/components/treeselect/treeselect.ts | 35 ++++-- src/app/components/treetable/treetable.ts | 61 ++++++----- .../tristatecheckbox/tristatecheckbox.ts | 6 +- .../virtualscroller/virtualscroller.ts | 21 +++- .../showcase/layout/doc/app.code.component.ts | 8 +- .../layout/doc/app.docapitable.component.ts | 4 +- .../layout/menu/app.menuitem.component.ts | 4 +- 79 files changed, 752 insertions(+), 522 deletions(-) diff --git a/package-lock.json b/package-lock.json index ac539b67e6f..48a44e120c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "primeng", - "version": "17.3.0", + "version": "17.4.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "primeng", - "version": "17.3.0", + "version": "17.4.0", "license": "SEE LICENSE IN LICENSE.md", "devDependencies": { "@angular-devkit/build-angular": "^17.0.5", diff --git a/src/app/components/accordion/accordion.ts b/src/app/components/accordion/accordion.ts index 327f039a688..9a7aa4cc3c2 100755 --- a/src/app/components/accordion/accordion.ts +++ b/src/app/components/accordion/accordion.ts @@ -17,6 +17,7 @@ import { QueryList, TemplateRef, ViewEncapsulation, + booleanAttribute, forwardRef } from '@angular/core'; import { BlockableUI, Header, PrimeTemplate, SharedModule } from 'primeng/api'; @@ -158,12 +159,12 @@ export class AccordionTab implements AfterContentInit, OnDestroy { * Whether the tab is disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Whether a lazy loaded panel should avoid getting loaded again on reselection. * @group Props */ - @Input() cache: boolean = true; + @Input({ transform: booleanAttribute }) cache: boolean = true; /** * Transition options of the animation. * @group Props @@ -349,7 +350,7 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy { * When enabled, multiple tabs can be activated at the same time. * @group Props */ - @Input() multiple: boolean = false; + @Input({ transform: booleanAttribute }) multiple: boolean = false; /** * Inline style of the tab header and content. * @group Props @@ -390,7 +391,7 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy { * When enabled, the focused tab is activated. * @group Props */ - @Input() selectOnFocus: boolean = false; + @Input({ transform: booleanAttribute }) selectOnFocus: boolean = false; /** * The aria-level that each accordion header will have. The default value is 2 as per W3C specifications * @group Props diff --git a/src/app/components/animateonscroll/animateonscroll.ts b/src/app/components/animateonscroll/animateonscroll.ts index e55257033a6..3592bd87256 100644 --- a/src/app/components/animateonscroll/animateonscroll.ts +++ b/src/app/components/animateonscroll/animateonscroll.ts @@ -1,5 +1,5 @@ import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { AfterViewInit, Directive, ElementRef, Input, NgModule, Renderer2, OnInit, Inject, PLATFORM_ID } from '@angular/core'; +import { AfterViewInit, Directive, ElementRef, Input, NgModule, Renderer2, OnInit, Inject, PLATFORM_ID, booleanAttribute } from '@angular/core'; import { DomHandler } from 'primeng/dom'; interface AnimateOnScrollOptions { @@ -48,7 +48,7 @@ export class AnimateOnScroll implements OnInit, AfterViewInit { * Whether the scroll event listener should be removed after initial run. * @group Props */ - @Input() once: boolean = true; + @Input({ transform: booleanAttribute }) once: boolean = true; observer: IntersectionObserver | undefined; diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index 88f75376726..bd33a3f6506 100755 --- a/src/app/components/autocomplete/autocomplete.ts +++ b/src/app/components/autocomplete/autocomplete.ts @@ -3,6 +3,7 @@ import { CommonModule, DOCUMENT } from '@angular/common'; import { AfterContentInit, AfterViewChecked, + booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -331,12 +332,12 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * When present, it specifies that the input cannot be typed. * @group Props */ - @Input() readonly: boolean | undefined; + @Input({ transform: booleanAttribute }) readonly: boolean | undefined; /** * When present, it specifies that the component should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Maximum height of the suggestions panel. * @group Props @@ -346,12 +347,12 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * Defines if data is loaded and interacted with in lazy manner. * @group Props */ - @Input() lazy: boolean = false; + @Input({ transform: booleanAttribute }) lazy: boolean = false; /** * Whether the data should be loaded on demand during scroll. * @group Props */ - @Input() virtualScroll: boolean | undefined; + @Input({ transform: booleanAttribute }) virtualScroll: boolean | undefined; /** * Height of an item in the list for VirtualScrolling. * @group Props @@ -376,7 +377,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * When present, it specifies that an input field must be filled out before submitting the form. * @group Props */ - @Input() required: boolean | undefined; + @Input({ transform: booleanAttribute }) required: boolean | undefined; /** * Size of the input field. * @group Props @@ -391,12 +392,12 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * When enabled, highlights the first item in the list by default. * @group Props */ - @Input() autoHighlight: boolean | undefined; + @Input({ transform: booleanAttribute }) autoHighlight: boolean | undefined; /** * When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions. * @group Props */ - @Input() forceSelection: boolean | undefined; + @Input({ transform: booleanAttribute }) forceSelection: boolean | undefined; /** * Type of the input, defaults to "text". * @group Props @@ -406,7 +407,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props @@ -436,22 +437,22 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * Ensures uniqueness of selected items on multiple mode. * @group Props */ - @Input() unique: boolean = true; + @Input({ transform: booleanAttribute }) unique: boolean = true; /** * Whether to display options as grouped when nested options are provided. * @group Props */ - @Input() group: boolean | undefined; + @Input({ transform: booleanAttribute }) group: boolean | undefined; /** * Whether to run a query when input receives focus. * @group Props */ - @Input() completeOnFocus: boolean = false; + @Input({ transform: booleanAttribute }) completeOnFocus: boolean = false; /** * When enabled, a clear icon is displayed to clear the value. * @group Props */ - @Input() showClear: boolean = false; + @Input({ transform: booleanAttribute }) showClear: boolean = false; /** * Field of a suggested object to resolve and display. * @group Props @@ -462,12 +463,12 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * Displays a button next to the input field when enabled. * @group Props */ - @Input() dropdown: boolean | undefined; + @Input({ transform: booleanAttribute }) dropdown: boolean | undefined; /** * Whether to show the empty message or not. * @group Props */ - @Input() showEmptyMessage: boolean | undefined; + @Input({ transform: booleanAttribute }) showEmptyMessage: boolean | undefined; /** * Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value. * @group Props @@ -477,7 +478,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * Specifies if multiple values can be selected. * @group Props */ - @Input() multiple: boolean | undefined; + @Input({ transform: booleanAttribute }) multiple: boolean | undefined; /** * Index of the element in tabbing order. * @group Props @@ -507,7 +508,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * When present, it specifies that the component should automatically get focus on load. * @group Props */ - @Input() autofocus: boolean | undefined; + @Input({ transform: booleanAttribute }) autofocus: boolean | undefined; /** * Used to define a string that autocomplete attribute the current element. * @group Props @@ -583,17 +584,17 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * Whether to focus on the first visible or selected element when the overlay panel is shown. * @group Props */ - @Input() autoOptionFocus: boolean | undefined = true; + @Input({ transform: booleanAttribute }) autoOptionFocus: boolean | undefined = true; /** * When enabled, the focused option is selected. * @group Props */ - @Input() selectOnFocus: boolean | undefined; + @Input({ transform: booleanAttribute }) selectOnFocus: boolean | undefined; /** * Locale to use in searching. The default locale is the host environment's current locale. * @group Props */ - @Input() searchLocale: boolean | undefined; + @Input({ transform: booleanAttribute }) searchLocale: boolean | undefined; /** * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined. * @group Props @@ -603,7 +604,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * When enabled, the hovered option will be focused. * @group Props */ - @Input() focusOnHover: boolean | undefined; + @Input({ transform: booleanAttribute }) focusOnHover: boolean | undefined; /** * Callback to invoke to search for suggestions. * @param {AutoCompleteCompleteEvent} event - Custom complete event. diff --git a/src/app/components/autofocus/autofocus.ts b/src/app/components/autofocus/autofocus.ts index 6babd0d1998..7676a7beebd 100644 --- a/src/app/components/autofocus/autofocus.ts +++ b/src/app/components/autofocus/autofocus.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { Directive, ElementRef, Input, NgModule } from '@angular/core'; +import { Directive, ElementRef, Input, NgModule, booleanAttribute } from '@angular/core'; import { DomHandler } from 'primeng/dom'; /** * AutoFocus manages focus on focusable element on load. @@ -17,7 +17,7 @@ export class AutoFocus { * When present, it specifies that the component should automatically get focus on load. * @group Props */ - @Input() autofocus: boolean | undefined; + @Input({ transform: booleanAttribute }) autofocus: boolean | undefined; focused: boolean = false; diff --git a/src/app/components/badge/badge.ts b/src/app/components/badge/badge.ts index 3292ec79fed..df9cae7a047 100755 --- a/src/app/components/badge/badge.ts +++ b/src/app/components/badge/badge.ts @@ -1,5 +1,5 @@ import { CommonModule, DOCUMENT } from '@angular/common'; -import { AfterViewInit, ChangeDetectionStrategy, Component, Directive, ElementRef, Inject, Input, NgModule, OnDestroy, Renderer2, ViewEncapsulation } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, Directive, ElementRef, Inject, Input, NgModule, OnDestroy, Renderer2, ViewEncapsulation, booleanAttribute } from '@angular/core'; import { SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; import { UniqueComponentId } from 'primeng/utils'; @@ -197,7 +197,7 @@ export class Badge { * When specified, disables the component. * @group Props */ - @Input() badgeDisabled: boolean = false; + @Input({ transform: booleanAttribute }) badgeDisabled: boolean = false; containerClass() { return { diff --git a/src/app/components/baseicon/baseicon.ts b/src/app/components/baseicon/baseicon.ts index 7a5773018e4..97d43814586 100644 --- a/src/app/components/baseicon/baseicon.ts +++ b/src/app/components/baseicon/baseicon.ts @@ -1,4 +1,4 @@ -import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, HostBinding } from '@angular/core'; +import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, HostBinding, booleanAttribute } from '@angular/core'; import { ObjectUtils } from 'primeng/utils'; @Component({ @@ -13,7 +13,7 @@ import { ObjectUtils } from 'primeng/utils'; export class BaseIcon { @Input() label: string; - @Input() spin: boolean = false; + @Input({ transform: booleanAttribute }) spin: boolean = false; @Input() styleClass: string; diff --git a/src/app/components/blockui/blockui.ts b/src/app/components/blockui/blockui.ts index d0f341e1b34..eb12ba15683 100755 --- a/src/app/components/blockui/blockui.ts +++ b/src/app/components/blockui/blockui.ts @@ -1,5 +1,23 @@ import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, Inject, Input, NgModule, OnDestroy, PLATFORM_ID, QueryList, Renderer2, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; +import { + AfterViewInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + ElementRef, + Inject, + Input, + NgModule, + OnDestroy, + PLATFORM_ID, + QueryList, + Renderer2, + TemplateRef, + ViewChild, + ViewEncapsulation, + booleanAttribute +} from '@angular/core'; import { PrimeNGConfig, PrimeTemplate } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; import { ZIndexUtils } from 'primeng/utils'; @@ -40,7 +58,7 @@ export class BlockUI implements AfterViewInit, OnDestroy { * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts index 196fba84d5d..53212778126 100755 --- a/src/app/components/button/button.ts +++ b/src/app/components/button/button.ts @@ -1,5 +1,23 @@ import { CommonModule, DOCUMENT } from '@angular/common'; -import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, ContentChildren, Directive, ElementRef, EventEmitter, Inject, Input, NgModule, OnDestroy, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { + AfterContentInit, + AfterViewInit, + ChangeDetectionStrategy, + Component, + ContentChildren, + Directive, + ElementRef, + EventEmitter, + Inject, + Input, + NgModule, + OnDestroy, + Output, + QueryList, + TemplateRef, + ViewEncapsulation, + booleanAttribute +} from '@angular/core'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; import { SpinnerIcon } from 'primeng/icons/spinner'; @@ -310,12 +328,12 @@ export class Button implements AfterContentInit { * When present, it specifies that the component should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Whether the button is in loading state. * @group Props */ - @Input() loading: boolean = false; + @Input({ transform: booleanAttribute }) loading: boolean = false; /** * Icon to display in loading state. * @group Props @@ -325,22 +343,22 @@ export class Button implements AfterContentInit { * Add a shadow to indicate elevation. * @group Props */ - @Input() raised: boolean = false; + @Input({ transform: booleanAttribute }) raised: boolean = false; /** * Add a circular border radius to the button. * @group Props */ - @Input() rounded: boolean = false; + @Input({ transform: booleanAttribute }) rounded: boolean = false; /** * Add a textual class to the button without a background initially. * @group Props */ - @Input() text: boolean = false; + @Input({ transform: booleanAttribute }) text: boolean = false; /** * Add a plain textual class to the button without a background initially. * @group Props */ - @Input() plain: boolean = false; + @Input({ transform: booleanAttribute }) plain: boolean = false; /** * Defines the style of the button. * @group Props @@ -350,12 +368,12 @@ export class Button implements AfterContentInit { * Add a border class without a background initially. * @group Props */ - @Input() outlined: boolean = false; + @Input({ transform: booleanAttribute }) outlined: boolean = false; /** * Add a link style to the button. * @group Props */ - @Input() link: boolean = false; + @Input({ transform: booleanAttribute }) link: boolean = false; /** * Defines the size of the button. * @group Props diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts index 2712e0bc0db..d1c42117921 100755 --- a/src/app/components/calendar/calendar.ts +++ b/src/app/components/calendar/calendar.ts @@ -1,6 +1,7 @@ import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations'; import { CommonModule, DOCUMENT } from '@angular/common'; import { + booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -520,7 +521,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * When specified, disables the component. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Format of the date which can also be defined at locale settings. * @group Props @@ -540,22 +541,22 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * When enabled, displays the calendar as inline. Default is false for popup mode. * @group Props */ - @Input() inline: boolean = false; + @Input({ transform: booleanAttribute }) inline: boolean = false; /** * Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option. * @group Props */ - @Input() showOtherMonths: boolean = true; + @Input({ transform: booleanAttribute }) showOtherMonths: boolean = true; /** * Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true. * @group Props */ - @Input() selectOtherMonths: boolean | undefined; + @Input({ transform: booleanAttribute }) selectOtherMonths: boolean | undefined; /** * When enabled, displays a button with icon next to input. * @group Props */ - @Input() showIcon: boolean | undefined; + @Input({ transform: booleanAttribute }) showIcon: boolean | undefined; /** * Icon of the calendar button. * @group Props @@ -570,7 +571,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * When specified, prevents entering the date manually with keyboard. * @group Props */ - @Input() readonlyInput: boolean | undefined; + @Input({ transform: booleanAttribute }) readonlyInput: boolean | undefined; /** * The cutoff year for determining the century for a date. * @group Props @@ -581,13 +582,13 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * @group Props * @deprecated Navigator is always on. */ - @Input() monthNavigator: boolean | undefined; + @Input({ transform: booleanAttribute }) monthNavigator: boolean | undefined; /** * Whether the year should be rendered as a dropdown instead of text. * @group Props * @deprecated Navigator is always on. */ - @Input() yearNavigator: boolean | undefined; + @Input({ transform: booleanAttribute }) yearNavigator: boolean | undefined; /** * Specifies 12 or 24 hour format. * @group Props @@ -597,7 +598,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * Whether to display timepicker only. * @group Props */ - @Input() timeOnly: boolean | undefined; + @Input({ transform: booleanAttribute }) timeOnly: boolean | undefined; /** * Hours to change per step. * @group Props @@ -617,27 +618,27 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * Whether to show the seconds in time picker. * @group Props */ - @Input() showSeconds: boolean = false; + @Input({ transform: booleanAttribute }) showSeconds: boolean = false; /** * When present, it specifies that an input field must be filled out before submitting the form. * @group Props */ - @Input() required: boolean | undefined; + @Input({ transform: booleanAttribute }) required: boolean | undefined; /** * When disabled, datepicker will not be visible with input focus. * @group Props */ - @Input() showOnFocus: boolean = true; + @Input({ transform: booleanAttribute }) showOnFocus: boolean = true; /** * When enabled, calendar will show week numbers. * @group Props */ - @Input() showWeek: boolean = false; + @Input({ transform: booleanAttribute }) showWeek: boolean = false; /** * When enabled, a clear icon is displayed to clear the value. * @group Props */ - @Input() showClear: boolean = false; + @Input({ transform: booleanAttribute }) showClear: boolean = false; /** * Type of the value to write back to ngModel, default is date and alternative is string. * @group Props @@ -657,7 +658,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * Whether to display today and clear buttons at the footer * @group Props */ - @Input() showButtonBar: boolean | undefined; + @Input({ transform: booleanAttribute }) showButtonBar: boolean | undefined; /** * Style class of the today button. * @group Props @@ -672,7 +673,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props @@ -692,17 +693,17 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * Keep invalid value when input blur. * @group Props */ - @Input() keepInvalid: boolean = false; + @Input({ transform: booleanAttribute }) keepInvalid: boolean = false; /** * Whether to hide the overlay on date selection. * @group Props */ - @Input() hideOnDateTimeSelect: boolean = true; + @Input({ transform: booleanAttribute }) hideOnDateTimeSelect: boolean = true; /** * When enabled, calendar overlay is displayed as optimized for touch devices. * @group Props */ - @Input() touchUI: boolean | undefined; + @Input({ transform: booleanAttribute }) touchUI: boolean | undefined; /** * Separator of time selector. * @group Props @@ -712,7 +713,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * When enabled, can only focus on elements inside the calendar. * @group Props */ - @Input() focusTrap: boolean = true; + @Input({ transform: booleanAttribute }) focusTrap: boolean = true; /** * Transition options of the show animation. * @group Props diff --git a/src/app/components/carousel/carousel.ts b/src/app/components/carousel/carousel.ts index 9388ef164f1..9818a067e1e 100755 --- a/src/app/components/carousel/carousel.ts +++ b/src/app/components/carousel/carousel.ts @@ -19,7 +19,8 @@ import { SimpleChanges, TemplateRef, ViewChild, - ViewEncapsulation + ViewEncapsulation, + booleanAttribute } from '@angular/core'; import { Footer, Header, PrimeTemplate, SharedModule } from 'primeng/api'; import { ChevronDownIcon } from 'primeng/icons/chevrondown'; @@ -248,17 +249,17 @@ export class Carousel implements AfterContentInit { * Defines if scrolling would be infinite. * @group Props */ - @Input() circular: boolean = false; + @Input({ transform: booleanAttribute }) circular: boolean = false; /** * Whether to display indicator container. * @group Props */ - @Input() showIndicators: boolean = true; + @Input({ transform: booleanAttribute }) showIndicators: boolean = true; /** * Whether to display navigation buttons in container. * @group Props */ - @Input() showNavigators: boolean = true; + @Input({ transform: booleanAttribute }) showNavigators: boolean = true; /** * Time in milliseconds to scroll items automatically. * @group Props diff --git a/src/app/components/cascadeselect/cascadeselect.ts b/src/app/components/cascadeselect/cascadeselect.ts index cb0f65ee73e..ded7a6a0644 100755 --- a/src/app/components/cascadeselect/cascadeselect.ts +++ b/src/app/components/cascadeselect/cascadeselect.ts @@ -2,6 +2,7 @@ import { AnimationEvent } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { AfterContentInit, + booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -120,9 +121,9 @@ export class CascadeSelectSub implements OnInit { @Input() optionGroupLabel: string | undefined; - @Input() dirty: boolean | undefined; + @Input({ transform: booleanAttribute }) dirty: boolean | undefined; - @Input() root: boolean | undefined; + @Input({ transform: booleanAttribute }) root: boolean | undefined; @Output() onChange: EventEmitter = new EventEmitter(); @@ -333,7 +334,7 @@ export class CascadeSelect implements OnInit, AfterContentInit { * Determines if the option will be selected on focus. * @group Props */ - @Input() selectOnFocus: boolean = false; + @Input({ transform: booleanAttribute }) selectOnFocus: boolean = false; /** * Text to display when the search is active. Defaults to global value in i18n translation configuration. * @group Props @@ -377,7 +378,7 @@ export class CascadeSelect implements OnInit, AfterContentInit { * Whether to focus on the first visible or selected element when the overlay panel is shown. * @group Props */ - @Input() autoOptionFocus: boolean = true; + @Input({ transform: booleanAttribute }) autoOptionFocus: boolean = true; /** * Style class of the component. * @group Props @@ -462,12 +463,12 @@ export class CascadeSelect implements OnInit, AfterContentInit { * When present, it specifies that the component should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * When enabled, a clear icon is displayed to clear the value. * @group Props */ - @Input() showClear: boolean = false; + @Input({ transform: booleanAttribute }) showClear: boolean = false; /** * Style class of the overlay panel. * @group Props diff --git a/src/app/components/chart/chart.ts b/src/app/components/chart/chart.ts index 153024898e9..7222fec6b5f 100755 --- a/src/app/components/chart/chart.ts +++ b/src/app/components/chart/chart.ts @@ -1,4 +1,4 @@ -import { NgModule, Component, ElementRef, AfterViewInit, OnDestroy, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, Inject, PLATFORM_ID, NgZone } from '@angular/core'; +import { NgModule, Component, ElementRef, AfterViewInit, OnDestroy, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, Inject, PLATFORM_ID, NgZone, booleanAttribute } from '@angular/core'; import { CommonModule, isPlatformBrowser } from '@angular/common'; import Chart from 'chart.js/auto'; /** @@ -43,7 +43,7 @@ export class UIChart implements AfterViewInit, OnDestroy { * Whether the chart is redrawn on screen size change. * @group Props */ - @Input() responsive: boolean = true; + @Input({ transform: booleanAttribute }) responsive: boolean = true; /** * Used to define a string that autocomplete attribute the current element. * @group Props diff --git a/src/app/components/checkbox/checkbox.ts b/src/app/components/checkbox/checkbox.ts index 8ad9309aef4..540555eee9c 100755 --- a/src/app/components/checkbox/checkbox.ts +++ b/src/app/components/checkbox/checkbox.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; +import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { CheckIcon } from 'primeng/icons/check'; @@ -101,12 +101,12 @@ export class Checkbox implements ControlValueAccessor { * When present, it specifies that the element should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Allows to select a boolean value instead of multiple values. * @group Props */ - @Input() binary: boolean | undefined; + @Input({ transform: booleanAttribute }) binary: boolean | undefined; /** * Label of the checkbox. * @group Props @@ -161,12 +161,12 @@ export class Checkbox implements ControlValueAccessor { * When present, it specifies that the component cannot be edited. * @group Props */ - @Input() readonly: boolean | undefined; + @Input({ transform: booleanAttribute }) readonly: boolean | undefined; /** * When present, it specifies that checkbox must be checked before submitting the form. * @group Props */ - @Input() required: boolean | undefined; + @Input({ transform: booleanAttribute }) required: boolean | undefined; /** * Value in checked state. * @group Props diff --git a/src/app/components/chip/chip.ts b/src/app/components/chip/chip.ts index 020073ea7bb..ca31b0fc369 100755 --- a/src/app/components/chip/chip.ts +++ b/src/app/components/chip/chip.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute } from '@angular/core'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { TimesCircleIcon } from 'primeng/icons/timescircle'; /** @@ -62,7 +62,7 @@ export class Chip implements AfterContentInit { * Whether to display a remove icon. * @group Props */ - @Input() removable: boolean | undefined = false; + @Input({ transform: booleanAttribute }) removable: boolean | undefined = false; /** * Icon of the remove element. * @group Props diff --git a/src/app/components/chips/chips.ts b/src/app/components/chips/chips.ts index dafd9c4ea7e..fb342218965 100755 --- a/src/app/components/chips/chips.ts +++ b/src/app/components/chips/chips.ts @@ -1,5 +1,23 @@ import { CommonModule, DOCUMENT } from '@angular/common'; -import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Inject, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core'; +import { + AfterContentInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + ElementRef, + EventEmitter, + Inject, + Input, + NgModule, + Output, + QueryList, + TemplateRef, + ViewChild, + ViewEncapsulation, + booleanAttribute, + forwardRef +} from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { TimesIcon } from 'primeng/icons/times'; @@ -124,7 +142,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor { * When present, it specifies that the element should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Name of the property to display on a chip. * @group Props @@ -164,12 +182,12 @@ export class Chips implements AfterContentInit, ControlValueAccessor { * Whether to allow duplicate values or not. * @group Props */ - @Input() allowDuplicate: boolean = true; + @Input({ transform: booleanAttribute }) allowDuplicate: boolean = true; /** * Defines whether duplication check should be case-sensitive * @group Props */ - @Input() caseSensitiveDuplication: boolean = true; + @Input({ transform: booleanAttribute }) caseSensitiveDuplication: boolean = true; /** * Inline style of the input field. * @group Props @@ -184,12 +202,12 @@ export class Chips implements AfterContentInit, ControlValueAccessor { * Whether to add an item on tab key press. * @group Props */ - @Input() addOnTab: boolean | undefined; + @Input({ transform: booleanAttribute }) addOnTab: boolean | undefined; /** * Whether to add an item when the input loses focus. * @group Props */ - @Input() addOnBlur: boolean | undefined; + @Input({ transform: booleanAttribute }) addOnBlur: boolean | undefined; /** * Separator char to add an item when pressed in addition to the enter key. * @group Props @@ -199,7 +217,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor { * When enabled, a clear icon is displayed to clear the value. * @group Props */ - @Input() showClear: boolean = false; + @Input({ transform: booleanAttribute }) showClear: boolean = false; /** * Callback to invoke on chip add. * @param {ChipsAddEvent} event - Custom chip add event. diff --git a/src/app/components/colorpicker/colorpicker.ts b/src/app/components/colorpicker/colorpicker.ts index 5816868295a..169a86ff533 100755 --- a/src/app/components/colorpicker/colorpicker.ts +++ b/src/app/components/colorpicker/colorpicker.ts @@ -1,6 +1,24 @@ import { AnimationEvent, animate, style, transition, trigger } from '@angular/animations'; import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, NgModule, OnDestroy, Output, PLATFORM_ID, Renderer2, TemplateRef, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + Inject, + Input, + NgModule, + OnDestroy, + Output, + PLATFORM_ID, + Renderer2, + TemplateRef, + ViewChild, + ViewEncapsulation, + booleanAttribute, + forwardRef +} from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { OverlayService, PrimeNGConfig } from 'primeng/api'; import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; @@ -91,7 +109,7 @@ export class ColorPicker implements ControlValueAccessor, OnDestroy { * Whether to display as an overlay or not. * @group Props */ - @Input() inline: boolean | undefined; + @Input({ transform: booleanAttribute }) inline: boolean | undefined; /** * Format to use in value binding. * @group Props @@ -106,7 +124,7 @@ export class ColorPicker implements ControlValueAccessor, OnDestroy { * When present, it specifies that the component should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Index of the element in tabbing order. * @group Props @@ -121,7 +139,7 @@ export class ColorPicker implements ControlValueAccessor, OnDestroy { * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props diff --git a/src/app/components/confirmdialog/confirmdialog.ts b/src/app/components/confirmdialog/confirmdialog.ts index 531788809e5..e2571cdf42a 100755 --- a/src/app/components/confirmdialog/confirmdialog.ts +++ b/src/app/components/confirmdialog/confirmdialog.ts @@ -21,7 +21,8 @@ import { TemplateRef, ViewChild, ViewEncapsulation, - ViewRef + ViewRef, + booleanAttribute } from '@angular/core'; import { ConfirmEventType, Confirmation, ConfirmationService, Footer, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; @@ -198,7 +199,7 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy { * Visibility of the accept button. * @group Props */ - @Input() acceptVisible: boolean = true; + @Input({ transform: booleanAttribute }) acceptVisible: boolean = true; /** * Icon of the reject button. * @group Props @@ -218,7 +219,7 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy { * Visibility of the reject button. * @group Props */ - @Input() rejectVisible: boolean = true; + @Input({ transform: booleanAttribute }) rejectVisible: boolean = true; /** * Style class of the accept button. * @group Props @@ -233,27 +234,27 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy { * Specifies if pressing escape key should hide the dialog. * @group Props */ - @Input() closeOnEscape: boolean = true; + @Input({ transform: booleanAttribute }) closeOnEscape: boolean = true; /** * Specifies if clicking the modal background should hide the dialog. * @group Props */ - @Input() dismissableMask: boolean | undefined; + @Input({ transform: booleanAttribute }) dismissableMask: boolean | undefined; /** * Determines whether scrolling behavior should be blocked within the component. * @group Props */ - @Input() blockScroll: boolean = true; + @Input({ transform: booleanAttribute }) blockScroll: boolean = true; /** * When enabled dialog is displayed in RTL direction. * @group Props */ - @Input() rtl: boolean = false; + @Input({ transform: booleanAttribute }) rtl: boolean = false; /** * Adds a close icon to the header to hide the dialog. * @group Props */ - @Input() closable: boolean = true; + @Input({ transform: booleanAttribute }) closable: boolean = true; /** * Target element to attach the dialog, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). * @group Props @@ -268,7 +269,7 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy { * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props @@ -283,7 +284,7 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy { * When enabled, can only focus on elements inside the confirm dialog. * @group Props */ - @Input() focusTrap: boolean = true; + @Input({ transform: booleanAttribute }) focusTrap: boolean = true; /** * Element to receive the focus when the dialog gets visible. * @group Props diff --git a/src/app/components/confirmpopup/confirmpopup.ts b/src/app/components/confirmpopup/confirmpopup.ts index 9eb57246433..2a28d3156b6 100755 --- a/src/app/components/confirmpopup/confirmpopup.ts +++ b/src/app/components/confirmpopup/confirmpopup.ts @@ -16,7 +16,8 @@ import { QueryList, Renderer2, TemplateRef, - ViewEncapsulation + ViewEncapsulation, + booleanAttribute } from '@angular/core'; import { Confirmation, ConfirmationService, OverlayService, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; @@ -138,7 +139,7 @@ export class ConfirmPopup implements AfterContentInit, OnDestroy { * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts index 233a9f28fc3..3ffe14892e3 100755 --- a/src/app/components/contextmenu/contextmenu.ts +++ b/src/app/components/contextmenu/contextmenu.ts @@ -22,6 +22,7 @@ import { ViewContainerRef, ViewEncapsulation, ViewRef, + booleanAttribute, effect, forwardRef, signal @@ -195,19 +196,19 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils'; } }) export class ContextMenuSub { - @Input() visible: boolean = false; + @Input({ transform: booleanAttribute }) visible: boolean = false; @Input() items: any[]; @Input() itemTemplate: HTMLElement | undefined; - @Input() root: boolean | undefined = false; + @Input({ transform: booleanAttribute }) root: boolean | undefined = false; - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; @Input() baseZIndex: number = 0; - @Input() popup: boolean | undefined; + @Input({ transform: booleanAttribute }) popup: boolean | undefined; @Input() menuId: string | undefined; @@ -410,7 +411,7 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy { * Attaches the menu to document instead of a particular item. * @group Props */ - @Input() global: boolean; + @Input({ transform: booleanAttribute }) global: boolean; /** * Inline style of the component. * @group Props @@ -430,7 +431,7 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy { * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props diff --git a/src/app/components/dataview/dataview.ts b/src/app/components/dataview/dataview.ts index 0808ac847c4..806259a832d 100755 --- a/src/app/components/dataview/dataview.ts +++ b/src/app/components/dataview/dataview.ts @@ -16,7 +16,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, ViewEncapsulation, - OnDestroy + OnDestroy, + booleanAttribute } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ObjectUtils } from 'primeng/utils'; @@ -125,7 +126,7 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU * When specified as true, enables the pagination. * @group Props */ - @Input() paginator: boolean | undefined; + @Input({ transform: booleanAttribute }) paginator: boolean | undefined; /** * Number of rows to display per page. * @group Props @@ -160,7 +161,7 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU * Whether to show it even there is only one page. * @group Props */ - @Input() alwaysShowPaginator: boolean = true; + @Input({ transform: booleanAttribute }) alwaysShowPaginator: boolean = true; /** * Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). * @group Props @@ -180,32 +181,32 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU * Whether to display current page report. * @group Props */ - @Input() showCurrentPageReport: boolean | undefined; + @Input({ transform: booleanAttribute }) showCurrentPageReport: boolean | undefined; /** * Whether to display a dropdown to navigate to any page. * @group Props */ - @Input() showJumpToPageDropdown: boolean | undefined; + @Input({ transform: booleanAttribute }) showJumpToPageDropdown: boolean | undefined; /** * When enabled, icons are displayed on paginator to go first and last page. * @group Props */ - @Input() showFirstLastIcon: boolean = true; + @Input({ transform: booleanAttribute }) showFirstLastIcon: boolean = true; /** * Whether to show page links. * @group Props */ - @Input() showPageLinks: boolean = true; + @Input({ transform: booleanAttribute }) showPageLinks: boolean = true; /** * Defines if data is loaded and interacted with in lazy manner. * @group Props */ - @Input() lazy: boolean | undefined; + @Input({ transform: booleanAttribute }) lazy: boolean | undefined; /** * Whether to call lazy loading on initialization. * @group Props */ - @Input() lazyLoadOnInit: boolean = true; + @Input({ transform: booleanAttribute }) lazyLoadOnInit: boolean = true; /** * Text to display when there is no data. Defaults to global value in i18n translation configuration. * @group Props @@ -245,7 +246,7 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU * Displays a loader to indicate data load is in progress. * @group Props */ - @Input() loading: boolean | undefined; + @Input({ transform: booleanAttribute }) loading: boolean | undefined; /** * The icon to show while indicating data load is in progress. * @group Props diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts index a7f999916fe..7636d1ddb5c 100755 --- a/src/app/components/dialog/dialog.ts +++ b/src/app/components/dialog/dialog.ts @@ -23,7 +23,8 @@ import { TemplateRef, ViewChild, ViewEncapsulation, - ViewRef + ViewRef, + booleanAttribute } from '@angular/core'; import { Footer, Header, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; @@ -154,12 +155,12 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { * Enables dragging to change the position using header. * @group Props */ - @Input() draggable: boolean = true; + @Input({ transform: booleanAttribute }) draggable: boolean = true; /** * Enables resizing of the content. * @group Props */ - @Input() resizable: boolean = true; + @Input({ transform: booleanAttribute }) resizable: boolean = true; /** * Defines the left offset of dialog. * @group Props @@ -196,27 +197,27 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { * Defines if background should be blocked when dialog is displayed. * @group Props */ - @Input() modal: boolean = false; + @Input({ transform: booleanAttribute }) modal: boolean = false; /** * Specifies if pressing escape key should hide the dialog. * @group Props */ - @Input() closeOnEscape: boolean = true; + @Input({ transform: booleanAttribute }) closeOnEscape: boolean = true; /** * Specifies if clicking the modal background should hide the dialog. * @group Props */ - @Input() dismissableMask: boolean = false; + @Input({ transform: booleanAttribute }) dismissableMask: boolean = false; /** * When enabled dialog is displayed in RTL direction. * @group Props */ - @Input() rtl: boolean = false; + @Input({ transform: booleanAttribute }) rtl: boolean = false; /** * Adds a close icon to the header to hide the dialog. * @group Props */ - @Input() closable: boolean = true; + @Input({ transform: booleanAttribute }) closable: boolean = true; /** * Defines if the component is responsive. * @group Props @@ -257,7 +258,7 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { * Whether to show the header or not. * @group Props */ - @Input() showHeader: boolean = true; + @Input({ transform: booleanAttribute }) showHeader: boolean = true; /** * Defines the breakpoint of the component responsive. * @group Props @@ -273,12 +274,12 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { * Whether background scroll should be blocked when dialog is visible. * @group Props */ - @Input() blockScroll: boolean = false; + @Input({ transform: booleanAttribute }) blockScroll: boolean = false; /** * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props @@ -298,22 +299,22 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { * When enabled, first button receives focus on show. * @group Props */ - @Input() focusOnShow: boolean = true; + @Input({ transform: booleanAttribute }) focusOnShow: boolean = true; /** * Whether the dialog can be displayed full screen. * @group Props */ - @Input() maximizable: boolean = false; + @Input({ transform: booleanAttribute }) maximizable: boolean = false; /** * Keeps dialog in the viewport. * @group Props */ - @Input() keepInViewport: boolean = true; + @Input({ transform: booleanAttribute }) keepInViewport: boolean = true; /** * When enabled, can only focus on elements inside the dialog. * @group Props */ - @Input() focusTrap: boolean = true; + @Input({ transform: booleanAttribute }) focusTrap: boolean = true; /** * Transition options of the animation. * @group Props diff --git a/src/app/components/dragdrop/dragdrop.ts b/src/app/components/dragdrop/dragdrop.ts index 07fa916ec69..cc1438acf04 100755 --- a/src/app/components/dragdrop/dragdrop.ts +++ b/src/app/components/dragdrop/dragdrop.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { AfterViewInit, Directive, ElementRef, EventEmitter, HostListener, Input, NgModule, NgZone, OnDestroy, Output, Renderer2 } from '@angular/core'; +import { AfterViewInit, Directive, ElementRef, EventEmitter, HostListener, Input, NgModule, NgZone, OnDestroy, Output, Renderer2, booleanAttribute } from '@angular/core'; import { DomHandler } from 'primeng/dom'; import { VoidListener } from 'primeng/ts-helpers'; /** @@ -173,7 +173,7 @@ export class Droppable implements AfterViewInit, OnDestroy { * Whether the element is droppable, useful for conditional cases. * @group Props */ - @Input() pDroppableDisabled: boolean = false; + @Input({ transform: booleanAttribute }) pDroppableDisabled: boolean = false; /** * Defines the cursor style, valid values are none, copy, move, link, copyMove, copyLink, linkMove and all. * @group Props diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index c1bd64f3bf7..6be6573f742 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -4,6 +4,7 @@ import { AfterContentInit, AfterViewChecked, AfterViewInit, + booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -81,15 +82,15 @@ export class DropdownItem { @Input() option: SelectItem | undefined; - @Input() selected: boolean | undefined; + @Input({ transform: booleanAttribute }) selected: boolean | undefined; - @Input() focused: boolean | undefined; + @Input({ transform: booleanAttribute }) focused: boolean | undefined; @Input() label: string | undefined; - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; - @Input() visible: boolean | undefined; + @Input({ transform: booleanAttribute }) visible: boolean | undefined; @Input() itemSize: number | undefined; @@ -348,7 +349,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV * When specified, displays an input field to filter the items on keyup. * @group Props */ - @Input() filter: boolean | undefined; + @Input({ transform: booleanAttribute }) filter: boolean | undefined; /** * Name of the input element. * @group Props @@ -378,17 +379,17 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV * When present, it specifies that the component cannot be edited. * @group Props */ - @Input() readonly: boolean | undefined; + @Input({ transform: booleanAttribute }) readonly: boolean | undefined; /** * When present, it specifies that an input field must be filled out before submitting the form. * @group Props */ - @Input() required: boolean | undefined; + @Input({ transform: booleanAttribute }) required: boolean | undefined; /** * When present, custom value instead of predefined options can be entered using the editable input field. * @group Props */ - @Input() editable: boolean | undefined; + @Input({ transform: booleanAttribute }) editable: boolean | undefined; /** * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). * @group Props @@ -438,12 +439,12 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV * When present, it specifies that the component should automatically get focus on load. * @group Props */ - @Input() autofocus: boolean | undefined; + @Input({ transform: booleanAttribute }) autofocus: boolean | undefined; /** * Clears the filter value when hiding the dropdown. * @group Props */ - @Input() resetFilterOnHide: boolean = false; + @Input({ transform: booleanAttribute }) resetFilterOnHide: boolean = false; /** * Icon class of the dropdown icon. * @group Props @@ -479,17 +480,17 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV * @deprecated since v17.3.0, set initial value by model instead. * @group Props */ - @Input() autoDisplayFirst: boolean = true; + @Input({ transform: booleanAttribute }) autoDisplayFirst: boolean = true; /** * Whether to display options as grouped when nested options are provided. * @group Props */ - @Input() group: boolean | undefined; + @Input({ transform: booleanAttribute }) group: boolean | undefined; /** * When enabled, a clear icon is displayed to clear the value. * @group Props */ - @Input() showClear: boolean | undefined; + @Input({ transform: booleanAttribute }) showClear: boolean | undefined; /** * Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration. * @group Props @@ -504,12 +505,12 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV * Defines if data is loaded and interacted with in lazy manner. * @group Props */ - @Input() lazy: boolean = false; + @Input({ transform: booleanAttribute }) lazy: boolean = false; /** * Whether the data should be loaded on demand during scroll. * @group Props */ - @Input() virtualScroll: boolean | undefined; + @Input({ transform: booleanAttribute }) virtualScroll: boolean | undefined; /** * Height of an item in the list for VirtualScrolling. * @group Props @@ -574,22 +575,22 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV * Fields used when filtering the options, defaults to optionLabel. * @group Props */ - @Input() focusOnHover: boolean = false; + @Input({ transform: booleanAttribute }) focusOnHover: boolean = false; /** * Determines if the option will be selected on focus. * @group Props */ - @Input() selectOnFocus: boolean = false; + @Input({ transform: booleanAttribute }) selectOnFocus: boolean = false; /** * Whether to focus on the first visible or selected element when the overlay panel is shown. * @group Props */ - @Input() autoOptionFocus: boolean = true; + @Input({ transform: booleanAttribute }) autoOptionFocus: boolean = true; /** * Applies focus to the filter element when the overlay is shown. * @group Props */ - @Input() autofocusFilter: boolean = true; + @Input({ transform: booleanAttribute }) autofocusFilter: boolean = true; /** * When present, it specifies that the component should be disabled. * @group Props diff --git a/src/app/components/fieldset/fieldset.ts b/src/app/components/fieldset/fieldset.ts index 2751c32ed2c..d435d92577b 100755 --- a/src/app/components/fieldset/fieldset.ts +++ b/src/app/components/fieldset/fieldset.ts @@ -1,6 +1,6 @@ import { animate, state, style, transition, trigger } from '@angular/animations'; import { CommonModule } from '@angular/common'; -import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute } from '@angular/core'; import { BlockableUI, PrimeTemplate, SharedModule } from 'primeng/api'; import { MinusIcon } from 'primeng/icons/minus'; import { PlusIcon } from 'primeng/icons/plus'; @@ -101,12 +101,12 @@ export class Fieldset implements AfterContentInit, BlockableUI { * @group Props * @defaultValue false */ - @Input() toggleable: boolean | undefined; + @Input({ transform: booleanAttribute }) toggleable: boolean | undefined; /** * Defines the default visibility state of the content. * * @group Props */ - @Input() collapsed: boolean | undefined = false; + @Input({ transform: booleanAttribute }) collapsed: boolean | undefined = false; /** * Inline style of the component. * @group Props diff --git a/src/app/components/fileupload/fileupload.ts b/src/app/components/fileupload/fileupload.ts index 16b25fb0a22..bd6f959cf3a 100755 --- a/src/app/components/fileupload/fileupload.ts +++ b/src/app/components/fileupload/fileupload.ts @@ -21,7 +21,8 @@ import { Renderer2, TemplateRef, ViewChild, - ViewEncapsulation + ViewEncapsulation, + booleanAttribute } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { BlockableUI, Message, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api'; @@ -177,7 +178,7 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe * Used to select multiple files at once from file dialog. * @group Props */ - @Input() multiple: boolean | undefined; + @Input({ transform: booleanAttribute }) multiple: boolean | undefined; /** * Comma-separated list of pattern to restrict the allowed file types. Can be any combination of either the MIME types (such as "image/*") or the file extensions (such as ".jpg"). * @group Props @@ -187,17 +188,17 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe * Disables the upload functionality. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * When enabled, upload begins automatically after selection is completed. * @group Props */ - @Input() auto: boolean | undefined; + @Input({ transform: booleanAttribute }) auto: boolean | undefined; /** * Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. * @group Props */ - @Input() withCredentials: boolean | undefined; + @Input({ transform: booleanAttribute }) withCredentials: boolean | undefined; /** * Maximum file size allowed in bytes. * @group Props @@ -282,12 +283,12 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe * Whether to show the upload button. * @group Props */ - @Input() showUploadButton: boolean = true; + @Input({ transform: booleanAttribute }) showUploadButton: boolean = true; /** * Whether to show the cancel button. * @group Props */ - @Input() showCancelButton: boolean = true; + @Input({ transform: booleanAttribute }) showCancelButton: boolean = true; /** * Defines the UI of the component. * @group Props @@ -302,7 +303,7 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe * Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeNG Locale configuration. * @group Props */ - @Input() customUpload: boolean | undefined; + @Input({ transform: booleanAttribute }) customUpload: boolean | undefined; /** * Maximum number of files that can be uploaded. * @group Props diff --git a/src/app/components/focustrap/focustrap.ts b/src/app/components/focustrap/focustrap.ts index aacd4119aae..9db5f2f4163 100755 --- a/src/app/components/focustrap/focustrap.ts +++ b/src/app/components/focustrap/focustrap.ts @@ -1,7 +1,7 @@ import { DomHandler } from 'primeng/dom'; import { CommonModule } from '@angular/common'; -import { Directive, ElementRef, HostListener, Input, NgModule } from '@angular/core'; +import { Directive, ElementRef, HostListener, Input, NgModule, booleanAttribute } from '@angular/core'; /** * Focus Trap keeps focus within a certain DOM element while tabbing. * @group Components @@ -17,7 +17,7 @@ export class FocusTrap { * When set as true, focus wouldn't be managed. * @group Props */ - @Input() pFocusTrapDisabled: boolean = false; + @Input({ transform: booleanAttribute }) pFocusTrapDisabled: boolean = false; constructor(public el: ElementRef) {} diff --git a/src/app/components/galleria/galleria.ts b/src/app/components/galleria/galleria.ts index a5852a7c76f..507fb637c35 100755 --- a/src/app/components/galleria/galleria.ts +++ b/src/app/components/galleria/galleria.ts @@ -24,7 +24,8 @@ import { SimpleChanges, TemplateRef, ViewChild, - ViewEncapsulation + ViewEncapsulation, + booleanAttribute } from '@angular/core'; import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; @@ -101,7 +102,7 @@ export class Galleria implements OnChanges, OnDestroy { * Whether to display the component on fullscreen. * @group Props */ - @Input() fullScreen: boolean = false; + @Input({ transform: booleanAttribute }) fullScreen: boolean = false; /** * Unique identifier of the element. * @group Props @@ -127,37 +128,37 @@ export class Galleria implements OnChanges, OnDestroy { * Whether to display navigation buttons in item section. * @group Props */ - @Input() showItemNavigators: boolean = false; + @Input({ transform: booleanAttribute }) showItemNavigators: boolean = false; /** * Whether to display navigation buttons in thumbnail container. * @group Props */ - @Input() showThumbnailNavigators: boolean = true; + @Input({ transform: booleanAttribute }) showThumbnailNavigators: boolean = true; /** * Whether to display navigation buttons on item hover. * @group Props */ - @Input() showItemNavigatorsOnHover: boolean = false; + @Input({ transform: booleanAttribute }) showItemNavigatorsOnHover: boolean = false; /** * When enabled, item is changed on indicator hover. * @group Props */ - @Input() changeItemOnIndicatorHover: boolean = false; + @Input({ transform: booleanAttribute }) changeItemOnIndicatorHover: boolean = false; /** * Defines if scrolling would be infinite. * @group Props */ - @Input() circular: boolean = false; + @Input({ transform: booleanAttribute }) circular: boolean = false; /** * Items are displayed with a slideshow in autoPlay mode. * @group Props */ - @Input() autoPlay: boolean = false; + @Input({ transform: booleanAttribute }) autoPlay: boolean = false; /** * When enabled, autorun should stop by click. * @group Props */ - @Input() shouldStopAutoplayByClick: boolean = true; + @Input({ transform: booleanAttribute }) shouldStopAutoplayByClick: boolean = true; /** * Time in milliseconds to scroll items. * @group Props @@ -167,7 +168,7 @@ export class Galleria implements OnChanges, OnDestroy { * Whether to display thumbnail container. * @group Props */ - @Input() showThumbnails: boolean = true; + @Input({ transform: booleanAttribute }) showThumbnails: boolean = true; /** * Position of thumbnails. * @group Props @@ -182,12 +183,12 @@ export class Galleria implements OnChanges, OnDestroy { * Whether to display indicator container. * @group Props */ - @Input() showIndicators: boolean = false; + @Input({ transform: booleanAttribute }) showIndicators: boolean = false; /** * When enabled, indicator container is displayed on item container. * @group Props */ - @Input() showIndicatorsOnItem: boolean = false; + @Input({ transform: booleanAttribute }) showIndicatorsOnItem: boolean = false; /** * Position of indicators. * @group Props @@ -697,19 +698,19 @@ export class GalleriaItemSlot { export class GalleriaItem implements OnChanges { @Input() id: string | undefined; - @Input() circular: boolean = false; + @Input({ transform: booleanAttribute }) circular: boolean = false; @Input() value: any[] | undefined; - @Input() showItemNavigators: boolean = false; + @Input({ transform: booleanAttribute }) showItemNavigators: boolean = false; - @Input() showIndicators: boolean = true; + @Input({ transform: booleanAttribute }) showIndicators: boolean = true; - @Input() slideShowActive: boolean = true; + @Input({ transform: booleanAttribute }) slideShowActive: boolean = true; - @Input() changeItemOnIndicatorHover: boolean = true; + @Input({ transform: booleanAttribute }) changeItemOnIndicatorHover: boolean = true; - @Input() autoPlay: boolean = false; + @Input({ transform: booleanAttribute }) autoPlay: boolean = false; @Input() templates: QueryList | undefined; @@ -917,11 +918,11 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie @Input() value: any[] | undefined; - @Input() isVertical: boolean = false; + @Input({ transform: booleanAttribute }) isVertical: boolean = false; - @Input() slideShowActive: boolean = false; + @Input({ transform: booleanAttribute }) slideShowActive: boolean = false; - @Input() circular: boolean = false; + @Input({ transform: booleanAttribute }) circular: boolean = false; @Input() responsiveOptions: GalleriaResponsiveOptions[] | undefined; diff --git a/src/app/components/image/image.ts b/src/app/components/image/image.ts index 3b30f54ba52..edf5024770d 100755 --- a/src/app/components/image/image.ts +++ b/src/app/components/image/image.ts @@ -1,6 +1,24 @@ import { AnimationEvent, animate, style, transition, trigger } from '@angular/animations'; import { CommonModule, DOCUMENT } from '@angular/common'; -import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, HostListener, Inject, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; +import { + AfterContentInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + ElementRef, + EventEmitter, + HostListener, + Inject, + Input, + NgModule, + Output, + QueryList, + TemplateRef, + ViewChild, + ViewEncapsulation, + booleanAttribute +} from '@angular/core'; import { SafeUrl } from '@angular/platform-browser'; import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; @@ -158,7 +176,7 @@ export class Image implements AfterContentInit { * Controls the preview functionality. * @group Props */ - @Input() preview: boolean = false; + @Input({ transform: booleanAttribute }) preview: boolean = false; /** * Transition options of the show animation * @group Props diff --git a/src/app/components/inplace/inplace.ts b/src/app/components/inplace/inplace.ts index b6baa3b6991..ba3e91b4cd3 100755 --- a/src/app/components/inplace/inplace.ts +++ b/src/app/components/inplace/inplace.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute } from '@angular/core'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; import { TimesIcon } from 'primeng/icons/times'; @@ -59,22 +59,22 @@ export class Inplace implements AfterContentInit { * Whether the content is displayed or not. * @group Props */ - @Input() active: boolean | undefined = false; + @Input({ transform: booleanAttribute }) active: boolean | undefined = false; /** * Displays a button to switch back to display mode. * @group Props */ - @Input() closable: boolean | undefined = false; + @Input({ transform: booleanAttribute }) closable: boolean | undefined = false; /** * When present, it specifies that the element should be disabled. * @group Props */ - @Input() disabled: boolean | undefined = false; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined = false; /** * Allows to prevent clicking. * @group Props */ - @Input() preventClick: boolean | undefined; + @Input({ transform: booleanAttribute }) preventClick: boolean | undefined; /** * Inline style of the element. * @group Props diff --git a/src/app/components/inputmask/inputmask.ts b/src/app/components/inputmask/inputmask.ts index 77ffac22bf7..dedccac16ef 100755 --- a/src/app/components/inputmask/inputmask.ts +++ b/src/app/components/inputmask/inputmask.ts @@ -26,7 +26,26 @@ OTHER DEALINGS IN THE SOFTWARE. */ import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Inject, Input, NgModule, OnInit, Output, PLATFORM_ID, QueryList, TemplateRef, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + ElementRef, + EventEmitter, + Inject, + Input, + NgModule, + OnInit, + Output, + PLATFORM_ID, + QueryList, + TemplateRef, + ViewChild, + ViewEncapsulation, + booleanAttribute, + forwardRef +} from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { AutoFocusModule } from 'primeng/autofocus'; @@ -113,12 +132,12 @@ export class InputMask implements OnInit, ControlValueAccessor { * Clears the incomplete value on blur. * @group Props */ - @Input() autoClear: boolean = true; + @Input({ transform: booleanAttribute }) autoClear: boolean = true; /** * When enabled, a clear icon is displayed to clear the value. * @group Props */ - @Input() showClear: boolean = false; + @Input({ transform: booleanAttribute }) showClear: boolean = false; /** * Inline style of the input field. * @group Props @@ -173,22 +192,22 @@ export class InputMask implements OnInit, ControlValueAccessor { * Used to indicate that user input is required on an element before a form can be submitted. * @group Props */ - @Input() ariaRequired: boolean | undefined; + @Input({ transform: booleanAttribute }) ariaRequired: boolean | undefined; /** * When present, it specifies that the element value cannot be altered. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * When present, it specifies that an input field is read-only. * @group Props */ - @Input() readonly: boolean | undefined; + @Input({ transform: booleanAttribute }) readonly: boolean | undefined; /** * Defines if ngModel sets the raw unmasked value to bound value or the formatted mask value. * @group Props */ - @Input() unmask: boolean | undefined; + @Input({ transform: booleanAttribute }) unmask: boolean | undefined; /** * Name of the input field. * @group Props @@ -198,7 +217,7 @@ export class InputMask implements OnInit, ControlValueAccessor { * When present, it specifies that an input field must be filled out before submitting the form. * @group Props */ - @Input() required: boolean | undefined; + @Input({ transform: booleanAttribute }) required: boolean | undefined; /** * Regex pattern for alpha characters * @group Props @@ -208,7 +227,7 @@ export class InputMask implements OnInit, ControlValueAccessor { * When present, the input gets a focus automatically on load. * @group Props */ - @Input() autoFocus: boolean | undefined; + @Input({ transform: booleanAttribute }) autoFocus: boolean | undefined; /** * Used to define a string that autocomplete attribute the current element. * @group Props @@ -218,7 +237,7 @@ export class InputMask implements OnInit, ControlValueAccessor { * When present, it specifies that whether to clean buffer value from model. * @group Props */ - @Input() keepBuffer: boolean = false; + @Input({ transform: booleanAttribute }) keepBuffer: boolean = false; /** * Mask pattern. * @group Props diff --git a/src/app/components/inputnumber/inputnumber.ts b/src/app/components/inputnumber/inputnumber.ts index 5238e77fe08..d16fd63d1bf 100644 --- a/src/app/components/inputnumber/inputnumber.ts +++ b/src/app/components/inputnumber/inputnumber.ts @@ -19,6 +19,7 @@ import { TemplateRef, ViewChild, ViewEncapsulation, + booleanAttribute, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms'; @@ -209,12 +210,12 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control * Displays spinner buttons. * @group Props */ - @Input() showButtons: boolean = false; + @Input({ transform: booleanAttribute }) showButtons: boolean = false; /** * Whether to format the value. * @group Props */ - @Input() format: boolean = true; + @Input({ transform: booleanAttribute }) format: boolean = true; /** * Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical". * @group Props @@ -274,7 +275,7 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control * Used to indicate that user input is required on an element before a form can be submitted. * @group Props */ - @Input() ariaRequired: boolean | undefined; + @Input({ transform: booleanAttribute }) ariaRequired: boolean | undefined; /** * Name of the input field. * @group Props @@ -284,7 +285,7 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control * Indicates that whether the input field is required. * @group Props */ - @Input() required: boolean | undefined; + @Input({ transform: booleanAttribute }) required: boolean | undefined; /** * Used to define a string that autocomplete attribute the current element. * @group Props @@ -324,7 +325,7 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control * When present, it specifies that an input field is read-only. * @group Props */ - @Input() readonly: boolean = false; + @Input({ transform: booleanAttribute }) readonly: boolean = false; /** * Step factor to increment/decrement the value. * @group Props @@ -334,7 +335,7 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control * Determines whether the input field is empty. * @group Props */ - @Input() allowEmpty: boolean = true; + @Input({ transform: booleanAttribute }) allowEmpty: boolean = true; /** * Locale to be used in formatting. * @group Props @@ -364,7 +365,7 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control * Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. * @group Props */ - @Input() useGrouping: boolean = true; + @Input({ transform: booleanAttribute }) useGrouping: boolean = true; /** * The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information). * @group Props @@ -399,7 +400,7 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control * When enabled, a clear icon is displayed to clear the value. * @group Props */ - @Input() showClear: boolean = false; + @Input({ transform: booleanAttribute }) showClear: boolean = false; /** * When present, it specifies that the element should be disabled. * @group Props diff --git a/src/app/components/inputswitch/inputswitch.ts b/src/app/components/inputswitch/inputswitch.ts index a86257d3d37..1110201d33f 100755 --- a/src/app/components/inputswitch/inputswitch.ts +++ b/src/app/components/inputswitch/inputswitch.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, Output, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, Output, ViewChild, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { InputSwitchChangeEvent } from './inputswitch.interface'; @@ -82,12 +82,12 @@ export class InputSwitch { * When present, it specifies that the element should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * When present, it specifies that the component cannot be edited. * @group Props */ - @Input() readonly: boolean | undefined; + @Input({ transform: booleanAttribute }) readonly: boolean | undefined; /** * Value in checked state. * @group Props diff --git a/src/app/components/inputtextarea/inputtextarea.ts b/src/app/components/inputtextarea/inputtextarea.ts index 2ba3ee128e5..697416c2b5d 100755 --- a/src/app/components/inputtextarea/inputtextarea.ts +++ b/src/app/components/inputtextarea/inputtextarea.ts @@ -1,4 +1,4 @@ -import { NgModule, Directive, ElementRef, HostListener, Input, Output, EventEmitter, Optional, AfterViewInit, OnInit, OnDestroy, ChangeDetectorRef, AfterViewChecked } from '@angular/core'; +import { NgModule, Directive, ElementRef, HostListener, Input, Output, EventEmitter, Optional, AfterViewInit, OnInit, OnDestroy, ChangeDetectorRef, AfterViewChecked, booleanAttribute } from '@angular/core'; import { NgModel, NgControl, FormControl } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { Subscription } from 'rxjs'; @@ -19,7 +19,7 @@ export class InputTextarea implements OnInit, AfterViewInit, AfterViewChecked, O * When present, textarea size changes as being typed. * @group Props */ - @Input() autoResize: boolean | undefined; + @Input({ transform: booleanAttribute }) autoResize: boolean | undefined; /** * Callback to invoke on textarea resize. * @param {(Event | {})} event - Custom resize event. diff --git a/src/app/components/keyfilter/keyfilter.ts b/src/app/components/keyfilter/keyfilter.ts index 26706beddf7..b92f0211641 100755 --- a/src/app/components/keyfilter/keyfilter.ts +++ b/src/app/components/keyfilter/keyfilter.ts @@ -1,4 +1,4 @@ -import { NgModule, Directive, ElementRef, HostListener, Input, forwardRef, Output, EventEmitter, Inject, PLATFORM_ID, Provider } from '@angular/core'; +import { NgModule, Directive, ElementRef, HostListener, Input, forwardRef, Output, EventEmitter, Inject, PLATFORM_ID, Provider, booleanAttribute } from '@angular/core'; import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; import { DomHandler } from 'primeng/dom'; import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms'; @@ -77,7 +77,7 @@ export class KeyFilter implements Validator { * When enabled, instead of blocking keys, input is validated internally to test against the regular expression. * @group Props */ - @Input() pValidateOnly: boolean | undefined; + @Input({ transform: booleanAttribute }) pValidateOnly: boolean | undefined; /** * Sets the pattern for key filtering. * @group Props diff --git a/src/app/components/knob/knob.ts b/src/app/components/knob/knob.ts index de9100c1647..cd959aa093a 100755 --- a/src/app/components/knob/knob.ts +++ b/src/app/components/knob/knob.ts @@ -1,5 +1,5 @@ import { CommonModule, DOCUMENT } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, NgModule, Output, Renderer2, ViewEncapsulation, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, NgModule, Output, Renderer2, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { VoidListener } from 'primeng/ts-helpers'; @@ -129,17 +129,17 @@ export class Knob { * When present, it specifies that the component should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Whether the show the value inside the knob. * @group Props */ - @Input() showValue: boolean = true; + @Input({ transform: booleanAttribute }) showValue: boolean = true; /** * When present, it specifies that the component value cannot be edited. * @group Props */ - @Input() readonly: boolean = false; + @Input({ transform: booleanAttribute }) readonly: boolean = false; /** * Callback to invoke on value change. * @param {number} value - New value. diff --git a/src/app/components/listbox/listbox.ts b/src/app/components/listbox/listbox.ts index c7fc759b464..7907d990f5a 100755 --- a/src/app/components/listbox/listbox.ts +++ b/src/app/components/listbox/listbox.ts @@ -19,7 +19,8 @@ import { OnDestroy, computed, signal, - Renderer2 + Renderer2, + booleanAttribute } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule, PrimeTemplate, Footer, Header, FilterService, TranslationKeys, PrimeNGConfig, ScrollerOptions } from 'primeng/api'; @@ -272,22 +273,22 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor, * Whether to focus on the first visible or selected element when the overlay panel is shown. * @group Props */ - @Input() autoOptionFocus: boolean | undefined = true; + @Input({ transform: booleanAttribute }) autoOptionFocus: boolean | undefined = true; /** * When enabled, the focused option is selected. * @group Props */ - @Input() selectOnFocus: boolean | undefined; + @Input({ transform: booleanAttribute }) selectOnFocus: boolean | undefined; /** * Locale to use in searching. The default locale is the host environment's current locale. * @group Props */ - @Input() searchLocale: boolean | undefined; + @Input({ transform: booleanAttribute }) searchLocale: boolean | undefined; /** * When enabled, the hovered option will be focused. * @group Props */ - @Input() focusOnHover: boolean | undefined; + @Input({ transform: booleanAttribute }) focusOnHover: boolean | undefined; /** * Text to display when filtering. * @group Props @@ -302,12 +303,12 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor, * Defines if data is loaded and interacted with in lazy manner. * @group Props */ - @Input() lazy: boolean = false; + @Input({ transform: booleanAttribute }) lazy: boolean = false; /** * Whether the data should be loaded on demand during scroll. * @group Props */ - @Input() virtualScroll: boolean | undefined; + @Input({ transform: booleanAttribute }) virtualScroll: boolean | undefined; /** * Height of an item in the list for VirtualScrolling. * @group Props @@ -332,7 +333,7 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor, * When specified, allows selecting multiple values. * @group Props */ - @Input() multiple: boolean | undefined; + @Input({ transform: booleanAttribute }) multiple: boolean | undefined; /** * Inline style of the container. * @group Props @@ -357,22 +358,22 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor, * When present, it specifies that the element value cannot be changed. * @group Props */ - @Input() readonly: boolean | undefined; + @Input({ transform: booleanAttribute }) readonly: boolean | undefined; /** * When present, it specifies that the element should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * When specified, allows selecting items with checkboxes. * @group Props */ - @Input() checkbox: boolean = false; + @Input({ transform: booleanAttribute }) checkbox: boolean = false; /** * When specified, displays a filter input at header. * @group Props */ - @Input() filter: boolean = false; + @Input({ transform: booleanAttribute }) filter: boolean = false; /** * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. * @group Props @@ -392,7 +393,7 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor, * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean = false; + @Input({ transform: booleanAttribute }) metaKeySelection: boolean = false; /** * A property to uniquely identify a value in options. * @group Props @@ -402,7 +403,7 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor, * Whether header checkbox is shown in multiple mode. * @group Props */ - @Input() showToggleAll: boolean = true; + @Input({ transform: booleanAttribute }) showToggleAll: boolean = true; /** * Name of the label field of an option. * @group Props @@ -452,7 +453,7 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor, * Whether to display options as grouped when nested options are provided. * @group Props */ - @Input() group: boolean | undefined; + @Input({ transform: booleanAttribute }) group: boolean | undefined; /** * An array of selectitems to display as the available options. * @group Props diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts index 9e8f5b92e2a..b63b31155c5 100755 --- a/src/app/components/megamenu/megamenu.ts +++ b/src/app/components/megamenu/megamenu.ts @@ -19,6 +19,7 @@ import { TemplateRef, ViewChild, ViewEncapsulation, + booleanAttribute, effect, forwardRef, signal @@ -212,7 +213,7 @@ export class MegaMenuSub { @Input() focusedItemId: string | undefined; - @Input() disabled: boolean = false; + @Input({ transform: booleanAttribute }) disabled: boolean = false; @Input() orientation: string | undefined; @@ -222,7 +223,7 @@ export class MegaMenuSub { @Input() tabindex: number = 0; - @Input() root: boolean = false; + @Input({ transform: booleanAttribute }) root: boolean = false; @Output() itemClick: EventEmitter = new EventEmitter(); @@ -456,7 +457,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit { * When present, it specifies that the component should be disabled. * @group Props */ - @Input() disabled: boolean = false; + @Input({ transform: booleanAttribute }) disabled: boolean = false; /** * Index of the element in tabbing order. * @group Props diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts index 9f9ba355230..1045d6133f7 100755 --- a/src/app/components/menu/menu.ts +++ b/src/app/components/menu/menu.ts @@ -21,6 +21,7 @@ import { ViewChild, ViewEncapsulation, ViewRef, + booleanAttribute, computed, effect, forwardRef, @@ -252,7 +253,7 @@ export class Menu implements OnDestroy { * Defines if menu would displayed as a popup. * @group Props */ - @Input() popup: boolean | undefined; + @Input({ transform: booleanAttribute }) popup: boolean | undefined; /** * Inline style of the component. * @group Props @@ -272,7 +273,7 @@ export class Menu implements OnDestroy { * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts index b654a225a1c..40b6957e5f5 100755 --- a/src/app/components/menubar/menubar.ts +++ b/src/app/components/menubar/menubar.ts @@ -20,6 +20,7 @@ import { TemplateRef, ViewChild, ViewEncapsulation, + booleanAttribute, effect, signal } from '@angular/core'; @@ -210,15 +211,15 @@ export class MenubarSub implements OnInit, OnDestroy { @Input() itemTemplate: HTMLElement | undefined; - @Input() root: boolean = false; + @Input({ transform: booleanAttribute }) root: boolean = false; - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; @Input() baseZIndex: number = 0; - @Input() mobileActive: boolean | undefined; + @Input({ transform: booleanAttribute }) mobileActive: boolean | undefined; - @Input() autoDisplay: boolean | undefined; + @Input({ transform: booleanAttribute }) autoDisplay: boolean | undefined; @Input() menuId: string | undefined; @@ -434,7 +435,7 @@ export class Menubar implements AfterContentInit, OnDestroy, OnInit { * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props @@ -445,12 +446,12 @@ export class Menubar implements AfterContentInit, OnDestroy, OnInit { * @defaultValue true * @group Props */ - @Input() autoDisplay: boolean | undefined = true; + @Input({ transform: booleanAttribute }) autoDisplay: boolean | undefined = true; /** * Whether to hide a root submenu when mouse leaves. * @group Props */ - @Input() autoHide: boolean | undefined; + @Input({ transform: booleanAttribute }) autoHide: boolean | undefined; /** * Delay to hide the root submenu in milliseconds when mouse leaves. * @group Props diff --git a/src/app/components/message/message.ts b/src/app/components/message/message.ts index b3fc2b0361b..6fa01af1357 100755 --- a/src/app/components/message/message.ts +++ b/src/app/components/message/message.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation, booleanAttribute } from '@angular/core'; import { CheckIcon } from 'primeng/icons/check'; import { ExclamationTriangleIcon } from 'primeng/icons/exclamationtriangle'; import { InfoCircleIcon } from 'primeng/icons/infocircle'; @@ -58,7 +58,7 @@ export class UIMessage { * Whether displaying messages would be escaped or not. * @group Props */ - @Input() escape: boolean = true; + @Input({ transform: booleanAttribute }) escape: boolean = true; /** * Inline style of the component. * @group Props diff --git a/src/app/components/messages/messages.ts b/src/app/components/messages/messages.ts index 1ca03c6cb3a..0ffc0b3045c 100644 --- a/src/app/components/messages/messages.ts +++ b/src/app/components/messages/messages.ts @@ -1,6 +1,23 @@ import { animate, style, transition, trigger } from '@angular/animations'; import { CommonModule } from '@angular/common'; -import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, OnDestroy, Optional, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { + AfterContentInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + ElementRef, + EventEmitter, + Input, + NgModule, + OnDestroy, + Optional, + Output, + QueryList, + TemplateRef, + ViewEncapsulation, + booleanAttribute +} from '@angular/core'; import { Message, MessageService, PrimeTemplate } from 'primeng/api'; import { PrimeNGConfig } from 'primeng/api'; import { CheckIcon } from 'primeng/icons/check'; @@ -84,7 +101,7 @@ export class Messages implements AfterContentInit, OnDestroy { * Defines if message box can be closed by the click icon. * @group Props */ - @Input() closable: boolean = true; + @Input({ transform: booleanAttribute }) closable: boolean = true; /** * Inline style of the component. * @group Props @@ -99,7 +116,7 @@ export class Messages implements AfterContentInit, OnDestroy { * Whether displaying services messages are enabled. * @group Props */ - @Input() enableService: boolean = true; + @Input({ transform: booleanAttribute }) enableService: boolean = true; /** * Id to match the key of the message to enable scoping in service based messaging. * @group Props @@ -109,7 +126,7 @@ export class Messages implements AfterContentInit, OnDestroy { * Whether displaying messages would be escaped or not. * @group Props */ - @Input() escape: boolean = true; + @Input({ transform: booleanAttribute }) escape: boolean = true; /** * Severity level of the message. * @group Props diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts index b8ef582a3bb..74477ea209c 100755 --- a/src/app/components/multiselect/multiselect.ts +++ b/src/app/components/multiselect/multiselect.ts @@ -4,6 +4,7 @@ import { AfterContentInit, AfterViewChecked, AfterViewInit, + booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -93,15 +94,15 @@ export class MultiSelectItem { @Input() option: any; - @Input() selected: boolean | undefined; + @Input({ transform: booleanAttribute }) selected: boolean | undefined; @Input() label: string | undefined; - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; @Input() itemSize: number | undefined; - @Input() focused: boolean | undefined; + @Input({ transform: booleanAttribute }) focused: boolean | undefined; @Input() ariaPosInset: string | undefined; @@ -430,22 +431,22 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * When present, it specifies that the element should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * When present, it specifies that the component cannot be edited. * @group Props */ - @Input() readonly: boolean | undefined; + @Input({ transform: booleanAttribute }) readonly: boolean | undefined; /** * Whether to display options as grouped when nested options are provided. * @group Props */ - @Input() group: boolean | undefined; + @Input({ transform: booleanAttribute }) group: boolean | undefined; /** * When specified, displays an input field to filter the items on keyup. * @group Props */ - @Input() filter: boolean = true; + @Input({ transform: booleanAttribute }) filter: boolean = true; /** * Defines placeholder of the filter input. * @group Props @@ -460,7 +461,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * Specifies the visibility of the options panel. * @group Props */ - @Input() overlayVisible: boolean | undefined; + @Input({ transform: booleanAttribute }) overlayVisible: boolean | undefined; /** * Index of the element in tabbing order. * @group Props @@ -522,7 +523,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * Whether to show the checkbox at header to toggle all items at once. * @group Props */ - @Input() showToggleAll: boolean = true; + @Input({ transform: booleanAttribute }) showToggleAll: boolean = true; /** * Text to display when filtering does not return any results. * @group Props @@ -537,7 +538,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * Clears the filter value when hiding the dropdown. * @group Props */ - @Input() resetFilterOnHide: boolean = false; + @Input({ transform: booleanAttribute }) resetFilterOnHide: boolean = false; /** * Icon class of the dropdown icon. * @group Props @@ -572,7 +573,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * Whether to show the header. * @group Props */ - @Input() showHeader: boolean = true; + @Input({ transform: booleanAttribute }) showHeader: boolean = true; /** * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. * @group Props @@ -587,12 +588,12 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * Defines if data is loaded and interacted with in lazy manner. * @group Props */ - @Input() lazy: boolean = false; + @Input({ transform: booleanAttribute }) lazy: boolean = false; /** * Whether the data should be loaded on demand during scroll. * @group Props */ - @Input() virtualScroll: boolean | undefined; + @Input({ transform: booleanAttribute }) virtualScroll: boolean | undefined; /** * Height of an item in the list for VirtualScrolling. * @group Props @@ -642,7 +643,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * Applies focus to the filter element when the overlay is shown. * @group Props */ - @Input() autofocusFilter: boolean = true; + @Input({ transform: booleanAttribute }) autofocusFilter: boolean = true; /** * Defines how the selected items are displayed. * @group Props @@ -657,7 +658,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * When enabled, a clear icon is displayed to clear the value. * @group Props */ - @Input() showClear: boolean = false; + @Input({ transform: booleanAttribute }) showClear: boolean = false; /** * @deprecated since v14.2.0, use overlayOptions property instead. * Whether to automatically manage layering. @@ -777,7 +778,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * Fields used when filtering the options, defaults to optionLabel. * @group Props */ - @Input() focusOnHover: boolean = false; + @Input({ transform: booleanAttribute }) focusOnHover: boolean = false; /** * Fields used when filtering the options, defaults to optionLabel. * @group Props @@ -787,12 +788,12 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * Determines if the option will be selected on focus. * @group Props */ - @Input() selectOnFocus: boolean = false; + @Input({ transform: booleanAttribute }) selectOnFocus: boolean = false; /** * Whether to focus on the first visible or selected element when the overlay panel is shown. * @group Props */ - @Input() autoOptionFocus: boolean = true; + @Input({ transform: booleanAttribute }) autoOptionFocus: boolean = true; /** * Callback to invoke when value changes. * @param {MultiSelectChangeEvent} event - Custom change event. diff --git a/src/app/components/orderlist/orderlist.ts b/src/app/components/orderlist/orderlist.ts index b364408d466..6e8042fe1e6 100755 --- a/src/app/components/orderlist/orderlist.ts +++ b/src/app/components/orderlist/orderlist.ts @@ -18,7 +18,8 @@ import { Renderer2, TemplateRef, ViewChild, - ViewEncapsulation + ViewEncapsulation, + booleanAttribute } from '@angular/core'; import { FilterService, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; @@ -197,7 +198,7 @@ export class OrderList implements AfterViewChecked, AfterContentInit { * A boolean value that indicates whether the component should be responsive. * @group Props */ - @Input() responsive: boolean | undefined; + @Input({ transform: booleanAttribute }) responsive: boolean | undefined; /** * When specified displays an input field to filter the items on keyup and decides which fields to search against. @@ -221,13 +222,13 @@ export class OrderList implements AfterViewChecked, AfterContentInit { * When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean = false; + @Input({ transform: booleanAttribute }) metaKeySelection: boolean = false; /** * Whether to enable dragdrop based reordering. * @group Props */ - @Input() dragdrop: boolean = false; + @Input({ transform: booleanAttribute }) dragdrop: boolean = false; /** * Defines the location of the buttons with respect to the list. @@ -257,13 +258,13 @@ export class OrderList implements AfterViewChecked, AfterContentInit { * Whether to displays rows with alternating colors. * @group Props */ - @Input() stripedRows: boolean | undefined; + @Input({ transform: booleanAttribute }) stripedRows: boolean | undefined; /** * When present, it specifies that the component should be disabled. * @group Props */ - @Input() disabled: boolean = false; + @Input({ transform: booleanAttribute }) disabled: boolean = false; /** * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. diff --git a/src/app/components/organizationchart/organizationchart.ts b/src/app/components/organizationchart/organizationchart.ts index 4709714e1e7..335c9431022 100755 --- a/src/app/components/organizationchart/organizationchart.ts +++ b/src/app/components/organizationchart/organizationchart.ts @@ -1,6 +1,24 @@ import { animate, state, style, transition, trigger } from '@angular/animations'; import { CommonModule } from '@angular/common'; -import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Inject, Input, NgModule, OnDestroy, Output, QueryList, TemplateRef, ViewEncapsulation, forwardRef } from '@angular/core'; +import { + AfterContentInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + ElementRef, + EventEmitter, + Inject, + Input, + NgModule, + OnDestroy, + Output, + QueryList, + TemplateRef, + ViewEncapsulation, + booleanAttribute, + forwardRef +} from '@angular/core'; import { PrimeTemplate, SharedModule, TreeNode } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; import { ChevronDownIcon } from 'primeng/icons/chevrondown'; @@ -72,11 +90,11 @@ import { OrganizationChartNodeCollapseEvent, OrganizationChartNodeExpandEvent, O export class OrganizationChartNode implements OnDestroy { @Input() node: TreeNode | undefined; - @Input() root: boolean | undefined; + @Input({ transform: booleanAttribute }) root: boolean | undefined; - @Input() first: boolean | undefined; + @Input({ transform: booleanAttribute }) first: boolean | undefined; - @Input() last: boolean | undefined; + @Input({ transform: booleanAttribute }) last: boolean | undefined; chart: OrganizationChart; @@ -162,7 +180,7 @@ export class OrganizationChart implements AfterContentInit { * Whether the space allocated by a node is preserved when hidden. * @group Props */ - @Input() preserveSpace: boolean = true; + @Input({ transform: booleanAttribute }) preserveSpace: boolean = true; /** * A single treenode instance or an array to refer to the selections. * @group Props diff --git a/src/app/components/overlaypanel/overlaypanel.ts b/src/app/components/overlaypanel/overlaypanel.ts index e3bc41052c4..c343182076b 100755 --- a/src/app/components/overlaypanel/overlaypanel.ts +++ b/src/app/components/overlaypanel/overlaypanel.ts @@ -2,6 +2,7 @@ import { animate, AnimationEvent, state, style, transition, trigger } from '@ang import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; import { AfterContentInit, + booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -110,12 +111,12 @@ export class OverlayPanel implements AfterContentInit, OnDestroy { * Enables to hide the overlay when outside is clicked. * @group Props */ - @Input() dismissable: boolean = true; + @Input({ transform: booleanAttribute }) dismissable: boolean = true; /** * When enabled, displays a close icon at top right corner. * @group Props */ - @Input() showCloseIcon: boolean | undefined; + @Input({ transform: booleanAttribute }) showCloseIcon: boolean | undefined; /** * Inline style of the component. * @group Props @@ -135,7 +136,7 @@ export class OverlayPanel implements AfterContentInit, OnDestroy { * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Aria label of the close icon. * @group Props @@ -150,7 +151,7 @@ export class OverlayPanel implements AfterContentInit, OnDestroy { * When enabled, first button receives focus on show. * @group Props */ - @Input() focusOnShow: boolean = true; + @Input({ transform: booleanAttribute }) focusOnShow: boolean = true; /** * Transition options of the show animation. * @group Props diff --git a/src/app/components/paginator/paginator.ts b/src/app/components/paginator/paginator.ts index 8b40ee54b0e..e6b1e31b25b 100755 --- a/src/app/components/paginator/paginator.ts +++ b/src/app/components/paginator/paginator.ts @@ -1,5 +1,23 @@ import { CommonModule } from '@angular/common'; -import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, OnChanges, OnInit, Output, QueryList, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { + AfterContentInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + ElementRef, + EventEmitter, + Input, + NgModule, + OnChanges, + OnInit, + Output, + QueryList, + SimpleChanges, + TemplateRef, + ViewEncapsulation, + booleanAttribute +} from '@angular/core'; import { FormsModule } from '@angular/forms'; import { PrimeNGConfig, PrimeTemplate, SelectItem, SharedModule } from 'primeng/api'; import { DropdownChangeEvent, DropdownModule } from 'primeng/dropdown'; @@ -164,7 +182,7 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { * Whether to show it even there is only one page. * @group Props */ - @Input() alwaysShow: boolean = true; + @Input({ transform: booleanAttribute }) alwaysShow: boolean = true; /** * Target element to attach the dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). * @group Props @@ -201,12 +219,12 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { * Whether to display current page report. * @group Props */ - @Input() showCurrentPageReport: boolean | undefined; + @Input({ transform: booleanAttribute }) showCurrentPageReport: boolean | undefined; /** * When enabled, icons are displayed on paginator to go first and last page. * @group Props */ - @Input() showFirstLastIcon: boolean = true; + @Input({ transform: booleanAttribute }) showFirstLastIcon: boolean = true; /** * Number of total records. * @group Props @@ -226,17 +244,17 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { * Whether to display a dropdown to navigate to any page. * @group Props */ - @Input() showJumpToPageDropdown: boolean | undefined; + @Input({ transform: booleanAttribute }) showJumpToPageDropdown: boolean | undefined; /** * Whether to display a input to navigate to any page. * @group Props */ - @Input() showJumpToPageInput: boolean | undefined; + @Input({ transform: booleanAttribute }) showJumpToPageInput: boolean | undefined; /** * Whether to show page links. * @group Props */ - @Input() showPageLinks: boolean = true; + @Input({ transform: booleanAttribute }) showPageLinks: boolean = true; /** * Locale to be used in formatting. * @group Props diff --git a/src/app/components/panel/panel.ts b/src/app/components/panel/panel.ts index 355886db4a7..2b6e7706c91 100755 --- a/src/app/components/panel/panel.ts +++ b/src/app/components/panel/panel.ts @@ -1,6 +1,6 @@ import { animate, state, style, transition, trigger } from '@angular/animations'; import { CommonModule } from '@angular/common'; -import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute } from '@angular/core'; import { BlockableUI, Footer, PrimeTemplate, SharedModule } from 'primeng/api'; import { MinusIcon } from 'primeng/icons/minus'; import { PlusIcon } from 'primeng/icons/plus'; @@ -116,7 +116,7 @@ export class Panel implements AfterContentInit, BlockableUI { * Defines if content of panel can be expanded and collapsed. * @group Props */ - @Input() toggleable: boolean | undefined; + @Input({ transform: booleanAttribute }) toggleable: boolean | undefined; /** * Header text of the panel. * @group Props @@ -126,7 +126,7 @@ export class Panel implements AfterContentInit, BlockableUI { * Defines the initial state of panel content, supports one or two-way binding as well. * @group Props */ - @Input() collapsed: boolean | undefined; + @Input({ transform: booleanAttribute }) collapsed: boolean | undefined; /** * Inline style of the component. * @group Props @@ -159,7 +159,7 @@ export class Panel implements AfterContentInit, BlockableUI { * @group Props * @deprecated since v15.4.2, use `headericons` template instead. */ - @Input() showHeader: boolean = true; + @Input({ transform: booleanAttribute }) showHeader: boolean = true; /** * Specifies the toggler element to toggle the panel content. * @group Props diff --git a/src/app/components/panelmenu/panelmenu.ts b/src/app/components/panelmenu/panelmenu.ts index 7e258364eed..70984dacc6c 100644 --- a/src/app/components/panelmenu/panelmenu.ts +++ b/src/app/components/panelmenu/panelmenu.ts @@ -18,6 +18,7 @@ import { TemplateRef, ViewChild, ViewEncapsulation, + booleanAttribute, computed, forwardRef, signal @@ -181,13 +182,13 @@ export class PanelMenuSub { @Input() activeItemPath: any[]; - @Input() root: boolean | undefined; + @Input({ transform: booleanAttribute }) root: boolean | undefined; @Input() tabindex: number | undefined; @Input() transitionOptions: string | undefined; - @Input() parentExpanded: boolean | undefined; + @Input({ transform: booleanAttribute }) parentExpanded: boolean | undefined; @Output() itemToggle: EventEmitter = new EventEmitter(); @@ -309,13 +310,13 @@ export class PanelMenuList implements OnChanges { @Input() itemTemplate: HTMLElement | undefined; - @Input() parentExpanded: boolean | undefined; + @Input({ transform: booleanAttribute }) parentExpanded: boolean | undefined; - @Input() expanded: boolean | undefined; + @Input({ transform: booleanAttribute }) expanded: boolean | undefined; @Input() transitionOptions: string | undefined; - @Input() root: boolean | undefined; + @Input({ transform: booleanAttribute }) root: boolean | undefined; @Input() tabindex: number | undefined; @@ -858,7 +859,7 @@ export class PanelMenu implements AfterContentInit { * Whether multiple tabs can be activated at the same time or not. * @group Props */ - @Input() multiple: boolean = false; + @Input({ transform: booleanAttribute }) multiple: boolean = false; /** * Transition options of the animation. * @group Props diff --git a/src/app/components/password/password.ts b/src/app/components/password/password.ts index 7437e22c257..e1537496298 100644 --- a/src/app/components/password/password.ts +++ b/src/app/components/password/password.ts @@ -26,6 +26,7 @@ import { TemplateRef, ViewChild, ViewEncapsulation, + booleanAttribute, forwardRef } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; @@ -79,7 +80,7 @@ export class PasswordDirective implements OnDestroy, DoCheck { * Whether to show the strength indicator or not. * @group Props */ - @Input() feedback: boolean = true; + @Input({ transform: booleanAttribute }) feedback: boolean = true; /** * Sets the visibility of the password field. * @group Props @@ -429,7 +430,7 @@ export class Password implements AfterContentInit, OnInit { * Indicates whether the component is disabled or not. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Text to prompt password entry. Defaults to PrimeNG I18N API configuration. * @group Props @@ -474,7 +475,7 @@ export class Password implements AfterContentInit, OnInit { * Whether to show the strength indicator or not. * @group Props */ - @Input() feedback: boolean = true; + @Input({ transform: booleanAttribute }) feedback: boolean = true; /** * Id of the element or "body" for document where the overlay should be appended to. * @group Props @@ -484,7 +485,7 @@ export class Password implements AfterContentInit, OnInit { * Whether to show an icon to display the password as plain text. * @group Props */ - @Input() toggleMask: boolean | undefined; + @Input({ transform: booleanAttribute }) toggleMask: boolean | undefined; /** * Style class of the input field. * @group Props @@ -529,7 +530,7 @@ export class Password implements AfterContentInit, OnInit { * When enabled, a clear icon is displayed to clear the value. * @group Props */ - @Input() showClear: boolean = false; + @Input({ transform: booleanAttribute }) showClear: boolean = false; /** * Callback to invoke when the component receives focus. * @param {Event} event - Browser event. diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts index b4e24350d34..611afaf1edb 100755 --- a/src/app/components/picklist/picklist.ts +++ b/src/app/components/picklist/picklist.ts @@ -18,7 +18,8 @@ import { Renderer2, TemplateRef, ViewChild, - ViewEncapsulation + ViewEncapsulation, + booleanAttribute } from '@angular/core'; import { FilterService, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; @@ -431,7 +432,7 @@ export class PickList implements AfterViewChecked, AfterContentInit { * When enabled orderlist adjusts its controls based on screen size. * @group Props */ - @Input() responsive: boolean | undefined; + @Input({ transform: booleanAttribute }) responsive: boolean | undefined; /** * When specified displays an input field to filter the items on keyup and decides which field to search (Accepts multiple fields with a comma). * @group Props @@ -461,22 +462,22 @@ export class PickList implements AfterViewChecked, AfterContentInit { * Whether to show filter input for source list when filterBy is enabled. * @group Props */ - @Input() showSourceFilter: boolean = true; + @Input({ transform: booleanAttribute }) showSourceFilter: boolean = true; /** * Whether to show filter input for target list when filterBy is enabled. * @group Props */ - @Input() showTargetFilter: boolean = true; + @Input({ transform: booleanAttribute }) showTargetFilter: boolean = true; /** * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean = false; + @Input({ transform: booleanAttribute }) metaKeySelection: boolean = false; /** * Whether to enable dragdrop based reordering. * @group Props */ - @Input() dragdrop: boolean = false; + @Input({ transform: booleanAttribute }) dragdrop: boolean = false; /** * Inline style of the component. * @group Props @@ -501,12 +502,12 @@ export class PickList implements AfterViewChecked, AfterContentInit { * Whether to show buttons of source list. * @group Props */ - @Input() showSourceControls: boolean = true; + @Input({ transform: booleanAttribute }) showSourceControls: boolean = true; /** * Whether to show buttons of target list. * @group Props */ - @Input() showTargetControls: boolean = true; + @Input({ transform: booleanAttribute }) showTargetControls: boolean = true; /** * Placeholder text on source filter input. * @group Props @@ -521,7 +522,7 @@ export class PickList implements AfterViewChecked, AfterContentInit { * When present, it specifies that the component should be disabled. * @group Props */ - @Input() disabled: boolean = false; + @Input({ transform: booleanAttribute }) disabled: boolean = false; /** * Defines a string that labels the filter input of source list. * @group Props @@ -541,12 +542,12 @@ export class PickList implements AfterViewChecked, AfterContentInit { * Whether to displays rows with alternating colors. * @group Props */ - @Input() stripedRows: boolean | undefined; + @Input({ transform: booleanAttribute }) stripedRows: boolean | undefined; /** * Keeps selection on the transfer list. * @group Props */ - @Input() keepSelection: boolean = false; + @Input({ transform: booleanAttribute }) keepSelection: boolean = false; /** * Indicates the width of the screen at which the component should change its behavior. * @group Props diff --git a/src/app/components/progressbar/progressbar.ts b/src/app/components/progressbar/progressbar.ts index 56d7fbb13f7..d6ea13cf232 100755 --- a/src/app/components/progressbar/progressbar.ts +++ b/src/app/components/progressbar/progressbar.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, TemplateRef, ContentChildren, Input, NgModule, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, TemplateRef, ContentChildren, Input, NgModule, ViewEncapsulation, booleanAttribute } from '@angular/core'; import { PrimeTemplate } from 'primeng/api'; import { QueryList } from '@angular/core'; /** @@ -48,7 +48,7 @@ export class ProgressBar { * Whether to display the progress bar value. * @group Props */ - @Input() showValue: boolean = true; + @Input({ transform: booleanAttribute }) showValue: boolean = true; /** * Class of the element. * @group Props diff --git a/src/app/components/radiobutton/radiobutton.ts b/src/app/components/radiobutton/radiobutton.ts index 47bc7dd6c46..a1f3eace01f 100755 --- a/src/app/components/radiobutton/radiobutton.ts +++ b/src/app/components/radiobutton/radiobutton.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Injectable, Injector, Input, NgModule, OnDestroy, OnInit, Output, ViewChild, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Injectable, Injector, Input, NgModule, OnDestroy, OnInit, Output, ViewChild, booleanAttribute, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms'; import { Nullable } from 'primeng/ts-helpers'; import { RadioButtonClickEvent } from './radiobutton.interface'; @@ -115,7 +115,7 @@ export class RadioButton implements ControlValueAccessor, OnInit, OnDestroy { * When present, it specifies that the element should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Label of the radiobutton. * @group Props diff --git a/src/app/components/rating/rating.ts b/src/app/components/rating/rating.ts index 9dae42eeafb..6f9d8980f52 100755 --- a/src/app/components/rating/rating.ts +++ b/src/app/components/rating/rating.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, NgModule, OnInit, Output, QueryList, signal, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, NgModule, OnInit, Output, QueryList, signal, TemplateRef, ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { BanIcon } from 'primeng/icons/ban'; @@ -92,12 +92,12 @@ export class Rating implements OnInit, ControlValueAccessor { * When present, it specifies that the element should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * When present, changing the value is not possible. * @group Props */ - @Input() readonly: boolean | undefined; + @Input({ transform: booleanAttribute }) readonly: boolean | undefined; /** * Number of stars. * @group Props @@ -107,7 +107,7 @@ export class Rating implements OnInit, ControlValueAccessor { * When specified a cancel icon is displayed to allow removing the value. * @group Props */ - @Input() cancel: boolean = true; + @Input({ transform: booleanAttribute }) cancel: boolean = true; /** * Style class of the on icon. * @group Props diff --git a/src/app/components/selectbutton/selectbutton.ts b/src/app/components/selectbutton/selectbutton.ts index 8852954fb87..4693cc2ac3b 100755 --- a/src/app/components/selectbutton/selectbutton.ts +++ b/src/app/components/selectbutton/selectbutton.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, NgModule, Output, TemplateRef, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, NgModule, Output, TemplateRef, ViewChild, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { RippleModule } from 'primeng/ripple'; @@ -83,7 +83,7 @@ export class SelectButton implements ControlValueAccessor { * Whether selection can be cleared. * @group Props */ - @Input() unselectable: boolean = false; + @Input({ transform: booleanAttribute }) unselectable: boolean = false; /** * Index of the element in tabbing order. * @group Props @@ -93,12 +93,12 @@ export class SelectButton implements ControlValueAccessor { * When specified, allows selecting multiple values. * @group Props */ - @Input() multiple: boolean | undefined; + @Input({ transform: booleanAttribute }) multiple: boolean | undefined; /** * Whether selection can not be cleared. * @group Props */ - @Input() allowEmpty: boolean = true; + @Input({ transform: booleanAttribute }) allowEmpty: boolean = true; /** * Inline style of the component. * @group Props @@ -118,7 +118,7 @@ export class SelectButton implements ControlValueAccessor { * When present, it specifies that the element should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * A property to uniquely identify a value in options. * @group Props diff --git a/src/app/components/sidebar/sidebar.ts b/src/app/components/sidebar/sidebar.ts index 2a2c5735b39..893c3c4faad 100755 --- a/src/app/components/sidebar/sidebar.ts +++ b/src/app/components/sidebar/sidebar.ts @@ -17,7 +17,8 @@ import { QueryList, Renderer2, TemplateRef, - ViewEncapsulation + ViewEncapsulation, + booleanAttribute } from '@angular/core'; import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; @@ -112,7 +113,7 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy { * Whether to block scrolling of the document when sidebar is active. * @group Props */ - @Input() blockScroll: boolean = false; + @Input({ transform: booleanAttribute }) blockScroll: boolean = false; /** * Inline style of the component. * @group Props @@ -132,7 +133,7 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy { * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props @@ -142,22 +143,22 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy { * Whether an overlay mask is displayed behind the sidebar. * @group Props */ - @Input() modal: boolean = true; + @Input({ transform: booleanAttribute }) modal: boolean = true; /** * Whether to dismiss sidebar on click of the mask. * @group Props */ - @Input() dismissible: boolean = true; + @Input({ transform: booleanAttribute }) dismissible: boolean = true; /** * Whether to display the close icon. * @group Props */ - @Input() showCloseIcon: boolean = true; + @Input({ transform: booleanAttribute }) showCloseIcon: boolean = true; /** * Specifies if pressing escape key should hide the sidebar. * @group Props */ - @Input() closeOnEscape: boolean = true; + @Input({ transform: booleanAttribute }) closeOnEscape: boolean = true; /** * Transition options of the animation. * @group Props diff --git a/src/app/components/slidemenu/slidemenu.ts b/src/app/components/slidemenu/slidemenu.ts index a32bc02b83a..b1e54a267ec 100755 --- a/src/app/components/slidemenu/slidemenu.ts +++ b/src/app/components/slidemenu/slidemenu.ts @@ -21,6 +21,7 @@ import { ViewChild, ViewEncapsulation, ViewRef, + booleanAttribute, effect, forwardRef, signal @@ -196,19 +197,19 @@ export class SlideMenuSub { @Input() menuWidth: number; - @Input() root: boolean | undefined = false; + @Input({ transform: booleanAttribute }) root: boolean | undefined = false; @Input() easing: string = 'ease-out'; @Input() effectDuration: any; - @Input() autoDisplay: boolean | undefined; + @Input({ transform: booleanAttribute }) autoDisplay: boolean | undefined; - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; @Input() baseZIndex: number = 0; - @Input() popup: boolean | undefined; + @Input({ transform: booleanAttribute }) popup: boolean | undefined; @Input() menuId: string | undefined; @@ -419,7 +420,7 @@ export class SlideMenu implements OnInit, AfterContentInit, OnDestroy { * When present, it specifies that the component should be disabled. * @group Props */ - @Input() disabled: boolean = false; + @Input({ transform: booleanAttribute }) disabled: boolean = false; /** * Index of the element in tabbing order. * @group Props @@ -429,7 +430,7 @@ export class SlideMenu implements OnInit, AfterContentInit, OnDestroy { * Defines if menu would displayed as a popup. * @group Props */ - @Input() popup: boolean | undefined; + @Input({ transform: booleanAttribute }) popup: boolean | undefined; /** * Inline style of the component. * @group Props @@ -449,7 +450,7 @@ export class SlideMenu implements OnInit, AfterContentInit, OnDestroy { * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props @@ -460,7 +461,7 @@ export class SlideMenu implements OnInit, AfterContentInit, OnDestroy { * @defaultValue true * @group Props */ - @Input() autoDisplay: boolean | undefined = true; + @Input({ transform: booleanAttribute }) autoDisplay: boolean | undefined = true; /** * Transition options of the show animation. * @group Props diff --git a/src/app/components/slider/slider.ts b/src/app/components/slider/slider.ts index 81237831acc..d41fd3993d4 100755 --- a/src/app/components/slider/slider.ts +++ b/src/app/components/slider/slider.ts @@ -1,5 +1,5 @@ import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, NgModule, NgZone, OnDestroy, Output, PLATFORM_ID, Renderer2, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, NgModule, NgZone, OnDestroy, Output, PLATFORM_ID, Renderer2, ViewChild, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { DomHandler } from 'primeng/dom'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; @@ -118,12 +118,12 @@ export class Slider implements OnDestroy, ControlValueAccessor { * When enabled, displays an animation on click of the slider bar. * @group Props */ - @Input() animate: boolean | undefined; + @Input({ transform: booleanAttribute }) animate: boolean | undefined; /** * When present, it specifies that the element should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Mininum boundary value. * @group Props @@ -148,7 +148,7 @@ export class Slider implements OnDestroy, ControlValueAccessor { * When specified, allows two boundary values to be picked. * @group Props */ - @Input() range: boolean | undefined; + @Input({ transform: booleanAttribute }) range: boolean | undefined; /** * Inline style of the component. * @group Props diff --git a/src/app/components/speeddial/speeddial.ts b/src/app/components/speeddial/speeddial.ts index 45ccd671c56..ccf4afeb610 100644 --- a/src/app/components/speeddial/speeddial.ts +++ b/src/app/components/speeddial/speeddial.ts @@ -19,6 +19,7 @@ import { TemplateRef, ViewChild, ViewEncapsulation, + booleanAttribute, signal } from '@angular/core'; import { RouterModule } from '@angular/router'; @@ -201,17 +202,17 @@ export class SpeedDial implements AfterViewInit, AfterContentInit, OnDestroy { * Whether to show a mask element behind the speeddial. * @group Props */ - @Input() mask: boolean = false; + @Input({ transform: booleanAttribute }) mask: boolean = false; /** * Whether the component is disabled. * @group Props */ - @Input() disabled: boolean = false; + @Input({ transform: booleanAttribute }) disabled: boolean = false; /** * Whether the actions close when clicked outside. * @group Props */ - @Input() hideOnClickOutside: boolean = true; + @Input({ transform: booleanAttribute }) hideOnClickOutside: boolean = true; /** * Inline style of the button element. * @group Props @@ -246,7 +247,7 @@ export class SpeedDial implements AfterViewInit, AfterContentInit, OnDestroy { * Defined to rotate showIcon when hideIcon is not present. * @group Props */ - @Input() rotateAnimation: boolean = true; + @Input({ transform: booleanAttribute }) rotateAnimation: boolean = true; /** * Defines a string value that labels an interactive element. * @group Props diff --git a/src/app/components/spinner/spinner.ts b/src/app/components/spinner/spinner.ts index b7d99b5c25b..943e5072edf 100755 --- a/src/app/components/spinner/spinner.ts +++ b/src/app/components/spinner/spinner.ts @@ -1,4 +1,4 @@ -import { NgModule, Component, ElementRef, OnInit, Input, Output, EventEmitter, forwardRef, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core'; +import { NgModule, Component, ElementRef, OnInit, Input, Output, EventEmitter, forwardRef, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, booleanAttribute } from '@angular/core'; import { CommonModule } from '@angular/common'; import { InputTextModule } from 'primeng/inputtext'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; @@ -94,13 +94,13 @@ export class Spinner implements OnInit, ControlValueAccessor { @Input() inputId: string; - @Input() disabled: boolean; + @Input({ transform: booleanAttribute }) disabled: boolean; - @Input() readonly: boolean; + @Input({ transform: booleanAttribute }) readonly: boolean; @Input() tabindex: number; - @Input() required: boolean; + @Input({ transform: booleanAttribute }) required: boolean; @Input() name: string; @@ -110,7 +110,7 @@ export class Spinner implements OnInit, ControlValueAccessor { @Input() inputStyleClass: string; - @Input() formatInput: boolean; + @Input({ transform: booleanAttribute }) formatInput: boolean; @Input() decimalSeparator: string; diff --git a/src/app/components/splitbutton/splitbutton.ts b/src/app/components/splitbutton/splitbutton.ts index 5602a5a4f98..68299b059ac 100755 --- a/src/app/components/splitbutton/splitbutton.ts +++ b/src/app/components/splitbutton/splitbutton.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation, booleanAttribute, signal } from '@angular/core'; import { MenuItem, PrimeTemplate } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; import { ChevronDownIcon } from 'primeng/icons/chevrondown'; @@ -126,7 +126,7 @@ export class SplitButton { * When present, it specifies that the element should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Index of the element in tabbing order. * @group Prop diff --git a/src/app/components/steps/steps.ts b/src/app/components/steps/steps.ts index d439bdba688..da2766bae2f 100755 --- a/src/app/components/steps/steps.ts +++ b/src/app/components/steps/steps.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation, booleanAttribute } from '@angular/core'; import { ActivatedRoute, Router, RouterModule } from '@angular/router'; import { DomHandler } from 'primeng/dom'; import { Nullable } from 'primeng/ts-helpers'; @@ -101,7 +101,7 @@ export class Steps implements OnInit, OnDestroy { * Whether the items are clickable or not. * @group Props */ - @Input() readonly: boolean = true; + @Input({ transform: booleanAttribute }) readonly: boolean = true; /** * Inline style of the component. * @group Props @@ -116,7 +116,7 @@ export class Steps implements OnInit, OnDestroy { * Whether to apply 'router-link-active-exact' class if route exactly matches the item path. * @group Props */ - @Input() exact: boolean = true; + @Input({ transform: booleanAttribute }) exact: boolean = true; /** * Callback to invoke when the new step is selected. * @param {number} number - current index. diff --git a/src/app/components/styleclass/styleclass.ts b/src/app/components/styleclass/styleclass.ts index f6062103166..dee1ef70fb0 100644 --- a/src/app/components/styleclass/styleclass.ts +++ b/src/app/components/styleclass/styleclass.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { Directive, ElementRef, HostListener, Input, NgModule, NgZone, OnDestroy, Renderer2 } from '@angular/core'; +import { Directive, ElementRef, HostListener, Input, NgModule, NgZone, OnDestroy, Renderer2, booleanAttribute } from '@angular/core'; import { DomHandler } from 'primeng/dom'; import { VoidListener } from 'primeng/ts-helpers'; /** @@ -77,7 +77,7 @@ export class StyleClass implements OnDestroy { * Whether to trigger leave animation when outside of the element is clicked. * @group Props */ - @Input() hideOnOutsideClick: boolean | undefined; + @Input({ transform: booleanAttribute }) hideOnOutsideClick: boolean | undefined; /** * Adds or removes a class when no enter-leave animation is required. * @group Props @@ -87,7 +87,7 @@ export class StyleClass implements OnDestroy { * Whether to trigger leave animation when escape key pressed. * @group Props */ - @Input() hideOnEscape: boolean | undefined; + @Input({ transform: booleanAttribute }) hideOnEscape: boolean | undefined; eventListener: VoidListener; diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index a62e121015a..3c10dd61bcf 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -3,6 +3,7 @@ import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; import { AfterContentInit, AfterViewInit, + booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -363,7 +364,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * When specified as true, enables the pagination. * @group Props */ - @Input() paginator: boolean | undefined; + @Input({ transform: booleanAttribute }) paginator: boolean | undefined; /** * Number of page links to display in paginator. * @group Props @@ -378,7 +379,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Whether to show it even there is only one page. * @group Props */ - @Input() alwaysShowPaginator: boolean = true; + @Input({ transform: booleanAttribute }) alwaysShowPaginator: boolean = true; /** * Position of the paginator, options are "top", "bottom" or "both". * @group Props @@ -408,27 +409,27 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Whether to display current page report. * @group Props */ - @Input() showCurrentPageReport: boolean | undefined; + @Input({ transform: booleanAttribute }) showCurrentPageReport: boolean | undefined; /** * Whether to display a dropdown to navigate to any page. * @group Props */ - @Input() showJumpToPageDropdown: boolean | undefined; + @Input({ transform: booleanAttribute }) showJumpToPageDropdown: boolean | undefined; /** * Whether to display a input to navigate to any page. * @group Props */ - @Input() showJumpToPageInput: boolean | undefined; + @Input({ transform: booleanAttribute }) showJumpToPageInput: boolean | undefined; /** * When enabled, icons are displayed on paginator to go first and last page. * @group Props */ - @Input() showFirstLastIcon: boolean = true; + @Input({ transform: booleanAttribute }) showFirstLastIcon: boolean = true; /** * Whether to show page links. * @group Props */ - @Input() showPageLinks: boolean = true; + @Input({ transform: booleanAttribute }) showPageLinks: boolean = true; /** * Sort order to use when an unsorted column gets sorted by user interaction. * @group Props @@ -443,7 +444,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * When true, resets paginator to first page after sorting. Available only when sortMode is set to single. * @group Props */ - @Input() resetPageOnSort: boolean = true; + @Input({ transform: booleanAttribute }) resetPageOnSort: boolean = true; /** * Specifies the selection mode, valid values are "single" and "multiple". * @group Props @@ -453,7 +454,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * When enabled with paginator and checkbox selection mode, the select all checkbox in the header will select all rows on the current page. * @group Props */ - @Input() selectionPageOnly: boolean | undefined; + @Input({ transform: booleanAttribute }) selectionPageOnly: boolean | undefined; /** * Selected row with a context menu. * @group Props @@ -479,12 +480,12 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Defines whether metaKey should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean | undefined = false; + @Input({ transform: booleanAttribute }) metaKeySelection: boolean | undefined = false; /** * Defines if the row is selectable. * @group Props */ - @Input() rowSelectable: boolean | undefined | any; + @Input({ transform: booleanAttribute }) rowSelectable: boolean | undefined | any; /** * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. * @group Props @@ -494,12 +495,12 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Defines if data is loaded and interacted with in lazy manner. * @group Props */ - @Input() lazy: boolean = false; + @Input({ transform: booleanAttribute }) lazy: boolean = false; /** * Whether to call lazy loading on initialization. * @group Props */ - @Input() lazyLoadOnInit: boolean = true; + @Input({ transform: booleanAttribute }) lazyLoadOnInit: boolean = true; /** * Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields. * @group Props @@ -539,12 +540,12 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Map instance to keep the expanded rows where key of the map is the data key of the row. * @group Props */ - @Input() expandedRowKeys: { [s: string]: boolean } = {}; + @Input({ transform: booleanAttribute }) expandedRowKeys: { [s: string]: boolean } = {}; /** * Map instance to keep the rows being edited where key of the map is the data key of the row. * @group Props */ - @Input() editingRowKeys: { [s: string]: boolean } = {}; + @Input({ transform: booleanAttribute }) editingRowKeys: { [s: string]: boolean } = {}; /** * Whether multiple rows can be expanded at any time. Valid values are "multiple" and "single". * @group Props @@ -554,7 +555,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Enables scrollable tables. * @group Props */ - @Input() scrollable: boolean | undefined; + @Input({ transform: booleanAttribute }) scrollable: boolean | undefined; /** * Orientation of the scrolling, options are "vertical", "horizontal" and "both". * @group Props @@ -575,7 +576,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Whether the data should be loaded on demand during scroll. * @group Props */ - @Input() virtualScroll: boolean | undefined; + @Input({ transform: booleanAttribute }) virtualScroll: boolean | undefined; /** * Height of a row to use in calculations of virtual scrolling. * @group Props @@ -618,7 +619,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * When enabled, columns can be resized using drag and drop. * @group Props */ - @Input() resizableColumns: boolean | undefined; + @Input({ transform: booleanAttribute }) resizableColumns: boolean | undefined; /** * Defines whether the overall table width should change on column resize, valid values are "fit" and "expand". * @group Props @@ -628,12 +629,12 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * When enabled, columns can be reordered using drag and drop. * @group Props */ - @Input() reorderableColumns: boolean | undefined; + @Input({ transform: booleanAttribute }) reorderableColumns: boolean | undefined; /** * Displays a loader to indicate data load is in progress. * @group Props */ - @Input() loading: boolean | undefined; + @Input({ transform: booleanAttribute }) loading: boolean | undefined; /** * The icon to show while indicating data load is in progress. * @group Props @@ -643,27 +644,27 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Whether to show the loading mask when loading property is true. * @group Props */ - @Input() showLoader: boolean = true; + @Input({ transform: booleanAttribute }) showLoader: boolean = true; /** * Adds hover effect to rows without the need for selectionMode. Note that tr elements that can be hovered need to have "p-selectable-row" class for rowHover to work. * @group Props */ - @Input() rowHover: boolean | undefined; + @Input({ transform: booleanAttribute }) rowHover: boolean | undefined; /** * Whether to use the default sorting or a custom one using sortFunction. * @group Props */ - @Input() customSort: boolean | undefined; + @Input({ transform: booleanAttribute }) customSort: boolean | undefined; /** * Whether to use the initial sort badge or not. * @group Props */ - @Input() showInitialSortBadge: boolean = true; + @Input({ transform: booleanAttribute }) showInitialSortBadge: boolean = true; /** * Whether the cell widths scale according to their content or not. Deprecated: Table layout is always "auto". * @group Props */ - @Input() autoLayout: boolean | undefined; + @Input({ transform: booleanAttribute }) autoLayout: boolean | undefined; /** * Export function. * @group Props @@ -3138,9 +3139,9 @@ export class TableBody implements AfterViewInit, OnDestroy { } } - @Input() frozen: boolean | undefined; + @Input({ transform: booleanAttribute }) frozen: boolean | undefined; - @Input() frozenRows: boolean | undefined; + @Input({ transform: booleanAttribute }) frozenRows: boolean | undefined; @Input() scrollerOptions: any; @@ -3338,7 +3339,7 @@ export class FrozenColumn implements AfterViewInit { export class SortableColumn implements OnInit, OnDestroy { @Input('pSortableColumn') field: string | undefined; - @Input() pSortableColumnDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) pSortableColumnDisabled: boolean | undefined; sorted: boolean | undefined; @@ -3505,7 +3506,7 @@ export class SelectableRow implements OnInit, OnDestroy { @Input('pSelectableRowIndex') index: number | undefined; - @Input() pSelectableRowDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) pSelectableRowDisabled: boolean | undefined; selected: boolean | undefined; @@ -3753,7 +3754,7 @@ export class SelectableRowDblClick implements OnInit, OnDestroy { @Input('pSelectableRowIndex') index: number | undefined; - @Input() pSelectableRowDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) pSelectableRowDisabled: boolean | undefined; selected: boolean | undefined; @@ -3808,7 +3809,7 @@ export class ContextMenuRow { @Input('pContextMenuRowIndex') index: number | undefined; - @Input() pContextMenuRowDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) pContextMenuRowDisabled: boolean | undefined; selected: boolean | undefined; @@ -3856,7 +3857,7 @@ export class ContextMenuRow { export class RowToggler { @Input('pRowToggler') data: any; - @Input() pRowTogglerDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) pRowTogglerDisabled: boolean | undefined; constructor(public dt: Table) {} @@ -3880,7 +3881,7 @@ export class RowToggler { } }) export class ResizableColumn implements AfterViewInit, OnDestroy { - @Input() pResizableColumnDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) pResizableColumnDisabled: boolean | undefined; resizer: HTMLSpanElement | undefined; @@ -3963,7 +3964,7 @@ export class ResizableColumn implements AfterViewInit, OnDestroy { } }) export class ReorderableColumn implements AfterViewInit, OnDestroy { - @Input() pReorderableColumnDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) pReorderableColumnDisabled: boolean | undefined; dragStartListener: VoidListener; @@ -4076,7 +4077,7 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { @Input('pEditableColumnRowIndex') rowIndex: number | undefined; - @Input() pEditableColumnDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) pEditableColumnDisabled: boolean | undefined; @Input() pFocusCellSelector: string | undefined; @@ -4407,7 +4408,7 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { export class EditableRow { @Input('pEditableRow') data: any; - @Input() pEditableRowDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) pEditableRowDisabled: boolean | undefined; constructor(public el: ElementRef) {} @@ -4526,7 +4527,7 @@ export class CellEditor implements AfterContentInit { } }) export class TableRadioButton { - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; @Input() value: any; @@ -4623,7 +4624,7 @@ export class TableRadioButton { } }) export class TableCheckbox { - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; @Input() value: any; @@ -4633,7 +4634,7 @@ export class TableCheckbox { @Input() name: string | undefined; - @Input() required: boolean | undefined; + @Input({ transform: booleanAttribute }) required: boolean | undefined; @Input() ariaLabel: string | undefined; @@ -4707,7 +4708,7 @@ export class TableCheckbox { } }) export class TableHeaderCheckbox { - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; @Input() inputId: string | undefined; @@ -4808,7 +4809,7 @@ export class ReorderableRowHandle implements AfterViewInit { export class ReorderableRow implements AfterViewInit { @Input('pReorderableRow') index: number | undefined; - @Input() pReorderableRowDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) pReorderableRowDisabled: boolean | undefined; mouseDownListener: VoidListener; @@ -5076,7 +5077,7 @@ export class ColumnFilter implements AfterContentInit { * Decides whether to display filter menu popup. * @group Props */ - @Input() showMenu: boolean = true; + @Input({ transform: booleanAttribute }) showMenu: boolean = true; /** * Filter match mode. * @group Props @@ -5092,32 +5093,32 @@ export class ColumnFilter implements AfterContentInit { * Decides whether to display filter operator. * @group Props */ - @Input() showOperator: boolean = true; + @Input({ transform: booleanAttribute }) showOperator: boolean = true; /** * Decides whether to display clear filter button. * @group Props */ - @Input() showClearButton: boolean = true; + @Input({ transform: booleanAttribute }) showClearButton: boolean = true; /** * Decides whether to display apply filter button. * @group Props */ - @Input() showApplyButton: boolean = true; + @Input({ transform: booleanAttribute }) showApplyButton: boolean = true; /** * Decides whether to display filter match modes. * @group Props */ - @Input() showMatchModes: boolean = true; + @Input({ transform: booleanAttribute }) showMatchModes: boolean = true; /** * Decides whether to display add filter button. * @group Props */ - @Input() showAddButton: boolean = true; + @Input({ transform: booleanAttribute }) showAddButton: boolean = true; /** * Decides whether to close popup on clear button click. * @group Props */ - @Input() hideOnClear: boolean = false; + @Input({ transform: booleanAttribute }) hideOnClear: boolean = false; /** * Filter placeholder. * @group Props @@ -5177,12 +5178,12 @@ export class ColumnFilter implements AfterContentInit { * Defines if filter grouping will be enabled. * @group Props */ - @Input() useGrouping: boolean = true; + @Input({ transform: booleanAttribute }) useGrouping: boolean = true; /** * Defines the visibility of buttons. * @group Props */ - @Input() showButtons: boolean = true; + @Input({ transform: booleanAttribute }) showButtons: boolean = true; @ViewChild('icon') icon: Nullable; @@ -5771,7 +5772,7 @@ export class ColumnFilterFormElement implements OnInit { @Input() currencyDisplay: string | undefined; - @Input() useGrouping: boolean = true; + @Input({ transform: booleanAttribute }) useGrouping: boolean = true; get showButtons(): boolean { return this.colFilter.showButtons; diff --git a/src/app/components/tabmenu/tabmenu.ts b/src/app/components/tabmenu/tabmenu.ts index c8f167150cb..143a4910abd 100644 --- a/src/app/components/tabmenu/tabmenu.ts +++ b/src/app/components/tabmenu/tabmenu.ts @@ -20,6 +20,7 @@ import { ViewChild, ViewChildren, ViewEncapsulation, + booleanAttribute, signal } from '@angular/core'; import { ActivatedRoute, Router, RouterModule } from '@angular/router'; @@ -155,11 +156,11 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke * When enabled displays buttons at each side of the tab headers to scroll the tab list. * @group Props */ - @Input() scrollable: boolean | undefined; + @Input({ transform: booleanAttribute }) scrollable: boolean | undefined; /** * Defines if popup mode enabled. */ - @Input() popup: boolean | undefined; + @Input({ transform: booleanAttribute }) popup: boolean | undefined; /** * Inline style of the element. * @group Props diff --git a/src/app/components/tabview/tabview.ts b/src/app/components/tabview/tabview.ts index 8b5696562f5..38d97ff75df 100755 --- a/src/app/components/tabview/tabview.ts +++ b/src/app/components/tabview/tabview.ts @@ -21,6 +21,7 @@ import { ViewChild, ViewContainerRef, ViewEncapsulation, + booleanAttribute, forwardRef, signal } from '@angular/core'; @@ -69,7 +70,7 @@ export class TabPanel implements AfterContentInit, OnDestroy { * Defines if tab can be removed. * @group Props */ - @Input() closable: boolean | undefined = false; + @Input({ transform: booleanAttribute }) closable: boolean | undefined = false; /** * Inline style of the tab header. * @group Props @@ -96,7 +97,7 @@ export class TabPanel implements AfterContentInit, OnDestroy { * Whether a lazy loaded panel should avoid getting loaded again on reselection. * @group Props */ - @Input() cache: boolean | undefined = true; + @Input({ transform: booleanAttribute }) cache: boolean | undefined = true; /** * Advisory information to display in a tooltip on hover. * @group Props @@ -372,13 +373,13 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B * @defaultValue false * @group Props */ - @Input() controlClose: boolean | undefined; + @Input({ transform: booleanAttribute }) controlClose: boolean | undefined; /** * When enabled displays buttons at each side of the tab headers to scroll the tab list. * @defaultValue false * @group Props */ - @Input() scrollable: boolean | undefined; + @Input({ transform: booleanAttribute }) scrollable: boolean | undefined; /** * Index of the active tab to change selected tab programmatically. * @group Props @@ -405,7 +406,7 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B * When enabled, the focused tab is activated. * @group Props */ - @Input() selectOnFocus: boolean = false; + @Input({ transform: booleanAttribute }) selectOnFocus: boolean = false; /** * Used to define a string aria label attribute the forward navigation button. * @group Props @@ -420,7 +421,7 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B * When activated, navigation buttons will automatically hide or show based on the available space within the container. * @group Props */ - @Input() autoHideButtons: boolean = true; + @Input({ transform: booleanAttribute }) autoHideButtons: boolean = true; /** * Index of the element in tabbing order. * @group Props diff --git a/src/app/components/tag/tag.ts b/src/app/components/tag/tag.ts index 10ba9b71fb8..e9c52287cd2 100755 --- a/src/app/components/tag/tag.ts +++ b/src/app/components/tag/tag.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, ContentChildren, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ContentChildren, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute } from '@angular/core'; import { PrimeTemplate, SharedModule } from 'primeng/api'; /** * Tag component is used to categorize content. @@ -57,7 +57,7 @@ export class Tag { * Whether the corners of the tag are rounded. * @group Props */ - @Input() rounded: boolean | undefined; + @Input({ transform: booleanAttribute }) rounded: boolean | undefined; @ContentChildren(PrimeTemplate) templates: QueryList | undefined; diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts index b72a5e105a0..b5d9c6132d0 100755 --- a/src/app/components/tieredmenu/tieredmenu.ts +++ b/src/app/components/tieredmenu/tieredmenu.ts @@ -21,6 +21,7 @@ import { ViewChild, ViewEncapsulation, ViewRef, + booleanAttribute, effect, forwardRef, signal @@ -195,15 +196,15 @@ export class TieredMenuSub { @Input() itemTemplate: HTMLElement | undefined; - @Input() root: boolean | undefined = false; + @Input({ transform: booleanAttribute }) root: boolean | undefined = false; - @Input() autoDisplay: boolean | undefined; + @Input({ transform: booleanAttribute }) autoDisplay: boolean | undefined; - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; @Input() baseZIndex: number = 0; - @Input() popup: boolean | undefined; + @Input({ transform: booleanAttribute }) popup: boolean | undefined; @Input() menuId: string | undefined; @@ -394,7 +395,7 @@ export class TieredMenu implements OnInit, AfterContentInit, OnDestroy { * Defines if menu would displayed as a popup. * @group Props */ - @Input() popup: boolean | undefined; + @Input({ transform: booleanAttribute }) popup: boolean | undefined; /** * Inline style of the component. * @group Props @@ -414,7 +415,7 @@ export class TieredMenu implements OnInit, AfterContentInit, OnDestroy { * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props @@ -425,7 +426,7 @@ export class TieredMenu implements OnInit, AfterContentInit, OnDestroy { * @defaultValue true * @group Props */ - @Input() autoDisplay: boolean | undefined = true; + @Input({ transform: booleanAttribute }) autoDisplay: boolean | undefined = true; /** * Transition options of the show animation. * @group Props @@ -455,7 +456,7 @@ export class TieredMenu implements OnInit, AfterContentInit, OnDestroy { * When present, it specifies that the component should be disabled. * @group Props */ - @Input() disabled: boolean = false; + @Input({ transform: booleanAttribute }) disabled: boolean = false; /** * Index of the element in tabbing order. * @group Props diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts index d52f1621b84..60247182af6 100755 --- a/src/app/components/toast/toast.ts +++ b/src/app/components/toast/toast.ts @@ -20,7 +20,8 @@ import { Renderer2, TemplateRef, ViewChild, - ViewEncapsulation + ViewEncapsulation, + booleanAttribute } from '@angular/core'; import { Message, MessageService, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { CheckIcon } from 'primeng/icons/check'; @@ -245,7 +246,7 @@ export class Toast implements OnInit, AfterContentInit, OnDestroy { * Whether to automatically manage layering. * @group Props */ - @Input() autoZIndex: boolean = true; + @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; /** * Base zIndex value to use in layering. * @group Props @@ -284,12 +285,12 @@ export class Toast implements OnInit, AfterContentInit, OnDestroy { * It does not add the new message if there is already a toast displayed with the same content * @group Props */ - @Input() preventOpenDuplicates: boolean = false; + @Input({ transform: booleanAttribute }) preventOpenDuplicates: boolean = false; /** * Displays only once a message with the same content. * @group Props */ - @Input() preventDuplicates: boolean = false; + @Input({ transform: booleanAttribute }) preventDuplicates: boolean = false; /** * Transform options of the show animation. * @group Props diff --git a/src/app/components/togglebutton/togglebutton.ts b/src/app/components/togglebutton/togglebutton.ts index bdd8897fb00..602a1d9c0bb 100755 --- a/src/app/components/togglebutton/togglebutton.ts +++ b/src/app/components/togglebutton/togglebutton.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, NgModule, Output, QueryList, TemplateRef } from '@angular/core'; +import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, NgModule, Output, QueryList, TemplateRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { RippleModule } from 'primeng/ripple'; import { ToggleButtonChangeEvent } from './togglebutton.interface'; @@ -90,7 +90,7 @@ export class ToggleButton implements ControlValueAccessor { * When present, it specifies that the element should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Inline style of the element. * @group Props diff --git a/src/app/components/tooltip/tooltip.ts b/src/app/components/tooltip/tooltip.ts index 4dec559b8c0..a0ee27fe875 100755 --- a/src/app/components/tooltip/tooltip.ts +++ b/src/app/components/tooltip/tooltip.ts @@ -1,5 +1,5 @@ import { CommonModule, isPlatformBrowser } from '@angular/common'; -import { AfterViewInit, Directive, ElementRef, HostListener, Inject, Input, NgModule, NgZone, OnDestroy, PLATFORM_ID, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core'; +import { AfterViewInit, Directive, ElementRef, HostListener, Inject, Input, NgModule, NgZone, OnDestroy, PLATFORM_ID, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef, booleanAttribute } from '@angular/core'; import { PrimeNGConfig, TooltipOptions } from 'primeng/api'; import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; import { Nullable } from 'primeng/ts-helpers'; @@ -50,7 +50,7 @@ export class Tooltip implements AfterViewInit, OnDestroy { * By default the tooltip contents are rendered as text. Set to false to support html tags in the content. * @group Props */ - @Input() escape: boolean = true; + @Input({ transform: booleanAttribute }) escape: boolean = true; /** * Delay to show the tooltip in milliseconds. * @group Props @@ -80,17 +80,17 @@ export class Tooltip implements AfterViewInit, OnDestroy { * Whether to hide tooltip when hovering over tooltip content. * @group Props */ - @Input() autoHide: boolean = true; + @Input({ transform: booleanAttribute }) autoHide: boolean = true; /** * Automatically adjusts the element position when there is not enough space on the selected position. * @group Props */ - @Input() fitContent: boolean = true; + @Input({ transform: booleanAttribute }) fitContent: boolean = true; /** * Whether to hide tooltip on escape key press. * @group Props */ - @Input() hideOnEscape: boolean = true; + @Input({ transform: booleanAttribute }) hideOnEscape: boolean = true; /** * Content of the tooltip. * @group Props diff --git a/src/app/components/tree/tree.ts b/src/app/components/tree/tree.ts index 12e815912a1..fcdda4358e2 100755 --- a/src/app/components/tree/tree.ts +++ b/src/app/components/tree/tree.ts @@ -1,6 +1,7 @@ import { CommonModule } from '@angular/common'; import { AfterContentInit, + booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -210,13 +211,13 @@ export class UITreeNode implements OnInit { @Input() parentNode: TreeNode | undefined; - @Input() root: boolean | undefined; + @Input({ transform: booleanAttribute }) root: boolean | undefined; @Input() index: number | undefined; - @Input() firstChild: boolean | undefined; + @Input({ transform: booleanAttribute }) firstChild: boolean | undefined; - @Input() lastChild: boolean | undefined; + @Input({ transform: booleanAttribute }) lastChild: boolean | undefined; @Input() level: number | undefined; @@ -877,32 +878,32 @@ export class Tree implements OnInit, AfterContentInit, OnChanges, OnDestroy, Blo * Whether the nodes are draggable. * @group Props */ - @Input() draggableNodes: boolean | undefined; + @Input({ transform: booleanAttribute }) draggableNodes: boolean | undefined; /** * Whether the nodes are droppable. * @group Props */ - @Input() droppableNodes: boolean | undefined; + @Input({ transform: booleanAttribute }) droppableNodes: boolean | undefined; /** * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean = false; + @Input({ transform: booleanAttribute }) metaKeySelection: boolean = false; /** * Whether checkbox selections propagate to ancestor nodes. * @group Props */ - @Input() propagateSelectionUp: boolean = true; + @Input({ transform: booleanAttribute }) propagateSelectionUp: boolean = true; /** * Whether checkbox selections propagate to descendant nodes. * @group Props */ - @Input() propagateSelectionDown: boolean = true; + @Input({ transform: booleanAttribute }) propagateSelectionDown: boolean = true; /** * Displays a loader to indicate data load is in progress. * @group Props */ - @Input() loading: boolean | undefined; + @Input({ transform: booleanAttribute }) loading: boolean | undefined; /** * The icon to show while indicating data load is in progress. * @group Props @@ -932,12 +933,12 @@ export class Tree implements OnInit, AfterContentInit, OnChanges, OnDestroy, Blo * When enabled, drop can be accepted or rejected based on condition defined at onNodeDrop. * @group Props */ - @Input() validateDrop: boolean | undefined; + @Input({ transform: booleanAttribute }) validateDrop: boolean | undefined; /** * When specified, displays an input field to filter the items. * @group Props */ - @Input() filter: boolean | undefined; + @Input({ transform: booleanAttribute }) filter: boolean | undefined; /** * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. * @group Props @@ -972,12 +973,12 @@ export class Tree implements OnInit, AfterContentInit, OnChanges, OnDestroy, Blo * Defines if data is loaded and interacted with in lazy manner. * @group Props */ - @Input() lazy: boolean = false; + @Input({ transform: booleanAttribute }) lazy: boolean = false; /** * Whether the data should be loaded on demand during scroll. * @group Props */ - @Input() virtualScroll: boolean | undefined; + @Input({ transform: booleanAttribute }) virtualScroll: boolean | undefined; /** * Height of an item in the list for VirtualScrolling. * @group Props diff --git a/src/app/components/treeselect/treeselect.ts b/src/app/components/treeselect/treeselect.ts index cc0e73959a1..b0750288aee 100755 --- a/src/app/components/treeselect/treeselect.ts +++ b/src/app/components/treeselect/treeselect.ts @@ -1,6 +1,23 @@ import { AnimationEvent } from '@angular/animations'; import { CommonModule } from '@angular/common'; -import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; +import { + AfterContentInit, + booleanAttribute, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + ElementRef, + EventEmitter, + forwardRef, + Input, + NgModule, + Output, + QueryList, + TemplateRef, + ViewChild, + ViewEncapsulation +} from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { OverlayOptions, OverlayService, PrimeNGConfig, PrimeTemplate, SharedModule, TreeNode } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; @@ -207,12 +224,12 @@ export class TreeSelect implements AfterContentInit { * When present, it specifies that the component should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean = false; + @Input({ transform: booleanAttribute }) metaKeySelection: boolean = false; /** * Defines how the selected items are displayed. * @group Props @@ -297,7 +314,7 @@ export class TreeSelect implements AfterContentInit { * When specified, displays an input field to filter the items. * @group Props */ - @Input() filter: boolean = false; + @Input({ transform: booleanAttribute }) filter: boolean = false; /** * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. * @group Props @@ -322,27 +339,27 @@ export class TreeSelect implements AfterContentInit { * Determines whether the filter input should be automatically focused when the component is rendered. * @group Props */ - @Input() filterInputAutoFocus: boolean = true; + @Input({ transform: booleanAttribute }) filterInputAutoFocus: boolean = true; /** * Whether checkbox selections propagate to descendant nodes. * @group Props */ - @Input() propagateSelectionDown: boolean = true; + @Input({ transform: booleanAttribute }) propagateSelectionDown: boolean = true; /** * Whether checkbox selections propagate to ancestor nodes. * @group Props */ - @Input() propagateSelectionUp: boolean = true; + @Input({ transform: booleanAttribute }) propagateSelectionUp: boolean = true; /** * When enabled, a clear icon is displayed to clear the value. * @group Props */ - @Input() showClear: boolean = false; + @Input({ transform: booleanAttribute }) showClear: boolean = false; /** * Clears the filter value when hiding the dropdown. * @group Props */ - @Input() resetFilterOnHide: boolean = true; + @Input({ transform: booleanAttribute }) resetFilterOnHide: boolean = true; /** * An array of treenodes. * @defaultValue undefined diff --git a/src/app/components/treetable/treetable.ts b/src/app/components/treetable/treetable.ts index 60b341fcd4a..bb35271b892 100755 --- a/src/app/components/treetable/treetable.ts +++ b/src/app/components/treetable/treetable.ts @@ -25,7 +25,8 @@ import { SimpleChanges, TemplateRef, ViewChild, - ViewEncapsulation + ViewEncapsulation, + booleanAttribute } from '@angular/core'; import { BlockableUI, FilterMetadata, FilterService, PrimeNGConfig, PrimeTemplate, ScrollerOptions, SharedModule, SortMeta, TreeNode, TreeTableNode } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; @@ -285,22 +286,22 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * Whether the cell widths scale according to their content or not. * @group Props */ - @Input() autoLayout: boolean | undefined; + @Input({ transform: booleanAttribute }) autoLayout: boolean | undefined; /** * Defines if data is loaded and interacted with in lazy manner. * @group Props */ - @Input() lazy: boolean = false; + @Input({ transform: booleanAttribute }) lazy: boolean = false; /** * Whether to call lazy loading on initialization. * @group Props */ - @Input() lazyLoadOnInit: boolean = true; + @Input({ transform: booleanAttribute }) lazyLoadOnInit: boolean = true; /** * When specified as true, enables the pagination. * @group Props */ - @Input() paginator: boolean | undefined; + @Input({ transform: booleanAttribute }) paginator: boolean | undefined; /** * Number of rows to display per page. * @group Props @@ -325,7 +326,7 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * Whether to show it even there is only one page. * @group Props */ - @Input() alwaysShowPaginator: boolean = true; + @Input({ transform: booleanAttribute }) alwaysShowPaginator: boolean = true; /** * Position of the paginator. * @group Props @@ -350,22 +351,22 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * Whether to display current page report. * @group Props */ - @Input() showCurrentPageReport: boolean | undefined; + @Input({ transform: booleanAttribute }) showCurrentPageReport: boolean | undefined; /** * Whether to display a dropdown to navigate to any page. * @group Props */ - @Input() showJumpToPageDropdown: boolean | undefined; + @Input({ transform: booleanAttribute }) showJumpToPageDropdown: boolean | undefined; /** * When enabled, icons are displayed on paginator to go first and last page. * @group Props */ - @Input() showFirstLastIcon: boolean = true; + @Input({ transform: booleanAttribute }) showFirstLastIcon: boolean = true; /** * Whether to show page links. * @group Props */ - @Input() showPageLinks: boolean = true; + @Input({ transform: booleanAttribute }) showPageLinks: boolean = true; /** * Sort order to use when an unsorted column gets sorted by user interaction. * @group Props @@ -380,12 +381,12 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * When true, resets paginator to first page after sorting. * @group Props */ - @Input() resetPageOnSort: boolean = true; + @Input({ transform: booleanAttribute }) resetPageOnSort: boolean = true; /** * Whether to use the default sorting or a custom one using sortFunction. * @group Props */ - @Input() customSort: boolean | undefined; + @Input({ transform: booleanAttribute }) customSort: boolean | undefined; /** * Specifies the selection mode, valid values are "single" and "multiple". * @group Props @@ -410,7 +411,7 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * Defines whether metaKey is should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean | undefined = false; + @Input({ transform: booleanAttribute }) metaKeySelection: boolean | undefined = false; /** * Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields. * @group Props @@ -420,12 +421,12 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * Adds hover effect to rows without the need for selectionMode. * @group Props */ - @Input() rowHover: boolean | undefined; + @Input({ transform: booleanAttribute }) rowHover: boolean | undefined; /** * Displays a loader to indicate data load is in progress. * @group Props */ - @Input() loading: boolean | undefined; + @Input({ transform: booleanAttribute }) loading: boolean | undefined; /** * The icon to show while indicating data load is in progress. * @group Props @@ -435,12 +436,12 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * Whether to show the loading mask when loading property is true. * @group Props */ - @Input() showLoader: boolean = true; + @Input({ transform: booleanAttribute }) showLoader: boolean = true; /** * When specifies, enables horizontal and/or vertical scrolling. * @group Props */ - @Input() scrollable: boolean | undefined; + @Input({ transform: booleanAttribute }) scrollable: boolean | undefined; /** * Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size. * @group Props @@ -450,7 +451,7 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * Whether the data should be loaded on demand during scroll. * @group Props */ - @Input() virtualScroll: boolean | undefined; + @Input({ transform: booleanAttribute }) virtualScroll: boolean | undefined; /** * Height of a row to use in calculations of virtual scrolling. * @group Props @@ -480,7 +481,7 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * When enabled, columns can be resized using drag and drop. * @group Props */ - @Input() resizableColumns: boolean | undefined; + @Input({ transform: booleanAttribute }) resizableColumns: boolean | undefined; /** * Defines whether the overall table width should change on column resize, valid values are "fit" and "expand". * @group Props @@ -490,7 +491,7 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * When enabled, columns can be reordered using drag and drop. * @group Props */ - @Input() reorderableColumns: boolean | undefined; + @Input({ transform: booleanAttribute }) reorderableColumns: boolean | undefined; /** * Local ng-template varilable of a ContextMenu. * @group Props @@ -2126,7 +2127,7 @@ export class TTBody { @Input('pTreeTableBodyTemplate') template: Nullable>; - @Input() frozen: boolean | undefined; + @Input({ transform: booleanAttribute }) frozen: boolean | undefined; @Input() serializedNodes: any; @@ -2231,7 +2232,7 @@ export class TTBody { export class TTScrollableView implements AfterViewInit, OnDestroy { @Input('ttScrollableView') columns: any[] | undefined; - @Input() frozen: boolean | undefined; + @Input({ transform: booleanAttribute }) frozen: boolean | undefined; @ViewChild('scrollHeader') scrollHeaderViewChild: Nullable; @@ -2442,7 +2443,7 @@ export class TTScrollableView implements AfterViewInit, OnDestroy { export class TTSortableColumn implements OnInit, OnDestroy { @Input('ttSortableColumn') field: string | undefined; - @Input() ttSortableColumnDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) ttSortableColumnDisabled: boolean | undefined; sorted: boolean | undefined; @@ -2566,7 +2567,7 @@ export class TTSortIcon implements OnInit, OnDestroy { } }) export class TTResizableColumn implements AfterViewInit, OnDestroy { - @Input() ttResizableColumnDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) ttResizableColumnDisabled: boolean | undefined; resizer: HTMLSpanElement | undefined; @@ -2647,7 +2648,7 @@ export class TTResizableColumn implements AfterViewInit, OnDestroy { } }) export class TTReorderableColumn implements AfterViewInit, OnDestroy { - @Input() ttReorderableColumnDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) ttReorderableColumnDisabled: boolean | undefined; dragStartListener: VoidListener; @@ -2752,7 +2753,7 @@ export class TTReorderableColumn implements AfterViewInit, OnDestroy { export class TTSelectableRow implements OnInit, OnDestroy { @Input('ttSelectableRow') rowNode: any; - @Input() ttSelectableRowDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) ttSelectableRowDisabled: boolean | undefined; selected: boolean | undefined; @@ -2835,7 +2836,7 @@ export class TTSelectableRow implements OnInit, OnDestroy { export class TTSelectableRowDblClick implements OnInit, OnDestroy { @Input('ttSelectableRowDblClick') rowNode: any; - @Input() ttSelectableRowDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) ttSelectableRowDisabled: boolean | undefined; selected: boolean | undefined; @@ -2887,7 +2888,7 @@ export class TTSelectableRowDblClick implements OnInit, OnDestroy { export class TTContextMenuRow { @Input('ttContextMenuRow') rowNode: any | undefined; - @Input() ttContextMenuRowDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) ttContextMenuRowDisabled: boolean | undefined; selected: boolean | undefined; @@ -2951,7 +2952,7 @@ export class TTContextMenuRow { } }) export class TTCheckbox { - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; @Input('value') rowNode: any; @@ -3106,7 +3107,7 @@ export class TTEditableColumn implements AfterViewInit { @Input('ttEditableColumnField') field: any; - @Input() ttEditableColumnDisabled: boolean | undefined; + @Input({ transform: booleanAttribute }) ttEditableColumnDisabled: boolean | undefined; constructor(public tt: TreeTable, public el: ElementRef, public zone: NgZone) {} diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.ts b/src/app/components/tristatecheckbox/tristatecheckbox.ts index f4f0b59201a..dda1f819ec4 100755 --- a/src/app/components/tristatecheckbox/tristatecheckbox.ts +++ b/src/app/components/tristatecheckbox/tristatecheckbox.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { CheckIcon } from 'primeng/icons/check'; @@ -81,7 +81,7 @@ export class TriStateCheckbox implements ControlValueAccessor { * When present, it specifies that the element should be disabled. * @group Props */ - @Input() disabled: boolean | undefined; + @Input({ transform: booleanAttribute }) disabled: boolean | undefined; /** * Name of the component. * @group Props @@ -126,7 +126,7 @@ export class TriStateCheckbox implements ControlValueAccessor { * When present, it specifies that the component cannot be edited. * @group Props */ - @Input() readonly: boolean | undefined; + @Input({ transform: booleanAttribute }) readonly: boolean | undefined; /** * Specifies the icon for checkbox true value. * @group Props diff --git a/src/app/components/virtualscroller/virtualscroller.ts b/src/app/components/virtualscroller/virtualscroller.ts index 3980427daa3..13e6c007ad5 100755 --- a/src/app/components/virtualscroller/virtualscroller.ts +++ b/src/app/components/virtualscroller/virtualscroller.ts @@ -1,5 +1,22 @@ import { CommonModule } from '@angular/common'; -import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; +import { + AfterContentInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChild, + ContentChildren, + ElementRef, + EventEmitter, + Input, + NgModule, + Output, + QueryList, + TemplateRef, + ViewChild, + ViewEncapsulation, + booleanAttribute +} from '@angular/core'; import { BlockableUI, Footer, Header, PrimeTemplate, ScrollerOptions, SharedModule } from 'primeng/api'; import { Scroller, ScrollerModule } from 'primeng/scroller'; import { Nullable } from 'primeng/ts-helpers'; @@ -67,7 +84,7 @@ export class VirtualScroller implements AfterContentInit, BlockableUI { * Defines if data is loaded and interacted with in lazy manner. * @group Props */ - @Input() lazy: boolean | undefined; + @Input({ transform: booleanAttribute }) lazy: boolean | undefined; /** * Whether to use the scroller feature. The properties of scroller component can be used like an object in it. * @group Props diff --git a/src/app/showcase/layout/doc/app.code.component.ts b/src/app/showcase/layout/doc/app.code.component.ts index ea97aa4c2f3..a4a8decd3ff 100644 --- a/src/app/showcase/layout/doc/app.code.component.ts +++ b/src/app/showcase/layout/doc/app.code.component.ts @@ -1,5 +1,5 @@ import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { Component, ElementRef, Inject, Input, NgModule, PLATFORM_ID, ViewChild } from '@angular/core'; +import { Component, ElementRef, Inject, Input, NgModule, PLATFORM_ID, ViewChild, booleanAttribute } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { TooltipModule } from 'primeng/tooltip'; import { Code, ExtFile, RouteFile } from 'src/app/showcase/domain/code'; @@ -107,11 +107,11 @@ export class AppCodeComponent { @Input() routeFiles: RouteFile[] = []; - @Input() hideToggleCode: boolean = false; + @Input({ transform: booleanAttribute }) hideToggleCode: boolean = false; - @Input() hideCodeSandbox: boolean = false; + @Input({ transform: booleanAttribute }) hideCodeSandbox: boolean = false; - @Input() hideStackBlitz: boolean = false; + @Input({ transform: booleanAttribute }) hideStackBlitz: boolean = false; @ViewChild('codeElement') codeElement: ElementRef; diff --git a/src/app/showcase/layout/doc/app.docapitable.component.ts b/src/app/showcase/layout/doc/app.docapitable.component.ts index 4ff25bb7616..03b23cf0d66 100644 --- a/src/app/showcase/layout/doc/app.docapitable.component.ts +++ b/src/app/showcase/layout/doc/app.docapitable.component.ts @@ -1,5 +1,5 @@ import { Location } from '@angular/common'; -import { ChangeDetectionStrategy, Component, Input, ViewContainerRef } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, ViewContainerRef, booleanAttribute } from '@angular/core'; import { Router } from '@angular/router'; import { AppConfigService } from '../../service/appconfigservice'; @@ -104,7 +104,7 @@ export class AppDocApiTable { @Input() level: number; - @Input() isInterface: boolean = false; + @Input({ transform: booleanAttribute }) isInterface: boolean = false; constructor(public viewContainerRef: ViewContainerRef, public router: Router, public location: Location, private configService: AppConfigService) {} diff --git a/src/app/showcase/layout/menu/app.menuitem.component.ts b/src/app/showcase/layout/menu/app.menuitem.component.ts index daf2431c6e5..8a9875c0860 100644 --- a/src/app/showcase/layout/menu/app.menuitem.component.ts +++ b/src/app/showcase/layout/menu/app.menuitem.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { Component, Input } from '@angular/core'; +import { Component, Input, booleanAttribute } from '@angular/core'; import { Router, RouterModule } from '@angular/router'; import { StyleClassModule } from 'primeng/styleclass'; import { MenuItem } from './app.menu.component'; @@ -39,7 +39,7 @@ import { MenuItem } from './app.menu.component'; export class AppMenuItemComponent { @Input() item: MenuItem; - @Input() root: boolean = true; + @Input({ transform: booleanAttribute }) root: boolean = true; constructor(private router: Router) {} From b3e91c77387a9169a8cec085a1cfde6df45b7f35 Mon Sep 17 00:00:00 2001 From: LcsGa Date: Mon, 29 Jan 2024 00:10:06 +0100 Subject: [PATCH 2/2] feat: add input transform `numberAttribute` functions on every boolean inputs --- src/app/components/accordion/accordion.ts | 5 ++-- .../animateonscroll/animateonscroll.ts | 4 +-- .../components/autocomplete/autocomplete.ts | 15 +++++----- src/app/components/blockui/blockui.ts | 5 ++-- src/app/components/calendar/calendar.ts | 13 +++++---- src/app/components/carousel/carousel.ts | 5 ++-- .../components/cascadeselect/cascadeselect.ts | 5 ++-- src/app/components/checkbox/checkbox.ts | 21 ++++++++++++-- src/app/components/chips/chips.ts | 7 +++-- src/app/components/colorpicker/colorpicker.ts | 5 ++-- .../components/confirmdialog/confirmdialog.ts | 5 ++-- .../components/confirmpopup/confirmpopup.ts | 5 ++-- src/app/components/contextmenu/contextmenu.ts | 11 +++---- src/app/components/dataview/dataview.ts | 17 ++++++----- src/app/components/dialog/dialog.ts | 9 +++--- src/app/components/dropdown/dropdown.ts | 9 +++--- src/app/components/fileupload/fileupload.ts | 9 +++--- src/app/components/galleria/galleria.ts | 13 +++++---- src/app/components/inputmask/inputmask.ts | 7 +++-- src/app/components/inputnumber/inputnumber.ts | 19 ++++++------ src/app/components/inputswitch/inputswitch.ts | 4 +-- src/app/components/knob/knob.ts | 14 ++++----- src/app/components/listbox/listbox.ts | 7 +++-- src/app/components/megamenu/megamenu.ts | 7 +++-- src/app/components/menu/menu.ts | 5 ++-- src/app/components/menubar/menubar.ts | 9 +++--- src/app/components/multiselect/multiselect.ts | 9 +++--- src/app/components/orderlist/orderlist.ts | 7 +++-- .../components/overlaypanel/overlaypanel.ts | 3 +- src/app/components/paginator/paginator.ts | 9 +++--- src/app/components/panelmenu/panelmenu.ts | 9 +++--- src/app/components/password/password.ts | 5 ++-- src/app/components/picklist/picklist.ts | 7 +++-- src/app/components/progressbar/progressbar.ts | 4 +-- src/app/components/radiobutton/radiobutton.ts | 4 +-- src/app/components/rating/rating.ts | 4 +-- src/app/components/scrollpanel/scrollpanel.ts | 5 ++-- src/app/components/scrolltop/scrolltop.ts | 4 +-- .../components/selectbutton/selectbutton.ts | 4 +-- src/app/components/sidebar/sidebar.ts | 5 ++-- src/app/components/slidemenu/slidemenu.ts | 19 ++++++------ src/app/components/slider/slider.ts | 29 +++++++++++++++---- src/app/components/speeddial/speeddial.ts | 5 ++-- src/app/components/spinner/spinner.ts | 14 ++++----- src/app/components/splitbutton/splitbutton.ts | 4 +-- src/app/components/splitter/splitter.ts | 8 ++--- src/app/components/steps/steps.ts | 4 +-- src/app/components/table/table.ts | 29 ++++++++++--------- src/app/components/tabview/tabview.ts | 3 +- src/app/components/tieredmenu/tieredmenu.ts | 11 +++---- src/app/components/toast/toast.ts | 11 +++---- .../components/togglebutton/togglebutton.ts | 4 +-- src/app/components/tooltip/tooltip.ts | 12 ++++---- src/app/components/tree/tree.ts | 15 +++++----- src/app/components/treetable/treetable.ts | 19 ++++++------ .../tristatecheckbox/tristatecheckbox.ts | 4 +-- .../virtualscroller/virtualscroller.ts | 7 +++-- .../layout/doc/app.docapitable.component.ts | 4 +-- .../doc/app.docsectiontext.component.ts | 4 +-- 59 files changed, 298 insertions(+), 222 deletions(-) diff --git a/src/app/components/accordion/accordion.ts b/src/app/components/accordion/accordion.ts index 9a7aa4cc3c2..9f5860532dd 100755 --- a/src/app/components/accordion/accordion.ts +++ b/src/app/components/accordion/accordion.ts @@ -18,7 +18,8 @@ import { TemplateRef, ViewEncapsulation, booleanAttribute, - forwardRef + forwardRef, + numberAttribute } from '@angular/core'; import { BlockableUI, Header, PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; @@ -197,7 +198,7 @@ export class AccordionTab implements AfterContentInit, OnDestroy { * The aria-level that each accordion header will have. The default value is 2 as per W3C specifications * @group Props */ - @Input() headerAriaLevel: number = 2; + @Input({ transform: numberAttribute }) headerAriaLevel: number = 2; /** * Event triggered by changing the choice. * @param {boolean} value - Boolean value indicates that the option is changed. diff --git a/src/app/components/animateonscroll/animateonscroll.ts b/src/app/components/animateonscroll/animateonscroll.ts index 3592bd87256..f664bc353c2 100644 --- a/src/app/components/animateonscroll/animateonscroll.ts +++ b/src/app/components/animateonscroll/animateonscroll.ts @@ -1,5 +1,5 @@ import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { AfterViewInit, Directive, ElementRef, Input, NgModule, Renderer2, OnInit, Inject, PLATFORM_ID, booleanAttribute } from '@angular/core'; +import { AfterViewInit, Directive, ElementRef, Input, NgModule, Renderer2, OnInit, Inject, PLATFORM_ID, booleanAttribute, numberAttribute } from '@angular/core'; import { DomHandler } from 'primeng/dom'; interface AnimateOnScrollOptions { @@ -43,7 +43,7 @@ export class AnimateOnScroll implements OnInit, AfterViewInit { * Specifies the threshold option of the IntersectionObserver API * @group Props */ - @Input() threshold: number | undefined; + @Input({ transform: numberAttribute }) threshold: number | undefined; /** * Whether the scroll event listener should be removed after initial run. * @group Props diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index bd33a3f6506..9aa52398d7c 100755 --- a/src/app/components/autocomplete/autocomplete.ts +++ b/src/app/components/autocomplete/autocomplete.ts @@ -17,6 +17,7 @@ import { Input, NgModule, NgZone, + numberAttribute, OnDestroy, Output, QueryList, @@ -282,12 +283,12 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * Minimum number of characters to initiate a search. * @group Props */ - @Input() minLength: number = 1; + @Input({ transform: numberAttribute }) minLength: number = 1; /** * Delay between keystrokes to wait before sending a query. * @group Props */ - @Input() delay: number = 300; + @Input({ transform: numberAttribute }) delay: number = 300; /** * Inline style of the component. * @group Props @@ -357,7 +358,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * Height of an item in the list for VirtualScrolling. * @group Props */ - @Input() virtualScrollItemSize: number | undefined; + @Input({ transform: numberAttribute }) virtualScrollItemSize: number | undefined; /** * Whether to use the scroller feature. The properties of scroller component can be used like an object in it. * @group Props @@ -367,7 +368,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * Maximum number of character allows in the input field. * @group Props */ - @Input() maxlength: number | undefined; + @Input({ transform: numberAttribute }) maxlength: number | undefined; /** * Name of the input element. * @group Props @@ -382,7 +383,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * Size of the input field. * @group Props */ - @Input() size: number | undefined; + @Input({ transform: numberAttribute }) size: number | undefined; /** * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). * @group Props @@ -412,7 +413,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Defines a string that labels the input for accessibility. * @group Props @@ -483,7 +484,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined; + @Input({ transform: numberAttribute }) tabindex: number | undefined; /** * A property to uniquely identify a value in options. * @group Props diff --git a/src/app/components/blockui/blockui.ts b/src/app/components/blockui/blockui.ts index eb12ba15683..974ec41da4c 100755 --- a/src/app/components/blockui/blockui.ts +++ b/src/app/components/blockui/blockui.ts @@ -16,7 +16,8 @@ import { TemplateRef, ViewChild, ViewEncapsulation, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { PrimeNGConfig, PrimeTemplate } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; @@ -63,7 +64,7 @@ export class BlockUI implements AfterViewInit, OnDestroy { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Class of the element. * @group Props diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts index d1c42117921..4867f5054c0 100755 --- a/src/app/components/calendar/calendar.ts +++ b/src/app/components/calendar/calendar.ts @@ -13,6 +13,7 @@ import { Input, NgModule, NgZone, + numberAttribute, OnDestroy, OnInit, Output, @@ -603,17 +604,17 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * Hours to change per step. * @group Props */ - @Input() stepHour: number = 1; + @Input({ transform: numberAttribute }) stepHour: number = 1; /** * Minutes to change per step. * @group Props */ - @Input() stepMinute: number = 1; + @Input({ transform: numberAttribute }) stepMinute: number = 1; /** * Seconds to change per step. * @group Props */ - @Input() stepSecond: number = 1; + @Input({ transform: numberAttribute }) stepSecond: number = 1; /** * Whether to show the seconds in time picker. * @group Props @@ -653,7 +654,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * Maximum number of selectable dates in multiple mode. * @group Props */ - @Input() maxDateCount: number | undefined; + @Input({ transform: numberAttribute }) maxDateCount: number | undefined; /** * Whether to display today and clear buttons at the footer * @group Props @@ -678,7 +679,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Style class of the datetimepicker container element. * @group Props @@ -728,7 +729,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined; + @Input({ transform: numberAttribute }) tabindex: number | undefined; /** * The minimum selectable date. * @group Props diff --git a/src/app/components/carousel/carousel.ts b/src/app/components/carousel/carousel.ts index 9818a067e1e..ed10709d1b7 100755 --- a/src/app/components/carousel/carousel.ts +++ b/src/app/components/carousel/carousel.ts @@ -20,7 +20,8 @@ import { TemplateRef, ViewChild, ViewEncapsulation, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { Footer, Header, PrimeTemplate, SharedModule } from 'primeng/api'; import { ChevronDownIcon } from 'primeng/icons/chevrondown'; @@ -264,7 +265,7 @@ export class Carousel implements AfterContentInit { * Time in milliseconds to scroll items automatically. * @group Props */ - @Input() autoplayInterval: number = 0; + @Input({ transform: numberAttribute }) autoplayInterval: number = 0; /** * Inline style of the component. * @group Props diff --git a/src/app/components/cascadeselect/cascadeselect.ts b/src/app/components/cascadeselect/cascadeselect.ts index ded7a6a0644..2ac1a516b67 100755 --- a/src/app/components/cascadeselect/cascadeselect.ts +++ b/src/app/components/cascadeselect/cascadeselect.ts @@ -15,6 +15,7 @@ import { Inject, Input, NgModule, + numberAttribute, OnInit, Output, QueryList, @@ -113,7 +114,7 @@ export class CascadeSelectSub implements OnInit { @Input() groupIconTemplate: Nullable>; - @Input() level: number = 0; + @Input({ transform: numberAttribute }) level: number = 0; @Input() optionLabel: string | undefined; @@ -438,7 +439,7 @@ export class CascadeSelect implements OnInit, AfterContentInit { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined = 0; + @Input({ transform: numberAttribute }) tabindex: number | undefined = 0; /** * Establishes relationships between the component and label(s) where its value should be one or more element IDs. * @group Props diff --git a/src/app/components/checkbox/checkbox.ts b/src/app/components/checkbox/checkbox.ts index 540555eee9c..6aeed5ac070 100755 --- a/src/app/components/checkbox/checkbox.ts +++ b/src/app/components/checkbox/checkbox.ts @@ -1,5 +1,22 @@ import { CommonModule } from '@angular/common'; -import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; +import { + booleanAttribute, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + ElementRef, + EventEmitter, + forwardRef, + Input, + NgModule, + numberAttribute, + Output, + QueryList, + TemplateRef, + ViewChild, + ViewEncapsulation +} from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { CheckIcon } from 'primeng/icons/check'; @@ -126,7 +143,7 @@ export class Checkbox implements ControlValueAccessor { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined; + @Input({ transform: numberAttribute }) tabindex: number | undefined; /** * Identifier of the focus input to match a label defined for the component. * @group Props diff --git a/src/app/components/chips/chips.ts b/src/app/components/chips/chips.ts index fb342218965..efac7e79302 100755 --- a/src/app/components/chips/chips.ts +++ b/src/app/components/chips/chips.ts @@ -16,7 +16,8 @@ import { ViewChild, ViewEncapsulation, booleanAttribute, - forwardRef + forwardRef, + numberAttribute } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeTemplate, SharedModule } from 'primeng/api'; @@ -157,7 +158,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor { * Maximum number of entries allowed. * @group Props */ - @Input() max: number | undefined; + @Input({ transform: numberAttribute }) max: number | undefined; /** * Defines a string that labels the input for accessibility. * @group Props @@ -172,7 +173,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined; + @Input({ transform: numberAttribute }) tabindex: number | undefined; /** * Identifier of the focus input to match a label defined for the component. * @group Props diff --git a/src/app/components/colorpicker/colorpicker.ts b/src/app/components/colorpicker/colorpicker.ts index 169a86ff533..3e25b145ff6 100755 --- a/src/app/components/colorpicker/colorpicker.ts +++ b/src/app/components/colorpicker/colorpicker.ts @@ -17,7 +17,8 @@ import { ViewChild, ViewEncapsulation, booleanAttribute, - forwardRef + forwardRef, + numberAttribute } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { OverlayService, PrimeNGConfig } from 'primeng/api'; @@ -144,7 +145,7 @@ export class ColorPicker implements ControlValueAccessor, OnDestroy { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Transition options of the show animation. * @group Props diff --git a/src/app/components/confirmdialog/confirmdialog.ts b/src/app/components/confirmdialog/confirmdialog.ts index e2571cdf42a..38a38b13ba1 100755 --- a/src/app/components/confirmdialog/confirmdialog.ts +++ b/src/app/components/confirmdialog/confirmdialog.ts @@ -22,7 +22,8 @@ import { ViewChild, ViewEncapsulation, ViewRef, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { ConfirmEventType, Confirmation, ConfirmationService, Footer, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; @@ -274,7 +275,7 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Transition options of the animation. * @group Props diff --git a/src/app/components/confirmpopup/confirmpopup.ts b/src/app/components/confirmpopup/confirmpopup.ts index 2a28d3156b6..c966c3f7458 100755 --- a/src/app/components/confirmpopup/confirmpopup.ts +++ b/src/app/components/confirmpopup/confirmpopup.ts @@ -17,7 +17,8 @@ import { Renderer2, TemplateRef, ViewEncapsulation, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { Confirmation, ConfirmationService, OverlayService, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; @@ -144,7 +145,7 @@ export class ConfirmPopup implements AfterContentInit, OnDestroy { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Inline style of the component. * @group Props diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts index 3ffe14892e3..47bae4689f5 100755 --- a/src/app/components/contextmenu/contextmenu.ts +++ b/src/app/components/contextmenu/contextmenu.ts @@ -25,6 +25,7 @@ import { booleanAttribute, effect, forwardRef, + numberAttribute, signal } from '@angular/core'; import { RouterModule } from '@angular/router'; @@ -206,7 +207,7 @@ export class ContextMenuSub { @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; @Input({ transform: booleanAttribute }) popup: boolean | undefined; @@ -216,13 +217,13 @@ export class ContextMenuSub { @Input() ariaLabelledBy: string | undefined; - @Input() level: number = 0; + @Input({ transform: numberAttribute }) level: number = 0; @Input() focusedItemId: string | undefined; @Input() activeItemPath: any[]; - @Input() tabindex: number = 0; + @Input({ transform: numberAttribute }) tabindex: number = 0; @Output() itemClick: EventEmitter = new EventEmitter(); @@ -436,7 +437,7 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Current id state as a string. * @group Props @@ -456,7 +457,7 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy { * Press delay in touch devices as miliseconds. * @group Props */ - @Input() pressDelay: number | undefined = 500; + @Input({ transform: numberAttribute }) pressDelay: number | undefined = 500; /** * Callback to invoke when overlay menu is shown. * @group Emits diff --git a/src/app/components/dataview/dataview.ts b/src/app/components/dataview/dataview.ts index 806259a832d..09564a67ee2 100755 --- a/src/app/components/dataview/dataview.ts +++ b/src/app/components/dataview/dataview.ts @@ -17,7 +17,8 @@ import { ChangeDetectorRef, ViewEncapsulation, OnDestroy, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ObjectUtils } from 'primeng/utils'; @@ -131,22 +132,22 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU * Number of rows to display per page. * @group Props */ - @Input() rows: number | undefined; + @Input({ transform: numberAttribute }) rows: number | undefined; /** * Number of total records, defaults to length of value when not defined. * @group Props */ - @Input() totalRecords: number | undefined; + @Input({ transform: numberAttribute }) totalRecords: number | undefined; /** * Number of page links to display in paginator. * @group Props */ - @Input() pageLinks: number = 5; + @Input({ transform: numberAttribute }) pageLinks: number = 5; /** * Array of integer/object values to display inside rows per page dropdown of paginator * @group Props */ - @Input() rowsPerPageOptions: number[] | any[] | undefined; + @Input({ transform: numberAttribute }) rowsPerPageOptions: number[] | any[] | undefined; /** * Position of the paginator. * @group Props @@ -231,7 +232,7 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. * @group Props */ - @Input() trackBy: Function = (index: number, item: any) => item; + @Input({ transform: numberAttribute }) trackBy: Function = (index: number, item: any) => item; /** * Comma separated list of fields in the object graph to search against. * @group Props @@ -256,7 +257,7 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU * Index of the first row to be displayed. * @group Props */ - @Input() first: number | undefined = 0; + @Input({ transform: numberAttribute }) first: number | undefined = 0; /** * Property name of data to use in sorting by default. * @group Props @@ -266,7 +267,7 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU * Order to sort the data by default. * @group Props */ - @Input() sortOrder: number | undefined; + @Input({ transform: numberAttribute }) sortOrder: number | undefined; /** * An array of objects to display. * @group Props diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts index 7636d1ddb5c..076a9eae21a 100755 --- a/src/app/components/dialog/dialog.ts +++ b/src/app/components/dialog/dialog.ts @@ -24,7 +24,8 @@ import { ViewChild, ViewEncapsulation, ViewRef, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { Footer, Header, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; @@ -284,17 +285,17 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Minimum value for the left coordinate of dialog in dragging. * @group Props */ - @Input() minX: number = 0; + @Input({ transform: numberAttribute }) minX: number = 0; /** * Minimum value for the top coordinate of dialog in dragging. * @group Props */ - @Input() minY: number = 0; + @Input({ transform: numberAttribute }) minY: number = 0; /** * When enabled, first button receives focus on show. * @group Props diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index 6be6573f742..65d36326747 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -17,6 +17,7 @@ import { Input, NgModule, NgZone, + numberAttribute, OnInit, Output, QueryList, @@ -92,7 +93,7 @@ export class DropdownItem { @Input({ transform: booleanAttribute }) visible: boolean | undefined; - @Input() itemSize: number | undefined; + @Input({ transform: numberAttribute }) itemSize: number | undefined; @Input() ariaPosInset: string | undefined; @@ -399,7 +400,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined = 0; + @Input({ transform: numberAttribute }) tabindex: number | undefined = 0; /** * Default text to display when no option is selected. * @group Props @@ -515,7 +516,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV * Height of an item in the list for VirtualScrolling. * @group Props */ - @Input() virtualScrollItemSize: number | undefined; + @Input({ transform: numberAttribute }) virtualScrollItemSize: number | undefined; /** * Whether to use the scroller feature. The properties of scroller component can be used like an object in it. * @group Props @@ -550,7 +551,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV * Maximum number of character allows in the editable input field. * @group Props */ - @Input() maxlength: number | undefined; + @Input({ transform: numberAttribute }) maxlength: number | undefined; /** * Advisory information to display in a tooltip on hover. * @group Props diff --git a/src/app/components/fileupload/fileupload.ts b/src/app/components/fileupload/fileupload.ts index bd6f959cf3a..7a6da150e56 100755 --- a/src/app/components/fileupload/fileupload.ts +++ b/src/app/components/fileupload/fileupload.ts @@ -22,7 +22,8 @@ import { TemplateRef, ViewChild, ViewEncapsulation, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { BlockableUI, Message, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api'; @@ -203,7 +204,7 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe * Maximum file size allowed in bytes. * @group Props */ - @Input() maxFileSize: number | undefined; + @Input({ transform: numberAttribute }) maxFileSize: number | undefined; /** * Summary message of the invalid file size. * @group Props @@ -248,7 +249,7 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe * Width of the image thumbnail in pixels. * @group Props */ - @Input() previewWidth: number = 50; + @Input({ transform: numberAttribute }) previewWidth: number = 50; /** * Label of the choose button. Defaults to PrimeNG Locale configuration. * @group Props @@ -308,7 +309,7 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe * Maximum number of files that can be uploaded. * @group Props */ - @Input() fileLimit: number | undefined; + @Input({ transform: numberAttribute }) fileLimit: number | undefined; /** * Style class of the upload button. * @group Props diff --git a/src/app/components/galleria/galleria.ts b/src/app/components/galleria/galleria.ts index 507fb637c35..09b7cffcb14 100755 --- a/src/app/components/galleria/galleria.ts +++ b/src/app/components/galleria/galleria.ts @@ -25,7 +25,8 @@ import { TemplateRef, ViewChild, ViewEncapsulation, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; @@ -117,7 +118,7 @@ export class Galleria implements OnChanges, OnDestroy { * Number of items per page. * @group Props */ - @Input() numVisible: number = 3; + @Input({ transform: numberAttribute }) numVisible: number = 3; /** * An array of options for responsive design. * @see {GalleriaResponsiveOptions} @@ -163,7 +164,7 @@ export class Galleria implements OnChanges, OnDestroy { * Time in milliseconds to scroll items. * @group Props */ - @Input() transitionInterval: number = 4000; + @Input({ transform: numberAttribute }) transitionInterval: number = 4000; /** * Whether to display thumbnail container. * @group Props @@ -198,7 +199,7 @@ export class Galleria implements OnChanges, OnDestroy { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Style class of the mask on fullscreen mode. * @group Props @@ -477,7 +478,7 @@ export class GalleriaContent implements DoCheck { @Input() value: any[] = []; - @Input() numVisible: number | undefined; + @Input({ transform: numberAttribute }) numVisible: number | undefined; @Output() maskHide: EventEmitter = new EventEmitter(); @@ -581,7 +582,7 @@ export class GalleriaContent implements DoCheck { export class GalleriaItemSlot { @Input() templates: QueryList | undefined; - @Input() index: number | undefined; + @Input({ transform: numberAttribute }) index: number | undefined; @Input() get item(): any { return this._item; diff --git a/src/app/components/inputmask/inputmask.ts b/src/app/components/inputmask/inputmask.ts index dedccac16ef..bde26504aac 100755 --- a/src/app/components/inputmask/inputmask.ts +++ b/src/app/components/inputmask/inputmask.ts @@ -44,7 +44,8 @@ import { ViewChild, ViewEncapsulation, booleanAttribute, - forwardRef + forwardRef, + numberAttribute } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeTemplate, SharedModule } from 'primeng/api'; @@ -162,12 +163,12 @@ export class InputMask implements OnInit, ControlValueAccessor { * Size of the input field. * @group Props */ - @Input() size: number | undefined; + @Input({ transform: numberAttribute }) size: number | undefined; /** * Maximum number of character allows in the input field. * @group Props */ - @Input() maxlength: number | undefined; + @Input({ transform: numberAttribute }) maxlength: number | undefined; /** * Specifies tab order of the element. * @group Props diff --git a/src/app/components/inputnumber/inputnumber.ts b/src/app/components/inputnumber/inputnumber.ts index d16fd63d1bf..e8033c899ec 100644 --- a/src/app/components/inputnumber/inputnumber.ts +++ b/src/app/components/inputnumber/inputnumber.ts @@ -20,7 +20,8 @@ import { ViewChild, ViewEncapsulation, booleanAttribute, - forwardRef + forwardRef, + numberAttribute } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms'; import { PrimeTemplate, SharedModule } from 'primeng/api'; @@ -245,17 +246,17 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control * Size of the input field. * @group Props */ - @Input() size: number | undefined; + @Input({ transform: numberAttribute }) size: number | undefined; /** * Maximum number of character allows in the input field. * @group Props */ - @Input() maxlength: number | undefined; + @Input({ transform: numberAttribute }) maxlength: number | undefined; /** * Specifies tab order of the element. * @group Props */ - @Input() tabindex: number | undefined; + @Input({ transform: numberAttribute }) tabindex: number | undefined; /** * Title text of the input text. * @group Props @@ -295,12 +296,12 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control * Mininum boundary value. * @group Props */ - @Input() min: number | undefined; + @Input({ transform: numberAttribute }) min: number | undefined; /** * Maximum boundary value. * @group Props */ - @Input() max: number | undefined; + @Input({ transform: numberAttribute }) max: number | undefined; /** * Style class of the increment button. * @group Props @@ -330,7 +331,7 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control * Step factor to increment/decrement the value. * @group Props */ - @Input() step: number = 1; + @Input({ transform: numberAttribute }) step: number = 1; /** * Determines whether the input field is empty. * @group Props @@ -370,12 +371,12 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control * The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information). * @group Props */ - @Input() minFractionDigits: number | undefined; + @Input({ transform: numberAttribute }) minFractionDigits: number | undefined; /** * The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information). * @group Props */ - @Input() maxFractionDigits: number | undefined; + @Input({ transform: numberAttribute }) maxFractionDigits: number | undefined; /** * Text to display before the value. * @group Props diff --git a/src/app/components/inputswitch/inputswitch.ts b/src/app/components/inputswitch/inputswitch.ts index 1110201d33f..56c669fe1e3 100755 --- a/src/app/components/inputswitch/inputswitch.ts +++ b/src/app/components/inputswitch/inputswitch.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, Output, ViewChild, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, Output, ViewChild, ViewEncapsulation, booleanAttribute, forwardRef, numberAttribute } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { InputSwitchChangeEvent } from './inputswitch.interface'; @@ -67,7 +67,7 @@ export class InputSwitch { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined; + @Input({ transform: numberAttribute }) tabindex: number | undefined; /** * Identifier of the input element. * @group Props diff --git a/src/app/components/knob/knob.ts b/src/app/components/knob/knob.ts index cd959aa093a..7e06d50c33c 100755 --- a/src/app/components/knob/knob.ts +++ b/src/app/components/knob/knob.ts @@ -1,5 +1,5 @@ import { CommonModule, DOCUMENT } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, NgModule, Output, Renderer2, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, NgModule, Output, Renderer2, ViewEncapsulation, booleanAttribute, forwardRef, numberAttribute } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { VoidListener } from 'primeng/ts-helpers'; @@ -74,7 +74,7 @@ export class Knob { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number = 0; + @Input({ transform: numberAttribute }) tabindex: number = 0; /** * Background of the value. * @group Props @@ -104,27 +104,27 @@ export class Knob { * Size of the component in pixels. * @group Props */ - @Input() size: number = 100; + @Input({ transform: numberAttribute }) size: number = 100; /** * Step factor to increment/decrement the value. * @group Props */ - @Input() step: number = 1; + @Input({ transform: numberAttribute }) step: number = 1; /** * Mininum boundary value. * @group Props */ - @Input() min: number = 0; + @Input({ transform: numberAttribute }) min: number = 0; /** * Maximum boundary value. * @group Props */ - @Input() max: number = 100; + @Input({ transform: numberAttribute }) max: number = 100; /** * Width of the knob stroke. * @group Props */ - @Input() strokeWidth: number = 14; + @Input({ transform: numberAttribute }) strokeWidth: number = 14; /** * When present, it specifies that the component should be disabled. * @group Props diff --git a/src/app/components/listbox/listbox.ts b/src/app/components/listbox/listbox.ts index 7907d990f5a..701129dee49 100755 --- a/src/app/components/listbox/listbox.ts +++ b/src/app/components/listbox/listbox.ts @@ -20,7 +20,8 @@ import { computed, signal, Renderer2, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule, PrimeTemplate, Footer, Header, FilterService, TranslationKeys, PrimeNGConfig, ScrollerOptions } from 'primeng/api'; @@ -313,7 +314,7 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor, * Height of an item in the list for VirtualScrolling. * @group Props */ - @Input() virtualScrollItemSize: number | undefined; + @Input({ transform: numberAttribute }) virtualScrollItemSize: number | undefined; /** * Whether to use the scroller feature. The properties of scroller component can be used like an object in it. * @group Props @@ -328,7 +329,7 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor, * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined = 0; + @Input({ transform: numberAttribute }) tabindex: number | undefined = 0; /** * When specified, allows selecting multiple values. * @group Props diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts index b63b31155c5..5f9fb05bcc5 100755 --- a/src/app/components/megamenu/megamenu.ts +++ b/src/app/components/megamenu/megamenu.ts @@ -22,6 +22,7 @@ import { booleanAttribute, effect, forwardRef, + numberAttribute, signal } from '@angular/core'; import { RouterModule } from '@angular/router'; @@ -209,7 +210,7 @@ export class MegaMenuSub { @Input() ariaLabelledBy: string | undefined; - @Input() level: number = 0; + @Input({ transform: numberAttribute }) level: number = 0; @Input() focusedItemId: string | undefined; @@ -221,7 +222,7 @@ export class MegaMenuSub { @Input() submenu: any; - @Input() tabindex: number = 0; + @Input({ transform: numberAttribute }) tabindex: number = 0; @Input({ transform: booleanAttribute }) root: boolean = false; @@ -462,7 +463,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number = 0; + @Input({ transform: numberAttribute }) tabindex: number = 0; @ContentChildren(PrimeTemplate) templates: QueryList | undefined; diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts index 1045d6133f7..85dc000a33e 100755 --- a/src/app/components/menu/menu.ts +++ b/src/app/components/menu/menu.ts @@ -25,6 +25,7 @@ import { computed, effect, forwardRef, + numberAttribute, signal } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; @@ -278,7 +279,7 @@ export class Menu implements OnDestroy { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Transition options of the show animation. * @group Props @@ -308,7 +309,7 @@ export class Menu implements OnDestroy { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number = 0; + @Input({ transform: numberAttribute }) tabindex: number = 0; /** * Callback to invoke when overlay menu is shown. * @group Emits diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts index 40b6957e5f5..8cad18623d3 100755 --- a/src/app/components/menubar/menubar.ts +++ b/src/app/components/menubar/menubar.ts @@ -22,6 +22,7 @@ import { ViewEncapsulation, booleanAttribute, effect, + numberAttribute, signal } from '@angular/core'; import { RouterModule } from '@angular/router'; @@ -215,7 +216,7 @@ export class MenubarSub implements OnInit, OnDestroy { @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; @Input({ transform: booleanAttribute }) mobileActive: boolean | undefined; @@ -227,7 +228,7 @@ export class MenubarSub implements OnInit, OnDestroy { @Input() ariaLabelledBy: string | undefined; - @Input() level: number = 0; + @Input({ transform: numberAttribute }) level: number = 0; @Input() focusedItemId: string | undefined; @@ -440,7 +441,7 @@ export class Menubar implements AfterContentInit, OnDestroy, OnInit { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Whether to show a root submenu on mouse over. * @defaultValue true @@ -456,7 +457,7 @@ export class Menubar implements AfterContentInit, OnDestroy, OnInit { * Delay to hide the root submenu in milliseconds when mouse leaves. * @group Props */ - @Input() autoHideDelay: number = 100; + @Input({ transform: numberAttribute }) autoHideDelay: number = 100; /** * Current id state as a string. * @group Props diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts index 74477ea209c..da85f815b6f 100755 --- a/src/app/components/multiselect/multiselect.ts +++ b/src/app/components/multiselect/multiselect.ts @@ -18,6 +18,7 @@ import { Input, NgModule, NgZone, + numberAttribute, OnInit, Output, QueryList, @@ -100,7 +101,7 @@ export class MultiSelectItem { @Input({ transform: booleanAttribute }) disabled: boolean | undefined; - @Input() itemSize: number | undefined; + @Input({ transform: numberAttribute }) itemSize: number | undefined; @Input({ transform: booleanAttribute }) focused: boolean | undefined; @@ -466,7 +467,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined = 0; + @Input({ transform: numberAttribute }) tabindex: number | undefined = 0; /** * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). * @group Props @@ -513,7 +514,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * Decides how many selected item labels to show at most. * @group Props */ - @Input() selectionLimit: number | undefined; + @Input({ transform: numberAttribute }) selectionLimit: number | undefined; /** * Label to display after exceeding max selected labels e.g. ({0} items selected), defaults "ellipsis" keyword to indicate a text-overflow. * @group Props @@ -598,7 +599,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * Height of an item in the list for VirtualScrolling. * @group Props */ - @Input() virtualScrollItemSize: number | undefined; + @Input({ transform: numberAttribute }) virtualScrollItemSize: number | undefined; /** * Whether to use the scroller feature. The properties of scroller component can be used like an object in it. * @group Props diff --git a/src/app/components/orderlist/orderlist.ts b/src/app/components/orderlist/orderlist.ts index 6e8042fe1e6..6679cc6e26f 100755 --- a/src/app/components/orderlist/orderlist.ts +++ b/src/app/components/orderlist/orderlist.ts @@ -19,7 +19,8 @@ import { TemplateRef, ViewChild, ViewEncapsulation, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { FilterService, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; @@ -174,7 +175,7 @@ export class OrderList implements AfterViewChecked, AfterContentInit { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined; + @Input({ transform: numberAttribute }) tabindex: number | undefined; /** * Defines a string that labels the input for accessibility. @@ -270,7 +271,7 @@ export class OrderList implements AfterViewChecked, AfterContentInit { * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. * @group Props */ - @Input() trackBy: Function = (index: number, item: any) => item; + @Input({ transform: numberAttribute }) trackBy: Function = (index: number, item: any) => item; /** * A list of values that are currently selected. diff --git a/src/app/components/overlaypanel/overlaypanel.ts b/src/app/components/overlaypanel/overlaypanel.ts index c343182076b..d272d24637a 100755 --- a/src/app/components/overlaypanel/overlaypanel.ts +++ b/src/app/components/overlaypanel/overlaypanel.ts @@ -14,6 +14,7 @@ import { Input, NgModule, NgZone, + numberAttribute, OnDestroy, Output, PLATFORM_ID, @@ -146,7 +147,7 @@ export class OverlayPanel implements AfterContentInit, OnDestroy { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * When enabled, first button receives focus on show. * @group Props diff --git a/src/app/components/paginator/paginator.ts b/src/app/components/paginator/paginator.ts index e6b1e31b25b..9936bf07114 100755 --- a/src/app/components/paginator/paginator.ts +++ b/src/app/components/paginator/paginator.ts @@ -16,7 +16,8 @@ import { SimpleChanges, TemplateRef, ViewEncapsulation, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { PrimeNGConfig, PrimeTemplate, SelectItem, SharedModule } from 'primeng/api'; @@ -167,7 +168,7 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { * Number of page links to display. * @group Props */ - @Input() pageLinkSize: number = 5; + @Input({ transform: numberAttribute }) pageLinkSize: number = 5; /** * Inline style of the component. * @group Props @@ -229,12 +230,12 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { * Number of total records. * @group Props */ - @Input() totalRecords: number = 0; + @Input({ transform: numberAttribute }) totalRecords: number = 0; /** * Data count to display per page. * @group Props */ - @Input() rows: number = 0; + @Input({ transform: numberAttribute }) rows: number = 0; /** * Array of integer/object values to display inside rows per page dropdown. A object that have 'showAll' key can be added to it to show all data. Exp; [10,20,30,{showAll:'All'}] * @group Props diff --git a/src/app/components/panelmenu/panelmenu.ts b/src/app/components/panelmenu/panelmenu.ts index 70984dacc6c..aff95febd9f 100644 --- a/src/app/components/panelmenu/panelmenu.ts +++ b/src/app/components/panelmenu/panelmenu.ts @@ -21,6 +21,7 @@ import { booleanAttribute, computed, forwardRef, + numberAttribute, signal } from '@angular/core'; import { RouterModule } from '@angular/router'; @@ -178,13 +179,13 @@ export class PanelMenuSub { @Input() itemTemplate: HTMLElement | undefined; - @Input() level: number = 0; + @Input({ transform: numberAttribute }) level: number = 0; @Input() activeItemPath: any[]; @Input({ transform: booleanAttribute }) root: boolean | undefined; - @Input() tabindex: number | undefined; + @Input({ transform: numberAttribute }) tabindex: number | undefined; @Input() transitionOptions: string | undefined; @@ -318,7 +319,7 @@ export class PanelMenuList implements OnChanges { @Input({ transform: booleanAttribute }) root: boolean | undefined; - @Input() tabindex: number | undefined; + @Input({ transform: numberAttribute }) tabindex: number | undefined; @Input() activeItem: any; @@ -874,7 +875,7 @@ export class PanelMenu implements AfterContentInit { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined = 0; + @Input({ transform: numberAttribute }) tabindex: number | undefined = 0; @ContentChildren(PrimeTemplate) templates: QueryList | undefined; diff --git a/src/app/components/password/password.ts b/src/app/components/password/password.ts index e1537496298..655fea581db 100644 --- a/src/app/components/password/password.ts +++ b/src/app/components/password/password.ts @@ -27,7 +27,8 @@ import { ViewChild, ViewEncapsulation, booleanAttribute, - forwardRef + forwardRef, + numberAttribute } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { OverlayService, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api'; @@ -460,7 +461,7 @@ export class Password implements AfterContentInit, OnInit { * specifies the maximum number of characters allowed in the input element. * @group Props */ - @Input() maxLength: number | undefined; + @Input({ transform: numberAttribute }) maxLength: number | undefined; /** * Text for a strong password. Defaults to PrimeNG I18N API configuration. * @group Props diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts index 611afaf1edb..4b4d1136a92 100755 --- a/src/app/components/picklist/picklist.ts +++ b/src/app/components/picklist/picklist.ts @@ -19,7 +19,8 @@ import { TemplateRef, ViewChild, ViewEncapsulation, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { FilterService, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; @@ -382,7 +383,7 @@ export class PickList implements AfterViewChecked, AfterContentInit { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined = 0; + @Input({ transform: numberAttribute }) tabindex: number | undefined = 0; /** * Defines a string that labels the move to right button for accessibility. * @group Props @@ -447,7 +448,7 @@ export class PickList implements AfterViewChecked, AfterContentInit { * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. Use sourceTrackBy or targetTrackBy in case different algorithms are needed per list. * @group Props */ - @Input() trackBy: Function = (index: number, item: any) => item; + @Input({ transform: numberAttribute }) trackBy: Function = (index: number, item: any) => item; /** * Function to optimize the dom operations by delegating to ngForTrackBy in source list, default algorithm checks for object identity. * @group Props diff --git a/src/app/components/progressbar/progressbar.ts b/src/app/components/progressbar/progressbar.ts index d6ea13cf232..70274c69ddd 100755 --- a/src/app/components/progressbar/progressbar.ts +++ b/src/app/components/progressbar/progressbar.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, TemplateRef, ContentChildren, Input, NgModule, ViewEncapsulation, booleanAttribute } from '@angular/core'; +import { ChangeDetectionStrategy, Component, TemplateRef, ContentChildren, Input, NgModule, ViewEncapsulation, booleanAttribute, numberAttribute } from '@angular/core'; import { PrimeTemplate } from 'primeng/api'; import { QueryList } from '@angular/core'; /** @@ -43,7 +43,7 @@ export class ProgressBar { * Current value of the progress. * @group Props */ - @Input() value: number | undefined; + @Input({ transform: numberAttribute }) value: number | undefined; /** * Whether to display the progress bar value. * @group Props diff --git a/src/app/components/radiobutton/radiobutton.ts b/src/app/components/radiobutton/radiobutton.ts index a1f3eace01f..3b6852a1cbb 100755 --- a/src/app/components/radiobutton/radiobutton.ts +++ b/src/app/components/radiobutton/radiobutton.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Injectable, Injector, Input, NgModule, OnDestroy, OnInit, Output, ViewChild, booleanAttribute, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Injectable, Injector, Input, NgModule, OnDestroy, OnInit, Output, ViewChild, booleanAttribute, forwardRef, numberAttribute } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms'; import { Nullable } from 'primeng/ts-helpers'; import { RadioButtonClickEvent } from './radiobutton.interface'; @@ -125,7 +125,7 @@ export class RadioButton implements ControlValueAccessor, OnInit, OnDestroy { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined; + @Input({ transform: numberAttribute }) tabindex: number | undefined; /** * Identifier of the focus input to match a label defined for the component. * @group Props diff --git a/src/app/components/rating/rating.ts b/src/app/components/rating/rating.ts index 6f9d8980f52..cfeb0193fbd 100755 --- a/src/app/components/rating/rating.ts +++ b/src/app/components/rating/rating.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, NgModule, OnInit, Output, QueryList, signal, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, NgModule, numberAttribute, OnInit, Output, QueryList, signal, TemplateRef, ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { BanIcon } from 'primeng/icons/ban'; @@ -102,7 +102,7 @@ export class Rating implements OnInit, ControlValueAccessor { * Number of stars. * @group Props */ - @Input() stars: number = 5; + @Input({ transform: numberAttribute }) stars: number = 5; /** * When specified a cancel icon is displayed to allow removing the value. * @group Props diff --git a/src/app/components/scrollpanel/scrollpanel.ts b/src/app/components/scrollpanel/scrollpanel.ts index 990efa1065d..ad287fa7bc0 100755 --- a/src/app/components/scrollpanel/scrollpanel.ts +++ b/src/app/components/scrollpanel/scrollpanel.ts @@ -17,7 +17,8 @@ import { Renderer2, TemplateRef, ViewChild, - ViewEncapsulation + ViewEncapsulation, + numberAttribute } from '@angular/core'; import { PrimeTemplate } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; @@ -91,7 +92,7 @@ export class ScrollPanel implements AfterViewInit, AfterContentInit, OnDestroy { * Step factor to scroll the content while pressing the arrow keys. * @group Props */ - @Input() step: number = 5; + @Input({ transform: numberAttribute }) step: number = 5; @ViewChild('container') containerViewChild: ElementRef | undefined; diff --git a/src/app/components/scrolltop/scrolltop.ts b/src/app/components/scrolltop/scrolltop.ts index 6af7e45c115..17670b5516e 100755 --- a/src/app/components/scrolltop/scrolltop.ts +++ b/src/app/components/scrolltop/scrolltop.ts @@ -1,6 +1,6 @@ import { AnimationEvent, animate, state, style, transition, trigger } from '@angular/animations'; import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, Inject, Input, NgModule, OnDestroy, OnInit, PLATFORM_ID, QueryList, Renderer2, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, Inject, Input, NgModule, OnDestroy, OnInit, PLATFORM_ID, QueryList, Renderer2, TemplateRef, ViewEncapsulation, numberAttribute } from '@angular/core'; import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; import { ChevronUpIcon } from 'primeng/icons/chevronup'; @@ -76,7 +76,7 @@ export class ScrollTop implements OnInit, OnDestroy { * Defines the threshold value of the vertical scroll position of the target to toggle the visibility. * @group Props */ - @Input() threshold: number = 400; + @Input({ transform: numberAttribute }) threshold: number = 400; /** * Name of the icon or JSX.Element for icon. * @group Props diff --git a/src/app/components/selectbutton/selectbutton.ts b/src/app/components/selectbutton/selectbutton.ts index 4693cc2ac3b..719622e29bb 100755 --- a/src/app/components/selectbutton/selectbutton.ts +++ b/src/app/components/selectbutton/selectbutton.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, NgModule, Output, TemplateRef, ViewChild, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, NgModule, Output, TemplateRef, ViewChild, ViewEncapsulation, booleanAttribute, forwardRef, numberAttribute } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { RippleModule } from 'primeng/ripple'; @@ -88,7 +88,7 @@ export class SelectButton implements ControlValueAccessor { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number = 0; + @Input({ transform: numberAttribute }) tabindex: number = 0; /** * When specified, allows selecting multiple values. * @group Props diff --git a/src/app/components/sidebar/sidebar.ts b/src/app/components/sidebar/sidebar.ts index 893c3c4faad..1f84abfd42e 100755 --- a/src/app/components/sidebar/sidebar.ts +++ b/src/app/components/sidebar/sidebar.ts @@ -18,7 +18,8 @@ import { Renderer2, TemplateRef, ViewEncapsulation, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; @@ -138,7 +139,7 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Whether an overlay mask is displayed behind the sidebar. * @group Props diff --git a/src/app/components/slidemenu/slidemenu.ts b/src/app/components/slidemenu/slidemenu.ts index b1e54a267ec..bb8af66a637 100755 --- a/src/app/components/slidemenu/slidemenu.ts +++ b/src/app/components/slidemenu/slidemenu.ts @@ -24,6 +24,7 @@ import { booleanAttribute, effect, forwardRef, + numberAttribute, signal } from '@angular/core'; import { RouterModule } from '@angular/router'; @@ -195,7 +196,7 @@ import { CaretLeftIcon } from 'primeng/icons/caretleft'; export class SlideMenuSub { @Input() items: any[]; - @Input() menuWidth: number; + @Input({ transform: numberAttribute }) menuWidth: number; @Input({ transform: booleanAttribute }) root: boolean | undefined = false; @@ -207,7 +208,7 @@ export class SlideMenuSub { @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; @Input({ transform: booleanAttribute }) popup: boolean | undefined; @@ -217,13 +218,13 @@ export class SlideMenuSub { @Input() ariaLabelledBy: string | undefined; - @Input() level: number = 0; + @Input({ transform: numberAttribute }) level: number = 0; @Input() focusedItemId: string | undefined; @Input() activeItemPath: any[]; - @Input() tabindex: number = 0; + @Input({ transform: numberAttribute }) tabindex: number = 0; @Output() itemClick: EventEmitter = new EventEmitter(); @@ -395,17 +396,17 @@ export class SlideMenu implements OnInit, AfterContentInit, OnDestroy { * Width of the submenus. * @group Props */ - @Input() menuWidth: number = 190; + @Input({ transform: numberAttribute }) menuWidth: number = 190; /** * Height of the scrollable area, a scrollbar appears if a menu height is longer than this value. * @group Props */ - @Input() viewportHeight: number = 180; + @Input({ transform: numberAttribute }) viewportHeight: number = 180; /** * Duration of the sliding animation in milliseconds. * @group Props */ - @Input() effectDuration: any = 250; + @Input({ transform: numberAttribute }) effectDuration: any = 250; /** * Easing animation to use for sliding. * @group Props @@ -425,7 +426,7 @@ export class SlideMenu implements OnInit, AfterContentInit, OnDestroy { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number = 0; + @Input({ transform: numberAttribute }) tabindex: number = 0; /** * Defines if menu would displayed as a popup. * @group Props @@ -455,7 +456,7 @@ export class SlideMenu implements OnInit, AfterContentInit, OnDestroy { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Whether to show a root submenu on mouse over. * @defaultValue true diff --git a/src/app/components/slider/slider.ts b/src/app/components/slider/slider.ts index d41fd3993d4..76baa4a47a4 100755 --- a/src/app/components/slider/slider.ts +++ b/src/app/components/slider/slider.ts @@ -1,5 +1,24 @@ import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, NgModule, NgZone, OnDestroy, Output, PLATFORM_ID, Renderer2, ViewChild, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + Inject, + Input, + NgModule, + NgZone, + OnDestroy, + Output, + PLATFORM_ID, + Renderer2, + ViewChild, + ViewEncapsulation, + booleanAttribute, + forwardRef, + numberAttribute +} from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { DomHandler } from 'primeng/dom'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; @@ -128,12 +147,12 @@ export class Slider implements OnDestroy, ControlValueAccessor { * Mininum boundary value. * @group Props */ - @Input() min: number = 0; + @Input({ transform: numberAttribute }) min: number = 0; /** * Maximum boundary value. * @group Props */ - @Input() max: number = 100; + @Input({ transform: numberAttribute }) max: number = 100; /** * Orientation of the slider. * @group Props @@ -143,7 +162,7 @@ export class Slider implements OnDestroy, ControlValueAccessor { * Step factor to increment/decrement the value. * @group Props */ - @Input() step: number | undefined; + @Input({ transform: numberAttribute }) step: number | undefined; /** * When specified, allows two boundary values to be picked. * @group Props @@ -173,7 +192,7 @@ export class Slider implements OnDestroy, ControlValueAccessor { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number = 0; + @Input({ transform: numberAttribute }) tabindex: number = 0; /** * Callback to invoke on value change. * @param {SliderChangeEvent} event - Custom value change event. diff --git a/src/app/components/speeddial/speeddial.ts b/src/app/components/speeddial/speeddial.ts index ccf4afeb610..ec06f17fa50 100644 --- a/src/app/components/speeddial/speeddial.ts +++ b/src/app/components/speeddial/speeddial.ts @@ -20,6 +20,7 @@ import { ViewChild, ViewEncapsulation, booleanAttribute, + numberAttribute, signal } from '@angular/core'; import { RouterModule } from '@angular/router'; @@ -187,7 +188,7 @@ export class SpeedDial implements AfterViewInit, AfterContentInit, OnDestroy { * Transition delay step for each action item. * @group Props */ - @Input() transitionDelay: number = 30; + @Input({ transform: numberAttribute }) transitionDelay: number = 30; /** * Specifies the opening type of actions. * @group Props @@ -197,7 +198,7 @@ export class SpeedDial implements AfterViewInit, AfterContentInit, OnDestroy { * Radius for *circle types. * @group Props */ - @Input() radius: number = 0; + @Input({ transform: numberAttribute }) radius: number = 0; /** * Whether to show a mask element behind the speeddial. * @group Props diff --git a/src/app/components/spinner/spinner.ts b/src/app/components/spinner/spinner.ts index 943e5072edf..6cae652a2ce 100755 --- a/src/app/components/spinner/spinner.ts +++ b/src/app/components/spinner/spinner.ts @@ -1,4 +1,4 @@ -import { NgModule, Component, ElementRef, OnInit, Input, Output, EventEmitter, forwardRef, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, booleanAttribute } from '@angular/core'; +import { NgModule, Component, ElementRef, OnInit, Input, Output, EventEmitter, forwardRef, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, booleanAttribute, numberAttribute } from '@angular/core'; import { CommonModule } from '@angular/common'; import { InputTextModule } from 'primeng/inputtext'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; @@ -82,13 +82,13 @@ export class Spinner implements OnInit, ControlValueAccessor { @Output() onBlur: EventEmitter = new EventEmitter(); - @Input() min: number; + @Input({ transform: numberAttribute }) min: number; - @Input() max: number; + @Input({ transform: numberAttribute }) max: number; - @Input() maxlength: number; + @Input({ transform: numberAttribute }) maxlength: number; - @Input() size: number; + @Input({ transform: numberAttribute }) size: number; @Input() placeholder: string; @@ -98,7 +98,7 @@ export class Spinner implements OnInit, ControlValueAccessor { @Input({ transform: booleanAttribute }) readonly: boolean; - @Input() tabindex: number; + @Input({ transform: numberAttribute }) tabindex: number; @Input({ transform: booleanAttribute }) required: boolean; @@ -116,7 +116,7 @@ export class Spinner implements OnInit, ControlValueAccessor { @Input() thousandSeparator: string; - @Input() precision: number; + @Input({ transform: numberAttribute }) precision: number; value: any; diff --git a/src/app/components/splitbutton/splitbutton.ts b/src/app/components/splitbutton/splitbutton.ts index 68299b059ac..4f4d95efc8d 100755 --- a/src/app/components/splitbutton/splitbutton.ts +++ b/src/app/components/splitbutton/splitbutton.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation, booleanAttribute, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation, booleanAttribute, numberAttribute, signal } from '@angular/core'; import { MenuItem, PrimeTemplate } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; import { ChevronDownIcon } from 'primeng/icons/chevrondown'; @@ -131,7 +131,7 @@ export class SplitButton { * Index of the element in tabbing order. * @group Prop */ - @Input() tabindex: number | undefined; + @Input({ transform: numberAttribute }) tabindex: number | undefined; /** * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). * @group Props diff --git a/src/app/components/splitter/splitter.ts b/src/app/components/splitter/splitter.ts index f12423ea91c..1cddaa761d6 100755 --- a/src/app/components/splitter/splitter.ts +++ b/src/app/components/splitter/splitter.ts @@ -1,5 +1,5 @@ import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Inject, Input, NgModule, Output, PLATFORM_ID, QueryList, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Inject, Input, NgModule, Output, PLATFORM_ID, QueryList, Renderer2, ViewChild, ViewEncapsulation, numberAttribute } from '@angular/core'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; @@ -90,17 +90,17 @@ export class Splitter { * Size of the divider in pixels. * @group Props */ - @Input() gutterSize: number = 4; + @Input({ transform: numberAttribute }) gutterSize: number = 4; /** * Step factor to increment/decrement the size of the panels while pressing the arrow keys. * @group Props */ - @Input() step: number = 5; + @Input({ transform: numberAttribute }) step: number = 5; /** * Minimum size of the elements relative to 100%. * @group Props */ - @Input() minSizes: number[] = []; + @Input({ transform: numberAttribute }) minSizes: number[] = []; /** * Size of the elements relative to 100%. * @group Props diff --git a/src/app/components/steps/steps.ts b/src/app/components/steps/steps.ts index da2766bae2f..b85b1233b1c 100755 --- a/src/app/components/steps/steps.ts +++ b/src/app/components/steps/steps.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation, booleanAttribute } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation, booleanAttribute, numberAttribute } from '@angular/core'; import { ActivatedRoute, Router, RouterModule } from '@angular/router'; import { DomHandler } from 'primeng/dom'; import { Nullable } from 'primeng/ts-helpers'; @@ -91,7 +91,7 @@ export class Steps implements OnInit, OnDestroy { * Index of the active item. * @group Props */ - @Input() activeIndex: number = 0; + @Input({ transform: numberAttribute }) activeIndex: number = 0; /** * An array of menu items. * @group Props diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 3c10dd61bcf..8ad4276301e 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -17,6 +17,7 @@ import { Input, NgModule, NgZone, + numberAttribute, OnChanges, OnDestroy, OnInit, @@ -369,7 +370,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Number of page links to display in paginator. * @group Props */ - @Input() pageLinks: number = 5; + @Input({ transform: numberAttribute }) pageLinks: number = 5; /** * Array of integer/object values to display inside rows per page dropdown of paginator * @group Props @@ -434,7 +435,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Sort order to use when an unsorted column gets sorted by user interaction. * @group Props */ - @Input() defaultSortOrder: number = 1; + @Input({ transform: numberAttribute }) defaultSortOrder: number = 1; /** * Defines whether sorting works on single column or on multiple columns. * @group Props @@ -490,7 +491,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. * @group Props */ - @Input() rowTrackBy: Function = (index: number, item: any) => item; + @Input({ transform: numberAttribute }) rowTrackBy: Function = (index: number, item: any) => item; /** * Defines if data is loaded and interacted with in lazy manner. * @group Props @@ -530,7 +531,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Delay in milliseconds before filtering the data. * @group Props */ - @Input() filterDelay: number = 300; + @Input({ transform: numberAttribute }) filterDelay: number = 300; /** * Locale to use in filtering. The default locale is the host environment's current locale. * @group Props @@ -581,7 +582,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Height of a row to use in calculations of virtual scrolling. * @group Props */ - @Input() virtualScrollItemSize: number | undefined; + @Input({ transform: numberAttribute }) virtualScrollItemSize: number | undefined; /** * Whether to use the scroller feature. The properties of scroller component can be used like an object in it. * @group Props @@ -591,7 +592,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Threshold in milliseconds to delay lazy loading during scrolling. * @group Props */ - @Input() virtualScrollDelay: number = 250; + @Input({ transform: numberAttribute }) virtualScrollDelay: number = 250; /** * Width of the frozen columns container. * @group Props @@ -699,7 +700,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Order to sort when default row grouping is enabled. * @group Props */ - @Input() groupRowsByOrder: number = 1; + @Input({ transform: numberAttribute }) groupRowsByOrder: number = 1; /** * Defines the responsive mode, valid options are "stack" and "scroll". * @group Props @@ -4531,7 +4532,7 @@ export class TableRadioButton { @Input() value: any; - @Input() index: number | undefined; + @Input({ transform: numberAttribute }) index: number | undefined; @Input() inputId: string | undefined; @@ -4628,7 +4629,7 @@ export class TableCheckbox { @Input() value: any; - @Input() index: number | undefined; + @Input({ transform: numberAttribute }) index: number | undefined; @Input() inputId: string | undefined; @@ -5133,17 +5134,17 @@ export class ColumnFilter implements AfterContentInit { * Defines maximum amount of constraints. * @group Props */ - @Input() maxConstraints: number = 2; + @Input({ transform: numberAttribute }) maxConstraints: number = 2; /** * Defines minimum fraction of digits. * @group Props */ - @Input() minFractionDigits: number | undefined; + @Input({ transform: numberAttribute }) minFractionDigits: number | undefined; /** * Defines maximum fraction of digits. * @group Props */ - @Input() maxFractionDigits: number | undefined; + @Input({ transform: numberAttribute }) maxFractionDigits: number | undefined; /** * Defines prefix of the filter. * @group Props @@ -5756,9 +5757,9 @@ export class ColumnFilterFormElement implements OnInit { @Input() placeholder: string | undefined; - @Input() minFractionDigits: number | undefined; + @Input({ transform: numberAttribute }) minFractionDigits: number | undefined; - @Input() maxFractionDigits: number | undefined; + @Input({ transform: numberAttribute }) maxFractionDigits: number | undefined; @Input() prefix: string | undefined; diff --git a/src/app/components/tabview/tabview.ts b/src/app/components/tabview/tabview.ts index 38d97ff75df..ceabfd8363c 100755 --- a/src/app/components/tabview/tabview.ts +++ b/src/app/components/tabview/tabview.ts @@ -23,6 +23,7 @@ import { ViewEncapsulation, booleanAttribute, forwardRef, + numberAttribute, signal } from '@angular/core'; import { BlockableUI, PrimeTemplate, SharedModule } from 'primeng/api'; @@ -426,7 +427,7 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number = 0; + @Input({ transform: numberAttribute }) tabindex: number = 0; /** * Callback to invoke on tab change. * @param {TabViewChangeEvent} event - Custom tab change event diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts index b5d9c6132d0..5526505f76d 100755 --- a/src/app/components/tieredmenu/tieredmenu.ts +++ b/src/app/components/tieredmenu/tieredmenu.ts @@ -24,6 +24,7 @@ import { booleanAttribute, effect, forwardRef, + numberAttribute, signal } from '@angular/core'; import { RouterModule } from '@angular/router'; @@ -202,7 +203,7 @@ export class TieredMenuSub { @Input({ transform: booleanAttribute }) autoZIndex: boolean = true; - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; @Input({ transform: booleanAttribute }) popup: boolean | undefined; @@ -212,13 +213,13 @@ export class TieredMenuSub { @Input() ariaLabelledBy: string | undefined; - @Input() level: number = 0; + @Input({ transform: numberAttribute }) level: number = 0; @Input() focusedItemId: string | undefined; @Input() activeItemPath: any[]; - @Input() tabindex: number = 0; + @Input({ transform: numberAttribute }) tabindex: number = 0; @Output() itemClick: EventEmitter = new EventEmitter(); @@ -420,7 +421,7 @@ export class TieredMenu implements OnInit, AfterContentInit, OnDestroy { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * Whether to show a root submenu on mouse over. * @defaultValue true @@ -461,7 +462,7 @@ export class TieredMenu implements OnInit, AfterContentInit, OnDestroy { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number = 0; + @Input({ transform: numberAttribute }) tabindex: number = 0; /** * Callback to invoke when overlay menu is shown. * @group Emits diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts index 60247182af6..04071f81189 100755 --- a/src/app/components/toast/toast.ts +++ b/src/app/components/toast/toast.ts @@ -21,7 +21,8 @@ import { TemplateRef, ViewChild, ViewEncapsulation, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { Message, MessageService, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { CheckIcon } from 'primeng/icons/check'; @@ -126,9 +127,9 @@ import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast export class ToastItem implements AfterViewInit, OnDestroy { @Input() message: Message | null | undefined; - @Input() index: number | null | undefined; + @Input({ transform: numberAttribute }) index: number | null | undefined; - @Input() life: number; + @Input({ transform: numberAttribute }) life: number; @Input() template: TemplateRef | undefined; @@ -251,12 +252,12 @@ export class Toast implements OnInit, AfterContentInit, OnDestroy { * Base zIndex value to use in layering. * @group Props */ - @Input() baseZIndex: number = 0; + @Input({ transform: numberAttribute }) baseZIndex: number = 0; /** * The default time to display messages for in milliseconds. * @group Props */ - @Input() life: number = 3000; + @Input({ transform: numberAttribute }) life: number = 3000; /** * Inline style of the component. * @group Props diff --git a/src/app/components/togglebutton/togglebutton.ts b/src/app/components/togglebutton/togglebutton.ts index 602a1d9c0bb..534b92cd53b 100755 --- a/src/app/components/togglebutton/togglebutton.ts +++ b/src/app/components/togglebutton/togglebutton.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, NgModule, Output, QueryList, TemplateRef } from '@angular/core'; +import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, NgModule, numberAttribute, Output, QueryList, TemplateRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { RippleModule } from 'primeng/ripple'; import { ToggleButtonChangeEvent } from './togglebutton.interface'; @@ -110,7 +110,7 @@ export class ToggleButton implements ControlValueAccessor { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined = 0; + @Input({ transform: numberAttribute }) tabindex: number | undefined = 0; /** * Position of the icon. * @group Props diff --git a/src/app/components/tooltip/tooltip.ts b/src/app/components/tooltip/tooltip.ts index a0ee27fe875..043a70a7bc1 100755 --- a/src/app/components/tooltip/tooltip.ts +++ b/src/app/components/tooltip/tooltip.ts @@ -1,5 +1,5 @@ import { CommonModule, isPlatformBrowser } from '@angular/common'; -import { AfterViewInit, Directive, ElementRef, HostListener, Inject, Input, NgModule, NgZone, OnDestroy, PLATFORM_ID, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef, booleanAttribute } from '@angular/core'; +import { AfterViewInit, Directive, ElementRef, HostListener, Inject, Input, NgModule, NgZone, OnDestroy, PLATFORM_ID, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef, booleanAttribute, numberAttribute } from '@angular/core'; import { PrimeNGConfig, TooltipOptions } from 'primeng/api'; import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; import { Nullable } from 'primeng/ts-helpers'; @@ -55,27 +55,27 @@ export class Tooltip implements AfterViewInit, OnDestroy { * Delay to show the tooltip in milliseconds. * @group Props */ - @Input() showDelay: number | undefined; + @Input({ transform: numberAttribute }) showDelay: number | undefined; /** * Delay to hide the tooltip in milliseconds. * @group Props */ - @Input() hideDelay: number | undefined; + @Input({ transform: numberAttribute }) hideDelay: number | undefined; /** * Time to wait in milliseconds to hide the tooltip even it is active. * @group Props */ - @Input() life: number | undefined; + @Input({ transform: numberAttribute }) life: number | undefined; /** * Specifies the additional vertical offset of the tooltip from its default position. * @group Props */ - @Input() positionTop: number | undefined; + @Input({ transform: numberAttribute }) positionTop: number | undefined; /** * Specifies the additional horizontal offset of the tooltip from its default position. * @group Props */ - @Input() positionLeft: number | undefined; + @Input({ transform: numberAttribute }) positionLeft: number | undefined; /** * Whether to hide tooltip when hovering over tooltip content. * @group Props diff --git a/src/app/components/tree/tree.ts b/src/app/components/tree/tree.ts index fcdda4358e2..2ecac995b13 100755 --- a/src/app/components/tree/tree.ts +++ b/src/app/components/tree/tree.ts @@ -12,6 +12,7 @@ import { Inject, Input, NgModule, + numberAttribute, OnChanges, OnDestroy, OnInit, @@ -213,17 +214,17 @@ export class UITreeNode implements OnInit { @Input({ transform: booleanAttribute }) root: boolean | undefined; - @Input() index: number | undefined; + @Input({ transform: numberAttribute }) index: number | undefined; @Input({ transform: booleanAttribute }) firstChild: boolean | undefined; @Input({ transform: booleanAttribute }) lastChild: boolean | undefined; - @Input() level: number | undefined; + @Input({ transform: numberAttribute }) level: number | undefined; - @Input() indentation: number | undefined; + @Input({ transform: numberAttribute }) indentation: number | undefined; - @Input() itemSize: number | undefined; + @Input({ transform: numberAttribute }) itemSize: number | undefined; tree: Tree; @@ -983,7 +984,7 @@ export class Tree implements OnInit, AfterContentInit, OnChanges, OnDestroy, Blo * Height of an item in the list for VirtualScrolling. * @group Props */ - @Input() virtualScrollItemSize: number | undefined; + @Input({ transform: numberAttribute }) virtualScrollItemSize: number | undefined; /** * Whether to use the scroller feature. The properties of scroller component can be used like an object in it. * @group Props @@ -993,7 +994,7 @@ export class Tree implements OnInit, AfterContentInit, OnChanges, OnDestroy, Blo * Indentation factor for spacing of the nested node when virtual scrolling is enabled. * @group Props */ - @Input() indentation: number = 1.5; + @Input({ transform: numberAttribute }) indentation: number = 1.5; /** * Custom templates of the component. * @group Props @@ -1003,7 +1004,7 @@ export class Tree implements OnInit, AfterContentInit, OnChanges, OnDestroy, Blo * Function to optimize the node list rendering, default algorithm checks for object identity. * @group Props */ - @Input() trackBy: Function = (index: number, item: any) => item; + @Input({ transform: numberAttribute }) trackBy: Function = (index: number, item: any) => item; /** * Height of the node. * @group Props diff --git a/src/app/components/treetable/treetable.ts b/src/app/components/treetable/treetable.ts index bb35271b892..1e507ef133c 100755 --- a/src/app/components/treetable/treetable.ts +++ b/src/app/components/treetable/treetable.ts @@ -26,7 +26,8 @@ import { TemplateRef, ViewChild, ViewEncapsulation, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { BlockableUI, FilterMetadata, FilterService, PrimeNGConfig, PrimeTemplate, ScrollerOptions, SharedModule, SortMeta, TreeNode, TreeTableNode } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; @@ -306,17 +307,17 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * Number of rows to display per page. * @group Props */ - @Input() rows: number | undefined; + @Input({ transform: numberAttribute }) rows: number | undefined; /** * Index of the first row to be displayed. * @group Props */ - @Input() first: number = 0; + @Input({ transform: numberAttribute }) first: number = 0; /** * Number of page links to display in paginator. * @group Props */ - @Input() pageLinks: number = 5; + @Input({ transform: numberAttribute }) pageLinks: number = 5; /** * Array of integer/object values to display inside rows per page dropdown of paginator * @group Props @@ -371,7 +372,7 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * Sort order to use when an unsorted column gets sorted by user interaction. * @group Props */ - @Input() defaultSortOrder: number = 1; + @Input({ transform: numberAttribute }) defaultSortOrder: number = 1; /** * Defines whether sorting works on single column or on multiple columns. * @group Props @@ -456,7 +457,7 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * Height of a row to use in calculations of virtual scrolling. * @group Props */ - @Input() virtualScrollItemSize: number | undefined; + @Input({ transform: numberAttribute }) virtualScrollItemSize: number | undefined; /** * Whether to use the scroller feature. The properties of scroller component can be used like an object in it. * @group Props @@ -466,7 +467,7 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * The delay (in milliseconds) before triggering the virtual scroll. This determines the time gap between the user's scroll action and the actual rendering of the next set of items in the virtual scroll. * @group Props */ - @Input() virtualScrollDelay: number = 150; + @Input({ transform: numberAttribute }) virtualScrollDelay: number = 150; /** * Width of the frozen columns container. * @group Props @@ -501,7 +502,7 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. * @group Props */ - @Input() rowTrackBy: Function = (index: number, item: any) => item; + @Input({ transform: numberAttribute }) rowTrackBy: Function = (index: number, item: any) => item; /** * An array of FilterMetadata objects to provide external filters. * @group Props @@ -516,7 +517,7 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * Delay in milliseconds before filtering the data. * @group Props */ - @Input() filterDelay: number = 300; + @Input({ transform: numberAttribute }) filterDelay: number = 300; /** * Mode for filtering valid values are "lenient" and "strict". Default is lenient. * @group Props diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.ts b/src/app/components/tristatecheckbox/tristatecheckbox.ts index dda1f819ec4..6f0732176ce 100755 --- a/src/app/components/tristatecheckbox/tristatecheckbox.ts +++ b/src/app/components/tristatecheckbox/tristatecheckbox.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute, forwardRef, numberAttribute } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { CheckIcon } from 'primeng/icons/check'; @@ -101,7 +101,7 @@ export class TriStateCheckbox implements ControlValueAccessor { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined; + @Input({ transform: numberAttribute }) tabindex: number | undefined; /** * Identifier of the focus input to match a label defined for the component. * @group Props diff --git a/src/app/components/virtualscroller/virtualscroller.ts b/src/app/components/virtualscroller/virtualscroller.ts index 13e6c007ad5..14d26993a90 100755 --- a/src/app/components/virtualscroller/virtualscroller.ts +++ b/src/app/components/virtualscroller/virtualscroller.ts @@ -15,7 +15,8 @@ import { TemplateRef, ViewChild, ViewEncapsulation, - booleanAttribute + booleanAttribute, + numberAttribute } from '@angular/core'; import { BlockableUI, Footer, Header, PrimeTemplate, ScrollerOptions, SharedModule } from 'primeng/api'; import { Scroller, ScrollerModule } from 'primeng/scroller'; @@ -64,7 +65,7 @@ export class VirtualScroller implements AfterContentInit, BlockableUI { * Height of an item in the list. * @group Props */ - @Input() itemSize: number | undefined; + @Input({ transform: numberAttribute }) itemSize: number | undefined; /** * Inline style of the component. * @group Props @@ -94,7 +95,7 @@ export class VirtualScroller implements AfterContentInit, BlockableUI { * Threshold in milliseconds to delay lazy loading during scrolling. * @group Props */ - @Input() delay: number = 250; + @Input({ transform: numberAttribute }) delay: number = 250; /** * Callback to invoke in lazy mode to load new data. * @param {VirtualScrollerLazyLoadEvent} event - custom lazy load event. diff --git a/src/app/showcase/layout/doc/app.docapitable.component.ts b/src/app/showcase/layout/doc/app.docapitable.component.ts index 03b23cf0d66..61a524883c9 100644 --- a/src/app/showcase/layout/doc/app.docapitable.component.ts +++ b/src/app/showcase/layout/doc/app.docapitable.component.ts @@ -1,5 +1,5 @@ import { Location } from '@angular/common'; -import { ChangeDetectionStrategy, Component, Input, ViewContainerRef, booleanAttribute } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, ViewContainerRef, booleanAttribute, numberAttribute } from '@angular/core'; import { Router } from '@angular/router'; import { AppConfigService } from '../../service/appconfigservice'; @@ -102,7 +102,7 @@ export class AppDocApiTable { @Input() parentId: string; - @Input() level: number; + @Input({ transform: numberAttribute }) level: number; @Input({ transform: booleanAttribute }) isInterface: boolean = false; diff --git a/src/app/showcase/layout/doc/app.docsectiontext.component.ts b/src/app/showcase/layout/doc/app.docsectiontext.component.ts index 639cacc473d..cc33c0c81a6 100644 --- a/src/app/showcase/layout/doc/app.docsectiontext.component.ts +++ b/src/app/showcase/layout/doc/app.docsectiontext.component.ts @@ -1,5 +1,5 @@ import { Location } from '@angular/common'; -import { Component, ElementRef, Input } from '@angular/core'; +import { Component, ElementRef, Input, numberAttribute } from '@angular/core'; @Component({ selector: 'app-docsectiontext', @@ -25,7 +25,7 @@ export class AppDocSectionTextComponent { @Input() id!: string; - @Input() level!: number; + @Input({ transform: numberAttribute }) level!: number; @Input() label!: string;