primeng 0.0.0-watch
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +77 -0
- package/README.md +11 -0
- package/accordion/index.d.ts +255 -0
- package/animateonscroll/index.d.ts +71 -0
- package/api/index.d.ts +1820 -0
- package/autocomplete/index.d.ts +925 -0
- package/autofocus/index.d.ts +31 -0
- package/avatar/index.d.ts +115 -0
- package/avatargroup/index.d.ts +60 -0
- package/badge/index.d.ts +156 -0
- package/base/index.d.ts +63 -0
- package/basecomponent/index.d.ts +54 -0
- package/baseeditableholder/index.d.ts +45 -0
- package/baseinput/index.d.ts +73 -0
- package/basemodelholder/index.d.ts +12 -0
- package/blockui/index.d.ts +114 -0
- package/breadcrumb/index.d.ts +179 -0
- package/button/index.d.ts +478 -0
- package/buttongroup/index.d.ts +43 -0
- package/card/index.d.ts +154 -0
- package/carousel/index.d.ts +443 -0
- package/cascadeselect/index.d.ts +729 -0
- package/chart/index.d.ts +128 -0
- package/checkbox/index.d.ts +248 -0
- package/chip/index.d.ts +165 -0
- package/colorpicker/index.d.ts +329 -0
- package/config/index.d.ts +89 -0
- package/confirmdialog/index.d.ts +358 -0
- package/confirmpopup/index.d.ts +218 -0
- package/contextmenu/index.d.ts +356 -0
- package/dataview/index.d.ts +539 -0
- package/datepicker/index.d.ts +1191 -0
- package/dialog/index.d.ts +531 -0
- package/divider/index.d.ts +114 -0
- package/dock/index.d.ts +201 -0
- package/dom/index.d.ts +109 -0
- package/dragdrop/index.d.ts +121 -0
- package/drawer/index.d.ts +309 -0
- package/dynamicdialog/index.d.ts +544 -0
- package/editor/index.d.ts +306 -0
- package/fesm2022/primeng-accordion.mjs +593 -0
- package/fesm2022/primeng-accordion.mjs.map +1 -0
- package/fesm2022/primeng-animateonscroll.mjs +178 -0
- package/fesm2022/primeng-animateonscroll.mjs.map +1 -0
- package/fesm2022/primeng-api.mjs +836 -0
- package/fesm2022/primeng-api.mjs.map +1 -0
- package/fesm2022/primeng-autocomplete.mjs +2073 -0
- package/fesm2022/primeng-autocomplete.mjs.map +1 -0
- package/fesm2022/primeng-autofocus.mjs +83 -0
- package/fesm2022/primeng-autofocus.mjs.map +1 -0
- package/fesm2022/primeng-avatar.mjs +181 -0
- package/fesm2022/primeng-avatar.mjs.map +1 -0
- package/fesm2022/primeng-avatargroup.mjs +103 -0
- package/fesm2022/primeng-avatargroup.mjs.map +1 -0
- package/fesm2022/primeng-badge.mjs +366 -0
- package/fesm2022/primeng-badge.mjs.map +1 -0
- package/fesm2022/primeng-base.mjs +127 -0
- package/fesm2022/primeng-base.mjs.map +1 -0
- package/fesm2022/primeng-basecomponent.mjs +173 -0
- package/fesm2022/primeng-basecomponent.mjs.map +1 -0
- package/fesm2022/primeng-baseeditableholder.mjs +67 -0
- package/fesm2022/primeng-baseeditableholder.mjs.map +1 -0
- package/fesm2022/primeng-baseinput.mjs +85 -0
- package/fesm2022/primeng-baseinput.mjs.map +1 -0
- package/fesm2022/primeng-basemodelholder.mjs +25 -0
- package/fesm2022/primeng-basemodelholder.mjs.map +1 -0
- package/fesm2022/primeng-blockui.mjs +237 -0
- package/fesm2022/primeng-blockui.mjs.map +1 -0
- package/fesm2022/primeng-breadcrumb.mjs +457 -0
- package/fesm2022/primeng-breadcrumb.mjs.map +1 -0
- package/fesm2022/primeng-button.mjs +864 -0
- package/fesm2022/primeng-button.mjs.map +1 -0
- package/fesm2022/primeng-buttongroup.mjs +109 -0
- package/fesm2022/primeng-buttongroup.mjs.map +1 -0
- package/fesm2022/primeng-card.mjs +271 -0
- package/fesm2022/primeng-card.mjs.map +1 -0
- package/fesm2022/primeng-carousel.mjs +1101 -0
- package/fesm2022/primeng-carousel.mjs.map +1 -0
- package/fesm2022/primeng-cascadeselect.mjs +1778 -0
- package/fesm2022/primeng-cascadeselect.mjs.map +1 -0
- package/fesm2022/primeng-chart.mjs +246 -0
- package/fesm2022/primeng-chart.mjs.map +1 -0
- package/fesm2022/primeng-checkbox.mjs +441 -0
- package/fesm2022/primeng-checkbox.mjs.map +1 -0
- package/fesm2022/primeng-chip.mjs +323 -0
- package/fesm2022/primeng-chip.mjs.map +1 -0
- package/fesm2022/primeng-colorpicker.mjs +865 -0
- package/fesm2022/primeng-colorpicker.mjs.map +1 -0
- package/fesm2022/primeng-config.mjs +289 -0
- package/fesm2022/primeng-config.mjs.map +1 -0
- package/fesm2022/primeng-confirmdialog.mjs +823 -0
- package/fesm2022/primeng-confirmdialog.mjs.map +1 -0
- package/fesm2022/primeng-confirmpopup.mjs +630 -0
- package/fesm2022/primeng-confirmpopup.mjs.map +1 -0
- package/fesm2022/primeng-contextmenu.mjs +1410 -0
- package/fesm2022/primeng-contextmenu.mjs.map +1 -0
- package/fesm2022/primeng-dataview.mjs +812 -0
- package/fesm2022/primeng-dataview.mjs.map +1 -0
- package/fesm2022/primeng-datepicker.mjs +4373 -0
- package/fesm2022/primeng-datepicker.mjs.map +1 -0
- package/fesm2022/primeng-dialog.mjs +1278 -0
- package/fesm2022/primeng-dialog.mjs.map +1 -0
- package/fesm2022/primeng-divider.mjs +145 -0
- package/fesm2022/primeng-divider.mjs.map +1 -0
- package/fesm2022/primeng-dock.mjs +540 -0
- package/fesm2022/primeng-dock.mjs.map +1 -0
- package/fesm2022/primeng-dom.mjs +775 -0
- package/fesm2022/primeng-dom.mjs.map +1 -0
- package/fesm2022/primeng-dragdrop.mjs +336 -0
- package/fesm2022/primeng-dragdrop.mjs.map +1 -0
- package/fesm2022/primeng-drawer.mjs +738 -0
- package/fesm2022/primeng-drawer.mjs.map +1 -0
- package/fesm2022/primeng-dynamicdialog.mjs +1242 -0
- package/fesm2022/primeng-dynamicdialog.mjs.map +1 -0
- package/fesm2022/primeng-editor.mjs +511 -0
- package/fesm2022/primeng-editor.mjs.map +1 -0
- package/fesm2022/primeng-fieldset.mjs +417 -0
- package/fesm2022/primeng-fieldset.mjs.map +1 -0
- package/fesm2022/primeng-fileupload.mjs +1561 -0
- package/fesm2022/primeng-fileupload.mjs.map +1 -0
- package/fesm2022/primeng-floatlabel.mjs +103 -0
- package/fesm2022/primeng-floatlabel.mjs.map +1 -0
- package/fesm2022/primeng-fluid.mjs +80 -0
- package/fesm2022/primeng-fluid.mjs.map +1 -0
- package/fesm2022/primeng-focustrap.mjs +110 -0
- package/fesm2022/primeng-focustrap.mjs.map +1 -0
- package/fesm2022/primeng-galleria.mjs +1874 -0
- package/fesm2022/primeng-galleria.mjs.map +1 -0
- package/fesm2022/primeng-iconfield.mjs +101 -0
- package/fesm2022/primeng-iconfield.mjs.map +1 -0
- package/fesm2022/primeng-icons-angledoubledown.mjs +37 -0
- package/fesm2022/primeng-icons-angledoubledown.mjs.map +1 -0
- package/fesm2022/primeng-icons-angledoubleleft.mjs +37 -0
- package/fesm2022/primeng-icons-angledoubleleft.mjs.map +1 -0
- package/fesm2022/primeng-icons-angledoubleright.mjs +37 -0
- package/fesm2022/primeng-icons-angledoubleright.mjs.map +1 -0
- package/fesm2022/primeng-icons-angledoubleup.mjs +37 -0
- package/fesm2022/primeng-icons-angledoubleup.mjs.map +1 -0
- package/fesm2022/primeng-icons-angledown.mjs +33 -0
- package/fesm2022/primeng-icons-angledown.mjs.map +1 -0
- package/fesm2022/primeng-icons-angleleft.mjs +33 -0
- package/fesm2022/primeng-icons-angleleft.mjs.map +1 -0
- package/fesm2022/primeng-icons-angleright.mjs +33 -0
- package/fesm2022/primeng-icons-angleright.mjs.map +1 -0
- package/fesm2022/primeng-icons-angleup.mjs +33 -0
- package/fesm2022/primeng-icons-angleup.mjs.map +1 -0
- package/fesm2022/primeng-icons-arrowdown.mjs +57 -0
- package/fesm2022/primeng-icons-arrowdown.mjs.map +1 -0
- package/fesm2022/primeng-icons-arrowdownleft.mjs +33 -0
- package/fesm2022/primeng-icons-arrowdownleft.mjs.map +1 -0
- package/fesm2022/primeng-icons-arrowdownright.mjs +33 -0
- package/fesm2022/primeng-icons-arrowdownright.mjs.map +1 -0
- package/fesm2022/primeng-icons-arrowleft.mjs +57 -0
- package/fesm2022/primeng-icons-arrowleft.mjs.map +1 -0
- package/fesm2022/primeng-icons-arrowright.mjs +37 -0
- package/fesm2022/primeng-icons-arrowright.mjs.map +1 -0
- package/fesm2022/primeng-icons-arrowup.mjs +57 -0
- package/fesm2022/primeng-icons-arrowup.mjs.map +1 -0
- package/fesm2022/primeng-icons-ban.mjs +53 -0
- package/fesm2022/primeng-icons-ban.mjs.map +1 -0
- package/fesm2022/primeng-icons-bars.mjs +37 -0
- package/fesm2022/primeng-icons-bars.mjs.map +1 -0
- package/fesm2022/primeng-icons-baseicon.mjs +102 -0
- package/fesm2022/primeng-icons-baseicon.mjs.map +1 -0
- package/fesm2022/primeng-icons-blank.mjs +23 -0
- package/fesm2022/primeng-icons-blank.mjs.map +1 -0
- package/fesm2022/primeng-icons-calendar.mjs +33 -0
- package/fesm2022/primeng-icons-calendar.mjs.map +1 -0
- package/fesm2022/primeng-icons-caretleft.mjs +33 -0
- package/fesm2022/primeng-icons-caretleft.mjs.map +1 -0
- package/fesm2022/primeng-icons-caretright.mjs +33 -0
- package/fesm2022/primeng-icons-caretright.mjs.map +1 -0
- package/fesm2022/primeng-icons-check.mjs +33 -0
- package/fesm2022/primeng-icons-check.mjs.map +1 -0
- package/fesm2022/primeng-icons-chevrondown.mjs +33 -0
- package/fesm2022/primeng-icons-chevrondown.mjs.map +1 -0
- package/fesm2022/primeng-icons-chevronleft.mjs +33 -0
- package/fesm2022/primeng-icons-chevronleft.mjs.map +1 -0
- package/fesm2022/primeng-icons-chevronright.mjs +33 -0
- package/fesm2022/primeng-icons-chevronright.mjs.map +1 -0
- package/fesm2022/primeng-icons-chevronup.mjs +33 -0
- package/fesm2022/primeng-icons-chevronup.mjs.map +1 -0
- package/fesm2022/primeng-icons-exclamationtriangle.mjs +69 -0
- package/fesm2022/primeng-icons-exclamationtriangle.mjs.map +1 -0
- package/fesm2022/primeng-icons-eye.mjs +37 -0
- package/fesm2022/primeng-icons-eye.mjs.map +1 -0
- package/fesm2022/primeng-icons-eyeslash.mjs +57 -0
- package/fesm2022/primeng-icons-eyeslash.mjs.map +1 -0
- package/fesm2022/primeng-icons-filter.mjs +53 -0
- package/fesm2022/primeng-icons-filter.mjs.map +1 -0
- package/fesm2022/primeng-icons-filterfill.mjs +33 -0
- package/fesm2022/primeng-icons-filterfill.mjs.map +1 -0
- package/fesm2022/primeng-icons-filterslash.mjs +57 -0
- package/fesm2022/primeng-icons-filterslash.mjs.map +1 -0
- package/fesm2022/primeng-icons-home.mjs +57 -0
- package/fesm2022/primeng-icons-home.mjs.map +1 -0
- package/fesm2022/primeng-icons-infocircle.mjs +57 -0
- package/fesm2022/primeng-icons-infocircle.mjs.map +1 -0
- package/fesm2022/primeng-icons-minus.mjs +33 -0
- package/fesm2022/primeng-icons-minus.mjs.map +1 -0
- package/fesm2022/primeng-icons-pencil.mjs +53 -0
- package/fesm2022/primeng-icons-pencil.mjs.map +1 -0
- package/fesm2022/primeng-icons-plus.mjs +53 -0
- package/fesm2022/primeng-icons-plus.mjs.map +1 -0
- package/fesm2022/primeng-icons-refresh.mjs +57 -0
- package/fesm2022/primeng-icons-refresh.mjs.map +1 -0
- package/fesm2022/primeng-icons-search.mjs +57 -0
- package/fesm2022/primeng-icons-search.mjs.map +1 -0
- package/fesm2022/primeng-icons-searchminus.mjs +57 -0
- package/fesm2022/primeng-icons-searchminus.mjs.map +1 -0
- package/fesm2022/primeng-icons-searchplus.mjs +57 -0
- package/fesm2022/primeng-icons-searchplus.mjs.map +1 -0
- package/fesm2022/primeng-icons-sortalt.mjs +65 -0
- package/fesm2022/primeng-icons-sortalt.mjs.map +1 -0
- package/fesm2022/primeng-icons-sortamountdown.mjs +53 -0
- package/fesm2022/primeng-icons-sortamountdown.mjs.map +1 -0
- package/fesm2022/primeng-icons-sortamountupalt.mjs +53 -0
- package/fesm2022/primeng-icons-sortamountupalt.mjs.map +1 -0
- package/fesm2022/primeng-icons-spinner.mjs +53 -0
- package/fesm2022/primeng-icons-spinner.mjs.map +1 -0
- package/fesm2022/primeng-icons-star.mjs +53 -0
- package/fesm2022/primeng-icons-star.mjs.map +1 -0
- package/fesm2022/primeng-icons-starfill.mjs +53 -0
- package/fesm2022/primeng-icons-starfill.mjs.map +1 -0
- package/fesm2022/primeng-icons-thlarge.mjs +57 -0
- package/fesm2022/primeng-icons-thlarge.mjs.map +1 -0
- package/fesm2022/primeng-icons-times.mjs +33 -0
- package/fesm2022/primeng-icons-times.mjs.map +1 -0
- package/fesm2022/primeng-icons-timescircle.mjs +57 -0
- package/fesm2022/primeng-icons-timescircle.mjs.map +1 -0
- package/fesm2022/primeng-icons-trash.mjs +57 -0
- package/fesm2022/primeng-icons-trash.mjs.map +1 -0
- package/fesm2022/primeng-icons-undo.mjs +57 -0
- package/fesm2022/primeng-icons-undo.mjs.map +1 -0
- package/fesm2022/primeng-icons-upload.mjs +57 -0
- package/fesm2022/primeng-icons-upload.mjs.map +1 -0
- package/fesm2022/primeng-icons-windowmaximize.mjs +57 -0
- package/fesm2022/primeng-icons-windowmaximize.mjs.map +1 -0
- package/fesm2022/primeng-icons-windowminimize.mjs +57 -0
- package/fesm2022/primeng-icons-windowminimize.mjs.map +1 -0
- package/fesm2022/primeng-icons.mjs +63 -0
- package/fesm2022/primeng-icons.mjs.map +1 -0
- package/fesm2022/primeng-iftalabel.mjs +89 -0
- package/fesm2022/primeng-iftalabel.mjs.map +1 -0
- package/fesm2022/primeng-image.mjs +705 -0
- package/fesm2022/primeng-image.mjs.map +1 -0
- package/fesm2022/primeng-imagecompare.mjs +192 -0
- package/fesm2022/primeng-imagecompare.mjs.map +1 -0
- package/fesm2022/primeng-inplace.mjs +319 -0
- package/fesm2022/primeng-inplace.mjs.map +1 -0
- package/fesm2022/primeng-inputgroup.mjs +128 -0
- package/fesm2022/primeng-inputgroup.mjs.map +1 -0
- package/fesm2022/primeng-inputgroupaddon.mjs +83 -0
- package/fesm2022/primeng-inputgroupaddon.mjs.map +1 -0
- package/fesm2022/primeng-inputicon.mjs +71 -0
- package/fesm2022/primeng-inputicon.mjs.map +1 -0
- package/fesm2022/primeng-inputmask.mjs +926 -0
- package/fesm2022/primeng-inputmask.mjs.map +1 -0
- package/fesm2022/primeng-inputnumber.mjs +1621 -0
- package/fesm2022/primeng-inputnumber.mjs.map +1 -0
- package/fesm2022/primeng-inputotp.mjs +443 -0
- package/fesm2022/primeng-inputotp.mjs.map +1 -0
- package/fesm2022/primeng-inputtext.mjs +145 -0
- package/fesm2022/primeng-inputtext.mjs.map +1 -0
- package/fesm2022/primeng-keyfilter.mjs +267 -0
- package/fesm2022/primeng-keyfilter.mjs.map +1 -0
- package/fesm2022/primeng-knob.mjs +491 -0
- package/fesm2022/primeng-knob.mjs.map +1 -0
- package/fesm2022/primeng-listbox.mjs +1925 -0
- package/fesm2022/primeng-listbox.mjs.map +1 -0
- package/fesm2022/primeng-megamenu.mjs +1493 -0
- package/fesm2022/primeng-megamenu.mjs.map +1 -0
- package/fesm2022/primeng-menu.mjs +1069 -0
- package/fesm2022/primeng-menu.mjs.map +1 -0
- package/fesm2022/primeng-menubar.mjs +1391 -0
- package/fesm2022/primeng-menubar.mjs.map +1 -0
- package/fesm2022/primeng-message.mjs +420 -0
- package/fesm2022/primeng-message.mjs.map +1 -0
- package/fesm2022/primeng-metergroup.mjs +393 -0
- package/fesm2022/primeng-metergroup.mjs.map +1 -0
- package/fesm2022/primeng-multiselect.mjs +2519 -0
- package/fesm2022/primeng-multiselect.mjs.map +1 -0
- package/fesm2022/primeng-orderlist.mjs +890 -0
- package/fesm2022/primeng-orderlist.mjs.map +1 -0
- package/fesm2022/primeng-organizationchart.mjs +520 -0
- package/fesm2022/primeng-organizationchart.mjs.map +1 -0
- package/fesm2022/primeng-overlay.mjs +776 -0
- package/fesm2022/primeng-overlay.mjs.map +1 -0
- package/fesm2022/primeng-overlaybadge.mjs +151 -0
- package/fesm2022/primeng-overlaybadge.mjs.map +1 -0
- package/fesm2022/primeng-paginator.mjs +802 -0
- package/fesm2022/primeng-paginator.mjs.map +1 -0
- package/fesm2022/primeng-panel.mjs +595 -0
- package/fesm2022/primeng-panel.mjs.map +1 -0
- package/fesm2022/primeng-panelmenu.mjs +1442 -0
- package/fesm2022/primeng-panelmenu.mjs.map +1 -0
- package/fesm2022/primeng-password.mjs +1156 -0
- package/fesm2022/primeng-password.mjs.map +1 -0
- package/fesm2022/primeng-picklist.mjs +2057 -0
- package/fesm2022/primeng-picklist.mjs.map +1 -0
- package/fesm2022/primeng-popover.mjs +611 -0
- package/fesm2022/primeng-popover.mjs.map +1 -0
- package/fesm2022/primeng-progressbar.mjs +196 -0
- package/fesm2022/primeng-progressbar.mjs.map +1 -0
- package/fesm2022/primeng-progressspinner.mjs +140 -0
- package/fesm2022/primeng-progressspinner.mjs.map +1 -0
- package/fesm2022/primeng-radiobutton.mjs +358 -0
- package/fesm2022/primeng-radiobutton.mjs.map +1 -0
- package/fesm2022/primeng-rating.mjs +388 -0
- package/fesm2022/primeng-rating.mjs.map +1 -0
- package/fesm2022/primeng-ripple.mjs +190 -0
- package/fesm2022/primeng-ripple.mjs.map +1 -0
- package/fesm2022/primeng-scroller.mjs +1306 -0
- package/fesm2022/primeng-scroller.mjs.map +1 -0
- package/fesm2022/primeng-scrollpanel.mjs +560 -0
- package/fesm2022/primeng-scrollpanel.mjs.map +1 -0
- package/fesm2022/primeng-scrolltop.mjs +339 -0
- package/fesm2022/primeng-scrolltop.mjs.map +1 -0
- package/fesm2022/primeng-select.mjs +2250 -0
- package/fesm2022/primeng-select.mjs.map +1 -0
- package/fesm2022/primeng-selectbutton.mjs +413 -0
- package/fesm2022/primeng-selectbutton.mjs.map +1 -0
- package/fesm2022/primeng-skeleton.mjs +154 -0
- package/fesm2022/primeng-skeleton.mjs.map +1 -0
- package/fesm2022/primeng-slider.mjs +843 -0
- package/fesm2022/primeng-slider.mjs.map +1 -0
- package/fesm2022/primeng-speeddial.mjs +901 -0
- package/fesm2022/primeng-speeddial.mjs.map +1 -0
- package/fesm2022/primeng-splitbutton.mjs +598 -0
- package/fesm2022/primeng-splitbutton.mjs.map +1 -0
- package/fesm2022/primeng-splitter.mjs +587 -0
- package/fesm2022/primeng-splitter.mjs.map +1 -0
- package/fesm2022/primeng-stepper.mjs +683 -0
- package/fesm2022/primeng-stepper.mjs.map +1 -0
- package/fesm2022/primeng-steps.mjs +424 -0
- package/fesm2022/primeng-steps.mjs.map +1 -0
- package/fesm2022/primeng-styleclass.mjs +354 -0
- package/fesm2022/primeng-styleclass.mjs.map +1 -0
- package/fesm2022/primeng-table.mjs +7540 -0
- package/fesm2022/primeng-table.mjs.map +1 -0
- package/fesm2022/primeng-tabs.mjs +794 -0
- package/fesm2022/primeng-tabs.mjs.map +1 -0
- package/fesm2022/primeng-tag.mjs +176 -0
- package/fesm2022/primeng-tag.mjs.map +1 -0
- package/fesm2022/primeng-terminal.mjs +254 -0
- package/fesm2022/primeng-terminal.mjs.map +1 -0
- package/fesm2022/primeng-textarea.mjs +197 -0
- package/fesm2022/primeng-textarea.mjs.map +1 -0
- package/fesm2022/primeng-tieredmenu.mjs +1457 -0
- package/fesm2022/primeng-tieredmenu.mjs.map +1 -0
- package/fesm2022/primeng-timeline.mjs +228 -0
- package/fesm2022/primeng-timeline.mjs.map +1 -0
- package/fesm2022/primeng-toast.mjs +751 -0
- package/fesm2022/primeng-toast.mjs.map +1 -0
- package/fesm2022/primeng-togglebutton.mjs +361 -0
- package/fesm2022/primeng-togglebutton.mjs.map +1 -0
- package/fesm2022/primeng-toggleswitch.mjs +330 -0
- package/fesm2022/primeng-toggleswitch.mjs.map +1 -0
- package/fesm2022/primeng-toolbar.mjs +189 -0
- package/fesm2022/primeng-toolbar.mjs.map +1 -0
- package/fesm2022/primeng-tooltip.mjs +757 -0
- package/fesm2022/primeng-tooltip.mjs.map +1 -0
- package/fesm2022/primeng-tree.mjs +2188 -0
- package/fesm2022/primeng-tree.mjs.map +1 -0
- package/fesm2022/primeng-treeselect.mjs +1328 -0
- package/fesm2022/primeng-treeselect.mjs.map +1 -0
- package/fesm2022/primeng-treetable.mjs +5080 -0
- package/fesm2022/primeng-treetable.mjs.map +1 -0
- package/fesm2022/primeng-ts-helpers.mjs +4 -0
- package/fesm2022/primeng-ts-helpers.mjs.map +1 -0
- package/fesm2022/primeng-usestyle.mjs +52 -0
- package/fesm2022/primeng-usestyle.mjs.map +1 -0
- package/fesm2022/primeng-utils.mjs +332 -0
- package/fesm2022/primeng-utils.mjs.map +1 -0
- package/fesm2022/primeng.mjs +6 -0
- package/fesm2022/primeng.mjs.map +1 -0
- package/fieldset/index.d.ts +217 -0
- package/fileupload/index.d.ts +786 -0
- package/floatlabel/index.d.ts +59 -0
- package/fluid/index.d.ts +48 -0
- package/focustrap/index.d.ts +36 -0
- package/galleria/index.d.ts +710 -0
- package/iconfield/index.d.ts +64 -0
- package/icons/angledoubledown/index.d.ts +9 -0
- package/icons/angledoubleleft/index.d.ts +9 -0
- package/icons/angledoubleright/index.d.ts +9 -0
- package/icons/angledoubleup/index.d.ts +9 -0
- package/icons/angledown/index.d.ts +9 -0
- package/icons/angleleft/index.d.ts +9 -0
- package/icons/angleright/index.d.ts +9 -0
- package/icons/angleup/index.d.ts +9 -0
- package/icons/arrowdown/index.d.ts +12 -0
- package/icons/arrowdownleft/index.d.ts +9 -0
- package/icons/arrowdownright/index.d.ts +9 -0
- package/icons/arrowleft/index.d.ts +11 -0
- package/icons/arrowright/index.d.ts +9 -0
- package/icons/arrowup/index.d.ts +11 -0
- package/icons/ban/index.d.ts +11 -0
- package/icons/bars/index.d.ts +9 -0
- package/icons/baseicon/index.d.ts +33 -0
- package/icons/blank/index.d.ts +9 -0
- package/icons/calendar/index.d.ts +9 -0
- package/icons/caretleft/index.d.ts +9 -0
- package/icons/caretright/index.d.ts +9 -0
- package/icons/check/index.d.ts +9 -0
- package/icons/chevrondown/index.d.ts +9 -0
- package/icons/chevronleft/index.d.ts +9 -0
- package/icons/chevronright/index.d.ts +9 -0
- package/icons/chevronup/index.d.ts +9 -0
- package/icons/exclamationtriangle/index.d.ts +12 -0
- package/icons/eye/index.d.ts +9 -0
- package/icons/eyeslash/index.d.ts +11 -0
- package/icons/filter/index.d.ts +11 -0
- package/icons/filterfill/index.d.ts +9 -0
- package/icons/filterslash/index.d.ts +11 -0
- package/icons/home/index.d.ts +11 -0
- package/icons/index.d.ts +53 -0
- package/icons/infocircle/index.d.ts +11 -0
- package/icons/minus/index.d.ts +9 -0
- package/icons/pencil/index.d.ts +11 -0
- package/icons/plus/index.d.ts +11 -0
- package/icons/refresh/index.d.ts +11 -0
- package/icons/search/index.d.ts +11 -0
- package/icons/searchminus/index.d.ts +11 -0
- package/icons/searchplus/index.d.ts +11 -0
- package/icons/sortalt/index.d.ts +11 -0
- package/icons/sortamountdown/index.d.ts +11 -0
- package/icons/sortamountupalt/index.d.ts +11 -0
- package/icons/spinner/index.d.ts +11 -0
- package/icons/star/index.d.ts +11 -0
- package/icons/starfill/index.d.ts +11 -0
- package/icons/thlarge/index.d.ts +11 -0
- package/icons/times/index.d.ts +9 -0
- package/icons/timescircle/index.d.ts +11 -0
- package/icons/trash/index.d.ts +11 -0
- package/icons/undo/index.d.ts +11 -0
- package/icons/upload/index.d.ts +11 -0
- package/icons/windowmaximize/index.d.ts +11 -0
- package/icons/windowminimize/index.d.ts +11 -0
- package/iftalabel/index.d.ts +50 -0
- package/image/index.d.ts +376 -0
- package/imagecompare/index.d.ts +93 -0
- package/index.d.ts +2 -0
- package/inplace/index.d.ts +183 -0
- package/inputgroup/index.d.ts +58 -0
- package/inputgroupaddon/index.d.ts +45 -0
- package/inputicon/index.d.ts +36 -0
- package/inputmask/index.d.ts +282 -0
- package/inputnumber/index.d.ts +466 -0
- package/inputotp/index.d.ts +209 -0
- package/inputtext/index.d.ts +89 -0
- package/keyfilter/index.d.ts +66 -0
- package/knob/index.d.ts +206 -0
- package/listbox/index.d.ts +802 -0
- package/megamenu/index.d.ts +408 -0
- package/menu/index.d.ts +341 -0
- package/menubar/index.d.ts +418 -0
- package/message/index.d.ts +195 -0
- package/metergroup/index.d.ts +291 -0
- package/multiselect/index.d.ts +1060 -0
- package/orderlist/index.d.ts +464 -0
- package/organizationchart/index.d.ts +285 -0
- package/overlay/index.d.ts +255 -0
- package/overlaybadge/index.d.ts +73 -0
- package/package.json +725 -0
- package/paginator/index.d.ts +393 -0
- package/panel/index.d.ts +266 -0
- package/panelmenu/index.d.ts +380 -0
- package/password/index.d.ts +436 -0
- package/picklist/index.d.ts +906 -0
- package/popover/index.d.ts +176 -0
- package/progressbar/index.d.ts +112 -0
- package/progressspinner/index.d.ts +85 -0
- package/radiobutton/index.d.ts +201 -0
- package/rating/index.d.ts +218 -0
- package/ripple/index.d.ts +62 -0
- package/scroller/index.d.ts +614 -0
- package/scrollpanel/index.d.ts +161 -0
- package/scrolltop/index.d.ts +158 -0
- package/select/index.d.ts +923 -0
- package/selectbutton/index.d.ts +221 -0
- package/skeleton/index.d.ts +96 -0
- package/slider/index.d.ts +255 -0
- package/speeddial/index.d.ts +454 -0
- package/splitbutton/index.d.ts +306 -0
- package/splitter/index.d.ts +239 -0
- package/stepper/index.d.ts +297 -0
- package/steps/index.d.ts +152 -0
- package/styleclass/index.d.ts +115 -0
- package/table/index.d.ts +2700 -0
- package/tabs/index.d.ts +321 -0
- package/tag/index.d.ts +114 -0
- package/terminal/index.d.ts +134 -0
- package/textarea/index.d.ts +108 -0
- package/tieredmenu/index.d.ts +430 -0
- package/timeline/index.d.ts +170 -0
- package/toast/index.d.ts +320 -0
- package/togglebutton/index.d.ts +243 -0
- package/toggleswitch/index.d.ts +188 -0
- package/toolbar/index.d.ts +118 -0
- package/tooltip/index.d.ts +247 -0
- package/tree/index.d.ts +847 -0
- package/treeselect/index.d.ts +655 -0
- package/treetable/index.d.ts +1727 -0
- package/ts-helpers/index.d.ts +6 -0
- package/usestyle/index.d.ts +15 -0
- package/utils/index.d.ts +43 -0
@@ -0,0 +1,2250 @@
|
|
1
|
+
import * as i1 from '@angular/common';
|
2
|
+
import { CommonModule } from '@angular/common';
|
3
|
+
import * as i0 from '@angular/core';
|
4
|
+
import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, Output, Input, Component, input, computed, signal, effect, ContentChildren, ContentChild, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
5
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
6
|
+
import { deepEquals, isNotEmpty, isEmpty, uuid, findSingle, scrollInView, equals, resolveFieldData, focus, isPrintableCharacter, findLastIndex, getFirstFocusableElement, getLastFocusableElement, getFocusableElements } from '@primeuix/utils';
|
7
|
+
import * as i2 from 'primeng/api';
|
8
|
+
import { SharedModule, TranslationKeys, PrimeTemplate } from 'primeng/api';
|
9
|
+
import { AutoFocus } from 'primeng/autofocus';
|
10
|
+
import { BaseComponent } from 'primeng/basecomponent';
|
11
|
+
import { BaseInput } from 'primeng/baseinput';
|
12
|
+
import { unblockBodyScroll } from 'primeng/dom';
|
13
|
+
import { IconField } from 'primeng/iconfield';
|
14
|
+
import { CheckIcon, BlankIcon, TimesIcon, ChevronDownIcon, SearchIcon } from 'primeng/icons';
|
15
|
+
import { InputIcon } from 'primeng/inputicon';
|
16
|
+
import { InputText } from 'primeng/inputtext';
|
17
|
+
import { Overlay } from 'primeng/overlay';
|
18
|
+
import { Ripple } from 'primeng/ripple';
|
19
|
+
import { Scroller } from 'primeng/scroller';
|
20
|
+
import { Tooltip } from 'primeng/tooltip';
|
21
|
+
import { style } from '@primeuix/styles/select';
|
22
|
+
import { BaseStyle } from 'primeng/base';
|
23
|
+
|
24
|
+
const theme = /*css*/ `
|
25
|
+
${style}
|
26
|
+
|
27
|
+
/* For PrimeNG */
|
28
|
+
.p-select-label.p-placeholder {
|
29
|
+
color: dt('select.placeholder.color');
|
30
|
+
}
|
31
|
+
|
32
|
+
.p-select.ng-invalid.ng-dirty {
|
33
|
+
border-color: dt('select.invalid.border.color');
|
34
|
+
}
|
35
|
+
|
36
|
+
.p-dropdown.ng-invalid.ng-dirty .p-dropdown-label.p-placeholder,
|
37
|
+
.p-select.ng-invalid.ng-dirty .p-select-label.p-placeholder {
|
38
|
+
color: dt('select.invalid.placeholder.color');
|
39
|
+
}
|
40
|
+
`;
|
41
|
+
const classes = {
|
42
|
+
root: ({ instance }) => [
|
43
|
+
'p-select p-component p-inputwrapper',
|
44
|
+
{
|
45
|
+
'p-disabled': instance.$disabled(),
|
46
|
+
'p-variant-filled': instance.$variant() === 'filled',
|
47
|
+
'p-focus': instance.focused,
|
48
|
+
'p-invalid': instance.invalid(),
|
49
|
+
'p-inputwrapper-filled': instance.$filled(),
|
50
|
+
'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
|
51
|
+
'p-select-open': instance.overlayVisible,
|
52
|
+
'p-select-fluid': instance.hasFluid,
|
53
|
+
'p-select-sm p-inputfield-sm': instance.size() === 'small',
|
54
|
+
'p-select-lg p-inputfield-lg': instance.size() === 'large'
|
55
|
+
}
|
56
|
+
],
|
57
|
+
label: ({ instance }) => [
|
58
|
+
'p-select-label',
|
59
|
+
{
|
60
|
+
'p-placeholder': instance.placeholder() && instance.label() === instance.placeholder(),
|
61
|
+
'p-select-label-empty': !instance.editable && !instance.selectedItemTemplate && (instance.label() === undefined || instance.label() === null || instance.label() === 'p-emptylabel' || instance.label().length === 0)
|
62
|
+
}
|
63
|
+
],
|
64
|
+
clearIcon: 'p-select-clear-icon',
|
65
|
+
dropdown: 'p-select-dropdown',
|
66
|
+
loadingIcon: 'p-select-loading-icon',
|
67
|
+
dropdownIcon: 'p-select-dropdown-icon',
|
68
|
+
overlay: 'p-select-overlay p-component-overlay p-component',
|
69
|
+
header: 'p-select-header',
|
70
|
+
pcFilter: 'p-select-filter',
|
71
|
+
listContainer: 'p-select-list-container',
|
72
|
+
list: 'p-select-list',
|
73
|
+
optionGroup: 'p-select-option-group',
|
74
|
+
optionGroupLabel: 'p-select-option-group-label',
|
75
|
+
option: ({ instance }) => [
|
76
|
+
'p-select-option',
|
77
|
+
{
|
78
|
+
'p-select-option-selected': instance.selected && !instance.checkmark,
|
79
|
+
'p-disabled': instance.disabled,
|
80
|
+
'p-focus': instance.focused
|
81
|
+
}
|
82
|
+
],
|
83
|
+
optionLabel: 'p-select-option-label',
|
84
|
+
optionCheckIcon: 'p-select-option-check-icon',
|
85
|
+
optionBlankIcon: 'p-select-option-blank-icon',
|
86
|
+
emptyMessage: 'p-select-empty-message'
|
87
|
+
};
|
88
|
+
class SelectStyle extends BaseStyle {
|
89
|
+
name = 'select';
|
90
|
+
theme = theme;
|
91
|
+
classes = classes;
|
92
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
93
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectStyle });
|
94
|
+
}
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectStyle, decorators: [{
|
96
|
+
type: Injectable
|
97
|
+
}] });
|
98
|
+
/**
|
99
|
+
*
|
100
|
+
* Select also known as Select, is used to choose an item from a collection of options.
|
101
|
+
*
|
102
|
+
* [Live Demo](https://www.primeng.org/select/)
|
103
|
+
*
|
104
|
+
* @module selectstyle
|
105
|
+
*
|
106
|
+
*/
|
107
|
+
var SelectClasses;
|
108
|
+
(function (SelectClasses) {
|
109
|
+
/**
|
110
|
+
* Class name of the root element
|
111
|
+
*/
|
112
|
+
SelectClasses["root"] = "p-select";
|
113
|
+
/**
|
114
|
+
* Class name of the label element
|
115
|
+
*/
|
116
|
+
SelectClasses["label"] = "p-select-label";
|
117
|
+
/**
|
118
|
+
* Class name of the clear icon element
|
119
|
+
*/
|
120
|
+
SelectClasses["clearIcon"] = "p-select-clear-icon";
|
121
|
+
/**
|
122
|
+
* Class name of the dropdown element
|
123
|
+
*/
|
124
|
+
SelectClasses["dropdown"] = "p-select-dropdown";
|
125
|
+
/**
|
126
|
+
* Class name of the loadingicon element
|
127
|
+
*/
|
128
|
+
SelectClasses["loadingIcon"] = "p-select-loading-icon";
|
129
|
+
/**
|
130
|
+
* Class name of the dropdown icon element
|
131
|
+
*/
|
132
|
+
SelectClasses["dropdownIcon"] = "p-select-dropdown-icon";
|
133
|
+
/**
|
134
|
+
* Class name of the overlay element
|
135
|
+
*/
|
136
|
+
SelectClasses["overlay"] = "p-select-overlay";
|
137
|
+
/**
|
138
|
+
* Class name of the header element
|
139
|
+
*/
|
140
|
+
SelectClasses["header"] = "p-select-header";
|
141
|
+
/**
|
142
|
+
* Class name of the filter element
|
143
|
+
*/
|
144
|
+
SelectClasses["pcFilter"] = "p-select-filter";
|
145
|
+
/**
|
146
|
+
* Class name of the list container element
|
147
|
+
*/
|
148
|
+
SelectClasses["listContainer"] = "p-select-list-container";
|
149
|
+
/**
|
150
|
+
* Class name of the list element
|
151
|
+
*/
|
152
|
+
SelectClasses["list"] = "p-select-list";
|
153
|
+
/**
|
154
|
+
* Class name of the option group element
|
155
|
+
*/
|
156
|
+
SelectClasses["optionGroup"] = "p-select-option-group";
|
157
|
+
/**
|
158
|
+
* Class name of the option group label element
|
159
|
+
*/
|
160
|
+
SelectClasses["optionGroupLabel"] = "p-select-option-group-label";
|
161
|
+
/**
|
162
|
+
* Class name of the option element
|
163
|
+
*/
|
164
|
+
SelectClasses["option"] = "p-select-option";
|
165
|
+
/**
|
166
|
+
* Class name of the option label element
|
167
|
+
*/
|
168
|
+
SelectClasses["optionLabel"] = "p-select-option-label";
|
169
|
+
/**
|
170
|
+
* Class name of the option check icon element
|
171
|
+
*/
|
172
|
+
SelectClasses["optionCheckIcon"] = "p-select-option-check-icon";
|
173
|
+
/**
|
174
|
+
* Class name of the option blank icon element
|
175
|
+
*/
|
176
|
+
SelectClasses["optionBlankIcon"] = "p-select-option-blank-icon";
|
177
|
+
/**
|
178
|
+
* Class name of the empty message element
|
179
|
+
*/
|
180
|
+
SelectClasses["emptyMessage"] = "p-select-empty-message";
|
181
|
+
})(SelectClasses || (SelectClasses = {}));
|
182
|
+
|
183
|
+
const SELECT_VALUE_ACCESSOR = {
|
184
|
+
provide: NG_VALUE_ACCESSOR,
|
185
|
+
useExisting: forwardRef(() => Select),
|
186
|
+
multi: true
|
187
|
+
};
|
188
|
+
class SelectItem extends BaseComponent {
|
189
|
+
id;
|
190
|
+
option;
|
191
|
+
selected;
|
192
|
+
focused;
|
193
|
+
label;
|
194
|
+
disabled;
|
195
|
+
visible;
|
196
|
+
itemSize;
|
197
|
+
ariaPosInset;
|
198
|
+
ariaSetSize;
|
199
|
+
template;
|
200
|
+
checkmark;
|
201
|
+
onClick = new EventEmitter();
|
202
|
+
onMouseEnter = new EventEmitter();
|
203
|
+
_componentStyle = inject(SelectStyle);
|
204
|
+
onOptionClick(event) {
|
205
|
+
this.onClick.emit(event);
|
206
|
+
}
|
207
|
+
onOptionMouseEnter(event) {
|
208
|
+
this.onMouseEnter.emit(event);
|
209
|
+
}
|
210
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
211
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.2.4", type: SelectItem, isStandalone: true, selector: "p-selectItem", inputs: { id: "id", option: "option", selected: ["selected", "selected", booleanAttribute], focused: ["focused", "focused", booleanAttribute], label: "label", disabled: ["disabled", "disabled", booleanAttribute], visible: ["visible", "visible", booleanAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", template: "template", checkmark: ["checkmark", "checkmark", booleanAttribute] }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, providers: [SelectStyle], usesInheritance: true, ngImport: i0, template: `
|
212
|
+
<li
|
213
|
+
[id]="id"
|
214
|
+
(click)="onOptionClick($event)"
|
215
|
+
(mouseenter)="onOptionMouseEnter($event)"
|
216
|
+
role="option"
|
217
|
+
pRipple
|
218
|
+
[attr.aria-label]="label"
|
219
|
+
[attr.aria-setsize]="ariaSetSize"
|
220
|
+
[attr.aria-posinset]="ariaPosInset"
|
221
|
+
[attr.aria-selected]="selected"
|
222
|
+
[attr.data-p-focused]="focused"
|
223
|
+
[attr.data-p-highlight]="selected"
|
224
|
+
[attr.data-p-disabled]="disabled"
|
225
|
+
[ngStyle]="{ height: itemSize + 'px' }"
|
226
|
+
[class]="cx('option')"
|
227
|
+
>
|
228
|
+
<ng-container *ngIf="checkmark">
|
229
|
+
<svg data-p-icon="check" *ngIf="selected" [class]="cx('optionCheckIcon')" />
|
230
|
+
<svg data-p-icon="blank" *ngIf="!selected" [class]="cx('optionBlankIcon')" />
|
231
|
+
</ng-container>
|
232
|
+
<span *ngIf="!template">{{ label ?? 'empty' }}</span>
|
233
|
+
<ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
|
234
|
+
</li>
|
235
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: CheckIcon, selector: "[data-p-icon=\"check\"]" }, { kind: "component", type: BlankIcon, selector: "[data-p-icon=\"blank\"]" }] });
|
236
|
+
}
|
237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectItem, decorators: [{
|
238
|
+
type: Component,
|
239
|
+
args: [{
|
240
|
+
selector: 'p-selectItem',
|
241
|
+
standalone: true,
|
242
|
+
imports: [CommonModule, SharedModule, Ripple, CheckIcon, BlankIcon],
|
243
|
+
template: `
|
244
|
+
<li
|
245
|
+
[id]="id"
|
246
|
+
(click)="onOptionClick($event)"
|
247
|
+
(mouseenter)="onOptionMouseEnter($event)"
|
248
|
+
role="option"
|
249
|
+
pRipple
|
250
|
+
[attr.aria-label]="label"
|
251
|
+
[attr.aria-setsize]="ariaSetSize"
|
252
|
+
[attr.aria-posinset]="ariaPosInset"
|
253
|
+
[attr.aria-selected]="selected"
|
254
|
+
[attr.data-p-focused]="focused"
|
255
|
+
[attr.data-p-highlight]="selected"
|
256
|
+
[attr.data-p-disabled]="disabled"
|
257
|
+
[ngStyle]="{ height: itemSize + 'px' }"
|
258
|
+
[class]="cx('option')"
|
259
|
+
>
|
260
|
+
<ng-container *ngIf="checkmark">
|
261
|
+
<svg data-p-icon="check" *ngIf="selected" [class]="cx('optionCheckIcon')" />
|
262
|
+
<svg data-p-icon="blank" *ngIf="!selected" [class]="cx('optionBlankIcon')" />
|
263
|
+
</ng-container>
|
264
|
+
<span *ngIf="!template">{{ label ?? 'empty' }}</span>
|
265
|
+
<ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
|
266
|
+
</li>
|
267
|
+
`,
|
268
|
+
providers: [SelectStyle]
|
269
|
+
}]
|
270
|
+
}], propDecorators: { id: [{
|
271
|
+
type: Input
|
272
|
+
}], option: [{
|
273
|
+
type: Input
|
274
|
+
}], selected: [{
|
275
|
+
type: Input,
|
276
|
+
args: [{ transform: booleanAttribute }]
|
277
|
+
}], focused: [{
|
278
|
+
type: Input,
|
279
|
+
args: [{ transform: booleanAttribute }]
|
280
|
+
}], label: [{
|
281
|
+
type: Input
|
282
|
+
}], disabled: [{
|
283
|
+
type: Input,
|
284
|
+
args: [{ transform: booleanAttribute }]
|
285
|
+
}], visible: [{
|
286
|
+
type: Input,
|
287
|
+
args: [{ transform: booleanAttribute }]
|
288
|
+
}], itemSize: [{
|
289
|
+
type: Input,
|
290
|
+
args: [{ transform: numberAttribute }]
|
291
|
+
}], ariaPosInset: [{
|
292
|
+
type: Input
|
293
|
+
}], ariaSetSize: [{
|
294
|
+
type: Input
|
295
|
+
}], template: [{
|
296
|
+
type: Input
|
297
|
+
}], checkmark: [{
|
298
|
+
type: Input,
|
299
|
+
args: [{ transform: booleanAttribute }]
|
300
|
+
}], onClick: [{
|
301
|
+
type: Output
|
302
|
+
}], onMouseEnter: [{
|
303
|
+
type: Output
|
304
|
+
}] } });
|
305
|
+
/**
|
306
|
+
* Select is used to choose an item from a collection of options.
|
307
|
+
* @group Components
|
308
|
+
*/
|
309
|
+
class Select extends BaseInput {
|
310
|
+
zone;
|
311
|
+
filterService;
|
312
|
+
/**
|
313
|
+
* Unique identifier of the component
|
314
|
+
* @group Props
|
315
|
+
*/
|
316
|
+
id;
|
317
|
+
/**
|
318
|
+
* Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
|
319
|
+
* @group Props
|
320
|
+
*/
|
321
|
+
scrollHeight = '200px';
|
322
|
+
/**
|
323
|
+
* When specified, displays an input field to filter the items on keyup.
|
324
|
+
* @group Props
|
325
|
+
*/
|
326
|
+
filter;
|
327
|
+
/**
|
328
|
+
* Inline style of the overlay panel element.
|
329
|
+
* @group Props
|
330
|
+
*/
|
331
|
+
panelStyle;
|
332
|
+
/**
|
333
|
+
* Style class of the element.
|
334
|
+
* @deprecated since v20.0.0, use `class` instead.
|
335
|
+
* @group Props
|
336
|
+
*/
|
337
|
+
styleClass;
|
338
|
+
/**
|
339
|
+
* Style class of the overlay panel element.
|
340
|
+
* @group Props
|
341
|
+
*/
|
342
|
+
panelStyleClass;
|
343
|
+
/**
|
344
|
+
* When present, it specifies that the component cannot be edited.
|
345
|
+
* @group Props
|
346
|
+
*/
|
347
|
+
readonly;
|
348
|
+
/**
|
349
|
+
* When present, custom value instead of predefined options can be entered using the editable input field.
|
350
|
+
* @group Props
|
351
|
+
*/
|
352
|
+
editable;
|
353
|
+
/**
|
354
|
+
* Index of the element in tabbing order.
|
355
|
+
* @group Props
|
356
|
+
*/
|
357
|
+
tabindex = 0;
|
358
|
+
/**
|
359
|
+
* Default text to display when no option is selected.
|
360
|
+
* @group Props
|
361
|
+
*/
|
362
|
+
set placeholder(val) {
|
363
|
+
this._placeholder.set(val);
|
364
|
+
}
|
365
|
+
get placeholder() {
|
366
|
+
return this._placeholder.asReadonly();
|
367
|
+
}
|
368
|
+
/**
|
369
|
+
* Icon to display in loading state.
|
370
|
+
* @group Props
|
371
|
+
*/
|
372
|
+
loadingIcon;
|
373
|
+
/**
|
374
|
+
* Placeholder text to show when filter input is empty.
|
375
|
+
* @group Props
|
376
|
+
*/
|
377
|
+
filterPlaceholder;
|
378
|
+
/**
|
379
|
+
* Locale to use in filtering. The default locale is the host environment's current locale.
|
380
|
+
* @group Props
|
381
|
+
*/
|
382
|
+
filterLocale;
|
383
|
+
/**
|
384
|
+
* Identifier of the accessible input element.
|
385
|
+
* @group Props
|
386
|
+
*/
|
387
|
+
inputId;
|
388
|
+
/**
|
389
|
+
* A property to uniquely identify a value in options.
|
390
|
+
* @group Props
|
391
|
+
*/
|
392
|
+
dataKey;
|
393
|
+
/**
|
394
|
+
* When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
|
395
|
+
* @group Props
|
396
|
+
*/
|
397
|
+
filterBy;
|
398
|
+
/**
|
399
|
+
* Fields used when filtering the options, defaults to optionLabel.
|
400
|
+
* @group Props
|
401
|
+
*/
|
402
|
+
filterFields;
|
403
|
+
/**
|
404
|
+
* When present, it specifies that the component should automatically get focus on load.
|
405
|
+
* @group Props
|
406
|
+
*/
|
407
|
+
autofocus;
|
408
|
+
/**
|
409
|
+
* Clears the filter value when hiding the select.
|
410
|
+
* @group Props
|
411
|
+
*/
|
412
|
+
resetFilterOnHide = false;
|
413
|
+
/**
|
414
|
+
* Whether the selected option will be shown with a check mark.
|
415
|
+
* @group Props
|
416
|
+
*/
|
417
|
+
checkmark = false;
|
418
|
+
/**
|
419
|
+
* Icon class of the select icon.
|
420
|
+
* @group Props
|
421
|
+
*/
|
422
|
+
dropdownIcon;
|
423
|
+
/**
|
424
|
+
* Whether the select is in loading state.
|
425
|
+
* @group Props
|
426
|
+
*/
|
427
|
+
loading = false;
|
428
|
+
/**
|
429
|
+
* Name of the label field of an option.
|
430
|
+
* @group Props
|
431
|
+
*/
|
432
|
+
optionLabel;
|
433
|
+
/**
|
434
|
+
* Name of the value field of an option.
|
435
|
+
* @group Props
|
436
|
+
*/
|
437
|
+
optionValue;
|
438
|
+
/**
|
439
|
+
* Name of the disabled field of an option.
|
440
|
+
* @group Props
|
441
|
+
*/
|
442
|
+
optionDisabled;
|
443
|
+
/**
|
444
|
+
* Name of the label field of an option group.
|
445
|
+
* @group Props
|
446
|
+
*/
|
447
|
+
optionGroupLabel = 'label';
|
448
|
+
/**
|
449
|
+
* Name of the options field of an option group.
|
450
|
+
* @group Props
|
451
|
+
*/
|
452
|
+
optionGroupChildren = 'items';
|
453
|
+
/**
|
454
|
+
* Whether to display options as grouped when nested options are provided.
|
455
|
+
* @group Props
|
456
|
+
*/
|
457
|
+
group;
|
458
|
+
/**
|
459
|
+
* When enabled, a clear icon is displayed to clear the value.
|
460
|
+
* @group Props
|
461
|
+
*/
|
462
|
+
showClear;
|
463
|
+
/**
|
464
|
+
* Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration.
|
465
|
+
* @group Props
|
466
|
+
*/
|
467
|
+
emptyFilterMessage = '';
|
468
|
+
/**
|
469
|
+
* Text to display when there is no data. Defaults to global value in i18n translation configuration.
|
470
|
+
* @group Props
|
471
|
+
*/
|
472
|
+
emptyMessage = '';
|
473
|
+
/**
|
474
|
+
* Defines if data is loaded and interacted with in lazy manner.
|
475
|
+
* @group Props
|
476
|
+
*/
|
477
|
+
lazy = false;
|
478
|
+
/**
|
479
|
+
* Whether the data should be loaded on demand during scroll.
|
480
|
+
* @group Props
|
481
|
+
*/
|
482
|
+
virtualScroll;
|
483
|
+
/**
|
484
|
+
* Height of an item in the list for VirtualScrolling.
|
485
|
+
* @group Props
|
486
|
+
*/
|
487
|
+
virtualScrollItemSize;
|
488
|
+
/**
|
489
|
+
* Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
|
490
|
+
* @group Props
|
491
|
+
*/
|
492
|
+
virtualScrollOptions;
|
493
|
+
/**
|
494
|
+
* Whether to use overlay API feature. The properties of overlay API can be used like an object in it.
|
495
|
+
* @group Props
|
496
|
+
*/
|
497
|
+
overlayOptions;
|
498
|
+
/**
|
499
|
+
* Defines a string that labels the filter input.
|
500
|
+
* @group Props
|
501
|
+
*/
|
502
|
+
ariaFilterLabel;
|
503
|
+
/**
|
504
|
+
* Used to define a aria label attribute the current element.
|
505
|
+
* @group Props
|
506
|
+
*/
|
507
|
+
ariaLabel;
|
508
|
+
/**
|
509
|
+
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
|
510
|
+
* @group Props
|
511
|
+
*/
|
512
|
+
ariaLabelledBy;
|
513
|
+
/**
|
514
|
+
* Defines how the items are filtered.
|
515
|
+
* @group Props
|
516
|
+
*/
|
517
|
+
filterMatchMode = 'contains';
|
518
|
+
/**
|
519
|
+
* Advisory information to display in a tooltip on hover.
|
520
|
+
* @group Props
|
521
|
+
*/
|
522
|
+
tooltip = '';
|
523
|
+
/**
|
524
|
+
* Position of the tooltip.
|
525
|
+
* @group Props
|
526
|
+
*/
|
527
|
+
tooltipPosition = 'right';
|
528
|
+
/**
|
529
|
+
* Type of CSS position.
|
530
|
+
* @group Props
|
531
|
+
*/
|
532
|
+
tooltipPositionStyle = 'absolute';
|
533
|
+
/**
|
534
|
+
* Style class of the tooltip.
|
535
|
+
* @group Props
|
536
|
+
*/
|
537
|
+
tooltipStyleClass;
|
538
|
+
/**
|
539
|
+
* Fields used when filtering the options, defaults to optionLabel.
|
540
|
+
* @group Props
|
541
|
+
*/
|
542
|
+
focusOnHover = true;
|
543
|
+
/**
|
544
|
+
* Determines if the option will be selected on focus.
|
545
|
+
* @group Props
|
546
|
+
*/
|
547
|
+
selectOnFocus = false;
|
548
|
+
/**
|
549
|
+
* Whether to focus on the first visible or selected element when the overlay panel is shown.
|
550
|
+
* @group Props
|
551
|
+
*/
|
552
|
+
autoOptionFocus = false;
|
553
|
+
/**
|
554
|
+
* Applies focus to the filter element when the overlay is shown.
|
555
|
+
* @group Props
|
556
|
+
*/
|
557
|
+
autofocusFilter = true;
|
558
|
+
/**
|
559
|
+
* When specified, filter displays with this value.
|
560
|
+
* @group Props
|
561
|
+
*/
|
562
|
+
get filterValue() {
|
563
|
+
return this._filterValue();
|
564
|
+
}
|
565
|
+
set filterValue(val) {
|
566
|
+
setTimeout(() => {
|
567
|
+
this._filterValue.set(val);
|
568
|
+
});
|
569
|
+
}
|
570
|
+
/**
|
571
|
+
* An array of objects to display as the available options.
|
572
|
+
* @group Props
|
573
|
+
*/
|
574
|
+
get options() {
|
575
|
+
const options = this._options();
|
576
|
+
return options;
|
577
|
+
}
|
578
|
+
set options(val) {
|
579
|
+
if (!deepEquals(val, this._options())) {
|
580
|
+
this._options.set(val);
|
581
|
+
}
|
582
|
+
}
|
583
|
+
/**
|
584
|
+
* 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).
|
585
|
+
* @defaultValue 'self'
|
586
|
+
* @group Props
|
587
|
+
*/
|
588
|
+
appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
|
589
|
+
/**
|
590
|
+
* Callback to invoke when value of select changes.
|
591
|
+
* @param {SelectChangeEvent} event - custom change event.
|
592
|
+
* @group Emits
|
593
|
+
*/
|
594
|
+
onChange = new EventEmitter();
|
595
|
+
/**
|
596
|
+
* Callback to invoke when data is filtered.
|
597
|
+
* @param {SelectFilterEvent} event - custom filter event.
|
598
|
+
* @group Emits
|
599
|
+
*/
|
600
|
+
onFilter = new EventEmitter();
|
601
|
+
/**
|
602
|
+
* Callback to invoke when select gets focus.
|
603
|
+
* @param {Event} event - Browser event.
|
604
|
+
* @group Emits
|
605
|
+
*/
|
606
|
+
onFocus = new EventEmitter();
|
607
|
+
/**
|
608
|
+
* Callback to invoke when select loses focus.
|
609
|
+
* @param {Event} event - Browser event.
|
610
|
+
* @group Emits
|
611
|
+
*/
|
612
|
+
onBlur = new EventEmitter();
|
613
|
+
/**
|
614
|
+
* Callback to invoke when component is clicked.
|
615
|
+
* @param {MouseEvent} event - Mouse event.
|
616
|
+
* @group Emits
|
617
|
+
*/
|
618
|
+
onClick = new EventEmitter();
|
619
|
+
/**
|
620
|
+
* Callback to invoke when select overlay gets visible.
|
621
|
+
* @param {AnimationEvent} event - Animation event.
|
622
|
+
* @group Emits
|
623
|
+
*/
|
624
|
+
onShow = new EventEmitter();
|
625
|
+
/**
|
626
|
+
* Callback to invoke when select overlay gets hidden.
|
627
|
+
* @param {AnimationEvent} event - Animation event.
|
628
|
+
* @group Emits
|
629
|
+
*/
|
630
|
+
onHide = new EventEmitter();
|
631
|
+
/**
|
632
|
+
* Callback to invoke when select clears the value.
|
633
|
+
* @param {Event} event - Browser event.
|
634
|
+
* @group Emits
|
635
|
+
*/
|
636
|
+
onClear = new EventEmitter();
|
637
|
+
/**
|
638
|
+
* Callback to invoke in lazy mode to load new data.
|
639
|
+
* @param {SelectLazyLoadEvent} event - Lazy load event.
|
640
|
+
* @group Emits
|
641
|
+
*/
|
642
|
+
onLazyLoad = new EventEmitter();
|
643
|
+
_componentStyle = inject(SelectStyle);
|
644
|
+
filterViewChild;
|
645
|
+
focusInputViewChild;
|
646
|
+
editableInputViewChild;
|
647
|
+
itemsViewChild;
|
648
|
+
scroller;
|
649
|
+
overlayViewChild;
|
650
|
+
firstHiddenFocusableElementOnOverlay;
|
651
|
+
lastHiddenFocusableElementOnOverlay;
|
652
|
+
itemsWrapper;
|
653
|
+
$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...(ngDevMode ? [{ debugName: "$appendTo" }] : []));
|
654
|
+
/**
|
655
|
+
* Custom item template.
|
656
|
+
* @group Templates
|
657
|
+
*/
|
658
|
+
itemTemplate;
|
659
|
+
/**
|
660
|
+
* Custom group template.
|
661
|
+
* @group Templates
|
662
|
+
*/
|
663
|
+
groupTemplate;
|
664
|
+
/**
|
665
|
+
* Custom loader template.
|
666
|
+
* @group Templates
|
667
|
+
*/
|
668
|
+
loaderTemplate;
|
669
|
+
/**
|
670
|
+
* Custom selected item template.
|
671
|
+
* @group Templates
|
672
|
+
*/
|
673
|
+
selectedItemTemplate;
|
674
|
+
/**
|
675
|
+
* Custom header template.
|
676
|
+
* @group Templates
|
677
|
+
*/
|
678
|
+
headerTemplate;
|
679
|
+
/**
|
680
|
+
* Custom filter template.
|
681
|
+
* @group Templates
|
682
|
+
*/
|
683
|
+
filterTemplate;
|
684
|
+
/**
|
685
|
+
* Custom footer template.
|
686
|
+
* @group Templates
|
687
|
+
*/
|
688
|
+
footerTemplate;
|
689
|
+
/**
|
690
|
+
* Custom empty filter template.
|
691
|
+
* @group Templates
|
692
|
+
*/
|
693
|
+
emptyFilterTemplate;
|
694
|
+
/**
|
695
|
+
* Custom empty template.
|
696
|
+
* @group Templates
|
697
|
+
*/
|
698
|
+
emptyTemplate;
|
699
|
+
/**
|
700
|
+
* Custom dropdown icon template.
|
701
|
+
* @group Templates
|
702
|
+
*/
|
703
|
+
dropdownIconTemplate;
|
704
|
+
/**
|
705
|
+
* Custom loading icon template.
|
706
|
+
* @group Templates
|
707
|
+
*/
|
708
|
+
loadingIconTemplate;
|
709
|
+
/**
|
710
|
+
* Custom clear icon template.
|
711
|
+
* @group Templates
|
712
|
+
*/
|
713
|
+
clearIconTemplate;
|
714
|
+
/**
|
715
|
+
* Custom filter icon template.
|
716
|
+
* @group Templates
|
717
|
+
*/
|
718
|
+
filterIconTemplate;
|
719
|
+
/**
|
720
|
+
* Custom on icon template.
|
721
|
+
* @group Templates
|
722
|
+
*/
|
723
|
+
onIconTemplate;
|
724
|
+
/**
|
725
|
+
* Custom off icon template.
|
726
|
+
* @group Templates
|
727
|
+
*/
|
728
|
+
offIconTemplate;
|
729
|
+
/**
|
730
|
+
* Custom cancel icon template.
|
731
|
+
* @group Templates
|
732
|
+
*/
|
733
|
+
cancelIconTemplate;
|
734
|
+
templates;
|
735
|
+
_itemTemplate;
|
736
|
+
_selectedItemTemplate;
|
737
|
+
_headerTemplate;
|
738
|
+
_filterTemplate;
|
739
|
+
_footerTemplate;
|
740
|
+
_emptyFilterTemplate;
|
741
|
+
_emptyTemplate;
|
742
|
+
_groupTemplate;
|
743
|
+
_loaderTemplate;
|
744
|
+
_dropdownIconTemplate;
|
745
|
+
_loadingIconTemplate;
|
746
|
+
_clearIconTemplate;
|
747
|
+
_filterIconTemplate;
|
748
|
+
_cancelIconTemplate;
|
749
|
+
_onIconTemplate;
|
750
|
+
_offIconTemplate;
|
751
|
+
filterOptions;
|
752
|
+
_options = signal(null, ...(ngDevMode ? [{ debugName: "_options" }] : []));
|
753
|
+
_placeholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
|
754
|
+
value;
|
755
|
+
hover;
|
756
|
+
focused;
|
757
|
+
overlayVisible;
|
758
|
+
optionsChanged;
|
759
|
+
panel;
|
760
|
+
dimensionsUpdated;
|
761
|
+
hoveredItem;
|
762
|
+
selectedOptionUpdated;
|
763
|
+
_filterValue = signal(null, ...(ngDevMode ? [{ debugName: "_filterValue" }] : []));
|
764
|
+
searchValue;
|
765
|
+
searchIndex;
|
766
|
+
searchTimeout;
|
767
|
+
previousSearchChar;
|
768
|
+
currentSearchChar;
|
769
|
+
preventModelTouched;
|
770
|
+
focusedOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : []));
|
771
|
+
labelId;
|
772
|
+
listId;
|
773
|
+
clicked = signal(false, ...(ngDevMode ? [{ debugName: "clicked" }] : []));
|
774
|
+
get emptyMessageLabel() {
|
775
|
+
return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
|
776
|
+
}
|
777
|
+
get emptyFilterMessageLabel() {
|
778
|
+
return this.emptyFilterMessage || this.config.getTranslation(TranslationKeys.EMPTY_FILTER_MESSAGE);
|
779
|
+
}
|
780
|
+
get isVisibleClearIcon() {
|
781
|
+
return this.modelValue() != null && this.hasSelectedOption() && this.showClear && !this.$disabled();
|
782
|
+
}
|
783
|
+
get listLabel() {
|
784
|
+
return this.config.getTranslation(TranslationKeys.ARIA)['listLabel'];
|
785
|
+
}
|
786
|
+
get focusedOptionId() {
|
787
|
+
return this.focusedOptionIndex() !== -1 ? `${this.id}_${this.focusedOptionIndex()}` : null;
|
788
|
+
}
|
789
|
+
visibleOptions = computed(() => {
|
790
|
+
const options = this.getAllVisibleAndNonVisibleOptions();
|
791
|
+
if (this._filterValue()) {
|
792
|
+
const _filterBy = this.filterBy || this.optionLabel;
|
793
|
+
const filteredOptions = !_filterBy && !this.filterFields && !this.optionValue
|
794
|
+
? this.options.filter((option) => {
|
795
|
+
if (option.label) {
|
796
|
+
return option.label.toString().toLowerCase().indexOf(this._filterValue().toLowerCase().trim()) !== -1;
|
797
|
+
}
|
798
|
+
return option.toString().toLowerCase().indexOf(this._filterValue().toLowerCase().trim()) !== -1;
|
799
|
+
})
|
800
|
+
: this.filterService.filter(options, this.searchFields(), this._filterValue().trim(), this.filterMatchMode, this.filterLocale);
|
801
|
+
if (this.group) {
|
802
|
+
const optionGroups = this.options || [];
|
803
|
+
const filtered = [];
|
804
|
+
optionGroups.forEach((group) => {
|
805
|
+
const groupChildren = this.getOptionGroupChildren(group);
|
806
|
+
const filteredItems = groupChildren.filter((item) => filteredOptions.includes(item));
|
807
|
+
if (filteredItems.length > 0)
|
808
|
+
filtered.push({
|
809
|
+
...group,
|
810
|
+
[typeof this.optionGroupChildren === 'string' ? this.optionGroupChildren : 'items']: [...filteredItems]
|
811
|
+
});
|
812
|
+
});
|
813
|
+
return this.flatOptions(filtered);
|
814
|
+
}
|
815
|
+
return filteredOptions;
|
816
|
+
}
|
817
|
+
return options;
|
818
|
+
}, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : []));
|
819
|
+
label = computed(() => {
|
820
|
+
// use getAllVisibleAndNonVisibleOptions verses just visible options
|
821
|
+
// this will find the selected option whether or not the user is currently filtering because the filtered (i.e. visible) options, are a subset of all the options
|
822
|
+
const options = this.getAllVisibleAndNonVisibleOptions();
|
823
|
+
// use isOptionEqualsModelValue for the use case where the dropdown is initalized with a disabled option
|
824
|
+
const selectedOptionIndex = options.findIndex((option) => this.isOptionValueEqualsModelValue(option));
|
825
|
+
return selectedOptionIndex !== -1 ? this.getOptionLabel(options[selectedOptionIndex]) : this.placeholder() || 'p-emptylabel';
|
826
|
+
}, ...(ngDevMode ? [{ debugName: "label" }] : []));
|
827
|
+
selectedOption;
|
828
|
+
constructor(zone, filterService) {
|
829
|
+
super();
|
830
|
+
this.zone = zone;
|
831
|
+
this.filterService = filterService;
|
832
|
+
effect(() => {
|
833
|
+
const modelValue = this.modelValue();
|
834
|
+
const visibleOptions = this.visibleOptions();
|
835
|
+
if (visibleOptions && isNotEmpty(visibleOptions)) {
|
836
|
+
const selectedOptionIndex = this.findSelectedOptionIndex();
|
837
|
+
if (selectedOptionIndex !== -1 || modelValue === undefined || (typeof modelValue === 'string' && modelValue.length === 0) || this.isModelValueNotSet() || this.editable) {
|
838
|
+
this.selectedOption = visibleOptions[selectedOptionIndex];
|
839
|
+
}
|
840
|
+
}
|
841
|
+
if (isEmpty(visibleOptions) && (modelValue === undefined || this.isModelValueNotSet()) && isNotEmpty(this.selectedOption)) {
|
842
|
+
this.selectedOption = null;
|
843
|
+
}
|
844
|
+
if (modelValue !== undefined && this.editable) {
|
845
|
+
this.updateEditableLabel();
|
846
|
+
}
|
847
|
+
this.cd.markForCheck();
|
848
|
+
});
|
849
|
+
}
|
850
|
+
isModelValueNotSet() {
|
851
|
+
return this.modelValue() === null && !this.isOptionValueEqualsModelValue(this.selectedOption);
|
852
|
+
}
|
853
|
+
getAllVisibleAndNonVisibleOptions() {
|
854
|
+
return this.group ? this.flatOptions(this.options) : this.options || [];
|
855
|
+
}
|
856
|
+
ngOnInit() {
|
857
|
+
super.ngOnInit();
|
858
|
+
this.id = this.id || uuid('pn_id_');
|
859
|
+
this.autoUpdateModel();
|
860
|
+
if (this.filterBy) {
|
861
|
+
this.filterOptions = {
|
862
|
+
filter: (value) => this.onFilterInputChange(value),
|
863
|
+
reset: () => this.resetFilter()
|
864
|
+
};
|
865
|
+
}
|
866
|
+
}
|
867
|
+
ngAfterContentInit() {
|
868
|
+
this.templates.forEach((item) => {
|
869
|
+
switch (item.getType()) {
|
870
|
+
case 'item':
|
871
|
+
this._itemTemplate = item.template;
|
872
|
+
break;
|
873
|
+
case 'selectedItem':
|
874
|
+
this._selectedItemTemplate = item.template;
|
875
|
+
break;
|
876
|
+
case 'header':
|
877
|
+
this._headerTemplate = item.template;
|
878
|
+
break;
|
879
|
+
case 'filter':
|
880
|
+
this._filterTemplate = item.template;
|
881
|
+
break;
|
882
|
+
case 'footer':
|
883
|
+
this._footerTemplate = item.template;
|
884
|
+
break;
|
885
|
+
case 'emptyfilter':
|
886
|
+
this._emptyFilterTemplate = item.template;
|
887
|
+
break;
|
888
|
+
case 'empty':
|
889
|
+
this._emptyTemplate = item.template;
|
890
|
+
break;
|
891
|
+
case 'group':
|
892
|
+
this._groupTemplate = item.template;
|
893
|
+
break;
|
894
|
+
case 'loader':
|
895
|
+
this._loaderTemplate = item.template;
|
896
|
+
break;
|
897
|
+
case 'dropdownicon':
|
898
|
+
this._dropdownIconTemplate = item.template;
|
899
|
+
break;
|
900
|
+
case 'loadingicon':
|
901
|
+
this._loadingIconTemplate = item.template;
|
902
|
+
break;
|
903
|
+
case 'clearicon':
|
904
|
+
this._clearIconTemplate = item.template;
|
905
|
+
break;
|
906
|
+
case 'filtericon':
|
907
|
+
this._filterIconTemplate = item.template;
|
908
|
+
break;
|
909
|
+
case 'cancelicon':
|
910
|
+
this._cancelIconTemplate = item.template;
|
911
|
+
break;
|
912
|
+
case 'onicon':
|
913
|
+
this._onIconTemplate = item.template;
|
914
|
+
break;
|
915
|
+
case 'officon':
|
916
|
+
this._offIconTemplate = item.template;
|
917
|
+
break;
|
918
|
+
default:
|
919
|
+
this._itemTemplate = item.template;
|
920
|
+
break;
|
921
|
+
}
|
922
|
+
});
|
923
|
+
}
|
924
|
+
ngAfterViewChecked() {
|
925
|
+
if (this.optionsChanged && this.overlayVisible) {
|
926
|
+
this.optionsChanged = false;
|
927
|
+
this.zone.runOutsideAngular(() => {
|
928
|
+
setTimeout(() => {
|
929
|
+
if (this.overlayViewChild) {
|
930
|
+
this.overlayViewChild.alignOverlay();
|
931
|
+
}
|
932
|
+
}, 1);
|
933
|
+
});
|
934
|
+
}
|
935
|
+
if (this.selectedOptionUpdated && this.itemsWrapper) {
|
936
|
+
let selectedItem = findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, 'li.p-select-option-selected');
|
937
|
+
if (selectedItem) {
|
938
|
+
scrollInView(this.itemsWrapper, selectedItem);
|
939
|
+
}
|
940
|
+
this.selectedOptionUpdated = false;
|
941
|
+
}
|
942
|
+
}
|
943
|
+
flatOptions(options) {
|
944
|
+
return (options || []).reduce((result, option, index) => {
|
945
|
+
result.push({ optionGroup: option, group: true, index });
|
946
|
+
const optionGroupChildren = this.getOptionGroupChildren(option);
|
947
|
+
optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
|
948
|
+
return result;
|
949
|
+
}, []);
|
950
|
+
}
|
951
|
+
autoUpdateModel() {
|
952
|
+
if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption()) {
|
953
|
+
this.focusedOptionIndex.set(this.findFirstFocusedOptionIndex());
|
954
|
+
this.onOptionSelect(null, this.visibleOptions()[this.focusedOptionIndex()], false);
|
955
|
+
}
|
956
|
+
}
|
957
|
+
onOptionSelect(event, option, isHide = true, preventChange = false) {
|
958
|
+
if (!this.isSelected(option)) {
|
959
|
+
const value = this.getOptionValue(option);
|
960
|
+
this.updateModel(value, event);
|
961
|
+
this.focusedOptionIndex.set(this.findSelectedOptionIndex());
|
962
|
+
preventChange === false && this.onChange.emit({ originalEvent: event, value: value });
|
963
|
+
}
|
964
|
+
if (isHide) {
|
965
|
+
this.hide(true);
|
966
|
+
}
|
967
|
+
}
|
968
|
+
onOptionMouseEnter(event, index) {
|
969
|
+
if (this.focusOnHover) {
|
970
|
+
this.changeFocusedOptionIndex(event, index);
|
971
|
+
}
|
972
|
+
}
|
973
|
+
updateModel(value, event) {
|
974
|
+
this.value = value;
|
975
|
+
this.onModelChange(value);
|
976
|
+
this.writeModelValue(value);
|
977
|
+
this.selectedOptionUpdated = true;
|
978
|
+
}
|
979
|
+
allowModelChange() {
|
980
|
+
return !!this.modelValue() && !this.placeholder() && (this.modelValue() === undefined || this.modelValue() === null) && !this.editable && this.options && this.options.length;
|
981
|
+
}
|
982
|
+
isSelected(option) {
|
983
|
+
return this.isOptionValueEqualsModelValue(option);
|
984
|
+
}
|
985
|
+
isOptionValueEqualsModelValue(option) {
|
986
|
+
return this.isValidOption(option) && equals(this.modelValue(), this.getOptionValue(option), this.equalityKey());
|
987
|
+
}
|
988
|
+
ngAfterViewInit() {
|
989
|
+
super.ngAfterViewInit();
|
990
|
+
if (this.editable) {
|
991
|
+
this.updateEditableLabel();
|
992
|
+
}
|
993
|
+
this.updatePlaceHolderForFloatingLabel();
|
994
|
+
}
|
995
|
+
updatePlaceHolderForFloatingLabel() {
|
996
|
+
const parentElement = this.el.nativeElement.parentElement;
|
997
|
+
const isInFloatingLabel = parentElement?.classList.contains('p-float-label');
|
998
|
+
if (parentElement && isInFloatingLabel && !this.selectedOption) {
|
999
|
+
const label = parentElement.querySelector('label');
|
1000
|
+
if (label) {
|
1001
|
+
this._placeholder.set(label.textContent);
|
1002
|
+
}
|
1003
|
+
}
|
1004
|
+
}
|
1005
|
+
updateEditableLabel() {
|
1006
|
+
if (this.editableInputViewChild) {
|
1007
|
+
this.editableInputViewChild.nativeElement.value = this.getOptionLabel(this.selectedOption) || this.modelValue() || '';
|
1008
|
+
}
|
1009
|
+
}
|
1010
|
+
clearEditableLabel() {
|
1011
|
+
if (this.editableInputViewChild) {
|
1012
|
+
this.editableInputViewChild.nativeElement.value = '';
|
1013
|
+
}
|
1014
|
+
}
|
1015
|
+
getOptionIndex(index, scrollerOptions) {
|
1016
|
+
return this.virtualScrollerDisabled ? index : scrollerOptions && scrollerOptions.getItemOptions(index)['index'];
|
1017
|
+
}
|
1018
|
+
getOptionLabel(option) {
|
1019
|
+
return this.optionLabel !== undefined && this.optionLabel !== null ? resolveFieldData(option, this.optionLabel) : option && option.label !== undefined ? option.label : option;
|
1020
|
+
}
|
1021
|
+
getOptionValue(option) {
|
1022
|
+
return this.optionValue && this.optionValue !== null ? resolveFieldData(option, this.optionValue) : !this.optionLabel && option && option.value !== undefined ? option.value : option;
|
1023
|
+
}
|
1024
|
+
isSelectedOptionEmpty() {
|
1025
|
+
return isEmpty(this.selectedOption);
|
1026
|
+
}
|
1027
|
+
isOptionDisabled(option) {
|
1028
|
+
if (this.getOptionValue(this.modelValue()) === this.getOptionValue(option) || (this.getOptionLabel(this.modelValue() === this.getOptionLabel(option)) && option.disabled === false)) {
|
1029
|
+
return false;
|
1030
|
+
}
|
1031
|
+
else {
|
1032
|
+
return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false;
|
1033
|
+
}
|
1034
|
+
}
|
1035
|
+
getOptionGroupLabel(optionGroup) {
|
1036
|
+
return this.optionGroupLabel !== undefined && this.optionGroupLabel !== null ? resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label !== undefined ? optionGroup.label : optionGroup;
|
1037
|
+
}
|
1038
|
+
getOptionGroupChildren(optionGroup) {
|
1039
|
+
return this.optionGroupChildren !== undefined && this.optionGroupChildren !== null ? resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;
|
1040
|
+
}
|
1041
|
+
getAriaPosInset(index) {
|
1042
|
+
return ((this.optionGroupLabel
|
1043
|
+
? index -
|
1044
|
+
this.visibleOptions()
|
1045
|
+
.slice(0, index)
|
1046
|
+
.filter((option) => this.isOptionGroup(option)).length
|
1047
|
+
: index) + 1);
|
1048
|
+
}
|
1049
|
+
get ariaSetSize() {
|
1050
|
+
return this.visibleOptions().filter((option) => !this.isOptionGroup(option)).length;
|
1051
|
+
}
|
1052
|
+
/**
|
1053
|
+
* Callback to invoke on filter reset.
|
1054
|
+
* @group Method
|
1055
|
+
*/
|
1056
|
+
resetFilter() {
|
1057
|
+
this._filterValue.set(null);
|
1058
|
+
if (this.filterViewChild && this.filterViewChild.nativeElement) {
|
1059
|
+
this.filterViewChild.nativeElement.value = '';
|
1060
|
+
}
|
1061
|
+
}
|
1062
|
+
onContainerClick(event) {
|
1063
|
+
if (this.$disabled() || this.readonly || this.loading) {
|
1064
|
+
return;
|
1065
|
+
}
|
1066
|
+
this.focusInputViewChild?.nativeElement.focus({ preventScroll: true });
|
1067
|
+
if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section="clearicon"]')) {
|
1068
|
+
return;
|
1069
|
+
}
|
1070
|
+
else if (!this.overlayViewChild || !this.overlayViewChild.el.nativeElement.contains(event.target)) {
|
1071
|
+
this.overlayVisible ? this.hide(true) : this.show(true);
|
1072
|
+
}
|
1073
|
+
this.onClick.emit(event);
|
1074
|
+
this.clicked.set(true);
|
1075
|
+
this.cd.detectChanges();
|
1076
|
+
}
|
1077
|
+
isEmpty() {
|
1078
|
+
return !this._options() || (this.visibleOptions() && this.visibleOptions().length === 0);
|
1079
|
+
}
|
1080
|
+
onEditableInput(event) {
|
1081
|
+
const value = event.target.value;
|
1082
|
+
this.searchValue = '';
|
1083
|
+
const matched = this.searchOptions(event, value);
|
1084
|
+
!matched && this.focusedOptionIndex.set(-1);
|
1085
|
+
this.onModelChange(value);
|
1086
|
+
this.updateModel(value || null, event);
|
1087
|
+
setTimeout(() => {
|
1088
|
+
this.onChange.emit({ originalEvent: event, value: value });
|
1089
|
+
}, 1);
|
1090
|
+
!this.overlayVisible && isNotEmpty(value) && this.show();
|
1091
|
+
}
|
1092
|
+
/**
|
1093
|
+
* Displays the panel.
|
1094
|
+
* @group Method
|
1095
|
+
*/
|
1096
|
+
show(isFocus) {
|
1097
|
+
this.overlayVisible = true;
|
1098
|
+
this.focusedOptionIndex.set(this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.editable ? -1 : this.findSelectedOptionIndex());
|
1099
|
+
if (isFocus) {
|
1100
|
+
focus(this.focusInputViewChild?.nativeElement);
|
1101
|
+
}
|
1102
|
+
this.cd.markForCheck();
|
1103
|
+
}
|
1104
|
+
onOverlayAnimationStart(event) {
|
1105
|
+
if (event.toState === 'visible') {
|
1106
|
+
this.itemsWrapper = findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-select-list-container');
|
1107
|
+
this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild?.nativeElement);
|
1108
|
+
if (this.options && this.options.length) {
|
1109
|
+
if (this.virtualScroll) {
|
1110
|
+
const selectedIndex = this.modelValue() ? this.focusedOptionIndex() : -1;
|
1111
|
+
if (selectedIndex !== -1) {
|
1112
|
+
this.scroller?.scrollToIndex(selectedIndex);
|
1113
|
+
}
|
1114
|
+
}
|
1115
|
+
else {
|
1116
|
+
let selectedListItem = findSingle(this.itemsWrapper, '.p-select-option.p-select-option-selected');
|
1117
|
+
if (selectedListItem) {
|
1118
|
+
selectedListItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
|
1119
|
+
}
|
1120
|
+
}
|
1121
|
+
}
|
1122
|
+
if (this.filterViewChild && this.filterViewChild.nativeElement) {
|
1123
|
+
this.preventModelTouched = true;
|
1124
|
+
if (this.autofocusFilter && !this.editable) {
|
1125
|
+
this.filterViewChild.nativeElement.focus();
|
1126
|
+
}
|
1127
|
+
}
|
1128
|
+
this.onShow.emit(event);
|
1129
|
+
}
|
1130
|
+
if (event.toState === 'void') {
|
1131
|
+
this.itemsWrapper = null;
|
1132
|
+
this.onModelTouched();
|
1133
|
+
this.onHide.emit(event);
|
1134
|
+
}
|
1135
|
+
}
|
1136
|
+
/**
|
1137
|
+
* Hides the panel.
|
1138
|
+
* @group Method
|
1139
|
+
*/
|
1140
|
+
hide(isFocus) {
|
1141
|
+
this.overlayVisible = false;
|
1142
|
+
this.focusedOptionIndex.set(-1);
|
1143
|
+
this.clicked.set(false);
|
1144
|
+
this.searchValue = '';
|
1145
|
+
if (this.overlayOptions?.mode === 'modal') {
|
1146
|
+
unblockBodyScroll();
|
1147
|
+
}
|
1148
|
+
if (this.filter && this.resetFilterOnHide) {
|
1149
|
+
this.resetFilter();
|
1150
|
+
}
|
1151
|
+
if (isFocus) {
|
1152
|
+
if (this.focusInputViewChild) {
|
1153
|
+
focus(this.focusInputViewChild?.nativeElement);
|
1154
|
+
}
|
1155
|
+
if (this.editable && this.editableInputViewChild) {
|
1156
|
+
focus(this.editableInputViewChild?.nativeElement);
|
1157
|
+
}
|
1158
|
+
}
|
1159
|
+
this.cd.markForCheck();
|
1160
|
+
}
|
1161
|
+
onInputFocus(event) {
|
1162
|
+
if (this.$disabled()) {
|
1163
|
+
// For ScreenReaders
|
1164
|
+
return;
|
1165
|
+
}
|
1166
|
+
this.focused = true;
|
1167
|
+
const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
|
1168
|
+
this.focusedOptionIndex.set(focusedOptionIndex);
|
1169
|
+
this.overlayVisible && this.scrollInView(this.focusedOptionIndex());
|
1170
|
+
this.onFocus.emit(event);
|
1171
|
+
}
|
1172
|
+
onInputBlur(event) {
|
1173
|
+
this.focused = false;
|
1174
|
+
this.onBlur.emit(event);
|
1175
|
+
if (!this.preventModelTouched && !this.overlayVisible) {
|
1176
|
+
this.onModelTouched();
|
1177
|
+
}
|
1178
|
+
this.preventModelTouched = false;
|
1179
|
+
}
|
1180
|
+
onKeyDown(event, search = false) {
|
1181
|
+
if (this.$disabled() || this.readonly || this.loading) {
|
1182
|
+
return;
|
1183
|
+
}
|
1184
|
+
switch (event.code) {
|
1185
|
+
//down
|
1186
|
+
case 'ArrowDown':
|
1187
|
+
this.onArrowDownKey(event);
|
1188
|
+
break;
|
1189
|
+
//up
|
1190
|
+
case 'ArrowUp':
|
1191
|
+
this.onArrowUpKey(event, this.editable);
|
1192
|
+
break;
|
1193
|
+
case 'ArrowLeft':
|
1194
|
+
case 'ArrowRight':
|
1195
|
+
this.onArrowLeftKey(event, this.editable);
|
1196
|
+
break;
|
1197
|
+
case 'Delete':
|
1198
|
+
this.onDeleteKey(event);
|
1199
|
+
break;
|
1200
|
+
case 'Home':
|
1201
|
+
this.onHomeKey(event, this.editable);
|
1202
|
+
break;
|
1203
|
+
case 'End':
|
1204
|
+
this.onEndKey(event, this.editable);
|
1205
|
+
break;
|
1206
|
+
case 'PageDown':
|
1207
|
+
this.onPageDownKey(event);
|
1208
|
+
break;
|
1209
|
+
case 'PageUp':
|
1210
|
+
this.onPageUpKey(event);
|
1211
|
+
break;
|
1212
|
+
//space
|
1213
|
+
case 'Space':
|
1214
|
+
this.onSpaceKey(event, search);
|
1215
|
+
break;
|
1216
|
+
//enter
|
1217
|
+
case 'Enter':
|
1218
|
+
case 'NumpadEnter':
|
1219
|
+
this.onEnterKey(event);
|
1220
|
+
break;
|
1221
|
+
//escape and tab
|
1222
|
+
case 'Escape':
|
1223
|
+
this.onEscapeKey(event);
|
1224
|
+
break;
|
1225
|
+
case 'Tab':
|
1226
|
+
this.onTabKey(event);
|
1227
|
+
break;
|
1228
|
+
case 'Backspace':
|
1229
|
+
this.onBackspaceKey(event, this.editable);
|
1230
|
+
break;
|
1231
|
+
case 'ShiftLeft':
|
1232
|
+
case 'ShiftRight':
|
1233
|
+
//NOOP
|
1234
|
+
break;
|
1235
|
+
default:
|
1236
|
+
if (!event.metaKey && isPrintableCharacter(event.key)) {
|
1237
|
+
!this.overlayVisible && this.show();
|
1238
|
+
!this.editable && this.searchOptions(event, event.key);
|
1239
|
+
}
|
1240
|
+
break;
|
1241
|
+
}
|
1242
|
+
this.clicked.set(false);
|
1243
|
+
}
|
1244
|
+
onFilterKeyDown(event) {
|
1245
|
+
switch (event.code) {
|
1246
|
+
case 'ArrowDown':
|
1247
|
+
this.onArrowDownKey(event);
|
1248
|
+
break;
|
1249
|
+
case 'ArrowUp':
|
1250
|
+
this.onArrowUpKey(event, true);
|
1251
|
+
break;
|
1252
|
+
case 'ArrowLeft':
|
1253
|
+
case 'ArrowRight':
|
1254
|
+
this.onArrowLeftKey(event, true);
|
1255
|
+
break;
|
1256
|
+
case 'Home':
|
1257
|
+
this.onHomeKey(event, true);
|
1258
|
+
break;
|
1259
|
+
case 'End':
|
1260
|
+
this.onEndKey(event, true);
|
1261
|
+
break;
|
1262
|
+
case 'Enter':
|
1263
|
+
case 'NumpadEnter':
|
1264
|
+
this.onEnterKey(event, true);
|
1265
|
+
break;
|
1266
|
+
case 'Escape':
|
1267
|
+
this.onEscapeKey(event);
|
1268
|
+
break;
|
1269
|
+
case 'Tab':
|
1270
|
+
this.onTabKey(event, true);
|
1271
|
+
break;
|
1272
|
+
default:
|
1273
|
+
break;
|
1274
|
+
}
|
1275
|
+
}
|
1276
|
+
onFilterBlur(event) {
|
1277
|
+
this.focusedOptionIndex.set(-1);
|
1278
|
+
}
|
1279
|
+
onArrowDownKey(event) {
|
1280
|
+
if (!this.overlayVisible) {
|
1281
|
+
this.show();
|
1282
|
+
this.editable && this.changeFocusedOptionIndex(event, this.findSelectedOptionIndex());
|
1283
|
+
}
|
1284
|
+
else {
|
1285
|
+
const optionIndex = this.focusedOptionIndex() !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex()) : this.clicked() ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();
|
1286
|
+
this.changeFocusedOptionIndex(event, optionIndex);
|
1287
|
+
}
|
1288
|
+
// const optionIndex = this.focusedOptionIndex() !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex()) : this.findFirstFocusedOptionIndex();
|
1289
|
+
// this.changeFocusedOptionIndex(event, optionIndex);
|
1290
|
+
// !this.overlayVisible && this.show();
|
1291
|
+
event.preventDefault();
|
1292
|
+
event.stopPropagation();
|
1293
|
+
}
|
1294
|
+
changeFocusedOptionIndex(event, index) {
|
1295
|
+
if (this.focusedOptionIndex() !== index) {
|
1296
|
+
this.focusedOptionIndex.set(index);
|
1297
|
+
this.scrollInView();
|
1298
|
+
if (this.selectOnFocus) {
|
1299
|
+
const option = this.visibleOptions()[index];
|
1300
|
+
this.onOptionSelect(event, option, false);
|
1301
|
+
}
|
1302
|
+
}
|
1303
|
+
}
|
1304
|
+
get virtualScrollerDisabled() {
|
1305
|
+
return !this.virtualScroll;
|
1306
|
+
}
|
1307
|
+
scrollInView(index = -1) {
|
1308
|
+
const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
|
1309
|
+
if (this.itemsViewChild && this.itemsViewChild.nativeElement) {
|
1310
|
+
const element = findSingle(this.itemsViewChild.nativeElement, `li[id="${id}"]`);
|
1311
|
+
if (element) {
|
1312
|
+
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
|
1313
|
+
}
|
1314
|
+
else if (!this.virtualScrollerDisabled) {
|
1315
|
+
setTimeout(() => {
|
1316
|
+
this.virtualScroll && this.scroller?.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex());
|
1317
|
+
}, 0);
|
1318
|
+
}
|
1319
|
+
}
|
1320
|
+
}
|
1321
|
+
hasSelectedOption() {
|
1322
|
+
return this.modelValue() !== undefined;
|
1323
|
+
}
|
1324
|
+
isValidSelectedOption(option) {
|
1325
|
+
return this.isValidOption(option) && this.isSelected(option);
|
1326
|
+
}
|
1327
|
+
equalityKey() {
|
1328
|
+
return this.optionValue ? null : this.dataKey;
|
1329
|
+
}
|
1330
|
+
findFirstFocusedOptionIndex() {
|
1331
|
+
const selectedIndex = this.findSelectedOptionIndex();
|
1332
|
+
return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
|
1333
|
+
}
|
1334
|
+
findFirstOptionIndex() {
|
1335
|
+
return this.visibleOptions().findIndex((option) => this.isValidOption(option));
|
1336
|
+
}
|
1337
|
+
findSelectedOptionIndex() {
|
1338
|
+
return this.hasSelectedOption() ? this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option)) : -1;
|
1339
|
+
}
|
1340
|
+
findNextOptionIndex(index) {
|
1341
|
+
const matchedOptionIndex = index < this.visibleOptions().length - 1
|
1342
|
+
? this.visibleOptions()
|
1343
|
+
.slice(index + 1)
|
1344
|
+
.findIndex((option) => this.isValidOption(option))
|
1345
|
+
: -1;
|
1346
|
+
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
|
1347
|
+
}
|
1348
|
+
findPrevOptionIndex(index) {
|
1349
|
+
const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1;
|
1350
|
+
return matchedOptionIndex > -1 ? matchedOptionIndex : index;
|
1351
|
+
}
|
1352
|
+
findLastOptionIndex() {
|
1353
|
+
return findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option));
|
1354
|
+
}
|
1355
|
+
findLastFocusedOptionIndex() {
|
1356
|
+
const selectedIndex = this.findSelectedOptionIndex();
|
1357
|
+
return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
|
1358
|
+
}
|
1359
|
+
isValidOption(option) {
|
1360
|
+
return option !== undefined && option !== null && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
|
1361
|
+
}
|
1362
|
+
isOptionGroup(option) {
|
1363
|
+
return this.optionGroupLabel !== undefined && this.optionGroupLabel !== null && option.optionGroup !== undefined && option.optionGroup !== null && option.group;
|
1364
|
+
}
|
1365
|
+
onArrowUpKey(event, pressedInInputText = false) {
|
1366
|
+
if (event.altKey && !pressedInInputText) {
|
1367
|
+
if (this.focusedOptionIndex() !== -1) {
|
1368
|
+
const option = this.visibleOptions()[this.focusedOptionIndex()];
|
1369
|
+
this.onOptionSelect(event, option);
|
1370
|
+
}
|
1371
|
+
this.overlayVisible && this.hide();
|
1372
|
+
}
|
1373
|
+
else {
|
1374
|
+
const optionIndex = this.focusedOptionIndex() !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex()) : this.clicked() ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
|
1375
|
+
this.changeFocusedOptionIndex(event, optionIndex);
|
1376
|
+
!this.overlayVisible && this.show();
|
1377
|
+
}
|
1378
|
+
event.preventDefault();
|
1379
|
+
event.stopPropagation();
|
1380
|
+
}
|
1381
|
+
onArrowLeftKey(event, pressedInInputText = false) {
|
1382
|
+
pressedInInputText && this.focusedOptionIndex.set(-1);
|
1383
|
+
}
|
1384
|
+
onDeleteKey(event) {
|
1385
|
+
if (this.showClear) {
|
1386
|
+
this.clear(event);
|
1387
|
+
event.preventDefault();
|
1388
|
+
}
|
1389
|
+
}
|
1390
|
+
onHomeKey(event, pressedInInputText = false) {
|
1391
|
+
if (pressedInInputText) {
|
1392
|
+
const target = event.currentTarget;
|
1393
|
+
if (event.shiftKey) {
|
1394
|
+
target.setSelectionRange(0, target.value.length);
|
1395
|
+
}
|
1396
|
+
else {
|
1397
|
+
target.setSelectionRange(0, 0);
|
1398
|
+
this.focusedOptionIndex.set(-1);
|
1399
|
+
}
|
1400
|
+
}
|
1401
|
+
else {
|
1402
|
+
this.changeFocusedOptionIndex(event, this.findFirstOptionIndex());
|
1403
|
+
!this.overlayVisible && this.show();
|
1404
|
+
}
|
1405
|
+
event.preventDefault();
|
1406
|
+
}
|
1407
|
+
onEndKey(event, pressedInInputText = false) {
|
1408
|
+
if (pressedInInputText) {
|
1409
|
+
const target = event.currentTarget;
|
1410
|
+
if (event.shiftKey) {
|
1411
|
+
target.setSelectionRange(0, target.value.length);
|
1412
|
+
}
|
1413
|
+
else {
|
1414
|
+
const len = target.value.length;
|
1415
|
+
target.setSelectionRange(len, len);
|
1416
|
+
this.focusedOptionIndex.set(-1);
|
1417
|
+
}
|
1418
|
+
}
|
1419
|
+
else {
|
1420
|
+
this.changeFocusedOptionIndex(event, this.findLastOptionIndex());
|
1421
|
+
!this.overlayVisible && this.show();
|
1422
|
+
}
|
1423
|
+
event.preventDefault();
|
1424
|
+
}
|
1425
|
+
onPageDownKey(event) {
|
1426
|
+
this.scrollInView(this.visibleOptions().length - 1);
|
1427
|
+
event.preventDefault();
|
1428
|
+
}
|
1429
|
+
onPageUpKey(event) {
|
1430
|
+
this.scrollInView(0);
|
1431
|
+
event.preventDefault();
|
1432
|
+
}
|
1433
|
+
onSpaceKey(event, pressedInInputText = false) {
|
1434
|
+
!this.editable && !pressedInInputText && this.onEnterKey(event);
|
1435
|
+
}
|
1436
|
+
onEnterKey(event, pressedInInput = false) {
|
1437
|
+
if (!this.overlayVisible) {
|
1438
|
+
this.focusedOptionIndex.set(-1);
|
1439
|
+
this.onArrowDownKey(event);
|
1440
|
+
}
|
1441
|
+
else {
|
1442
|
+
if (this.focusedOptionIndex() !== -1) {
|
1443
|
+
const option = this.visibleOptions()[this.focusedOptionIndex()];
|
1444
|
+
this.onOptionSelect(event, option);
|
1445
|
+
}
|
1446
|
+
!pressedInInput && this.hide();
|
1447
|
+
}
|
1448
|
+
event.preventDefault();
|
1449
|
+
}
|
1450
|
+
onEscapeKey(event) {
|
1451
|
+
this.overlayVisible && this.hide(true);
|
1452
|
+
event.preventDefault();
|
1453
|
+
event.stopPropagation();
|
1454
|
+
}
|
1455
|
+
onTabKey(event, pressedInInputText = false) {
|
1456
|
+
if (!pressedInInputText) {
|
1457
|
+
if (this.overlayVisible && this.hasFocusableElements()) {
|
1458
|
+
focus(event.shiftKey ? this.lastHiddenFocusableElementOnOverlay.nativeElement : this.firstHiddenFocusableElementOnOverlay.nativeElement);
|
1459
|
+
event.preventDefault();
|
1460
|
+
}
|
1461
|
+
else {
|
1462
|
+
if (this.focusedOptionIndex() !== -1 && this.overlayVisible) {
|
1463
|
+
const option = this.visibleOptions()[this.focusedOptionIndex()];
|
1464
|
+
this.onOptionSelect(event, option);
|
1465
|
+
}
|
1466
|
+
this.overlayVisible && this.hide(this.filter);
|
1467
|
+
}
|
1468
|
+
}
|
1469
|
+
event.stopPropagation();
|
1470
|
+
}
|
1471
|
+
onFirstHiddenFocus(event) {
|
1472
|
+
const focusableEl = event.relatedTarget === this.focusInputViewChild?.nativeElement ? getFirstFocusableElement(this.overlayViewChild.el?.nativeElement, ':not(.p-hidden-focusable)') : this.focusInputViewChild?.nativeElement;
|
1473
|
+
focus(focusableEl);
|
1474
|
+
}
|
1475
|
+
onLastHiddenFocus(event) {
|
1476
|
+
const focusableEl = event.relatedTarget === this.focusInputViewChild?.nativeElement ? getLastFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') : this.focusInputViewChild?.nativeElement;
|
1477
|
+
focus(focusableEl);
|
1478
|
+
}
|
1479
|
+
hasFocusableElements() {
|
1480
|
+
return getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"])').length > 0;
|
1481
|
+
}
|
1482
|
+
onBackspaceKey(event, pressedInInputText = false) {
|
1483
|
+
if (pressedInInputText) {
|
1484
|
+
!this.overlayVisible && this.show();
|
1485
|
+
}
|
1486
|
+
}
|
1487
|
+
searchFields() {
|
1488
|
+
return this.filterBy?.split(',') || this.filterFields || [this.optionLabel];
|
1489
|
+
}
|
1490
|
+
searchOptions(event, char) {
|
1491
|
+
this.searchValue = (this.searchValue || '') + char;
|
1492
|
+
let optionIndex = -1;
|
1493
|
+
let matched = false;
|
1494
|
+
optionIndex = this.visibleOptions().findIndex((option) => this.isOptionMatched(option));
|
1495
|
+
if (optionIndex !== -1) {
|
1496
|
+
matched = true;
|
1497
|
+
}
|
1498
|
+
if (optionIndex === -1 && this.focusedOptionIndex() === -1) {
|
1499
|
+
optionIndex = this.findFirstFocusedOptionIndex();
|
1500
|
+
}
|
1501
|
+
if (optionIndex !== -1) {
|
1502
|
+
setTimeout(() => {
|
1503
|
+
this.changeFocusedOptionIndex(event, optionIndex);
|
1504
|
+
});
|
1505
|
+
}
|
1506
|
+
if (this.searchTimeout) {
|
1507
|
+
clearTimeout(this.searchTimeout);
|
1508
|
+
}
|
1509
|
+
this.searchTimeout = setTimeout(() => {
|
1510
|
+
this.searchValue = '';
|
1511
|
+
this.searchTimeout = null;
|
1512
|
+
}, 500);
|
1513
|
+
return matched;
|
1514
|
+
}
|
1515
|
+
isOptionMatched(option) {
|
1516
|
+
return this.isValidOption(option) && this.getOptionLabel(option).toString().toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
|
1517
|
+
}
|
1518
|
+
onFilterInputChange(event) {
|
1519
|
+
let value = event.target.value;
|
1520
|
+
this._filterValue.set(value);
|
1521
|
+
this.focusedOptionIndex.set(-1);
|
1522
|
+
this.onFilter.emit({ originalEvent: event, filter: this._filterValue() });
|
1523
|
+
!this.virtualScrollerDisabled && this.scroller.scrollToIndex(0);
|
1524
|
+
setTimeout(() => {
|
1525
|
+
this.overlayViewChild.alignOverlay();
|
1526
|
+
});
|
1527
|
+
this.cd.markForCheck();
|
1528
|
+
}
|
1529
|
+
applyFocus() {
|
1530
|
+
if (this.editable)
|
1531
|
+
findSingle(this.el.nativeElement, '.p-dropdown-label.p-inputtext').focus();
|
1532
|
+
else
|
1533
|
+
focus(this.focusInputViewChild?.nativeElement);
|
1534
|
+
}
|
1535
|
+
/**
|
1536
|
+
* Applies focus.
|
1537
|
+
* @group Method
|
1538
|
+
*/
|
1539
|
+
focus() {
|
1540
|
+
this.applyFocus();
|
1541
|
+
}
|
1542
|
+
/**
|
1543
|
+
* Clears the model.
|
1544
|
+
* @group Method
|
1545
|
+
*/
|
1546
|
+
clear(event) {
|
1547
|
+
this.updateModel(null, event);
|
1548
|
+
this.clearEditableLabel();
|
1549
|
+
this.onModelTouched();
|
1550
|
+
this.onChange.emit({ originalEvent: event, value: this.value });
|
1551
|
+
this.onClear.emit(event);
|
1552
|
+
this.resetFilter();
|
1553
|
+
}
|
1554
|
+
/**
|
1555
|
+
* @override
|
1556
|
+
*
|
1557
|
+
* @see {@link BaseEditableHolder.writeControlValue}
|
1558
|
+
* Writes the value to the control.
|
1559
|
+
*/
|
1560
|
+
writeControlValue(value, setModelValue) {
|
1561
|
+
if (this.filter) {
|
1562
|
+
this.resetFilter();
|
1563
|
+
}
|
1564
|
+
this.value = value;
|
1565
|
+
this.allowModelChange() && this.onModelChange(value);
|
1566
|
+
setModelValue(this.value);
|
1567
|
+
this.updateEditableLabel();
|
1568
|
+
this.cd.markForCheck();
|
1569
|
+
}
|
1570
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: Select, deps: [{ token: i0.NgZone }, { token: i2.FilterService }], target: i0.ɵɵFactoryTarget.Component });
|
1571
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: Select, isStandalone: true, selector: "p-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, filterFields: { classPropertyName: "filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: false, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: false, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: false, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: false, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: false, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, virtualScrollOptions: { classPropertyName: "virtualScrollOptions", publicName: "virtualScrollOptions", isSignal: false, isRequired: false, transformFunction: null }, overlayOptions: { classPropertyName: "overlayOptions", publicName: "overlayOptions", isSignal: false, isRequired: false, transformFunction: null }, ariaFilterLabel: { classPropertyName: "ariaFilterLabel", publicName: "ariaFilterLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: false, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: false, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: false, isRequired: false, transformFunction: null }, tooltipPositionStyle: { classPropertyName: "tooltipPositionStyle", publicName: "tooltipPositionStyle", isSignal: false, isRequired: false, transformFunction: null }, tooltipStyleClass: { classPropertyName: "tooltipStyleClass", publicName: "tooltipStyleClass", isSignal: false, isRequired: false, transformFunction: null }, focusOnHover: { classPropertyName: "focusOnHover", publicName: "focusOnHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { listeners: { "click": "onContainerClick($event)" }, properties: { "class": "cn(cx('root'), styleClass)", "attr.id": "id" } }, providers: [SELECT_VALUE_ACCESSOR, SelectStyle], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "groupTemplate", first: true, predicate: ["group"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "selectedItemTemplate", first: true, predicate: ["selectedItem"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "emptyFilterTemplate", first: true, predicate: ["emptyfilter"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "onIconTemplate", first: true, predicate: ["onicon"] }, { propertyName: "offIconTemplate", first: true, predicate: ["officon"] }, { propertyName: "cancelIconTemplate", first: true, predicate: ["cancelicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "editableInputViewChild", first: true, predicate: ["editableInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "firstHiddenFocusableElementOnOverlay", first: true, predicate: ["firstHiddenFocusableEl"], descendants: true }, { propertyName: "lastHiddenFocusableElementOnOverlay", first: true, predicate: ["lastHiddenFocusableEl"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
1572
|
+
<span
|
1573
|
+
#focusInput
|
1574
|
+
[class]="cx('label')"
|
1575
|
+
*ngIf="!editable"
|
1576
|
+
[pTooltip]="tooltip"
|
1577
|
+
[tooltipPosition]="tooltipPosition"
|
1578
|
+
[positionStyle]="tooltipPositionStyle"
|
1579
|
+
[tooltipStyleClass]="tooltipStyleClass"
|
1580
|
+
[attr.aria-disabled]="$disabled()"
|
1581
|
+
[attr.id]="inputId"
|
1582
|
+
role="combobox"
|
1583
|
+
[attr.aria-label]="ariaLabel || (label() === 'p-emptylabel' ? undefined : label())"
|
1584
|
+
[attr.aria-labelledby]="ariaLabelledBy"
|
1585
|
+
[attr.aria-haspopup]="'listbox'"
|
1586
|
+
[attr.aria-expanded]="overlayVisible ?? false"
|
1587
|
+
[attr.aria-controls]="overlayVisible ? id + '_list' : null"
|
1588
|
+
[attr.tabindex]="!$disabled() ? tabindex : -1"
|
1589
|
+
[pAutoFocus]="autofocus"
|
1590
|
+
[attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
|
1591
|
+
(focus)="onInputFocus($event)"
|
1592
|
+
(blur)="onInputBlur($event)"
|
1593
|
+
(keydown)="onKeyDown($event)"
|
1594
|
+
[attr.aria-required]="required()"
|
1595
|
+
[attr.required]="required() ? '' : undefined"
|
1596
|
+
[attr.disabled]="$disabled() ? '' : undefined"
|
1597
|
+
>
|
1598
|
+
<ng-container *ngIf="!selectedItemTemplate && !_selectedItemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? ' ' : label() }}</ng-container>
|
1599
|
+
<ng-container *ngIf="(selectedItemTemplate || _selectedItemTemplate) && !isSelectedOptionEmpty()" [ngTemplateOutlet]="selectedItemTemplate || _selectedItemTemplate" [ngTemplateOutletContext]="{ $implicit: selectedOption }"></ng-container>
|
1600
|
+
<ng-template #defaultPlaceholder>
|
1601
|
+
<span *ngIf="isSelectedOptionEmpty()">{{ label() === 'p-emptylabel' ? ' ' : label() }}</span>
|
1602
|
+
</ng-template>
|
1603
|
+
</span>
|
1604
|
+
<input
|
1605
|
+
*ngIf="editable"
|
1606
|
+
#editableInput
|
1607
|
+
type="text"
|
1608
|
+
[attr.id]="inputId"
|
1609
|
+
[class]="cx('label')"
|
1610
|
+
[attr.aria-haspopup]="'listbox'"
|
1611
|
+
[attr.placeholder]="modelValue() === undefined || modelValue() === null ? placeholder() : undefined"
|
1612
|
+
[attr.aria-label]="ariaLabel || (label() === 'p-emptylabel' ? undefined : label())"
|
1613
|
+
(input)="onEditableInput($event)"
|
1614
|
+
(keydown)="onKeyDown($event)"
|
1615
|
+
[pAutoFocus]="autofocus"
|
1616
|
+
[attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
|
1617
|
+
(focus)="onInputFocus($event)"
|
1618
|
+
(blur)="onInputBlur($event)"
|
1619
|
+
[attr.name]="name()"
|
1620
|
+
[attr.minlength]="minlength()"
|
1621
|
+
[attr.min]="min()"
|
1622
|
+
[attr.max]="max()"
|
1623
|
+
[attr.pattern]="pattern()"
|
1624
|
+
[attr.size]="inputSize()"
|
1625
|
+
[attr.maxlength]="maxlength()"
|
1626
|
+
[attr.required]="required() ? '' : undefined"
|
1627
|
+
[attr.readonly]="readonly ? '' : undefined"
|
1628
|
+
[attr.disabled]="$disabled() ? '' : undefined"
|
1629
|
+
/>
|
1630
|
+
<ng-container *ngIf="isVisibleClearIcon">
|
1631
|
+
<svg data-p-icon="times" [class]="cx('clearIcon')" (click)="clear($event)" *ngIf="!clearIconTemplate && !_clearIconTemplate" [attr.data-pc-section]="'clearicon'" />
|
1632
|
+
<span [class]="cx('clearIcon')" (click)="clear($event)" *ngIf="clearIconTemplate || _clearIconTemplate" [attr.data-pc-section]="'clearicon'">
|
1633
|
+
<ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate; context: { class: cx('clearIcon') }"></ng-template>
|
1634
|
+
</span>
|
1635
|
+
</ng-container>
|
1636
|
+
|
1637
|
+
<div [class]="cx('dropdown')" role="button" aria-label="dropdown trigger" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [attr.data-pc-section]="'trigger'">
|
1638
|
+
<ng-container *ngIf="loading; else elseBlock">
|
1639
|
+
<ng-container *ngIf="loadingIconTemplate || _loadingIconTemplate">
|
1640
|
+
<ng-container *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-container>
|
1641
|
+
</ng-container>
|
1642
|
+
<ng-container *ngIf="!loadingIconTemplate && !_loadingIconTemplate">
|
1643
|
+
<span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)" aria-hidden="true"></span>
|
1644
|
+
<span *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), 'pi pi-spinner pi-spin')" aria-hidden="true"></span>
|
1645
|
+
</ng-container>
|
1646
|
+
</ng-container>
|
1647
|
+
|
1648
|
+
<ng-template #elseBlock>
|
1649
|
+
<ng-container *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate">
|
1650
|
+
<span [class]="cn(cx('dropdownIcon'), dropdownIcon)" *ngIf="dropdownIcon"></span>
|
1651
|
+
<svg data-p-icon="chevron-down" *ngIf="!dropdownIcon" [class]="cx('dropdownIcon')" />
|
1652
|
+
</ng-container>
|
1653
|
+
<span *ngIf="dropdownIconTemplate || _dropdownIconTemplate" [class]="cx('dropdownIcon')">
|
1654
|
+
<ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate; context: { class: cx('dropdownIcon') }"></ng-template>
|
1655
|
+
</span>
|
1656
|
+
</ng-template>
|
1657
|
+
</div>
|
1658
|
+
|
1659
|
+
<p-overlay #overlay [hostAttrSelector]="attrSelector" [(visible)]="overlayVisible" [options]="overlayOptions" [target]="'@parent'" [appendTo]="$appendTo()" (onAnimationStart)="onOverlayAnimationStart($event)" (onHide)="hide()">
|
1660
|
+
<ng-template #content>
|
1661
|
+
<div [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle">
|
1662
|
+
<span
|
1663
|
+
#firstHiddenFocusableEl
|
1664
|
+
role="presentation"
|
1665
|
+
class="p-hidden-accessible p-hidden-focusable"
|
1666
|
+
[attr.tabindex]="0"
|
1667
|
+
(focus)="onFirstHiddenFocus($event)"
|
1668
|
+
[attr.data-p-hidden-accessible]="true"
|
1669
|
+
[attr.data-p-hidden-focusable]="true"
|
1670
|
+
>
|
1671
|
+
</span>
|
1672
|
+
<ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
|
1673
|
+
<div [class]="cx('header')" *ngIf="filter" (click)="$event.stopPropagation()">
|
1674
|
+
<ng-container *ngIf="filterTemplate || _filterTemplate; else builtInFilterElement">
|
1675
|
+
<ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: filterOptions }"></ng-container>
|
1676
|
+
</ng-container>
|
1677
|
+
<ng-template #builtInFilterElement>
|
1678
|
+
<p-iconfield>
|
1679
|
+
<input
|
1680
|
+
#filter
|
1681
|
+
pInputText
|
1682
|
+
[pSize]="size()"
|
1683
|
+
type="text"
|
1684
|
+
role="searchbox"
|
1685
|
+
autocomplete="off"
|
1686
|
+
[value]="_filterValue() || ''"
|
1687
|
+
[class]="cx('pcFilter')"
|
1688
|
+
[variant]="$variant()"
|
1689
|
+
[attr.placeholder]="filterPlaceholder"
|
1690
|
+
[attr.aria-owns]="id + '_list'"
|
1691
|
+
(input)="onFilterInputChange($event)"
|
1692
|
+
[attr.aria-label]="ariaFilterLabel"
|
1693
|
+
[attr.aria-activedescendant]="focusedOptionId"
|
1694
|
+
(keydown)="onFilterKeyDown($event)"
|
1695
|
+
(blur)="onFilterBlur($event)"
|
1696
|
+
/>
|
1697
|
+
<p-inputicon>
|
1698
|
+
<svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" />
|
1699
|
+
<span *ngIf="filterIconTemplate || _filterIconTemplate">
|
1700
|
+
<ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
|
1701
|
+
</span>
|
1702
|
+
</p-inputicon>
|
1703
|
+
</p-iconfield>
|
1704
|
+
</ng-template>
|
1705
|
+
</div>
|
1706
|
+
<div [class]="cx('listContainer')" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
|
1707
|
+
<p-scroller
|
1708
|
+
*ngIf="virtualScroll"
|
1709
|
+
#scroller
|
1710
|
+
[items]="visibleOptions()"
|
1711
|
+
[style]="{ height: scrollHeight }"
|
1712
|
+
[itemSize]="virtualScrollItemSize"
|
1713
|
+
[autoSize]="true"
|
1714
|
+
[lazy]="lazy"
|
1715
|
+
(onLazyLoad)="onLazyLoad.emit($event)"
|
1716
|
+
[options]="virtualScrollOptions"
|
1717
|
+
>
|
1718
|
+
<ng-template #content let-items let-scrollerOptions="options">
|
1719
|
+
<ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
|
1720
|
+
</ng-template>
|
1721
|
+
<ng-container *ngIf="loaderTemplate || _loaderTemplate">
|
1722
|
+
<ng-template #loader let-scrollerOptions="options">
|
1723
|
+
<ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
|
1724
|
+
</ng-template>
|
1725
|
+
</ng-container>
|
1726
|
+
</p-scroller>
|
1727
|
+
<ng-container *ngIf="!virtualScroll">
|
1728
|
+
<ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
|
1729
|
+
</ng-container>
|
1730
|
+
|
1731
|
+
<ng-template #buildInItems let-items let-scrollerOptions="options">
|
1732
|
+
<ul #items [attr.id]="id + '_list'" [attr.aria-label]="listLabel" [class]="cn(cx('list'), scrollerOptions.contentStyleClass)" [style]="scrollerOptions.contentStyle" role="listbox">
|
1733
|
+
<ng-template ngFor let-option [ngForOf]="items" let-i="index">
|
1734
|
+
<ng-container *ngIf="isOptionGroup(option)">
|
1735
|
+
<li [class]="cx('optionGroup')" [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
|
1736
|
+
<span *ngIf="!groupTemplate && !_groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
|
1737
|
+
<ng-container *ngTemplateOutlet="groupTemplate || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
|
1738
|
+
</li>
|
1739
|
+
</ng-container>
|
1740
|
+
<ng-container *ngIf="!isOptionGroup(option)">
|
1741
|
+
<p-selectItem
|
1742
|
+
[id]="id + '_' + getOptionIndex(i, scrollerOptions)"
|
1743
|
+
[option]="option"
|
1744
|
+
[checkmark]="checkmark"
|
1745
|
+
[selected]="isSelected(option)"
|
1746
|
+
[label]="getOptionLabel(option)"
|
1747
|
+
[disabled]="isOptionDisabled(option)"
|
1748
|
+
[template]="itemTemplate || _itemTemplate"
|
1749
|
+
[focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
|
1750
|
+
[ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
|
1751
|
+
[ariaSetSize]="ariaSetSize"
|
1752
|
+
(onClick)="onOptionSelect($event, option)"
|
1753
|
+
(onMouseEnter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
|
1754
|
+
></p-selectItem>
|
1755
|
+
</ng-container>
|
1756
|
+
</ng-template>
|
1757
|
+
<li *ngIf="filterValue && isEmpty()" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
|
1758
|
+
@if (!emptyFilterTemplate && !_emptyFilterTemplate && !emptyTemplate) {
|
1759
|
+
{{ emptyFilterMessageLabel }}
|
1760
|
+
} @else {
|
1761
|
+
<ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || _emptyFilterTemplate || emptyTemplate || _emptyTemplate"></ng-container>
|
1762
|
+
}
|
1763
|
+
</li>
|
1764
|
+
<li *ngIf="!filterValue && isEmpty()" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
|
1765
|
+
@if (!emptyTemplate && !_emptyTemplate) {
|
1766
|
+
{{ emptyFilterMessageLabel || emptyMessageLabel }}
|
1767
|
+
} @else {
|
1768
|
+
<ng-container #empty *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
|
1769
|
+
}
|
1770
|
+
</li>
|
1771
|
+
</ul>
|
1772
|
+
</ng-template>
|
1773
|
+
</div>
|
1774
|
+
<ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
|
1775
|
+
<span
|
1776
|
+
#lastHiddenFocusableEl
|
1777
|
+
role="presentation"
|
1778
|
+
class="p-hidden-accessible p-hidden-focusable"
|
1779
|
+
[attr.tabindex]="0"
|
1780
|
+
(focus)="onLastHiddenFocus($event)"
|
1781
|
+
[attr.data-p-hidden-accessible]="true"
|
1782
|
+
[attr.data-p-hidden-focusable]="true"
|
1783
|
+
></span>
|
1784
|
+
</div>
|
1785
|
+
</ng-template>
|
1786
|
+
</p-overlay>
|
1787
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SelectItem, selector: "p-selectItem", inputs: ["id", "option", "selected", "focused", "label", "disabled", "visible", "itemSize", "ariaPosInset", "ariaSetSize", "template", "checkmark"], outputs: ["onClick", "onMouseEnter"] }, { kind: "component", type: Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options", "appendTo", "hostAttrSelector"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: SearchIcon, selector: "[data-p-icon=\"search\"]" }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
1788
|
+
}
|
1789
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: Select, decorators: [{
|
1790
|
+
type: Component,
|
1791
|
+
args: [{
|
1792
|
+
selector: 'p-select',
|
1793
|
+
standalone: true,
|
1794
|
+
imports: [CommonModule, SelectItem, Overlay, Tooltip, AutoFocus, TimesIcon, ChevronDownIcon, SearchIcon, InputText, IconField, InputIcon, Scroller, SharedModule],
|
1795
|
+
template: `
|
1796
|
+
<span
|
1797
|
+
#focusInput
|
1798
|
+
[class]="cx('label')"
|
1799
|
+
*ngIf="!editable"
|
1800
|
+
[pTooltip]="tooltip"
|
1801
|
+
[tooltipPosition]="tooltipPosition"
|
1802
|
+
[positionStyle]="tooltipPositionStyle"
|
1803
|
+
[tooltipStyleClass]="tooltipStyleClass"
|
1804
|
+
[attr.aria-disabled]="$disabled()"
|
1805
|
+
[attr.id]="inputId"
|
1806
|
+
role="combobox"
|
1807
|
+
[attr.aria-label]="ariaLabel || (label() === 'p-emptylabel' ? undefined : label())"
|
1808
|
+
[attr.aria-labelledby]="ariaLabelledBy"
|
1809
|
+
[attr.aria-haspopup]="'listbox'"
|
1810
|
+
[attr.aria-expanded]="overlayVisible ?? false"
|
1811
|
+
[attr.aria-controls]="overlayVisible ? id + '_list' : null"
|
1812
|
+
[attr.tabindex]="!$disabled() ? tabindex : -1"
|
1813
|
+
[pAutoFocus]="autofocus"
|
1814
|
+
[attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
|
1815
|
+
(focus)="onInputFocus($event)"
|
1816
|
+
(blur)="onInputBlur($event)"
|
1817
|
+
(keydown)="onKeyDown($event)"
|
1818
|
+
[attr.aria-required]="required()"
|
1819
|
+
[attr.required]="required() ? '' : undefined"
|
1820
|
+
[attr.disabled]="$disabled() ? '' : undefined"
|
1821
|
+
>
|
1822
|
+
<ng-container *ngIf="!selectedItemTemplate && !_selectedItemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? ' ' : label() }}</ng-container>
|
1823
|
+
<ng-container *ngIf="(selectedItemTemplate || _selectedItemTemplate) && !isSelectedOptionEmpty()" [ngTemplateOutlet]="selectedItemTemplate || _selectedItemTemplate" [ngTemplateOutletContext]="{ $implicit: selectedOption }"></ng-container>
|
1824
|
+
<ng-template #defaultPlaceholder>
|
1825
|
+
<span *ngIf="isSelectedOptionEmpty()">{{ label() === 'p-emptylabel' ? ' ' : label() }}</span>
|
1826
|
+
</ng-template>
|
1827
|
+
</span>
|
1828
|
+
<input
|
1829
|
+
*ngIf="editable"
|
1830
|
+
#editableInput
|
1831
|
+
type="text"
|
1832
|
+
[attr.id]="inputId"
|
1833
|
+
[class]="cx('label')"
|
1834
|
+
[attr.aria-haspopup]="'listbox'"
|
1835
|
+
[attr.placeholder]="modelValue() === undefined || modelValue() === null ? placeholder() : undefined"
|
1836
|
+
[attr.aria-label]="ariaLabel || (label() === 'p-emptylabel' ? undefined : label())"
|
1837
|
+
(input)="onEditableInput($event)"
|
1838
|
+
(keydown)="onKeyDown($event)"
|
1839
|
+
[pAutoFocus]="autofocus"
|
1840
|
+
[attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
|
1841
|
+
(focus)="onInputFocus($event)"
|
1842
|
+
(blur)="onInputBlur($event)"
|
1843
|
+
[attr.name]="name()"
|
1844
|
+
[attr.minlength]="minlength()"
|
1845
|
+
[attr.min]="min()"
|
1846
|
+
[attr.max]="max()"
|
1847
|
+
[attr.pattern]="pattern()"
|
1848
|
+
[attr.size]="inputSize()"
|
1849
|
+
[attr.maxlength]="maxlength()"
|
1850
|
+
[attr.required]="required() ? '' : undefined"
|
1851
|
+
[attr.readonly]="readonly ? '' : undefined"
|
1852
|
+
[attr.disabled]="$disabled() ? '' : undefined"
|
1853
|
+
/>
|
1854
|
+
<ng-container *ngIf="isVisibleClearIcon">
|
1855
|
+
<svg data-p-icon="times" [class]="cx('clearIcon')" (click)="clear($event)" *ngIf="!clearIconTemplate && !_clearIconTemplate" [attr.data-pc-section]="'clearicon'" />
|
1856
|
+
<span [class]="cx('clearIcon')" (click)="clear($event)" *ngIf="clearIconTemplate || _clearIconTemplate" [attr.data-pc-section]="'clearicon'">
|
1857
|
+
<ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate; context: { class: cx('clearIcon') }"></ng-template>
|
1858
|
+
</span>
|
1859
|
+
</ng-container>
|
1860
|
+
|
1861
|
+
<div [class]="cx('dropdown')" role="button" aria-label="dropdown trigger" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [attr.data-pc-section]="'trigger'">
|
1862
|
+
<ng-container *ngIf="loading; else elseBlock">
|
1863
|
+
<ng-container *ngIf="loadingIconTemplate || _loadingIconTemplate">
|
1864
|
+
<ng-container *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-container>
|
1865
|
+
</ng-container>
|
1866
|
+
<ng-container *ngIf="!loadingIconTemplate && !_loadingIconTemplate">
|
1867
|
+
<span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)" aria-hidden="true"></span>
|
1868
|
+
<span *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), 'pi pi-spinner pi-spin')" aria-hidden="true"></span>
|
1869
|
+
</ng-container>
|
1870
|
+
</ng-container>
|
1871
|
+
|
1872
|
+
<ng-template #elseBlock>
|
1873
|
+
<ng-container *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate">
|
1874
|
+
<span [class]="cn(cx('dropdownIcon'), dropdownIcon)" *ngIf="dropdownIcon"></span>
|
1875
|
+
<svg data-p-icon="chevron-down" *ngIf="!dropdownIcon" [class]="cx('dropdownIcon')" />
|
1876
|
+
</ng-container>
|
1877
|
+
<span *ngIf="dropdownIconTemplate || _dropdownIconTemplate" [class]="cx('dropdownIcon')">
|
1878
|
+
<ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate; context: { class: cx('dropdownIcon') }"></ng-template>
|
1879
|
+
</span>
|
1880
|
+
</ng-template>
|
1881
|
+
</div>
|
1882
|
+
|
1883
|
+
<p-overlay #overlay [hostAttrSelector]="attrSelector" [(visible)]="overlayVisible" [options]="overlayOptions" [target]="'@parent'" [appendTo]="$appendTo()" (onAnimationStart)="onOverlayAnimationStart($event)" (onHide)="hide()">
|
1884
|
+
<ng-template #content>
|
1885
|
+
<div [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle">
|
1886
|
+
<span
|
1887
|
+
#firstHiddenFocusableEl
|
1888
|
+
role="presentation"
|
1889
|
+
class="p-hidden-accessible p-hidden-focusable"
|
1890
|
+
[attr.tabindex]="0"
|
1891
|
+
(focus)="onFirstHiddenFocus($event)"
|
1892
|
+
[attr.data-p-hidden-accessible]="true"
|
1893
|
+
[attr.data-p-hidden-focusable]="true"
|
1894
|
+
>
|
1895
|
+
</span>
|
1896
|
+
<ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
|
1897
|
+
<div [class]="cx('header')" *ngIf="filter" (click)="$event.stopPropagation()">
|
1898
|
+
<ng-container *ngIf="filterTemplate || _filterTemplate; else builtInFilterElement">
|
1899
|
+
<ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: filterOptions }"></ng-container>
|
1900
|
+
</ng-container>
|
1901
|
+
<ng-template #builtInFilterElement>
|
1902
|
+
<p-iconfield>
|
1903
|
+
<input
|
1904
|
+
#filter
|
1905
|
+
pInputText
|
1906
|
+
[pSize]="size()"
|
1907
|
+
type="text"
|
1908
|
+
role="searchbox"
|
1909
|
+
autocomplete="off"
|
1910
|
+
[value]="_filterValue() || ''"
|
1911
|
+
[class]="cx('pcFilter')"
|
1912
|
+
[variant]="$variant()"
|
1913
|
+
[attr.placeholder]="filterPlaceholder"
|
1914
|
+
[attr.aria-owns]="id + '_list'"
|
1915
|
+
(input)="onFilterInputChange($event)"
|
1916
|
+
[attr.aria-label]="ariaFilterLabel"
|
1917
|
+
[attr.aria-activedescendant]="focusedOptionId"
|
1918
|
+
(keydown)="onFilterKeyDown($event)"
|
1919
|
+
(blur)="onFilterBlur($event)"
|
1920
|
+
/>
|
1921
|
+
<p-inputicon>
|
1922
|
+
<svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" />
|
1923
|
+
<span *ngIf="filterIconTemplate || _filterIconTemplate">
|
1924
|
+
<ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
|
1925
|
+
</span>
|
1926
|
+
</p-inputicon>
|
1927
|
+
</p-iconfield>
|
1928
|
+
</ng-template>
|
1929
|
+
</div>
|
1930
|
+
<div [class]="cx('listContainer')" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
|
1931
|
+
<p-scroller
|
1932
|
+
*ngIf="virtualScroll"
|
1933
|
+
#scroller
|
1934
|
+
[items]="visibleOptions()"
|
1935
|
+
[style]="{ height: scrollHeight }"
|
1936
|
+
[itemSize]="virtualScrollItemSize"
|
1937
|
+
[autoSize]="true"
|
1938
|
+
[lazy]="lazy"
|
1939
|
+
(onLazyLoad)="onLazyLoad.emit($event)"
|
1940
|
+
[options]="virtualScrollOptions"
|
1941
|
+
>
|
1942
|
+
<ng-template #content let-items let-scrollerOptions="options">
|
1943
|
+
<ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
|
1944
|
+
</ng-template>
|
1945
|
+
<ng-container *ngIf="loaderTemplate || _loaderTemplate">
|
1946
|
+
<ng-template #loader let-scrollerOptions="options">
|
1947
|
+
<ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
|
1948
|
+
</ng-template>
|
1949
|
+
</ng-container>
|
1950
|
+
</p-scroller>
|
1951
|
+
<ng-container *ngIf="!virtualScroll">
|
1952
|
+
<ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
|
1953
|
+
</ng-container>
|
1954
|
+
|
1955
|
+
<ng-template #buildInItems let-items let-scrollerOptions="options">
|
1956
|
+
<ul #items [attr.id]="id + '_list'" [attr.aria-label]="listLabel" [class]="cn(cx('list'), scrollerOptions.contentStyleClass)" [style]="scrollerOptions.contentStyle" role="listbox">
|
1957
|
+
<ng-template ngFor let-option [ngForOf]="items" let-i="index">
|
1958
|
+
<ng-container *ngIf="isOptionGroup(option)">
|
1959
|
+
<li [class]="cx('optionGroup')" [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
|
1960
|
+
<span *ngIf="!groupTemplate && !_groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
|
1961
|
+
<ng-container *ngTemplateOutlet="groupTemplate || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
|
1962
|
+
</li>
|
1963
|
+
</ng-container>
|
1964
|
+
<ng-container *ngIf="!isOptionGroup(option)">
|
1965
|
+
<p-selectItem
|
1966
|
+
[id]="id + '_' + getOptionIndex(i, scrollerOptions)"
|
1967
|
+
[option]="option"
|
1968
|
+
[checkmark]="checkmark"
|
1969
|
+
[selected]="isSelected(option)"
|
1970
|
+
[label]="getOptionLabel(option)"
|
1971
|
+
[disabled]="isOptionDisabled(option)"
|
1972
|
+
[template]="itemTemplate || _itemTemplate"
|
1973
|
+
[focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
|
1974
|
+
[ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
|
1975
|
+
[ariaSetSize]="ariaSetSize"
|
1976
|
+
(onClick)="onOptionSelect($event, option)"
|
1977
|
+
(onMouseEnter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
|
1978
|
+
></p-selectItem>
|
1979
|
+
</ng-container>
|
1980
|
+
</ng-template>
|
1981
|
+
<li *ngIf="filterValue && isEmpty()" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
|
1982
|
+
@if (!emptyFilterTemplate && !_emptyFilterTemplate && !emptyTemplate) {
|
1983
|
+
{{ emptyFilterMessageLabel }}
|
1984
|
+
} @else {
|
1985
|
+
<ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || _emptyFilterTemplate || emptyTemplate || _emptyTemplate"></ng-container>
|
1986
|
+
}
|
1987
|
+
</li>
|
1988
|
+
<li *ngIf="!filterValue && isEmpty()" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
|
1989
|
+
@if (!emptyTemplate && !_emptyTemplate) {
|
1990
|
+
{{ emptyFilterMessageLabel || emptyMessageLabel }}
|
1991
|
+
} @else {
|
1992
|
+
<ng-container #empty *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
|
1993
|
+
}
|
1994
|
+
</li>
|
1995
|
+
</ul>
|
1996
|
+
</ng-template>
|
1997
|
+
</div>
|
1998
|
+
<ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
|
1999
|
+
<span
|
2000
|
+
#lastHiddenFocusableEl
|
2001
|
+
role="presentation"
|
2002
|
+
class="p-hidden-accessible p-hidden-focusable"
|
2003
|
+
[attr.tabindex]="0"
|
2004
|
+
(focus)="onLastHiddenFocus($event)"
|
2005
|
+
[attr.data-p-hidden-accessible]="true"
|
2006
|
+
[attr.data-p-hidden-focusable]="true"
|
2007
|
+
></span>
|
2008
|
+
</div>
|
2009
|
+
</ng-template>
|
2010
|
+
</p-overlay>
|
2011
|
+
`,
|
2012
|
+
host: {
|
2013
|
+
'[class]': "cn(cx('root'), styleClass)",
|
2014
|
+
'[attr.id]': 'id',
|
2015
|
+
'(click)': 'onContainerClick($event)'
|
2016
|
+
},
|
2017
|
+
providers: [SELECT_VALUE_ACCESSOR, SelectStyle],
|
2018
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
2019
|
+
encapsulation: ViewEncapsulation.None
|
2020
|
+
}]
|
2021
|
+
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i2.FilterService }], propDecorators: { id: [{
|
2022
|
+
type: Input
|
2023
|
+
}], scrollHeight: [{
|
2024
|
+
type: Input
|
2025
|
+
}], filter: [{
|
2026
|
+
type: Input,
|
2027
|
+
args: [{ transform: booleanAttribute }]
|
2028
|
+
}], panelStyle: [{
|
2029
|
+
type: Input
|
2030
|
+
}], styleClass: [{
|
2031
|
+
type: Input
|
2032
|
+
}], panelStyleClass: [{
|
2033
|
+
type: Input
|
2034
|
+
}], readonly: [{
|
2035
|
+
type: Input,
|
2036
|
+
args: [{ transform: booleanAttribute }]
|
2037
|
+
}], editable: [{
|
2038
|
+
type: Input,
|
2039
|
+
args: [{ transform: booleanAttribute }]
|
2040
|
+
}], tabindex: [{
|
2041
|
+
type: Input,
|
2042
|
+
args: [{ transform: numberAttribute }]
|
2043
|
+
}], placeholder: [{
|
2044
|
+
type: Input
|
2045
|
+
}], loadingIcon: [{
|
2046
|
+
type: Input
|
2047
|
+
}], filterPlaceholder: [{
|
2048
|
+
type: Input
|
2049
|
+
}], filterLocale: [{
|
2050
|
+
type: Input
|
2051
|
+
}], inputId: [{
|
2052
|
+
type: Input
|
2053
|
+
}], dataKey: [{
|
2054
|
+
type: Input
|
2055
|
+
}], filterBy: [{
|
2056
|
+
type: Input
|
2057
|
+
}], filterFields: [{
|
2058
|
+
type: Input
|
2059
|
+
}], autofocus: [{
|
2060
|
+
type: Input,
|
2061
|
+
args: [{ transform: booleanAttribute }]
|
2062
|
+
}], resetFilterOnHide: [{
|
2063
|
+
type: Input,
|
2064
|
+
args: [{ transform: booleanAttribute }]
|
2065
|
+
}], checkmark: [{
|
2066
|
+
type: Input,
|
2067
|
+
args: [{ transform: booleanAttribute }]
|
2068
|
+
}], dropdownIcon: [{
|
2069
|
+
type: Input
|
2070
|
+
}], loading: [{
|
2071
|
+
type: Input,
|
2072
|
+
args: [{ transform: booleanAttribute }]
|
2073
|
+
}], optionLabel: [{
|
2074
|
+
type: Input
|
2075
|
+
}], optionValue: [{
|
2076
|
+
type: Input
|
2077
|
+
}], optionDisabled: [{
|
2078
|
+
type: Input
|
2079
|
+
}], optionGroupLabel: [{
|
2080
|
+
type: Input
|
2081
|
+
}], optionGroupChildren: [{
|
2082
|
+
type: Input
|
2083
|
+
}], group: [{
|
2084
|
+
type: Input,
|
2085
|
+
args: [{ transform: booleanAttribute }]
|
2086
|
+
}], showClear: [{
|
2087
|
+
type: Input,
|
2088
|
+
args: [{ transform: booleanAttribute }]
|
2089
|
+
}], emptyFilterMessage: [{
|
2090
|
+
type: Input
|
2091
|
+
}], emptyMessage: [{
|
2092
|
+
type: Input
|
2093
|
+
}], lazy: [{
|
2094
|
+
type: Input,
|
2095
|
+
args: [{ transform: booleanAttribute }]
|
2096
|
+
}], virtualScroll: [{
|
2097
|
+
type: Input,
|
2098
|
+
args: [{ transform: booleanAttribute }]
|
2099
|
+
}], virtualScrollItemSize: [{
|
2100
|
+
type: Input,
|
2101
|
+
args: [{ transform: numberAttribute }]
|
2102
|
+
}], virtualScrollOptions: [{
|
2103
|
+
type: Input
|
2104
|
+
}], overlayOptions: [{
|
2105
|
+
type: Input
|
2106
|
+
}], ariaFilterLabel: [{
|
2107
|
+
type: Input
|
2108
|
+
}], ariaLabel: [{
|
2109
|
+
type: Input
|
2110
|
+
}], ariaLabelledBy: [{
|
2111
|
+
type: Input
|
2112
|
+
}], filterMatchMode: [{
|
2113
|
+
type: Input
|
2114
|
+
}], tooltip: [{
|
2115
|
+
type: Input
|
2116
|
+
}], tooltipPosition: [{
|
2117
|
+
type: Input
|
2118
|
+
}], tooltipPositionStyle: [{
|
2119
|
+
type: Input
|
2120
|
+
}], tooltipStyleClass: [{
|
2121
|
+
type: Input
|
2122
|
+
}], focusOnHover: [{
|
2123
|
+
type: Input,
|
2124
|
+
args: [{ transform: booleanAttribute }]
|
2125
|
+
}], selectOnFocus: [{
|
2126
|
+
type: Input,
|
2127
|
+
args: [{ transform: booleanAttribute }]
|
2128
|
+
}], autoOptionFocus: [{
|
2129
|
+
type: Input,
|
2130
|
+
args: [{ transform: booleanAttribute }]
|
2131
|
+
}], autofocusFilter: [{
|
2132
|
+
type: Input,
|
2133
|
+
args: [{ transform: booleanAttribute }]
|
2134
|
+
}], filterValue: [{
|
2135
|
+
type: Input
|
2136
|
+
}], options: [{
|
2137
|
+
type: Input
|
2138
|
+
}], onChange: [{
|
2139
|
+
type: Output
|
2140
|
+
}], onFilter: [{
|
2141
|
+
type: Output
|
2142
|
+
}], onFocus: [{
|
2143
|
+
type: Output
|
2144
|
+
}], onBlur: [{
|
2145
|
+
type: Output
|
2146
|
+
}], onClick: [{
|
2147
|
+
type: Output
|
2148
|
+
}], onShow: [{
|
2149
|
+
type: Output
|
2150
|
+
}], onHide: [{
|
2151
|
+
type: Output
|
2152
|
+
}], onClear: [{
|
2153
|
+
type: Output
|
2154
|
+
}], onLazyLoad: [{
|
2155
|
+
type: Output
|
2156
|
+
}], filterViewChild: [{
|
2157
|
+
type: ViewChild,
|
2158
|
+
args: ['filter']
|
2159
|
+
}], focusInputViewChild: [{
|
2160
|
+
type: ViewChild,
|
2161
|
+
args: ['focusInput']
|
2162
|
+
}], editableInputViewChild: [{
|
2163
|
+
type: ViewChild,
|
2164
|
+
args: ['editableInput']
|
2165
|
+
}], itemsViewChild: [{
|
2166
|
+
type: ViewChild,
|
2167
|
+
args: ['items']
|
2168
|
+
}], scroller: [{
|
2169
|
+
type: ViewChild,
|
2170
|
+
args: ['scroller']
|
2171
|
+
}], overlayViewChild: [{
|
2172
|
+
type: ViewChild,
|
2173
|
+
args: ['overlay']
|
2174
|
+
}], firstHiddenFocusableElementOnOverlay: [{
|
2175
|
+
type: ViewChild,
|
2176
|
+
args: ['firstHiddenFocusableEl']
|
2177
|
+
}], lastHiddenFocusableElementOnOverlay: [{
|
2178
|
+
type: ViewChild,
|
2179
|
+
args: ['lastHiddenFocusableEl']
|
2180
|
+
}], itemTemplate: [{
|
2181
|
+
type: ContentChild,
|
2182
|
+
args: ['item', { descendants: false }]
|
2183
|
+
}], groupTemplate: [{
|
2184
|
+
type: ContentChild,
|
2185
|
+
args: ['group', { descendants: false }]
|
2186
|
+
}], loaderTemplate: [{
|
2187
|
+
type: ContentChild,
|
2188
|
+
args: ['loader', { descendants: false }]
|
2189
|
+
}], selectedItemTemplate: [{
|
2190
|
+
type: ContentChild,
|
2191
|
+
args: ['selectedItem', { descendants: false }]
|
2192
|
+
}], headerTemplate: [{
|
2193
|
+
type: ContentChild,
|
2194
|
+
args: ['header', { descendants: false }]
|
2195
|
+
}], filterTemplate: [{
|
2196
|
+
type: ContentChild,
|
2197
|
+
args: ['filter', { descendants: false }]
|
2198
|
+
}], footerTemplate: [{
|
2199
|
+
type: ContentChild,
|
2200
|
+
args: ['footer', { descendants: false }]
|
2201
|
+
}], emptyFilterTemplate: [{
|
2202
|
+
type: ContentChild,
|
2203
|
+
args: ['emptyfilter', { descendants: false }]
|
2204
|
+
}], emptyTemplate: [{
|
2205
|
+
type: ContentChild,
|
2206
|
+
args: ['empty', { descendants: false }]
|
2207
|
+
}], dropdownIconTemplate: [{
|
2208
|
+
type: ContentChild,
|
2209
|
+
args: ['dropdownicon', { descendants: false }]
|
2210
|
+
}], loadingIconTemplate: [{
|
2211
|
+
type: ContentChild,
|
2212
|
+
args: ['loadingicon', { descendants: false }]
|
2213
|
+
}], clearIconTemplate: [{
|
2214
|
+
type: ContentChild,
|
2215
|
+
args: ['clearicon', { descendants: false }]
|
2216
|
+
}], filterIconTemplate: [{
|
2217
|
+
type: ContentChild,
|
2218
|
+
args: ['filtericon', { descendants: false }]
|
2219
|
+
}], onIconTemplate: [{
|
2220
|
+
type: ContentChild,
|
2221
|
+
args: ['onicon', { descendants: false }]
|
2222
|
+
}], offIconTemplate: [{
|
2223
|
+
type: ContentChild,
|
2224
|
+
args: ['officon', { descendants: false }]
|
2225
|
+
}], cancelIconTemplate: [{
|
2226
|
+
type: ContentChild,
|
2227
|
+
args: ['cancelicon', { descendants: false }]
|
2228
|
+
}], templates: [{
|
2229
|
+
type: ContentChildren,
|
2230
|
+
args: [PrimeTemplate]
|
2231
|
+
}] } });
|
2232
|
+
class SelectModule {
|
2233
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
2234
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: SelectModule, imports: [Select, SharedModule], exports: [Select, SharedModule] });
|
2235
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectModule, imports: [Select, SharedModule, SharedModule] });
|
2236
|
+
}
|
2237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectModule, decorators: [{
|
2238
|
+
type: NgModule,
|
2239
|
+
args: [{
|
2240
|
+
imports: [Select, SharedModule],
|
2241
|
+
exports: [Select, SharedModule]
|
2242
|
+
}]
|
2243
|
+
}] });
|
2244
|
+
|
2245
|
+
/**
|
2246
|
+
* Generated bundle index. Do not edit.
|
2247
|
+
*/
|
2248
|
+
|
2249
|
+
export { SELECT_VALUE_ACCESSOR, Select, SelectClasses, SelectItem, SelectModule, SelectStyle };
|
2250
|
+
//# sourceMappingURL=primeng-select.mjs.map
|