@lucca-front/ng 22.0.0-rc.4 → 22.0.0
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/README.md +1 -1
- package/fesm2022/lucca-front-ng-a11y.mjs +10 -10
- package/fesm2022/lucca-front-ng-a11y.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-activity-feed.mjs +14 -14
- package/fesm2022/lucca-front-ng-activity-feed.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-api.mjs +40 -40
- package/fesm2022/lucca-front-ng-app-layout.mjs +7 -6
- package/fesm2022/lucca-front-ng-app-layout.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-approbation-inbox.mjs +517 -0
- package/fesm2022/lucca-front-ng-approbation-inbox.mjs.map +1 -0
- package/fesm2022/lucca-front-ng-box.mjs +12 -12
- package/fesm2022/lucca-front-ng-box.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-breadcrumbs.mjs +9 -9
- package/fesm2022/lucca-front-ng-breadcrumbs.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-bubble-icon.mjs +4 -4
- package/fesm2022/lucca-front-ng-bubble-icon.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-bubble-illustration.mjs +7 -6
- package/fesm2022/lucca-front-ng-bubble-illustration.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-callout.mjs +38 -38
- package/fesm2022/lucca-front-ng-callout.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-chip.mjs +10 -10
- package/fesm2022/lucca-front-ng-chip.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-clear.mjs +7 -7
- package/fesm2022/lucca-front-ng-clear.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-code.mjs +6 -5
- package/fesm2022/lucca-front-ng-code.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-color.mjs +7 -6
- package/fesm2022/lucca-front-ng-color.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-comment.mjs +18 -17
- package/fesm2022/lucca-front-ng-comment.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-container.mjs +8 -7
- package/fesm2022/lucca-front-ng-container.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-api.mjs +17 -40
- package/fesm2022/lucca-front-ng-core-select-api.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-department.mjs +18 -20
- package/fesm2022/lucca-front-ng-core-select-department.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-establishment.mjs +28 -16
- package/fesm2022/lucca-front-ng-core-select-establishment.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-job-qualification.mjs +19 -9
- package/fesm2022/lucca-front-ng-core-select-job-qualification.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-legal-units.mjs +34 -21
- package/fesm2022/lucca-front-ng-core-select-legal-units.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-occupation-category.mjs +16 -6
- package/fesm2022/lucca-front-ng-core-select-occupation-category.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-user.mjs +41 -36
- package/fesm2022/lucca-front-ng-core-select-user.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select.mjs +252 -114
- package/fesm2022/lucca-front-ng-core-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core.mjs +113 -38
- package/fesm2022/lucca-front-ng-core.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-data-table.mjs +50 -50
- package/fesm2022/lucca-front-ng-data-table.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-date.mjs +42 -43
- package/fesm2022/lucca-front-ng-date.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-date2.mjs +50 -48
- package/fesm2022/lucca-front-ng-date2.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-department.mjs +28 -27
- package/fesm2022/lucca-front-ng-department.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-dialog.mjs +85 -59
- package/fesm2022/lucca-front-ng-dialog.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-divider.mjs +9 -9
- package/fesm2022/lucca-front-ng-divider.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-dropdown.mjs +46 -46
- package/fesm2022/lucca-front-ng-dropdown.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-empty-state.mjs +56 -31
- package/fesm2022/lucca-front-ng-empty-state.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-error-page.mjs +4 -4
- package/fesm2022/lucca-front-ng-error-page.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-establishment.mjs +38 -37
- package/fesm2022/lucca-front-ng-establishment.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-fancy-box.mjs +4 -4
- package/fesm2022/lucca-front-ng-fancy-box.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-file-upload.mjs +86 -48
- package/fesm2022/lucca-front-ng-file-upload.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-filter-pills.mjs +150 -27
- package/fesm2022/lucca-front-ng-filter-pills.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-footer.mjs +10 -9
- package/fesm2022/lucca-front-ng-footer.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-form-field.mjs +35 -36
- package/fesm2022/lucca-front-ng-form-field.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-form-header.mjs +5 -5
- package/fesm2022/lucca-front-ng-form-header.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-form-label.mjs +19 -52
- package/fesm2022/lucca-front-ng-form-label.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-form.mjs +9 -8
- package/fesm2022/lucca-front-ng-form.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-formly.mjs +64 -64
- package/fesm2022/lucca-front-ng-formly.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms-phone-number-input.mjs +8 -8
- package/fesm2022/lucca-front-ng-forms-phone-number-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms-rich-text-input-formatters-html.mjs +3 -3
- package/fesm2022/lucca-front-ng-forms-rich-text-input-formatters-markdown.mjs +6 -6
- package/fesm2022/lucca-front-ng-forms-rich-text-input-formatters-plain-text.mjs +3 -3
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs +68 -55
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms.mjs +127 -113
- package/fesm2022/lucca-front-ng-forms.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-gauge.mjs +11 -11
- package/fesm2022/lucca-front-ng-gauge.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-grid.mjs +18 -17
- package/fesm2022/lucca-front-ng-grid.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-highlight-data.mjs +11 -18
- package/fesm2022/lucca-front-ng-highlight-data.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-highlight-section.mjs +85 -0
- package/fesm2022/lucca-front-ng-highlight-section.mjs.map +1 -0
- package/fesm2022/lucca-front-ng-highlight-text.mjs +3 -3
- package/fesm2022/lucca-front-ng-horizontal-navigation.mjs +17 -17
- package/fesm2022/lucca-front-ng-horizontal-navigation.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-impersonation.mjs +7 -7
- package/fesm2022/lucca-front-ng-impersonation.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-index-table.mjs +50 -50
- package/fesm2022/lucca-front-ng-index-table.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-inline-message.mjs +6 -6
- package/fesm2022/lucca-front-ng-inline-message.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-input.mjs +22 -22
- package/fesm2022/lucca-front-ng-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-link.mjs +24 -16
- package/fesm2022/lucca-front-ng-link.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-listbox.mjs +67 -33
- package/fesm2022/lucca-front-ng-listbox.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-listing.mjs +17 -16
- package/fesm2022/lucca-front-ng-listing.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-loading.mjs +8 -8
- package/fesm2022/lucca-front-ng-loading.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-main-layout.mjs +131 -15
- package/fesm2022/lucca-front-ng-main-layout.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-mobile-push.mjs +3 -3
- package/fesm2022/lucca-front-ng-mobile-push.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-modal.mjs +27 -27
- package/fesm2022/lucca-front-ng-modal.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-multi-select.mjs +216 -135
- package/fesm2022/lucca-front-ng-multi-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-new-badge.mjs +3 -3
- package/fesm2022/lucca-front-ng-number-format.mjs +6 -6
- package/fesm2022/lucca-front-ng-number.mjs +7 -7
- package/fesm2022/lucca-front-ng-numeric-badge.mjs +1 -84
- package/fesm2022/lucca-front-ng-numeric-badge.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-option.mjs +145 -139
- package/fesm2022/lucca-front-ng-option.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-page-header.mjs +8 -8
- package/fesm2022/lucca-front-ng-page-header.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-pagination.mjs +13 -16
- package/fesm2022/lucca-front-ng-pagination.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-plg-push.mjs +6 -6
- package/fesm2022/lucca-front-ng-plg-push.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-popover.mjs +17 -17
- package/fesm2022/lucca-front-ng-popover2.mjs +15 -16
- package/fesm2022/lucca-front-ng-popover2.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-popup.mjs +10 -10
- package/fesm2022/lucca-front-ng-progress-bar.mjs +8 -7
- package/fesm2022/lucca-front-ng-progress-bar.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-progress-stepper.mjs +9 -9
- package/fesm2022/lucca-front-ng-progress-stepper.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-read-more.mjs +17 -12
- package/fesm2022/lucca-front-ng-read-more.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-resource-card.mjs +21 -20
- package/fesm2022/lucca-front-ng-resource-card.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-safe-content.mjs +10 -10
- package/fesm2022/lucca-front-ng-scroll-box.mjs +6 -5
- package/fesm2022/lucca-front-ng-scroll-box.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-scroll.mjs +9 -9
- package/fesm2022/lucca-front-ng-scroll.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-segmented-control-tabs.mjs +12 -12
- package/fesm2022/lucca-front-ng-segmented-control-tabs.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-segmented-control.mjs +17 -14
- package/fesm2022/lucca-front-ng-segmented-control.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-select.mjs +22 -22
- package/fesm2022/lucca-front-ng-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-sidepanel.mjs +7 -7
- package/fesm2022/lucca-front-ng-simple-select.mjs +53 -39
- package/fesm2022/lucca-front-ng-simple-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-skeleton.mjs +1 -237
- package/fesm2022/lucca-front-ng-skeleton.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-software-icon-wrapper.mjs +11 -11
- package/fesm2022/lucca-front-ng-software-icon-wrapper.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-software-icon.mjs +8 -7
- package/fesm2022/lucca-front-ng-software-icon.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-sortable-list.mjs +13 -13
- package/fesm2022/lucca-front-ng-sortable-list.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-status-badge.mjs +6 -6
- package/fesm2022/lucca-front-ng-status-badge.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-table-of-content.mjs +6 -6
- package/fesm2022/lucca-front-ng-tag.mjs +1 -72
- package/fesm2022/lucca-front-ng-tag.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-text-flow.mjs +4 -4
- package/fesm2022/lucca-front-ng-text-flow.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-time.mjs +46 -47
- package/fesm2022/lucca-front-ng-time.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-title.mjs +24 -14
- package/fesm2022/lucca-front-ng-title.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-toast.mjs +13 -14
- package/fesm2022/lucca-front-ng-toast.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-tooltip.mjs +1 -556
- package/fesm2022/lucca-front-ng-tooltip.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-tree-select.mjs +58 -42
- package/fesm2022/lucca-front-ng-tree-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-user-popover.mjs +22 -19
- package/fesm2022/lucca-front-ng-user-popover.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-user.mjs +75 -73
- package/fesm2022/lucca-front-ng-user.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-vertical-navigation.mjs +21 -22
- package/fesm2022/lucca-front-ng-vertical-navigation.mjs.map +1 -1
- package/package.json +12 -4
- package/schematics/action-icon/migration.spec.js +2 -2
- package/schematics/alignment-utilities/migration.spec.js +2 -2
- package/schematics/cdn-urls/migration.spec.js +2 -2
- package/schematics/class-prefix/migration.spec.js +2 -2
- package/schematics/color-text/migration.spec.js +2 -2
- package/schematics/component-path/migration.spec.js +2 -2
- package/schematics/deprecated-resolver/migration.spec.js +1 -1
- package/schematics/empty-state-title/migration.spec.js +1 -1
- package/schematics/lib/migration-test.js +6 -1
- package/schematics/lu-button/migration.spec.js +1 -1
- package/schematics/lu-container/migration.spec.js +1 -1
- package/schematics/lu-grid/migration.js +24 -16
- package/schematics/lu-grid/migration.spec.js +1 -1
- package/schematics/lu-icon/migration.spec.js +1 -1
- package/schematics/lu-loading/migration.spec.js +1 -1
- package/schematics/lu-select/migration.spec.js +1 -1
- package/schematics/lu-text-input/migration.spec.js +1 -1
- package/schematics/new-icons/migration.spec.js +2 -2
- package/schematics/palettes/index.js +28 -8
- package/schematics/palettes/migration.spec.js +2 -2
- package/schematics/tokens-radius/migration.spec.js +2 -2
- package/schematics/tokens-spacing/migration.spec.js +2 -2
- package/schematics/tokens-typo/migration.spec.js +2 -2
- package/src/_components.scss +1 -0
- package/src/components/_listbox.scss +8 -0
- package/src/components/_picker.scss +0 -34
- package/src/components/_popover.scss +1 -1
- package/src/components/_popup.scss +6 -6
- package/src/components/_sidepanel.scss +1 -1
- package/src/definitions/option/_option-item.scss +1 -8
- package/title/README.md +22 -7
- package/types/lucca-front-ng-app-layout.d.ts +1 -1
- package/types/lucca-front-ng-approbation-inbox.d.ts +142 -0
- package/types/lucca-front-ng-box.d.ts +4 -4
- package/types/lucca-front-ng-breadcrumbs.d.ts +1 -1
- package/types/lucca-front-ng-bubble-icon.d.ts +1 -1
- package/types/lucca-front-ng-bubble-illustration.d.ts +1 -1
- package/types/lucca-front-ng-callout.d.ts +9 -9
- package/types/lucca-front-ng-chip.d.ts +3 -3
- package/types/lucca-front-ng-clear.d.ts +2 -2
- package/types/lucca-front-ng-code.d.ts +1 -1
- package/types/lucca-front-ng-color.d.ts +1 -1
- package/types/lucca-front-ng-comment.d.ts +6 -5
- package/types/lucca-front-ng-container.d.ts +2 -2
- package/types/lucca-front-ng-core-select-api.d.ts +10 -4
- package/types/lucca-front-ng-core-select-department.d.ts +2 -2
- package/types/lucca-front-ng-core-select-establishment.d.ts +3 -1
- package/types/lucca-front-ng-core-select-job-qualification.d.ts +2 -0
- package/types/lucca-front-ng-core-select-legal-units.d.ts +3 -1
- package/types/lucca-front-ng-core-select-occupation-category.d.ts +2 -0
- package/types/lucca-front-ng-core-select-user.d.ts +4 -3
- package/types/lucca-front-ng-core-select.d.ts +82 -16
- package/types/lucca-front-ng-core.d.ts +77 -3
- package/types/lucca-front-ng-data-table.d.ts +14 -14
- package/types/lucca-front-ng-date.d.ts +1 -1
- package/types/lucca-front-ng-date2.d.ts +19 -19
- package/types/lucca-front-ng-department.d.ts +2 -2
- package/types/lucca-front-ng-dialog.d.ts +7 -6
- package/types/lucca-front-ng-divider.d.ts +3 -3
- package/types/lucca-front-ng-dropdown.d.ts +2 -2
- package/types/lucca-front-ng-empty-state.d.ts +15 -6
- package/types/lucca-front-ng-establishment.d.ts +2 -2
- package/types/lucca-front-ng-file-upload.d.ts +22 -11
- package/types/lucca-front-ng-filter-pills.d.ts +43 -3
- package/types/lucca-front-ng-footer.d.ts +4 -4
- package/types/lucca-front-ng-form-field.d.ts +10 -10
- package/types/lucca-front-ng-form-header.d.ts +1 -1
- package/types/lucca-front-ng-form-label.d.ts +5 -9
- package/types/lucca-front-ng-form.d.ts +2 -2
- package/types/lucca-front-ng-forms-phone-number-input.d.ts +5 -5
- package/types/lucca-front-ng-forms-rich-text-input.d.ts +9 -5
- package/types/lucca-front-ng-forms.d.ts +50 -37
- package/types/lucca-front-ng-gauge.d.ts +6 -6
- package/types/lucca-front-ng-grid.d.ts +8 -8
- package/types/lucca-front-ng-highlight-data.d.ts +3 -5
- package/types/lucca-front-ng-highlight-section.d.ts +44 -0
- package/types/lucca-front-ng-horizontal-navigation.d.ts +4 -4
- package/types/lucca-front-ng-impersonation.d.ts +1 -1
- package/types/lucca-front-ng-index-table.d.ts +12 -12
- package/types/lucca-front-ng-inline-message.d.ts +1 -1
- package/types/lucca-front-ng-link.d.ts +4 -4
- package/types/lucca-front-ng-listbox.d.ts +33 -13
- package/types/lucca-front-ng-listing.d.ts +9 -9
- package/types/lucca-front-ng-loading.d.ts +3 -3
- package/types/lucca-front-ng-main-layout.d.ts +40 -9
- package/types/lucca-front-ng-modal.d.ts +1 -1
- package/types/lucca-front-ng-multi-select.d.ts +33 -7
- package/types/lucca-front-ng-numeric-badge.d.ts +1 -46
- package/types/lucca-front-ng-option.d.ts +2 -0
- package/types/lucca-front-ng-page-header.d.ts +2 -2
- package/types/lucca-front-ng-pagination.d.ts +5 -5
- package/types/lucca-front-ng-plg-push.d.ts +1 -1
- package/types/lucca-front-ng-popover2.d.ts +14 -14
- package/types/lucca-front-ng-progress-bar.d.ts +2 -2
- package/types/lucca-front-ng-progress-stepper.d.ts +1 -1
- package/types/lucca-front-ng-read-more.d.ts +9 -4
- package/types/lucca-front-ng-resource-card.d.ts +6 -6
- package/types/lucca-front-ng-scroll-box.d.ts +1 -1
- package/types/lucca-front-ng-scroll.d.ts +1 -1
- package/types/lucca-front-ng-segmented-control-tabs.d.ts +2 -2
- package/types/lucca-front-ng-segmented-control.d.ts +5 -3
- package/types/lucca-front-ng-select.d.ts +2 -1
- package/types/lucca-front-ng-simple-select.d.ts +6 -5
- package/types/lucca-front-ng-skeleton.d.ts +1 -158
- package/types/lucca-front-ng-software-icon-wrapper.d.ts +3 -3
- package/types/lucca-front-ng-software-icon.d.ts +2 -2
- package/types/lucca-front-ng-sortable-list.d.ts +5 -5
- package/types/lucca-front-ng-status-badge.d.ts +1 -1
- package/types/lucca-front-ng-tag.d.ts +1 -53
- package/types/lucca-front-ng-time.d.ts +17 -17
- package/types/lucca-front-ng-title.d.ts +4 -4
- package/types/lucca-front-ng-toast.d.ts +1 -1
- package/types/lucca-front-ng-tooltip.d.ts +1 -80
- package/types/lucca-front-ng-tree-select.d.ts +3 -4
- package/types/lucca-front-ng-user.d.ts +8 -6
- package/types/lucca-front-ng-vertical-navigation.d.ts +4 -4
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, Directive, InjectionToken, inject, ChangeDetectionStrategy, Component, TemplateRef, Pipe, ViewContainerRef, Injector, DestroyRef, computed, afterRenderEffect, untracked, Injectable, ElementRef, signal, model, linkedSignal, output,
|
|
3
|
-
import { syncInputSignal, ɵeffectWithDeps as _effectWithDeps, isNotNil, intlInputOptions, isNil, PortalDirective } from '@lucca-front/ng/core';
|
|
2
|
+
import { input, Directive, InjectionToken, inject, ChangeDetectionStrategy, Component, TemplateRef, Pipe, ViewContainerRef, Injector, afterNextRender, DestroyRef, computed, afterRenderEffect, untracked, Injectable, ElementRef, signal, model, linkedSignal, output, contentChild, viewChild, ChangeDetectorRef, forwardRef, booleanAttribute, ViewEncapsulation, effect, EventEmitter, DOCUMENT, NgZone } from '@angular/core';
|
|
3
|
+
import { syncInputSignal, ɵeffectWithDeps as _effectWithDeps, isNotNil, luBooleanAttribute, intlInputOptions, luOptionalNumberAttribute, isNil, PortalDirective, luNumberAttribute } from '@lucca-front/ng/core';
|
|
4
4
|
import { OverlayContainer } from '@angular/cdk/overlay';
|
|
5
|
-
import { toObservable,
|
|
5
|
+
import { toObservable, toSignal, takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
|
|
6
6
|
import { FILTER_PILL_INPUT_COMPONENT, FILTER_PILL_HOST_COMPONENT } from '@lucca-front/ng/filter-pills';
|
|
7
|
-
import { BehaviorSubject,
|
|
8
|
-
import { AsyncPipe } from '@angular/common';
|
|
7
|
+
import { BehaviorSubject, skip, take, map, startWith, switchMap, of, distinctUntilChanged, observeOn, asyncScheduler, filter, scan, timer, concatMap, catchError, tap, takeWhile, finalize, takeUntil, ReplaySubject, Subject, defer } from 'rxjs';
|
|
8
|
+
import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
|
|
9
|
+
import { Treeitem, OptionComponent } from '@lucca-front/ng/listbox';
|
|
9
10
|
import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
|
|
10
|
-
import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
|
|
11
|
+
import { ActiveDescendantKeyManager, CdkTrapFocus } from '@angular/cdk/a11y';
|
|
11
12
|
|
|
12
13
|
class LuDisplayerDirective {
|
|
13
14
|
constructor(templateRef) {
|
|
@@ -18,10 +19,10 @@ class LuDisplayerDirective {
|
|
|
18
19
|
static ngTemplateContextGuard(_dir, _ctx) {
|
|
19
20
|
return true;
|
|
20
21
|
}
|
|
21
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
22
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.
|
|
22
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
23
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: LuDisplayerDirective, isStandalone: true, selector: "[luDisplayer]", inputs: { select: { classPropertyName: "select", publicName: "luDisplayerSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
23
24
|
}
|
|
24
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuDisplayerDirective, decorators: [{
|
|
25
26
|
type: Directive,
|
|
26
27
|
args: [{
|
|
27
28
|
selector: '[luDisplayer]',
|
|
@@ -52,12 +53,12 @@ class LuSimpleSelectDefaultOptionComponent {
|
|
|
52
53
|
constructor() {
|
|
53
54
|
this.context = inject(LU_OPTION_CONTEXT);
|
|
54
55
|
}
|
|
55
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
56
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
56
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuSimpleSelectDefaultOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
57
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuSimpleSelectDefaultOptionComponent, isStandalone: true, selector: "lu-core-select-default-option", ngImport: i0, template: "<!-- we don\u2019t want space before comma in presentation display -->\n<!-- prettier-ignore -->\n@if (context.option$ | async; as option) {{{ option?.name ?? option }}}\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
57
58
|
}
|
|
58
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuSimpleSelectDefaultOptionComponent, decorators: [{
|
|
59
60
|
type: Component,
|
|
60
|
-
args: [{ selector: 'lu-
|
|
61
|
+
args: [{ selector: 'lu-core-select-default-option', imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- we don\u2019t want space before comma in presentation display -->\n<!-- prettier-ignore -->\n@if (context.option$ | async; as option) {{{ option?.name ?? option }}}\n" }]
|
|
61
62
|
}] });
|
|
62
63
|
|
|
63
64
|
class LuDisabledOptionDirective {
|
|
@@ -66,10 +67,10 @@ class LuDisabledOptionDirective {
|
|
|
66
67
|
this.context = inject(LU_OPTION_CONTEXT);
|
|
67
68
|
syncInputSignal(this.isDisabled, (disabled) => this.context.isDisabled$.next(disabled));
|
|
68
69
|
}
|
|
69
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
70
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.
|
|
70
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuDisabledOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
71
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: LuDisabledOptionDirective, isStandalone: true, selector: "[luDisabledOption]", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "luDisabledOption", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
71
72
|
}
|
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuDisabledOptionDirective, decorators: [{
|
|
73
74
|
type: Directive,
|
|
74
75
|
args: [{
|
|
75
76
|
selector: '[luDisabledOption]',
|
|
@@ -88,10 +89,10 @@ class LuOptionGroupDirective {
|
|
|
88
89
|
select.groupingSignal.set({ selector, content: this.content });
|
|
89
90
|
});
|
|
90
91
|
}
|
|
91
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
92
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.
|
|
92
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuOptionGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
93
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: LuOptionGroupDirective, isStandalone: true, selector: "[luOptionGroup]", inputs: { select: { classPropertyName: "select", publicName: "luOptionGroupSelect", isSignal: true, isRequired: true, transformFunction: null }, selector: { classPropertyName: "selector", publicName: "luOptionGroupBy", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
93
94
|
}
|
|
94
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuOptionGroupDirective, decorators: [{
|
|
95
96
|
type: Directive,
|
|
96
97
|
args: [{
|
|
97
98
|
selector: '[luOptionGroup]',
|
|
@@ -128,10 +129,10 @@ class LuOptionGroupPipe {
|
|
|
128
129
|
transform(options, selector) {
|
|
129
130
|
return Array.isArray(options) ? generateGroups(options, selector) : generateGroups([options], selector)[0];
|
|
130
131
|
}
|
|
131
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
132
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.
|
|
132
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuOptionGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
133
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: LuOptionGroupPipe, isStandalone: true, name: "luOptionGroup" }); }
|
|
133
134
|
}
|
|
134
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
135
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuOptionGroupPipe, decorators: [{
|
|
135
136
|
type: Pipe,
|
|
136
137
|
args: [{
|
|
137
138
|
name: 'luOptionGroup',
|
|
@@ -147,8 +148,7 @@ class LuOptionOutletDirective {
|
|
|
147
148
|
...(ngDevMode ? [undefined, { debugName: "luOptionOutlet" }] : /* istanbul ignore next */ []));
|
|
148
149
|
this.luOptionOutletValue = input(/* @ts-ignore */
|
|
149
150
|
...(ngDevMode ? [undefined, { debugName: "luOptionOutletValue" }] : /* istanbul ignore next */ []));
|
|
150
|
-
this.luOptionShowNull = input(false, /*
|
|
151
|
-
...(ngDevMode ? [{ debugName: "luOptionShowNull" }] : /* istanbul ignore next */ []));
|
|
151
|
+
this.luOptionShowNull = input(false, { ...(ngDevMode ? { debugName: "luOptionShowNull" } : /* istanbul ignore next */ {}), transform: luBooleanAttribute });
|
|
152
152
|
this.viewContainerRef = inject(ViewContainerRef);
|
|
153
153
|
this.injector = inject(Injector);
|
|
154
154
|
this.optionContext = inject(LU_OPTION_CONTEXT);
|
|
@@ -193,10 +193,10 @@ class LuOptionOutletDirective {
|
|
|
193
193
|
static ngTemplateContextGuard(_dir, _ctx) {
|
|
194
194
|
return true;
|
|
195
195
|
}
|
|
196
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
197
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.
|
|
196
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuOptionOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
197
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: LuOptionOutletDirective, isStandalone: true, selector: "[luOptionOutlet]", inputs: { luOptionOutlet: { classPropertyName: "luOptionOutlet", publicName: "luOptionOutlet", isSignal: true, isRequired: false, transformFunction: null }, luOptionOutletValue: { classPropertyName: "luOptionOutletValue", publicName: "luOptionOutletValue", isSignal: true, isRequired: false, transformFunction: null }, luOptionShowNull: { classPropertyName: "luOptionShowNull", publicName: "luOptionShowNull", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideOptionContext()], ngImport: i0 }); }
|
|
198
198
|
}
|
|
199
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuOptionOutletDirective, decorators: [{
|
|
200
200
|
type: Directive,
|
|
201
201
|
args: [{
|
|
202
202
|
selector: '[luOptionOutlet]',
|
|
@@ -206,6 +206,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
206
206
|
|
|
207
207
|
const SELECT_PANEL_INSTANCE = new InjectionToken('CoreSelect:PanelInstance');
|
|
208
208
|
|
|
209
|
+
/**
|
|
210
|
+
* Scrolls an element into view once its layout has settled.
|
|
211
|
+
*
|
|
212
|
+
* When a select panel opens, its opening animation (scale transform) makes the element's visual
|
|
213
|
+
* geometry differ from its layout geometry; calling scrollIntoView at that point makes the browser
|
|
214
|
+
* compute a bogus scroll position (e.g. the panel opens scrolled partway down). This waits, frame
|
|
215
|
+
* by frame, until the element's visual height is stable before scrolling.
|
|
216
|
+
*
|
|
217
|
+
* Returns a cancel function to abort the pending scroll (e.g. when the highlight moves elsewhere).
|
|
218
|
+
*/
|
|
219
|
+
function scrollIntoViewOnceReady(element, injector, options) {
|
|
220
|
+
let rafId = null;
|
|
221
|
+
let lastHeight = -1;
|
|
222
|
+
const renderRef = afterNextRender(() => {
|
|
223
|
+
const tryScroll = () => {
|
|
224
|
+
rafId = null;
|
|
225
|
+
if (!element.isConnected) {
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
228
|
+
const { height } = element.getBoundingClientRect();
|
|
229
|
+
if (height > 0 && height === lastHeight) {
|
|
230
|
+
element.scrollIntoView(options?.());
|
|
231
|
+
}
|
|
232
|
+
else {
|
|
233
|
+
lastHeight = height;
|
|
234
|
+
rafId = requestAnimationFrame(tryScroll);
|
|
235
|
+
}
|
|
236
|
+
};
|
|
237
|
+
tryScroll();
|
|
238
|
+
}, { injector });
|
|
239
|
+
return () => {
|
|
240
|
+
renderRef.destroy();
|
|
241
|
+
if (rafId !== null) {
|
|
242
|
+
cancelAnimationFrame(rafId);
|
|
243
|
+
}
|
|
244
|
+
};
|
|
245
|
+
}
|
|
246
|
+
/**
|
|
247
|
+
* In order to avoid a blinking (and a stale option list rendered under the wrong layout)
|
|
248
|
+
* when we go from an empty clue to a clue — or back — we delay switching the group displayer
|
|
249
|
+
* location until the options have actually been updated. We keep showing `group-header` while
|
|
250
|
+
* the options are being (re)fetched, then flip to the final location on the next options emission.
|
|
251
|
+
*/
|
|
252
|
+
function getGroupTemplateLocation(hasGrouping, clue, options, searchable = true) {
|
|
253
|
+
// `toObservable` must run in an injection context, so convert every signal up front
|
|
254
|
+
// (this function is called during panel construction) rather than lazily inside `switchMap`.
|
|
255
|
+
const hasGrouping$ = toObservable(hasGrouping);
|
|
256
|
+
const clue$ = toObservable(clue);
|
|
257
|
+
const options$ = toObservable(options);
|
|
258
|
+
// Wait for the options to update (skip the current, stale emission and take the next one)
|
|
259
|
+
// before committing to the target location; meanwhile hold on `group-header`.
|
|
260
|
+
const locationOnceOptionsUpdate$ = (hasClue) => options$.pipe(skip(1), take(1), map(() => (hasClue ? 'option' : 'group-header')), startWith('group-header'));
|
|
261
|
+
const location$ = hasGrouping$.pipe(switchMap((grouping) => {
|
|
262
|
+
if (!grouping) {
|
|
263
|
+
return of('none');
|
|
264
|
+
}
|
|
265
|
+
return searchable
|
|
266
|
+
? clue$.pipe(map((value) => !!value), distinctUntilChanged(), switchMap(locationOnceOptionsUpdate$))
|
|
267
|
+
: locationOnceOptionsUpdate$(false);
|
|
268
|
+
}));
|
|
269
|
+
return toSignal(location$, { initialValue: hasGrouping() ? 'group-header' : 'none' });
|
|
270
|
+
}
|
|
271
|
+
|
|
209
272
|
class CoreSelectKeyManager {
|
|
210
273
|
#destroyRef = inject(DestroyRef);
|
|
211
274
|
#cdkKeyManager;
|
|
@@ -308,10 +371,10 @@ class CoreSelectKeyManager {
|
|
|
308
371
|
});
|
|
309
372
|
}, { injector: this.#injector });
|
|
310
373
|
}
|
|
311
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
312
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
374
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CoreSelectKeyManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
375
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CoreSelectKeyManager }); }
|
|
313
376
|
}
|
|
314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
377
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CoreSelectKeyManager, decorators: [{
|
|
315
378
|
type: Injectable
|
|
316
379
|
}] });
|
|
317
380
|
|
|
@@ -361,26 +424,33 @@ class CoreSelectPanelElement {
|
|
|
361
424
|
setInactiveStyles() {
|
|
362
425
|
this.isHighlighted.set(false);
|
|
363
426
|
}
|
|
364
|
-
|
|
427
|
+
onMouseOver(event) {
|
|
365
428
|
if (!this.#keyManager || this.disabled || !untracked(this.#panelRef.pointerNavigation)) {
|
|
366
429
|
return;
|
|
367
430
|
}
|
|
431
|
+
// Tree options nest their children inside their own host, so the event bubbles through every
|
|
432
|
+
// ancestor option. mouseover (unlike mouseenter) re-fires as the pointer moves, so activate
|
|
433
|
+
// only the option whose own row is directly under the pointer. Keying off the row — and not
|
|
434
|
+
// the host — mirrors the native `.listboxOption-content:hover`: the gap between nested options
|
|
435
|
+
// lives in the wrapper, not in any row, so hovering it must not highlight the parent.
|
|
436
|
+
const row = event.target.closest('.listboxOption-content');
|
|
437
|
+
if (!row || row.closest('[luCoreSelectPanelElement]') !== this.elementRef.nativeElement) {
|
|
438
|
+
return;
|
|
439
|
+
}
|
|
368
440
|
this.#keyManager.setActiveItemByElement(this);
|
|
369
441
|
}
|
|
370
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
371
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.
|
|
442
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CoreSelectPanelElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
443
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: CoreSelectPanelElement, isStandalone: true, selector: "[luCoreSelectPanelElement]", inputs: { elementId: { classPropertyName: "elementId", publicName: "elementId", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isSelected: "isSelectedChange", selected: "selected" }, host: { attributes: { "role": "presentation" }, listeners: { "mouseover": "onMouseOver($event)" }, properties: { "class.is-highlighted": "isHighlighted()" } }, exportAs: ["luCoreSelectPanelElement"], ngImport: i0 }); }
|
|
372
444
|
}
|
|
373
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
445
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CoreSelectPanelElement, decorators: [{
|
|
374
446
|
type: Directive,
|
|
375
447
|
args: [{
|
|
376
448
|
selector: '[luCoreSelectPanelElement]',
|
|
377
449
|
exportAs: 'luCoreSelectPanelElement',
|
|
378
450
|
host: {
|
|
379
|
-
'[attr.id]': 'idAttribute()',
|
|
380
|
-
'[attr.aria-selected]': 'isSelected()',
|
|
381
451
|
'[class.is-highlighted]': 'isHighlighted()',
|
|
382
|
-
'(
|
|
383
|
-
role: '
|
|
452
|
+
'(mouseover)': 'onMouseOver($event)',
|
|
453
|
+
role: 'presentation',
|
|
384
454
|
},
|
|
385
455
|
}]
|
|
386
456
|
}], ctorParameters: () => [], propDecorators: { elementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementId", required: false }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }, { type: i0.Output, args: ["isSelectedChange"] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
@@ -390,10 +460,10 @@ const SELECT_LABEL = new InjectionToken('LuSelectLabel');
|
|
|
390
460
|
const SELECT_LABEL_ID = new InjectionToken('LuSelectLabelId');
|
|
391
461
|
const CORE_SELECT_API_TOTAL_COUNT_PROVIDER = new InjectionToken('CoreSelectApiTotalCountProvider');
|
|
392
462
|
class ɵIsSelectedStrategy {
|
|
393
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
394
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
463
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ɵIsSelectedStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
464
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ɵIsSelectedStrategy, providedIn: 'root', useFactory: () => new DefaultIsSelectedStrategy() }); }
|
|
395
465
|
}
|
|
396
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
466
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ɵIsSelectedStrategy, decorators: [{
|
|
397
467
|
type: Injectable,
|
|
398
468
|
args: [{
|
|
399
469
|
providedIn: 'root',
|
|
@@ -425,9 +495,11 @@ const LU_OPTION_TRANSLATIONS = new InjectionToken('LuOptionTranslations', {
|
|
|
425
495
|
});
|
|
426
496
|
const luOptionTranslations = Translations$1;
|
|
427
497
|
|
|
428
|
-
|
|
498
|
+
var _a;
|
|
429
499
|
class LuOptionComponent {
|
|
430
500
|
#panelRef;
|
|
501
|
+
#parentOption;
|
|
502
|
+
#injector;
|
|
431
503
|
get id() {
|
|
432
504
|
const groupPart = this.groupIndex() === undefined ? `` : `-group-${this.groupIndex()}`;
|
|
433
505
|
return `lu-select-${this.selectId}${groupPart}-option-${this.optionIndex()}`;
|
|
@@ -443,27 +515,40 @@ class LuOptionComponent {
|
|
|
443
515
|
...(ngDevMode ? [undefined, { debugName: "option" }] : /* istanbul ignore next */ []));
|
|
444
516
|
this.grouping = input(/* @ts-ignore */
|
|
445
517
|
...(ngDevMode ? [undefined, { debugName: "grouping" }] : /* istanbul ignore next */ []));
|
|
446
|
-
this.hasChildren = input(false, { ...(ngDevMode ? { debugName: "hasChildren" } : /* istanbul ignore next */ {}), transform:
|
|
518
|
+
this.hasChildren = input(false, { ...(ngDevMode ? { debugName: "hasChildren" } : /* istanbul ignore next */ {}), transform: luBooleanAttribute });
|
|
447
519
|
this.onlyParent = output();
|
|
448
520
|
this.onlyChildren = output();
|
|
449
|
-
this.groupIndex = input(/*
|
|
450
|
-
...(ngDevMode ? [undefined, { debugName: "groupIndex" }] : /* istanbul ignore next */ []));
|
|
521
|
+
this.groupIndex = input(undefined, { ...(ngDevMode ? { debugName: "groupIndex" } : /* istanbul ignore next */ {}), transform: luOptionalNumberAttribute });
|
|
451
522
|
this.optionIndex = input.required({ ...(ngDevMode ? { debugName: "optionIndex" } : /* istanbul ignore next */ {}), transform: (value) => `${value}` });
|
|
452
523
|
this.scrollIntoViewOptions = input({}, /* @ts-ignore */
|
|
453
524
|
...(ngDevMode ? [{ debugName: "scrollIntoViewOptions" }] : /* istanbul ignore next */ []));
|
|
454
525
|
this.groupTemplateLocation = input(/* @ts-ignore */
|
|
455
526
|
...(ngDevMode ? [undefined, { debugName: "groupTemplateLocation" }] : /* istanbul ignore next */ []));
|
|
527
|
+
/**
|
|
528
|
+
* Present only when the consumer projects nested `[treeitem]` content (tree selects).
|
|
529
|
+
* Detected here — and not on the inner `lu-listbox-option` — because Angular content
|
|
530
|
+
* queries do not traverse the `ng-content` re-projection boundary.
|
|
531
|
+
*/
|
|
532
|
+
this.treeitemContent = contentChild(Treeitem, /* @ts-ignore */
|
|
533
|
+
...(ngDevMode ? [{ debugName: "treeitemContent" }] : /* istanbul ignore next */ []));
|
|
534
|
+
this.#parentOption = inject(_a, { skipSelf: true, optional: true });
|
|
535
|
+
/**
|
|
536
|
+
* Depth this option sits at, handed to the listbox option that wraps the projected
|
|
537
|
+
* `[treeitem]` children: option indentation is absolute, so the stylesheet cannot work out a
|
|
538
|
+
* depth it has no rule for, and every level below its deepest one would share an indentation.
|
|
539
|
+
*/
|
|
540
|
+
this.level = (this.#parentOption?.level ?? 0) + 1;
|
|
456
541
|
this.optionContext = viewChild(LU_OPTION_CONTEXT, /* @ts-ignore */
|
|
457
542
|
...(ngDevMode ? [{ debugName: "optionContext" }] : /* istanbul ignore next */ []));
|
|
458
543
|
this.cdr = inject(ChangeDetectorRef);
|
|
544
|
+
this.#injector = inject(Injector);
|
|
459
545
|
this.elementRef = inject(ElementRef);
|
|
460
546
|
this.selectId = inject(SELECT_ID);
|
|
461
547
|
_effectWithDeps([this.selectableItem.isHighlighted], (isHighlighted, onCleanup) => {
|
|
462
548
|
if (isHighlighted && !untracked(this.#panelRef.pointerNavigation)) {
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
onCleanup(() => clearTimeout(timeoutId));
|
|
549
|
+
// Wait for the panel layout to settle (opening animation) before scrolling,
|
|
550
|
+
// otherwise the browser computes a bogus scroll position.
|
|
551
|
+
onCleanup(scrollIntoViewOnceReady(this.elementRef.nativeElement, this.#injector, () => this.scrollIntoViewOptions()));
|
|
467
552
|
}
|
|
468
553
|
});
|
|
469
554
|
_effectWithDeps([this.optionContext], (optionContext, onCleanup) => {
|
|
@@ -485,15 +570,14 @@ class LuOptionComponent {
|
|
|
485
570
|
$event.stopPropagation();
|
|
486
571
|
}
|
|
487
572
|
}
|
|
488
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
489
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: LuOptionComponent, isStandalone: true, selector: "lu-select-option", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, optionTpl: { classPropertyName: "optionTpl", publicName: "optionTpl", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, groupIndex: { classPropertyName: "groupIndex", publicName: "groupIndex", isSignal: true, isRequired: false, transformFunction: null }, optionIndex: { classPropertyName: "optionIndex", publicName: "optionIndex", isSignal: true, isRequired: true, transformFunction: null }, scrollIntoViewOptions: { classPropertyName: "scrollIntoViewOptions", publicName: "scrollIntoViewOptions", isSignal: true, isRequired: false, transformFunction: null }, groupTemplateLocation: { classPropertyName: "groupTemplateLocation", publicName: "groupTemplateLocation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onlyParent: "onlyParent", onlyChildren: "onlyChildren" }, host: { classAttribute: "optionItem" }, viewQueries: [{ propertyName: "optionContext", first: true, predicate: LU_OPTION_CONTEXT, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"optionItem-value\" [class.is-disabled]=\"selectableItem.disabled\" (click)=\"selectOption($event)\">\n\t<ng-container *luOptionOutlet=\"optionTpl(); value: selectableItem.option()\" />\n\n\t@if (groupTemplateLocation() === \"option\") {\n\t\t@if (grouping(); as grouping) {\n\t\t\t<div class=\"optionItem-value-group\">\n\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t\t</div>\n\t\t}\n\t}\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.lu-picker-content-group :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}:host-context(.optionItem.is-highlighted) .optionItem-value.is-selected,:host-context(.optionItem.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.optionItem.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{.optionItem-value-group{color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.optionItem.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value,.archivedLegalUnitsDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:before{background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.optionItem.is-highlighted) :host-context(.mod-multiple) .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .formerEmployeeDisplayer .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .archivedLegalUnitsDisplayer .optionItem-value:not(.is-disabled):before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:before,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer mods{.is-disabled{color:var(--palettes-neutral-500);-webkit-user-select:none;user-select:none;cursor:default}.is-disabled.is-selected{background-color:var(--commons-disabled-background)}.is-disabled:hover{background-color:inherit}.optionItem-value:has(.optionItem-icon){display:flex;justify-content:space-between}}@layer components{.optionItem-icons{display:flex;gap:var(--pr-t-spacings-50)}.optionItem-icon-shape{display:block;fill:var(--palettes-neutral-500)}.optionItem-icon-shape:hover{fill:var(--palettes-neutral-800)}}\n"], dependencies: [{ kind: "directive", type: LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "pipe", type: LuOptionGroupPipe, name: "luOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
573
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
574
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuOptionComponent, isStandalone: true, selector: "lu-select-option", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, optionTpl: { classPropertyName: "optionTpl", publicName: "optionTpl", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, groupIndex: { classPropertyName: "groupIndex", publicName: "groupIndex", isSignal: true, isRequired: false, transformFunction: null }, optionIndex: { classPropertyName: "optionIndex", publicName: "optionIndex", isSignal: true, isRequired: true, transformFunction: null }, scrollIntoViewOptions: { classPropertyName: "scrollIntoViewOptions", publicName: "scrollIntoViewOptions", isSignal: true, isRequired: false, transformFunction: null }, groupTemplateLocation: { classPropertyName: "groupTemplateLocation", publicName: "groupTemplateLocation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onlyParent: "onlyParent", onlyChildren: "onlyChildren" }, queries: [{ propertyName: "treeitemContent", first: true, predicate: Treeitem, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionContext", first: true, predicate: LU_OPTION_CONTEXT, descendants: true, isSignal: true }], ngImport: i0, template: "<lu-listbox-option\n\t[checked]=\"selectableItem.isSelected()\"\n\t[hovered]=\"selectableItem.isHighlighted()\"\n\t[disabled]=\"selectableItem.disabled\"\n\t(click)=\"selectOption($event)\"\n\t[elementId]=\"selectableItem.idAttribute()\"\n\t[treeitemLevel]=\"treeitemContent() ? level : null\"\n>\n\t<ng-container [ngTemplateOutlet]=\"optionContent\" />\n\t<!-- Re-projected into the option's own wrapper, so the tree rows are stacked by the listbox\n\titself: the level has to be passed along because a content query stops at this ng-content -->\n\t<ng-content select=\"[treeitem]\" ngProjectAs=\"[treeitem]\" />\n</lu-listbox-option>\n\n<ng-template #optionContent>\n\t<div>\n\t\t<ng-container *luOptionOutlet=\"optionTpl(); value: selectableItem.option()\" />\n\n\t\t@if (groupTemplateLocation() === \"option\") {\n\t\t\t@if (grouping(); as grouping) {\n\t\t\t\t<div class=\"listboxOption-content-group\">\n\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.listboxOption[role=group] :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}:host-context(.optionItem.is-highlighted) .optionItem-value.is-selected,:host-context(.optionItem.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.optionItem.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.optionItem.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value,.archivedLegalUnitsDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:before{background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.optionItem.is-highlighted) :host-context(.mod-multiple) .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .formerEmployeeDisplayer .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .archivedLegalUnitsDisplayer .optionItem-value:not(.is-disabled):before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:before,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer components{.optionItem:not(:last-child){margin-block-end:var(--pr-t-spacings-50)}.optionItem:hover .optionItem-value{background:var(--palettes-neutral-50)}.optionItem:hover .optionItem-icons{opacity:1}.optionItem-value{padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal)}.optionItem-icons{position:absolute;inset-block-start:var(--pr-t-spacings-50);inset-inline-end:var(--pr-t-spacings-100);opacity:0;transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon{cursor:pointer;opacity:.66;margin-inline-start:var(--pr-t-spacings-100);transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon:hover{opacity:1}.optionItem-icon-shape{fill:var(--components-options-item-icon-color);inline-size:1.4rem;block-size:1.4rem}}\n"], dependencies: [{ kind: "directive", type: LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip],[prTooltip]", inputs: ["luTooltip", "prTooltip", "luTooltipEnterDelay", "prTooltipEnterDelay", "luTooltipLeaveDelay", "prTooltipLeaveDelay", "luTooltipDisabled", "prTooltipDisabled", "luTooltipOnlyForDisplay", "prTooltipOnlyForDisplay", "luTooltipPosition", "prTooltipPosition", "luTooltipWhenEllipsis", "prTooltipWhenEllipsis", "luTooltipAnchor", "prTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OptionComponent, selector: "lu-listbox-option", inputs: ["elementId", "checked", "mixed", "disabled", "hovered", "add", "group", "groupId", "select", "selectAll", "treeitemLevel"] }, { kind: "pipe", type: LuOptionGroupPipe, name: "luOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
490
575
|
}
|
|
491
|
-
|
|
576
|
+
_a = LuOptionComponent;
|
|
577
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuOptionComponent, decorators: [{
|
|
492
578
|
type: Component,
|
|
493
|
-
args: [{ selector: 'lu-select-option', host: {
|
|
494
|
-
|
|
495
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LuOptionOutletDirective, PortalDirective, LuOptionGroupPipe, LuTooltipTriggerDirective], template: "<div class=\"optionItem-value\" [class.is-disabled]=\"selectableItem.disabled\" (click)=\"selectOption($event)\">\n\t<ng-container *luOptionOutlet=\"optionTpl(); value: selectableItem.option()\" />\n\n\t@if (groupTemplateLocation() === \"option\") {\n\t\t@if (grouping(); as grouping) {\n\t\t\t<div class=\"optionItem-value-group\">\n\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t\t</div>\n\t\t}\n\t}\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.lu-picker-content-group :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}:host-context(.optionItem.is-highlighted) .optionItem-value.is-selected,:host-context(.optionItem.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.optionItem.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{.optionItem-value-group{color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.optionItem.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value,.archivedLegalUnitsDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:before{background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.optionItem.is-highlighted) :host-context(.mod-multiple) .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .formerEmployeeDisplayer .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .archivedLegalUnitsDisplayer .optionItem-value:not(.is-disabled):before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:before,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer mods{.is-disabled{color:var(--palettes-neutral-500);-webkit-user-select:none;user-select:none;cursor:default}.is-disabled.is-selected{background-color:var(--commons-disabled-background)}.is-disabled:hover{background-color:inherit}.optionItem-value:has(.optionItem-icon){display:flex;justify-content:space-between}}@layer components{.optionItem-icons{display:flex;gap:var(--pr-t-spacings-50)}.optionItem-icon-shape{display:block;fill:var(--palettes-neutral-500)}.optionItem-icon-shape:hover{fill:var(--palettes-neutral-800)}}\n"] }]
|
|
496
|
-
}], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], optionTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTpl", required: false }] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], grouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouping", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], onlyParent: [{ type: i0.Output, args: ["onlyParent"] }], onlyChildren: [{ type: i0.Output, args: ["onlyChildren"] }], groupIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupIndex", required: false }] }], optionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIndex", required: true }] }], scrollIntoViewOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollIntoViewOptions", required: false }] }], groupTemplateLocation: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTemplateLocation", required: false }] }], optionContext: [{ type: i0.ViewChild, args: [i0.forwardRef(() => LU_OPTION_CONTEXT), { isSignal: true }] }] } });
|
|
579
|
+
args: [{ selector: 'lu-select-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [LuOptionOutletDirective, PortalDirective, LuOptionGroupPipe, LuTooltipTriggerDirective, NgTemplateOutlet, OptionComponent], template: "<lu-listbox-option\n\t[checked]=\"selectableItem.isSelected()\"\n\t[hovered]=\"selectableItem.isHighlighted()\"\n\t[disabled]=\"selectableItem.disabled\"\n\t(click)=\"selectOption($event)\"\n\t[elementId]=\"selectableItem.idAttribute()\"\n\t[treeitemLevel]=\"treeitemContent() ? level : null\"\n>\n\t<ng-container [ngTemplateOutlet]=\"optionContent\" />\n\t<!-- Re-projected into the option's own wrapper, so the tree rows are stacked by the listbox\n\titself: the level has to be passed along because a content query stops at this ng-content -->\n\t<ng-content select=\"[treeitem]\" ngProjectAs=\"[treeitem]\" />\n</lu-listbox-option>\n\n<ng-template #optionContent>\n\t<div>\n\t\t<ng-container *luOptionOutlet=\"optionTpl(); value: selectableItem.option()\" />\n\n\t\t@if (groupTemplateLocation() === \"option\") {\n\t\t\t@if (grouping(); as grouping) {\n\t\t\t\t<div class=\"listboxOption-content-group\">\n\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.listboxOption[role=group] :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}:host-context(.optionItem.is-highlighted) .optionItem-value.is-selected,:host-context(.optionItem.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.optionItem.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.optionItem.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value,.archivedLegalUnitsDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:before{background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.optionItem.is-highlighted) :host-context(.mod-multiple) .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .formerEmployeeDisplayer .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .archivedLegalUnitsDisplayer .optionItem-value:not(.is-disabled):before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:before,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer components{.optionItem:not(:last-child){margin-block-end:var(--pr-t-spacings-50)}.optionItem:hover .optionItem-value{background:var(--palettes-neutral-50)}.optionItem:hover .optionItem-icons{opacity:1}.optionItem-value{padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal)}.optionItem-icons{position:absolute;inset-block-start:var(--pr-t-spacings-50);inset-inline-end:var(--pr-t-spacings-100);opacity:0;transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon{cursor:pointer;opacity:.66;margin-inline-start:var(--pr-t-spacings-100);transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon:hover{opacity:1}.optionItem-icon-shape{fill:var(--components-options-item-icon-color);inline-size:1.4rem;block-size:1.4rem}}\n"] }]
|
|
580
|
+
}], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], optionTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTpl", required: false }] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], grouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouping", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], onlyParent: [{ type: i0.Output, args: ["onlyParent"] }], onlyChildren: [{ type: i0.Output, args: ["onlyChildren"] }], groupIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupIndex", required: false }] }], optionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIndex", required: true }] }], scrollIntoViewOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollIntoViewOptions", required: false }] }], groupTemplateLocation: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTemplateLocation", required: false }] }], treeitemContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Treeitem), { isSignal: true }] }], optionContext: [{ type: i0.ViewChild, args: [i0.forwardRef(() => LU_OPTION_CONTEXT), { isSignal: true }] }] } });
|
|
497
581
|
|
|
498
582
|
class LuOptionDirective {
|
|
499
583
|
constructor(templateRef) {
|
|
@@ -504,10 +588,10 @@ class LuOptionDirective {
|
|
|
504
588
|
static ngTemplateContextGuard(_dir, _ctx) {
|
|
505
589
|
return true;
|
|
506
590
|
}
|
|
507
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
508
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.
|
|
591
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
592
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: LuOptionDirective, isStandalone: true, selector: "[luOption]", inputs: { select: { classPropertyName: "select", publicName: "luOptionSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
509
593
|
}
|
|
510
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
594
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuOptionDirective, decorators: [{
|
|
511
595
|
type: Directive,
|
|
512
596
|
args: [{
|
|
513
597
|
selector: '[luOption]',
|
|
@@ -630,7 +714,7 @@ class ALuSelectInputComponent {
|
|
|
630
714
|
this.labelId = inject(SELECT_LABEL_ID);
|
|
631
715
|
this.filterPillHost = inject(FILTER_PILL_HOST_COMPONENT, { optional: true });
|
|
632
716
|
this.filterPillMode = false;
|
|
633
|
-
this.ignorePresentation = input(false, { ...(ngDevMode ? { debugName: "ignorePresentation" } : /* istanbul ignore next */ {}), transform:
|
|
717
|
+
this.ignorePresentation = input(false, { ...(ngDevMode ? { debugName: "ignorePresentation" } : /* istanbul ignore next */ {}), transform: luBooleanAttribute });
|
|
634
718
|
this.panelClosed = output();
|
|
635
719
|
this.panelOpened = output();
|
|
636
720
|
this.highlightedOption = output();
|
|
@@ -642,7 +726,7 @@ class ALuSelectInputComponent {
|
|
|
642
726
|
...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
643
727
|
this.placeholder = input(/* @ts-ignore */
|
|
644
728
|
...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
645
|
-
this.clearableInput = input(null, { ...(ngDevMode ? { debugName: "clearableInput" } : /* istanbul ignore next */ {}), transform:
|
|
729
|
+
this.clearableInput = input(null, { ...(ngDevMode ? { debugName: "clearableInput" } : /* istanbul ignore next */ {}), transform: luBooleanAttribute, alias: 'clearable' });
|
|
646
730
|
this.isClearable = computed(() => this.clearableInput() ?? this.#defaultFilterPillClearable() ?? this.#defaultClearable, /* @ts-ignore */
|
|
647
731
|
...(ngDevMode ? [{ debugName: "isClearable" }] : /* istanbul ignore next */ []));
|
|
648
732
|
this.#defaultFilterPillClearable = signal(null, /* @ts-ignore */
|
|
@@ -664,11 +748,10 @@ class ALuSelectInputComponent {
|
|
|
664
748
|
this.optionsInput = input(null, { ...(ngDevMode ? { debugName: "optionsInput" } : /* istanbul ignore next */ {}), alias: 'options' });
|
|
665
749
|
this.optionComparerInput = input(coreSelectDefaultOptionComparer, { ...(ngDevMode ? { debugName: "optionComparerInput" } : /* istanbul ignore next */ {}), alias: 'optionComparer' });
|
|
666
750
|
this.optionKeyInput = input(coreSelectDefaultOptionKey, { ...(ngDevMode ? { debugName: "optionKeyInput" } : /* istanbul ignore next */ {}), alias: 'optionKey' });
|
|
667
|
-
this.noClueIcon = input(false, { ...(ngDevMode ? { debugName: "noClueIcon" } : /* istanbul ignore next */ {}), transform:
|
|
668
|
-
this.inputTabindex = input(0, /*
|
|
669
|
-
...(ngDevMode ?
|
|
670
|
-
this.
|
|
671
|
-
this.colorPicker = input(false, { ...(ngDevMode ? { debugName: "colorPicker" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
751
|
+
this.noClueIcon = input(false, { ...(ngDevMode ? { debugName: "noClueIcon" } : /* istanbul ignore next */ {}), transform: luBooleanAttribute });
|
|
752
|
+
this.inputTabindex = input(0, { ...(ngDevMode ? { debugName: "inputTabindex" } : /* istanbul ignore next */ {}), transform: luNumberAttribute });
|
|
753
|
+
this.compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: luBooleanAttribute });
|
|
754
|
+
this.colorPicker = input(false, { ...(ngDevMode ? { debugName: "colorPicker" } : /* istanbul ignore next */ {}), transform: luBooleanAttribute });
|
|
672
755
|
this.options = linkedSignal(() => this.optionsInput(), /* @ts-ignore */
|
|
673
756
|
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
674
757
|
this.loading = linkedSignal(() => this.loadingInput(), /* @ts-ignore */
|
|
@@ -729,6 +812,9 @@ class ALuSelectInputComponent {
|
|
|
729
812
|
})));
|
|
730
813
|
this.destroyed$ = new Subject();
|
|
731
814
|
this.injector = inject(Injector);
|
|
815
|
+
// Re-entrancy guard: opening the panel (focus, clueChanged, overlay creation) can synchronously
|
|
816
|
+
// trigger openPanel again, which used to cause a double tap.
|
|
817
|
+
this.#isOpeningPanel = false;
|
|
732
818
|
if (this.filterPillHost) {
|
|
733
819
|
this.filterPillHost.registerInput(this);
|
|
734
820
|
}
|
|
@@ -839,24 +925,16 @@ class ALuSelectInputComponent {
|
|
|
839
925
|
this.updateValue(null, true);
|
|
840
926
|
this.inputElementRef()?.nativeElement.focus();
|
|
841
927
|
}
|
|
928
|
+
// Re-entrancy guard: opening the panel (focus, clueChanged, overlay creation) can synchronously
|
|
929
|
+
// trigger openPanel again, which used to cause a double tap.
|
|
930
|
+
#isOpeningPanel;
|
|
842
931
|
openPanel(clue = '') {
|
|
843
|
-
if (this.filterPillMode || this.isPanelOpen || this.disabled$.value) {
|
|
932
|
+
if (this.filterPillMode || this.isPanelOpen || this.disabled$.value || this.#isOpeningPanel) {
|
|
844
933
|
return;
|
|
845
934
|
}
|
|
846
|
-
this
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
*
|
|
850
|
-
* When setting isPanelOpen$'s internal value to true and then calling clueChanged,
|
|
851
|
-
* it creates a race condition which calls this method again from inside clueChanged's code before
|
|
852
|
-
* the change is applied inside the Subject, meaning this is called twice and we get a double tap.
|
|
853
|
-
*
|
|
854
|
-
* The only easy solution is this (or store yet another boolean like "isOpeningPanel" which is, imo, equally ugly.
|
|
855
|
-
*/
|
|
856
|
-
setTimeout(() => {
|
|
857
|
-
if (this.isPanelOpen) {
|
|
858
|
-
return;
|
|
859
|
-
}
|
|
935
|
+
this.#isOpeningPanel = true;
|
|
936
|
+
try {
|
|
937
|
+
this.focusInput();
|
|
860
938
|
const isSearchable = this.searchable;
|
|
861
939
|
this.isPanelOpen$.next(true);
|
|
862
940
|
this.panelOpened.emit();
|
|
@@ -865,7 +943,10 @@ class ALuSelectInputComponent {
|
|
|
865
943
|
}
|
|
866
944
|
this._panelRef = this.buildPanelRef();
|
|
867
945
|
this.bindInputToPanelRefEvents();
|
|
868
|
-
}
|
|
946
|
+
}
|
|
947
|
+
finally {
|
|
948
|
+
this.#isOpeningPanel = false;
|
|
949
|
+
}
|
|
869
950
|
}
|
|
870
951
|
emitAddOption() {
|
|
871
952
|
this.addOption.emit(this.clue ?? '');
|
|
@@ -946,10 +1027,10 @@ class ALuSelectInputComponent {
|
|
|
946
1027
|
onFilterPillClosed() {
|
|
947
1028
|
this.isPanelOpen$.next(false);
|
|
948
1029
|
}
|
|
949
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
950
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.
|
|
1030
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ALuSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1031
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.8", type: ALuSelectInputComponent, isStandalone: true, inputs: { ignorePresentation: { classPropertyName: "ignorePresentation", publicName: "ignorePresentation", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearableInput: { classPropertyName: "clearableInput", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, addOptionLabelInput: { classPropertyName: "addOptionLabelInput", publicName: "addOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, addOptionStrategy: { classPropertyName: "addOptionStrategy", publicName: "addOptionStrategy", isSignal: true, isRequired: false, transformFunction: null }, overlayConfig: { classPropertyName: "overlayConfig", publicName: "overlayConfig", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionComparerInput: { classPropertyName: "optionComparerInput", publicName: "optionComparer", isSignal: true, isRequired: false, transformFunction: null }, optionKeyInput: { classPropertyName: "optionKeyInput", publicName: "optionKey", isSignal: true, isRequired: false, transformFunction: null }, noClueIcon: { classPropertyName: "noClueIcon", publicName: "noClueIcon", isSignal: true, isRequired: false, transformFunction: null }, inputTabindex: { classPropertyName: "inputTabindex", publicName: "inputTabindex", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, colorPicker: { classPropertyName: "colorPicker", publicName: "colorPicker", isSignal: true, isRequired: false, transformFunction: null }, optionTpl: { classPropertyName: "optionTpl", publicName: "optionTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, panelHeaderTpl: { classPropertyName: "panelHeaderTpl", publicName: "panelHeaderTpl", isSignal: true, isRequired: false, transformFunction: null }, panelFooterTpl: { classPropertyName: "panelFooterTpl", publicName: "panelFooterTpl", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClosed: "panelClosed", panelOpened: "panelOpened", highlightedOption: "highlightedOption", optionTpl: "optionTplChange", valueTpl: "valueTplChange", panelHeaderTpl: "panelHeaderTplChange", panelFooterTpl: "panelFooterTplChange", clueChange: "clueChange", nextPage: "nextPage", addOption: "addOption", dataSource: "dataSourceChange" }, host: { listeners: { "click": "onClickOpenPanel($event)", "keydown": "onKeyDownNavigation($event)" }, properties: { "class.colorPicker": "colorPicker()", "class.mod-compact": "compact()", "class.is-clearable": "isClearable()", "class.is-selected": "isSelectedClass", "class.is-searchFilled": "isSearchFilledClass", "class.mod-noClueIcon": "isNoClueIconClass" } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
951
1032
|
}
|
|
952
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ALuSelectInputComponent, decorators: [{
|
|
953
1034
|
type: Directive,
|
|
954
1035
|
args: [{
|
|
955
1036
|
host: {
|
|
@@ -1005,15 +1086,15 @@ class LuCoreSelectTotalCountDirective {
|
|
|
1005
1086
|
this.totalCount = input.required({ ...(ngDevMode ? { debugName: "totalCount" } : /* istanbul ignore next */ {}), alias: 'totalCount' });
|
|
1006
1087
|
this.totalCount$ = toObservable(this.totalCount);
|
|
1007
1088
|
}
|
|
1008
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1009
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.
|
|
1089
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuCoreSelectTotalCountDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1090
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: LuCoreSelectTotalCountDirective, isStandalone: true, selector: "lu-simple-select[totalCount],lu-multi-select[totalCount]", inputs: { totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
1010
1091
|
{
|
|
1011
1092
|
provide: CORE_SELECT_API_TOTAL_COUNT_PROVIDER,
|
|
1012
1093
|
useExisting: forwardRef(() => LuCoreSelectTotalCountDirective),
|
|
1013
1094
|
},
|
|
1014
1095
|
], ngImport: i0 }); }
|
|
1015
1096
|
}
|
|
1016
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1097
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuCoreSelectTotalCountDirective, decorators: [{
|
|
1017
1098
|
type: Directive,
|
|
1018
1099
|
args: [{
|
|
1019
1100
|
// The attribute is already prefixed with "lu-simple-select"
|
|
@@ -1032,10 +1113,10 @@ class TreeDisplayPipe {
|
|
|
1032
1113
|
transform(items, treeGenerator) {
|
|
1033
1114
|
return treeGenerator.generateTrees(items);
|
|
1034
1115
|
}
|
|
1035
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1036
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.
|
|
1116
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TreeDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1117
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: TreeDisplayPipe, isStandalone: true, name: "luTreeDisplay" }); }
|
|
1037
1118
|
}
|
|
1038
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TreeDisplayPipe, decorators: [{
|
|
1039
1120
|
type: Pipe,
|
|
1040
1121
|
args: [{
|
|
1041
1122
|
name: 'luTreeDisplay',
|
|
@@ -1047,10 +1128,10 @@ class LuCoreSelectNoClueDirective {
|
|
|
1047
1128
|
constructor() {
|
|
1048
1129
|
inject(ALuSelectInputComponent).clueChange$.complete();
|
|
1049
1130
|
}
|
|
1050
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1051
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.
|
|
1131
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuCoreSelectNoClueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1132
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: LuCoreSelectNoClueDirective, isStandalone: true, selector: "lu-simple-select[noClue],lu-multi-select[noClue]", ngImport: i0 }); }
|
|
1052
1133
|
}
|
|
1053
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuCoreSelectNoClueDirective, decorators: [{
|
|
1054
1135
|
type: Directive,
|
|
1055
1136
|
args: [{
|
|
1056
1137
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -1058,6 +1139,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
1058
1139
|
}]
|
|
1059
1140
|
}], ctorParameters: () => [] });
|
|
1060
1141
|
|
|
1142
|
+
/**
|
|
1143
|
+
* Shared floating surface for the simple/multi select panels.
|
|
1144
|
+
*
|
|
1145
|
+
* Carries the popover surface (elevation, scroll viewport, positioning) that used to live on the
|
|
1146
|
+
* deprecated `.lu-picker-panel` / `.lu-picker-content` styles, so panels no longer depend on them.
|
|
1147
|
+
* The projected content (a `lu-listbox`, an "add option" row, a footer…) is laid out inside the
|
|
1148
|
+
* scrollable content area.
|
|
1149
|
+
*/
|
|
1150
|
+
class LuSelectPanelLayoutComponent {
|
|
1151
|
+
constructor() {
|
|
1152
|
+
/** Applies the `is-loading` state on the scroll content while options are being fetched. */
|
|
1153
|
+
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1154
|
+
/** Enables a focus trap on the scroll content (used by the single select panel). */
|
|
1155
|
+
this.trapFocus = input(false, { ...(ngDevMode ? { debugName: "trapFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1156
|
+
/** `tabindex` to set on the scroll content, or `null` to leave it non-focusable. */
|
|
1157
|
+
this.contentTabIndex = input(null, /* @ts-ignore */
|
|
1158
|
+
...(ngDevMode ? [{ debugName: "contentTabIndex" }] : /* istanbul ignore next */ []));
|
|
1159
|
+
/** Emitted when the scroll content is scrolled (used to trigger pagination). */
|
|
1160
|
+
this.scrolled = output();
|
|
1161
|
+
}
|
|
1162
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuSelectPanelLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1163
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: LuSelectPanelLayoutComponent, isStandalone: true, selector: "lu-select-panel-layout", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null }, contentTabIndex: { classPropertyName: "contentTabIndex", publicName: "contentTabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolled: "scrolled" }, host: { classAttribute: "lu-select-panel-layout" }, ngImport: i0, template: "<div\n\tclass=\"lu-select-panel-layout-content\"\n\t[class.is-loading]=\"loading()\"\n\t[attr.tabindex]=\"contentTabIndex()\"\n\t[cdkTrapFocus]=\"trapFocus()\"\n\t(scroll)=\"scrolled.emit($event)\"\n>\n\t<ng-content />\n</div>\n", styles: ["@layer components{.lu-select-panel-layout{display:flex;flex-direction:column;max-block-size:calc(100vb + 48px);position:relative}.lu-select-panel-layout-content{display:block;max-block-size:20rem;padding:var(--pr-t-spacings-50);overflow-y:auto;background-color:var(--pr-t-elevation-surface-raised);box-shadow:var(--pr-t-elevation-shadow-overlay);border-radius:var(--pr-t-border-radius-structure);animation:scaleIn .15s cubic-bezier(.25,.8,.25,1);margin-inline:calc(var(--pr-t-spacings-50) * -1)}}@layer mods{.lu-select-panel-layout.is-above{transform-origin:bottom center}.lu-select-panel-layout.is-below{transform-origin:top center}.lu-select-panel-layout.is-before{transform-origin:center right}.lu-select-panel-layout.is-before.is-above{transform-origin:bottom right}.lu-select-panel-layout.is-before.is-below{transform-origin:top right}.lu-select-panel-layout.is-after{transform-origin:center left}.lu-select-panel-layout.is-after.is-above{transform-origin:bottom left}.lu-select-panel-layout.is-after.is-below{transform-origin:top left}.lu-select-panel-layout-content:focus-within{outline:none}.mod-filterPill .lu-select-panel-layout-content,.mod-impersonation .lu-select-panel-layout-content{box-shadow:none;animation:none;margin:var(--pr-t-spacings-100) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);padding:0 var(--pr-t-spacings-50) var(--pr-t-spacings-50);border-radius:0 0 var(--pr-t-border-radius-structure) var(--pr-t-border-radius-structure)}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1164
|
+
}
|
|
1165
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuSelectPanelLayoutComponent, decorators: [{
|
|
1166
|
+
type: Component,
|
|
1167
|
+
args: [{ selector: 'lu-select-panel-layout', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1168
|
+
class: 'lu-select-panel-layout',
|
|
1169
|
+
}, imports: [CdkTrapFocus], template: "<div\n\tclass=\"lu-select-panel-layout-content\"\n\t[class.is-loading]=\"loading()\"\n\t[attr.tabindex]=\"contentTabIndex()\"\n\t[cdkTrapFocus]=\"trapFocus()\"\n\t(scroll)=\"scrolled.emit($event)\"\n>\n\t<ng-content />\n</div>\n", styles: ["@layer components{.lu-select-panel-layout{display:flex;flex-direction:column;max-block-size:calc(100vb + 48px);position:relative}.lu-select-panel-layout-content{display:block;max-block-size:20rem;padding:var(--pr-t-spacings-50);overflow-y:auto;background-color:var(--pr-t-elevation-surface-raised);box-shadow:var(--pr-t-elevation-shadow-overlay);border-radius:var(--pr-t-border-radius-structure);animation:scaleIn .15s cubic-bezier(.25,.8,.25,1);margin-inline:calc(var(--pr-t-spacings-50) * -1)}}@layer mods{.lu-select-panel-layout.is-above{transform-origin:bottom center}.lu-select-panel-layout.is-below{transform-origin:top center}.lu-select-panel-layout.is-before{transform-origin:center right}.lu-select-panel-layout.is-before.is-above{transform-origin:bottom right}.lu-select-panel-layout.is-before.is-below{transform-origin:top right}.lu-select-panel-layout.is-after{transform-origin:center left}.lu-select-panel-layout.is-after.is-above{transform-origin:bottom left}.lu-select-panel-layout.is-after.is-below{transform-origin:top left}.lu-select-panel-layout-content:focus-within{outline:none}.mod-filterPill .lu-select-panel-layout-content,.mod-impersonation .lu-select-panel-layout-content{box-shadow:none;animation:none;margin:var(--pr-t-spacings-100) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);padding:0 var(--pr-t-spacings-50) var(--pr-t-spacings-50);border-radius:0 0 var(--pr-t-border-radius-structure) var(--pr-t-border-radius-structure)}}\n"] }]
|
|
1170
|
+
}], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], contentTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTabIndex", required: false }] }], scrolled: [{ type: i0.Output, args: ["scrolled"] }] } });
|
|
1171
|
+
|
|
1061
1172
|
class LuCoreSelectPanelHeaderDirective {
|
|
1062
1173
|
constructor() {
|
|
1063
1174
|
this.templateRef = inject(TemplateRef);
|
|
@@ -1070,10 +1181,10 @@ class LuCoreSelectPanelHeaderDirective {
|
|
|
1070
1181
|
static ngTemplateContextGuard(_dir, _ctx) {
|
|
1071
1182
|
return true;
|
|
1072
1183
|
}
|
|
1073
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1074
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.
|
|
1184
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuCoreSelectPanelHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1185
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: LuCoreSelectPanelHeaderDirective, isStandalone: true, selector: "[luSelectPanelHeader]", inputs: { select: { classPropertyName: "select", publicName: "luSelectPanelHeader", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
1075
1186
|
}
|
|
1076
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1187
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuCoreSelectPanelHeaderDirective, decorators: [{
|
|
1077
1188
|
type: Directive,
|
|
1078
1189
|
args: [{
|
|
1079
1190
|
selector: '[luSelectPanelHeader]',
|
|
@@ -1100,21 +1211,48 @@ class LuSelectPanelRef {
|
|
|
1100
1211
|
}
|
|
1101
1212
|
|
|
1102
1213
|
/**
|
|
1103
|
-
*
|
|
1104
|
-
*
|
|
1214
|
+
* Tracks whether the user is currently navigating with the pointer or with the keyboard.
|
|
1215
|
+
*
|
|
1216
|
+
* Both listeners are registered natively and outside of the Angular zone, and the signal is only
|
|
1217
|
+
* written when the value actually changes: `mousemove` fires on every frame the mouse moves, and
|
|
1218
|
+
* going through Angular's event system there schedules a change detection run each time — for a
|
|
1219
|
+
* value that almost never changes.
|
|
1220
|
+
*
|
|
1221
|
+
* `scope` bounds pointer navigation to an element — pass the panel host. Moving the mouse anywhere
|
|
1222
|
+
* else on the page then doesn't drop the keyboard highlight, and leaving the scope switches back to
|
|
1223
|
+
* keyboard navigation: pointer mode paints the active item through `:hover` alone, which vanishes
|
|
1224
|
+
* with the pointer, whereas the key manager keeps that item active and keyboard navigation resumes
|
|
1225
|
+
* from it. `keydown` always listens on the document, since focus stays on the input, outside of the
|
|
1226
|
+
* panel.
|
|
1227
|
+
*
|
|
1228
|
+
* Must be called from an injection context.
|
|
1105
1229
|
*/
|
|
1106
|
-
function
|
|
1107
|
-
const
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1230
|
+
function injectPointerNavigation(scope) {
|
|
1231
|
+
const document = inject(DOCUMENT);
|
|
1232
|
+
const ngZone = inject(NgZone);
|
|
1233
|
+
const pointerNavigation = signal(false, /* @ts-ignore */
|
|
1234
|
+
...(ngDevMode ? [{ debugName: "pointerNavigation" }] : /* istanbul ignore next */ []));
|
|
1235
|
+
const abortController = new AbortController();
|
|
1236
|
+
inject(DestroyRef).onDestroy(() => abortController.abort());
|
|
1237
|
+
ngZone.runOutsideAngular(() => {
|
|
1238
|
+
const options = { passive: true, signal: abortController.signal };
|
|
1239
|
+
(scope ?? document).addEventListener('mousemove', () => {
|
|
1240
|
+
if (!untracked(pointerNavigation)) {
|
|
1241
|
+
pointerNavigation.set(true);
|
|
1242
|
+
}
|
|
1243
|
+
}, options);
|
|
1244
|
+
scope?.addEventListener('mouseleave', () => {
|
|
1245
|
+
if (untracked(pointerNavigation)) {
|
|
1246
|
+
pointerNavigation.set(false);
|
|
1247
|
+
}
|
|
1248
|
+
}, options);
|
|
1249
|
+
document.addEventListener('keydown', () => {
|
|
1250
|
+
if (untracked(pointerNavigation)) {
|
|
1251
|
+
pointerNavigation.set(false);
|
|
1252
|
+
}
|
|
1253
|
+
}, options);
|
|
1117
1254
|
});
|
|
1255
|
+
return pointerNavigation.asReadonly();
|
|
1118
1256
|
}
|
|
1119
1257
|
|
|
1120
1258
|
const Translations = {
|
|
@@ -1159,10 +1297,10 @@ class LuIsOptionSelectedPipe {
|
|
|
1159
1297
|
transform(option, comparer, selectedOptions) {
|
|
1160
1298
|
return this.#selectionStrategy.isSelected(option, selectedOptions, comparer);
|
|
1161
1299
|
}
|
|
1162
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1163
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.
|
|
1300
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuIsOptionSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1301
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: LuIsOptionSelectedPipe, isStandalone: true, name: "luIsOptionSelected" }); }
|
|
1164
1302
|
}
|
|
1165
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1303
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuIsOptionSelectedPipe, decorators: [{
|
|
1166
1304
|
type: Pipe,
|
|
1167
1305
|
args: [{
|
|
1168
1306
|
name: 'luIsOptionSelected',
|
|
@@ -1173,5 +1311,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
1173
1311
|
* Generated bundle index. Do not edit.
|
|
1174
1312
|
*/
|
|
1175
1313
|
|
|
1176
|
-
export { ALuSelectInputComponent, CORE_SELECT_API_TOTAL_COUNT_PROVIDER, CoreSelectKeyManager, LU_CORE_SELECT_TRANSLATIONS, LU_OPTION_CONTEXT, LuCoreSelectNoClueDirective, LuCoreSelectPanelHeaderDirective, LuCoreSelectTotalCountDirective, LuDisabledOptionDirective, LuDisplayerDirective, LuIsOptionSelectedPipe, LuOptionDirective, LuOptionGroupDirective, LuSelectPanelRef, LuSimpleSelectDefaultOptionComponent, SELECT_ID, SELECT_LABEL, SELECT_LABEL_ID, SELECT_PANEL_INSTANCE, TreeDisplayPipe, addAttributesOnCdkContainer, applySearchDelimiter, coreSelectDefaultOptionComparer, coreSelectDefaultOptionKey, luCoreSelectTranslations, provideLuSelectLabelsAndIds, provideOptionContext, CoreSelectPanelElement as ɵCoreSelectPanelElement, ɵIsSelectedStrategy, LuOptionComponent as ɵLuOptionComponent, LuOptionGroupPipe as ɵLuOptionGroupPipe, LuOptionOutletDirective as ɵLuOptionOutletDirective, generateGroups as ɵgenerateGroups, getGroupTemplateLocation as ɵgetGroupTemplateLocation };
|
|
1314
|
+
export { ALuSelectInputComponent, CORE_SELECT_API_TOTAL_COUNT_PROVIDER, CoreSelectKeyManager, LU_CORE_SELECT_TRANSLATIONS, LU_OPTION_CONTEXT, LuCoreSelectNoClueDirective, LuCoreSelectPanelHeaderDirective, LuCoreSelectTotalCountDirective, LuDisabledOptionDirective, LuDisplayerDirective, LuIsOptionSelectedPipe, LuOptionDirective, LuOptionGroupDirective, LuSelectPanelLayoutComponent, LuSelectPanelRef, LuSimpleSelectDefaultOptionComponent, SELECT_ID, SELECT_LABEL, SELECT_LABEL_ID, SELECT_PANEL_INSTANCE, TreeDisplayPipe, addAttributesOnCdkContainer, applySearchDelimiter, coreSelectDefaultOptionComparer, coreSelectDefaultOptionKey, luCoreSelectTranslations, provideLuSelectLabelsAndIds, provideOptionContext, CoreSelectPanelElement as ɵCoreSelectPanelElement, ɵIsSelectedStrategy, LuOptionComponent as ɵLuOptionComponent, LuOptionGroupPipe as ɵLuOptionGroupPipe, LuOptionOutletDirective as ɵLuOptionOutletDirective, generateGroups as ɵgenerateGroups, getGroupTemplateLocation as ɵgetGroupTemplateLocation, injectPointerNavigation as ɵinjectPointerNavigation, scrollIntoViewOnceReady as ɵscrollIntoViewOnceReady };
|
|
1177
1315
|
//# sourceMappingURL=lucca-front-ng-core-select.mjs.map
|