@lucca-front/ng 22.1.0-rc.4 → 22.1.1
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 +6 -0
- package/fesm2022/lucca-front-ng-a11y.mjs +9 -9
- package/fesm2022/lucca-front-ng-activity-feed.mjs +19 -15
- 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 +3 -3
- package/fesm2022/lucca-front-ng-approbation-inbox.mjs +78 -56
- package/fesm2022/lucca-front-ng-approbation-inbox.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-box.mjs +3 -3
- package/fesm2022/lucca-front-ng-breadcrumbs.mjs +6 -6
- package/fesm2022/lucca-front-ng-bubble-icon.mjs +12 -7
- package/fesm2022/lucca-front-ng-bubble-icon.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-bubble-illustration.mjs +3 -3
- package/fesm2022/lucca-front-ng-callout.mjs +24 -24
- package/fesm2022/lucca-front-ng-chip.mjs +4 -4
- package/fesm2022/lucca-front-ng-chip.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-clear.mjs +4 -4
- package/fesm2022/lucca-front-ng-clear.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-code.mjs +3 -3
- package/fesm2022/lucca-front-ng-color.mjs +3 -3
- package/fesm2022/lucca-front-ng-comment.mjs +12 -12
- package/fesm2022/lucca-front-ng-comment.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-container.mjs +3 -3
- package/fesm2022/lucca-front-ng-core-select-api.mjs +9 -9
- package/fesm2022/lucca-front-ng-core-select-department.mjs +8 -6
- package/fesm2022/lucca-front-ng-core-select-department.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-establishment.mjs +11 -9
- package/fesm2022/lucca-front-ng-core-select-establishment.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-job-qualification.mjs +6 -6
- package/fesm2022/lucca-front-ng-core-select-legal-units.mjs +8 -8
- package/fesm2022/lucca-front-ng-core-select-legal-units.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-occupation-category.mjs +3 -3
- package/fesm2022/lucca-front-ng-core-select-user.mjs +22 -20
- package/fesm2022/lucca-front-ng-core-select-user.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select.mjs +77 -62
- package/fesm2022/lucca-front-ng-core-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core.mjs +19 -19
- package/fesm2022/lucca-front-ng-data-table.mjs +40 -32
- package/fesm2022/lucca-front-ng-data-table.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-date.mjs +40 -40
- package/fesm2022/lucca-front-ng-date2.mjs +93 -40
- package/fesm2022/lucca-front-ng-date2.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-department.mjs +24 -24
- package/fesm2022/lucca-front-ng-dialog.mjs +56 -48
- package/fesm2022/lucca-front-ng-dialog.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-divider.mjs +3 -3
- package/fesm2022/lucca-front-ng-dropdown.mjs +42 -42
- package/fesm2022/lucca-front-ng-dropdown.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-empty-state.mjs +9 -9
- package/fesm2022/lucca-front-ng-error-page.mjs +3 -3
- package/fesm2022/lucca-front-ng-establishment.mjs +33 -33
- package/fesm2022/lucca-front-ng-fancy-box.mjs +3 -3
- package/fesm2022/lucca-front-ng-file-upload.mjs +33 -26
- package/fesm2022/lucca-front-ng-file-upload.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-filter-pills-core.mjs +6 -6
- package/fesm2022/lucca-front-ng-filter-pills.mjs +90 -21
- package/fesm2022/lucca-front-ng-filter-pills.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-footer.mjs +3 -3
- package/fesm2022/lucca-front-ng-form-field.mjs +24 -20
- package/fesm2022/lucca-front-ng-form-field.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-form-header.mjs +3 -3
- package/fesm2022/lucca-front-ng-form-label.mjs +3 -3
- package/fesm2022/lucca-front-ng-form.mjs +3 -3
- package/fesm2022/lucca-front-ng-formly.mjs +58 -58
- package/fesm2022/lucca-front-ng-forms-phone-number-input.mjs +6 -6
- 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 +38 -37
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms.mjs +68 -48
- package/fesm2022/lucca-front-ng-forms.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-gauge.mjs +3 -3
- package/fesm2022/lucca-front-ng-grid.mjs +6 -6
- package/fesm2022/lucca-front-ng-highlight-data.mjs +3 -3
- package/fesm2022/lucca-front-ng-highlight-section.mjs +6 -3
- package/fesm2022/lucca-front-ng-highlight-section.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-highlight-text.mjs +3 -3
- package/fesm2022/lucca-front-ng-horizontal-navigation.mjs +9 -9
- package/fesm2022/lucca-front-ng-impersonation.mjs +5 -3
- package/fesm2022/lucca-front-ng-impersonation.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-index-table.mjs +44 -38
- package/fesm2022/lucca-front-ng-index-table.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-inline-message.mjs +3 -3
- package/fesm2022/lucca-front-ng-input.mjs +21 -21
- package/fesm2022/lucca-front-ng-kbd.mjs +306 -0
- package/fesm2022/lucca-front-ng-kbd.mjs.map +1 -0
- package/fesm2022/lucca-front-ng-link.mjs +38 -14
- package/fesm2022/lucca-front-ng-link.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-listbox.mjs +13 -10
- package/fesm2022/lucca-front-ng-listbox.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-listing.mjs +21 -11
- package/fesm2022/lucca-front-ng-listing.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-loading.mjs +51 -10
- package/fesm2022/lucca-front-ng-loading.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-main-layout.mjs +6 -6
- package/fesm2022/lucca-front-ng-markdown.mjs +3 -3
- package/fesm2022/lucca-front-ng-mobile-push.mjs +3 -3
- package/fesm2022/lucca-front-ng-modal.mjs +22 -22
- package/fesm2022/lucca-front-ng-multi-select.mjs +42 -42
- 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-option.mjs +130 -130
- package/fesm2022/lucca-front-ng-option.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-page-header.mjs +3 -3
- package/fesm2022/lucca-front-ng-pagination.mjs +3 -3
- package/fesm2022/lucca-front-ng-plg-push.mjs +3 -3
- package/fesm2022/lucca-front-ng-popover.mjs +17 -17
- package/fesm2022/lucca-front-ng-popover2.mjs +54 -21
- package/fesm2022/lucca-front-ng-popover2.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-popup.mjs +10 -10
- package/fesm2022/lucca-front-ng-priority-level.mjs +128 -0
- package/fesm2022/lucca-front-ng-priority-level.mjs.map +1 -0
- package/fesm2022/lucca-front-ng-progress-bar.mjs +3 -3
- package/fesm2022/lucca-front-ng-progress-stepper.mjs +6 -6
- package/fesm2022/lucca-front-ng-read-more.mjs +6 -6
- package/fesm2022/lucca-front-ng-read-more.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-resource-card.mjs +12 -12
- package/fesm2022/lucca-front-ng-safe-content.mjs +10 -10
- package/fesm2022/lucca-front-ng-scroll-box.mjs +4 -4
- package/fesm2022/lucca-front-ng-scroll-box.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-scroll.mjs +9 -10
- package/fesm2022/lucca-front-ng-scroll.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-segmented-control-tabs.mjs +8 -8
- package/fesm2022/lucca-front-ng-segmented-control.mjs +8 -8
- package/fesm2022/lucca-front-ng-select.mjs +14 -14
- package/fesm2022/lucca-front-ng-sidepanel.mjs +7 -7
- package/fesm2022/lucca-front-ng-simple-select.mjs +16 -16
- package/fesm2022/lucca-front-ng-simple-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-software-icon-wrapper.mjs +6 -6
- package/fesm2022/lucca-front-ng-software-icon.mjs +3 -3
- package/fesm2022/lucca-front-ng-sortable-list.mjs +6 -6
- package/fesm2022/lucca-front-ng-status-badge.mjs +3 -3
- package/fesm2022/lucca-front-ng-table-of-content.mjs +6 -6
- 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 +18 -18
- package/fesm2022/lucca-front-ng-title.mjs +10 -10
- package/fesm2022/lucca-front-ng-toast.mjs +10 -10
- package/fesm2022/lucca-front-ng-tree-select.mjs +7 -7
- package/fesm2022/lucca-front-ng-tree-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-user-popover.mjs +22 -22
- package/fesm2022/lucca-front-ng-user-popover.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-user.mjs +68 -61
- package/fesm2022/lucca-front-ng-user.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-vertical-navigation.mjs +12 -12
- package/package.json +23 -10
- package/schematics/lib/local-deps/package-lock.json +7 -7
- package/schematics/lib/local-deps/package.json +1 -1
- package/schematics/lu-button/migration.js +59 -33
- package/src/components/_sidepanel.scss +2 -2
- package/src/components/cdk/_global.scss +4 -0
- package/src/components/cdk/_overlay.scss +1 -1
- package/src/definitions/option/_option-item.scss +7 -4
- package/types/lucca-front-ng-a11y.d.ts +1 -1
- package/types/lucca-front-ng-activity-feed.d.ts +13 -9
- package/types/lucca-front-ng-api.d.ts +31 -31
- package/types/lucca-front-ng-approbation-inbox.d.ts +22 -14
- package/types/lucca-front-ng-bubble-icon.d.ts +5 -2
- package/types/lucca-front-ng-callout.d.ts +17 -17
- package/types/lucca-front-ng-chip.d.ts +7 -7
- package/types/lucca-front-ng-clear.d.ts +2 -2
- package/types/lucca-front-ng-color.d.ts +3 -3
- package/types/lucca-front-ng-comment.d.ts +14 -14
- package/types/lucca-front-ng-container.d.ts +1 -1
- package/types/lucca-front-ng-core-select-api.d.ts +7 -7
- package/types/lucca-front-ng-core-select-department.d.ts +7 -5
- package/types/lucca-front-ng-core-select-establishment.d.ts +8 -6
- package/types/lucca-front-ng-core-select-job-qualification.d.ts +2 -2
- package/types/lucca-front-ng-core-select-legal-units.d.ts +3 -3
- package/types/lucca-front-ng-core-select-occupation-category.d.ts +2 -2
- package/types/lucca-front-ng-core-select-user.d.ts +14 -12
- package/types/lucca-front-ng-core-select.d.ts +56 -41
- package/types/lucca-front-ng-core.d.ts +5 -5
- package/types/lucca-front-ng-data-table.d.ts +38 -33
- package/types/lucca-front-ng-date.d.ts +13 -13
- package/types/lucca-front-ng-date2.d.ts +56 -37
- package/types/lucca-front-ng-department.d.ts +2 -2
- package/types/lucca-front-ng-dialog.d.ts +9 -9
- package/types/lucca-front-ng-divider.d.ts +2 -2
- package/types/lucca-front-ng-dropdown.d.ts +2 -2
- package/types/lucca-front-ng-empty-state.d.ts +20 -20
- package/types/lucca-front-ng-establishment.d.ts +15 -15
- package/types/lucca-front-ng-fancy-box.d.ts +12 -12
- package/types/lucca-front-ng-file-upload.d.ts +21 -15
- package/types/lucca-front-ng-filter-pills.d.ts +27 -18
- package/types/lucca-front-ng-footer.d.ts +1 -1
- package/types/lucca-front-ng-form-field.d.ts +19 -19
- package/types/lucca-front-ng-form-label.d.ts +4 -4
- package/types/lucca-front-ng-form.d.ts +1 -1
- package/types/lucca-front-ng-forms-phone-number-input.d.ts +11 -11
- package/types/lucca-front-ng-forms-rich-text-input.d.ts +11 -11
- package/types/lucca-front-ng-forms.d.ts +59 -49
- package/types/lucca-front-ng-grid.d.ts +23 -23
- package/types/lucca-front-ng-highlight-data.d.ts +5 -5
- package/types/lucca-front-ng-highlight-section.d.ts +6 -3
- package/types/lucca-front-ng-horizontal-navigation.d.ts +4 -4
- package/types/lucca-front-ng-impersonation.d.ts +8 -6
- package/types/lucca-front-ng-index-table.d.ts +20 -18
- package/types/lucca-front-ng-inline-message.d.ts +2 -2
- package/types/lucca-front-ng-kbd.d.ts +59 -0
- package/types/lucca-front-ng-link.d.ts +17 -4
- package/types/lucca-front-ng-listbox.d.ts +10 -9
- package/types/lucca-front-ng-listing.d.ts +14 -3
- package/types/lucca-front-ng-loading.d.ts +18 -6
- package/types/lucca-front-ng-main-layout.d.ts +9 -9
- package/types/lucca-front-ng-modal.d.ts +4 -4
- package/types/lucca-front-ng-multi-select.d.ts +21 -21
- package/types/lucca-front-ng-option.d.ts +3 -3
- package/types/lucca-front-ng-page-header.d.ts +2 -2
- package/types/lucca-front-ng-pagination.d.ts +3 -3
- package/types/lucca-front-ng-popover.d.ts +18 -18
- package/types/lucca-front-ng-popover2.d.ts +9 -8
- package/types/lucca-front-ng-popup.d.ts +4 -4
- package/types/{lucca-front-ng-priority-levels.d.ts → lucca-front-ng-priority-level.d.ts} +11 -11
- package/types/lucca-front-ng-progress-bar.d.ts +1 -1
- package/types/lucca-front-ng-progress-stepper.d.ts +2 -2
- package/types/lucca-front-ng-read-more.d.ts +6 -6
- package/types/lucca-front-ng-resource-card.d.ts +3 -3
- package/types/lucca-front-ng-segmented-control-tabs.d.ts +5 -5
- package/types/lucca-front-ng-segmented-control.d.ts +3 -3
- package/types/lucca-front-ng-select.d.ts +9 -9
- package/types/lucca-front-ng-sidepanel.d.ts +1 -1
- package/types/lucca-front-ng-simple-select.d.ts +9 -9
- package/types/lucca-front-ng-software-icon.d.ts +1 -1
- package/types/lucca-front-ng-sortable-list.d.ts +1 -1
- package/types/lucca-front-ng-status-badge.d.ts +1 -1
- package/types/lucca-front-ng-time.d.ts +19 -19
- package/types/lucca-front-ng-title.d.ts +2 -2
- package/types/lucca-front-ng-toast.d.ts +2 -2
- package/types/lucca-front-ng-tree-select.d.ts +2 -2
- package/types/lucca-front-ng-user-popover.d.ts +1 -2
- package/types/lucca-front-ng-user.d.ts +26 -20
- package/types/lucca-front-ng-vertical-navigation.d.ts +5 -5
- package/fesm2022/lucca-front-ng-priority-levels.mjs +0 -128
- package/fesm2022/lucca-front-ng-priority-levels.mjs.map +0 -1
|
@@ -5,7 +5,7 @@ import { InjectionToken, input, inject, LOCALE_ID, ElementRef, computed, content
|
|
|
5
5
|
import * as i1$1 from '@angular/forms';
|
|
6
6
|
import { FormsModule } from '@angular/forms';
|
|
7
7
|
import { ClearComponent } from '@lucca-front/ng/clear';
|
|
8
|
-
import { intlInputOptions, luBooleanAttribute, IntlParamsPipe } from '@lucca-front/ng/core';
|
|
8
|
+
import { intlInputOptions, luBooleanAttribute, luNullableNumberAttribute, LOCALE_PLURAL_RULES, IntlParamsPipe, getIntlPluralLabel } from '@lucca-front/ng/core';
|
|
9
9
|
import { IconComponent } from '@lucca-front/ng/icon';
|
|
10
10
|
import { PopoverDirective } from '@lucca-front/ng/popover2';
|
|
11
11
|
import * as i1 from '@lucca-front/ng/tooltip';
|
|
@@ -33,6 +33,11 @@ const Translations = {
|
|
|
33
33
|
saveView: 'Enregistrer la vue',
|
|
34
34
|
saveModification: 'Enregistrer les modifications',
|
|
35
35
|
saveNewView: 'Enregistrer en tant que nouvelle vue',
|
|
36
|
+
resultsCount: {
|
|
37
|
+
one: '{{count}} résultat',
|
|
38
|
+
other: '{{count}} résultats',
|
|
39
|
+
},
|
|
40
|
+
noResults: 'Aucun résultat',
|
|
36
41
|
},
|
|
37
42
|
pt: {
|
|
38
43
|
clear: 'Esvaziar este campo',
|
|
@@ -46,6 +51,11 @@ const Translations = {
|
|
|
46
51
|
saveView: 'Guardar a vista',
|
|
47
52
|
saveModification: 'Guardar as alterações',
|
|
48
53
|
saveNewView: 'Guardar como nova vista',
|
|
54
|
+
resultsCount: {
|
|
55
|
+
one: '{{count}} resultado',
|
|
56
|
+
other: '{{count}} resultados',
|
|
57
|
+
},
|
|
58
|
+
noResults: 'Nenhum resultado',
|
|
49
59
|
},
|
|
50
60
|
es: {
|
|
51
61
|
clear: 'Vaciar este campo',
|
|
@@ -59,6 +69,11 @@ const Translations = {
|
|
|
59
69
|
saveView: 'Guardar vista',
|
|
60
70
|
saveModification: 'Guardar los cambios',
|
|
61
71
|
saveNewView: 'Guardar como vista nueva',
|
|
72
|
+
resultsCount: {
|
|
73
|
+
one: '{{count}} resultado',
|
|
74
|
+
other: '{{count}} resultados',
|
|
75
|
+
},
|
|
76
|
+
noResults: 'Ningún resultado',
|
|
62
77
|
},
|
|
63
78
|
'nl-BE': {
|
|
64
79
|
clear: 'Dit veld leegmaken',
|
|
@@ -72,6 +87,11 @@ const Translations = {
|
|
|
72
87
|
saveView: 'De weergave opslaan',
|
|
73
88
|
saveModification: 'Wijzigingen opslaan',
|
|
74
89
|
saveNewView: 'Opslaan als nieuwe weergave',
|
|
90
|
+
resultsCount: {
|
|
91
|
+
one: '{{count}} resultaat',
|
|
92
|
+
other: '{{count}} resultaten',
|
|
93
|
+
},
|
|
94
|
+
noResults: 'Geen resultaten',
|
|
75
95
|
},
|
|
76
96
|
nl: {
|
|
77
97
|
clear: 'Dit veld leegmaken',
|
|
@@ -85,6 +105,11 @@ const Translations = {
|
|
|
85
105
|
saveView: 'De weergave opslaan',
|
|
86
106
|
saveModification: 'Wijzigingen opslaan',
|
|
87
107
|
saveNewView: 'Opslaan als nieuwe weergave',
|
|
108
|
+
resultsCount: {
|
|
109
|
+
one: '{{count}} resultaat',
|
|
110
|
+
other: '{{count}} resultaten',
|
|
111
|
+
},
|
|
112
|
+
noResults: 'Geen resultaten',
|
|
88
113
|
},
|
|
89
114
|
it: {
|
|
90
115
|
clear: 'Vuotare questo campo',
|
|
@@ -98,6 +123,11 @@ const Translations = {
|
|
|
98
123
|
saveView: 'Salva la vista',
|
|
99
124
|
saveModification: 'Salva le modifiche',
|
|
100
125
|
saveNewView: 'Salva come nuova vista',
|
|
126
|
+
resultsCount: {
|
|
127
|
+
one: '{{count}} risultato',
|
|
128
|
+
other: '{{count}} risultati',
|
|
129
|
+
},
|
|
130
|
+
noResults: 'Nessun risultato',
|
|
101
131
|
},
|
|
102
132
|
de: {
|
|
103
133
|
clear: 'Den Inhalt aus diesem Feld entfernen',
|
|
@@ -111,6 +141,11 @@ const Translations = {
|
|
|
111
141
|
saveView: 'Ansicht speichern',
|
|
112
142
|
saveModification: 'Änderungen speichern',
|
|
113
143
|
saveNewView: 'Als neue Ansicht speichern',
|
|
144
|
+
resultsCount: {
|
|
145
|
+
one: '{{count}} Ergebnis',
|
|
146
|
+
other: '{{count}} Ergebnisse',
|
|
147
|
+
},
|
|
148
|
+
noResults: 'Keine Ergebnisse',
|
|
114
149
|
},
|
|
115
150
|
en: {
|
|
116
151
|
clear: 'Empty this field',
|
|
@@ -124,6 +159,11 @@ const Translations = {
|
|
|
124
159
|
saveView: 'Save view',
|
|
125
160
|
saveModification: 'Save changes',
|
|
126
161
|
saveNewView: 'Save as new view',
|
|
162
|
+
resultsCount: {
|
|
163
|
+
one: '{{count}} result',
|
|
164
|
+
other: '{{count}} results',
|
|
165
|
+
},
|
|
166
|
+
noResults: 'No results',
|
|
127
167
|
},
|
|
128
168
|
pl: {
|
|
129
169
|
clear: 'Wyczyść to pole',
|
|
@@ -137,6 +177,13 @@ const Translations = {
|
|
|
137
177
|
saveView: 'Save view',
|
|
138
178
|
saveModification: 'Save changes',
|
|
139
179
|
saveNewView: 'Save as new view',
|
|
180
|
+
resultsCount: {
|
|
181
|
+
one: '{{count}} wynik',
|
|
182
|
+
few: '{{count}} wyniki',
|
|
183
|
+
many: '{{count}} wyników',
|
|
184
|
+
other: '{{count}} wyniku',
|
|
185
|
+
},
|
|
186
|
+
noResults: 'Brak wyników',
|
|
140
187
|
},
|
|
141
188
|
};
|
|
142
189
|
|
|
@@ -286,15 +333,15 @@ class FilterPillComponent {
|
|
|
286
333
|
registerInput(input) {
|
|
287
334
|
this.registeredInputComponentRef.set(input);
|
|
288
335
|
}
|
|
289
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1
|
|
290
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1
|
|
336
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: FilterPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
337
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: FilterPillComponent, isStandalone: true, selector: "lu-filter-pill", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, displayed: { classPropertyName: "displayed", publicName: "displayed", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholderOverride: { classPropertyName: "placeholderOverride", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { displayed: "displayedChange" }, host: { listeners: { "click": "hostClick()" }, properties: { "class.is-hidden": "isHiddenClass", "class.mod-checkbox": "isModCheckbox", "class.is-filled": "isFilled", "class.is-comboboxHidden": "hideCombobox" }, classAttribute: "filterPillWrapper" }, providers: [
|
|
291
338
|
{
|
|
292
339
|
provide: FILTER_PILL_HOST_COMPONENT,
|
|
293
340
|
useExisting: forwardRef(() => FilterPillComponent),
|
|
294
341
|
},
|
|
295
|
-
], queries: [{ propertyName: "childInputComponentRef", first: true, predicate: FILTER_PILL_INPUT_COMPONENT, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverDirective, descendants: true, isSignal: true }, { propertyName: "defaultLabelTpl", first: true, predicate: ["defaultLabel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!isHidden()) {\n\t@if (iconOnly()) {\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"filterPill mod-button\"\n\t\t\t[attr.disabled]=\"disabled() ? 'disabled' : null\"\n\t\t\t[attr.aria-expanded]=\"popoverRef.opened()\"\n\t\t\t[luTooltip]=\"label()\"\n\t\t\tluTooltipOnlyForDisplay\n\t\t\t(keydown.arrowDown)=\"$event.preventDefault(); popoverRef.openPopover()\"\n\t\t\t(keydown.arrowUp)=\"$event.preventDefault(); popoverRef.openPopover()\"\n\t\t\t[luPopover2]=\"pillContent\"\n\t\t\t[luPopoverAnchor]=\"elementRef\"\n\t\t\t[luPopoverNoCloseButton]=\"true\"\n\t\t\t[luPopoverBackdrop]=\"backdrop()\"\n\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t(luPopoverOpened)=\"popoverOpened()\"\n\t\t\t(luPopoverClosed)=\"popoverClosed()\"\n\t\t\t#popoverRef=\"luPopover2\"\n\t\t>\n\t\t\t<lu-icon class=\"filterPill-icon\" [icon]=\"displayedIcon()\" [alt]=\"label()\" />\n\t\t</button>\n\t} @else if (layout() === \"default\") {\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"filterPill\"\n\t\t\t[attr.disabled]=\"disabled() ? 'disabled' : null\"\n\t\t\t[class.is-filled]=\"!this.inputIsEmpty()\"\n\t\t\t[attr.aria-expanded]=\"popoverRef.opened()\"\n\t\t\t(keydown.arrowDown)=\"$event.preventDefault(); popoverRef.openPopover(true)\"\n\t\t\t(keydown.arrowUp)=\"$event.preventDefault(); popoverRef.openPopover(true)\"\n\t\t\t[luPopover2]=\"pillContent\"\n\t\t\t[luPopoverAnchor]=\"elementRef\"\n\t\t\t[luPopoverNoCloseButton]=\"true\"\n\t\t\t[luPopoverBackdrop]=\"backdrop()\"\n\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t(luPopoverOpened)=\"popoverOpened()\"\n\t\t\t(luPopoverClosed)=\"popoverClosed()\"\n\t\t\t#filterPillRef\n\t\t\t#popoverRef=\"luPopover2\"\n\t\t>\n\t\t\t<span class=\"filterPill-label\">\n\t\t\t\t<ng-container\n\t\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\t\tlabelTpl();\n\t\t\t\t\t\tcontext: { label: label(), isEmpty: inputIsEmpty(), placeholder: placeholder(), colon: colonDisplay() }\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"filterPill-value\"\n\t\t\t\tluTooltip\n\t\t\t\tluTooltipWhenEllipsis\n\t\t\t\t[luTooltipDisabled]=\"inputIsEmpty()\"\n\t\t\t\t[luTooltipTriggerAnchor]=\"filterPillRef\"\n\t\t\t>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"pillTpl; context: { label: label(), isEmpty: inputIsEmpty() }\" />\n\t\t\t\t@if (inputIsEmpty() && !disabled()) {\n\t\t\t\t\t{{ placeholder() }}\n\t\t\t\t}\n\t\t\t</span>\n\t\t\t<span class=\"filterPill-toggle\">\n\t\t\t\t<lu-icon [icon]=\"displayedIcon()\" size=\"S\" />\n\t\t\t</span>\n\t\t</button>\n\t\t@if (inputIsClearable()) {\n\t\t\t<lu-clear class=\"filterPill_clear\" (onClear)=\"clear(); popoverRef.opened() ? null : filterPillRef.focus()\">{{\n\t\t\t\tintl().clear\n\t\t\t}}</lu-clear>\n\t\t}\n\t} @else {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\tlabelTpl();\n\t\t\t\tcontext: { label: label(), isEmpty: inputIsEmpty(), placeholder: placeholder(), colon: colonDisplay() }\n\t\t\t\"\n\t\t/>\n\t}\n}\n<ng-template #pillContent>\n\t<div class=\"filterPill_popover-content popover-contentOptional\">\n\t\t<ng-content />\n\t</div>\n</ng-template>\n<ng-template #defaultLabel>{{ label() }}{{ colonDisplay() }}</ng-template>\n", styles: ["@layer components{.filterPill{--components-filterPill-gap: 0;--components-filterPill-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-filterPill-label-fontWeightNormal: 400;--components-filterPill-label-fontWeightChecked: 600;--components-filterPill-borderColor: var(--palettes-neutral-100);--components-filterPill-backgroundColor: var(--palettes-neutral-0);--components-filterPill-color: var(--pr-t-color-text);--components-filterPill-label-cursor: pointer;--components-filterPill-checkbox-backgroundColor: var(--palettes-neutral-0);--components-filterPill-checkbox-color: var(--palettes-neutral-0);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-700);--components-filterPill-checkbox-icon-scale: 0;--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(.5, -.5, .5, 0);--components-filterPill-toggle-rotation: 0deg;--components-filterPill-toggle-iconColor: var(--palettes-neutral-600);--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);--components-filterPill-arrowColor: var(--palettes-product-700);--components-filterPill-label-maxInlineSize: none;--components-filterPill-toggle-marginInlineStart: var(--pr-t-spacings-50);display:flex;gap:var(--components-filterPill-gap);align-items:center;background-color:var(--components-filterPill-backgroundColor);inline-size:fit-content;padding:var(--components-filterPill-padding);border-radius:var(--pr-t-border-radius-default);color:var(--components-filterPill-color);font:var(--pr-t-font-body-S);box-shadow:var(--components-filterPill-shadow);position:relative;white-space:nowrap;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast);border:0}.filterPillWrapper{position:relative;inline-size:fit-content;display:var(--components-filterPillWrapper-display)}.filterPill_popover-content.popover-contentOptional{--components-dateInput-width: none;display:flex;flex-direction:column;gap:var(--pr-t-spacings-50)}.filterPill_popover-content.popover-contentOptional:has(.filterPill_popover-content-option){--components-popover-padding: var(--pr-t-spacings-50)}.filterPill_popover-content-option{padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);border-radius:var(--pr-t-border-radius-default);background-color:var(--components-filterPill-option-backgroundColor);position:relative;display:flex;gap:var(--pr-t-spacings-100);justify-content:space-between}.filterPill_popover-content-option .formLabel{position:static;cursor:pointer}.filterPill_popover-content-option .formLabel:before{content:\"\";position:absolute;inset:0}.filterPill_popover-content-option .filterPill_popover-content-option-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.filterPill_popover-content-option:hover{--components-filterPill-option-backgroundColor: var(--palettes-neutral-50)}.filterPill_popover-content-option:has(:checked){--components-filterPill-option-backgroundColor: var(--palettes-product-50)}.filterPill_popover-content-option:has(:checked) .filterPill_popover-content-option-actions:hover{background-color:var(--palettes-product-200)}.filterPill_popover-content-option:has(:checked):hover{--components-filterPill-option-backgroundColor: var(--palettes-product-100)}.filterPill_popover-content-option .filterPill_popover-content-option-actions:hover{background-color:var(--palettes-neutral-100)}.filterPill-icon{display:flex}.filterPill-icon .lucca-icon{--icon-size: 1.25rem}.filterPill-label{font-weight:var(--components-filterPill-label-fontWeight);overflow:hidden;text-overflow:ellipsis;text-align:center;flex-shrink:0;max-inline-size:var(--components-filterPill-label-maxInlineSize)}.filterPill-label:before{content:\"\";position:absolute;inset:0;cursor:var(--components-filterPill-label-cursor);z-index:1}.filterPill-toggle{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:flex;margin-block-start:-1px;inline-size:calc(var(--pr-t-spacings-50) + var(--pr-t-spacings-200));flex-shrink:0;z-index:1;color:var(--components-filterPill-toggle-iconColor);cursor:var(--components-filterPill-label-cursor);margin-inline-start:var(--components-filterPill-toggle-marginInlineStart)}.filterPill-toggle .icon-arrowChevronBottom{transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transform:rotate(var(--components-filterPill-toggle-rotation))}.filterPill-clear.clear{margin-inline-start:var(--pr-t-spacings-75);margin-inline-end:var(--pr-t-spacings-25);position:relative;z-index:1;--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-product-800)}.filterPill-clear.clear:hover{--components-clear-background: var(--palettes-product-700)}.filterPill-clear.clear:active{--components-clear-background: var(--palettes-product-900)}.filterPill_clear.clear{position:absolute;z-index:1;inset-inline-end:calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25));inset-block-start:var(--pr-t-spacings-100);--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-product-800)}.filterPill_clear.clear:hover{--components-clear-background: var(--palettes-product-700)}.filterPill_clear.clear:active{--components-clear-background: var(--palettes-product-900)}.filterPill-value{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;font-weight:var(--components-filterPill-label-fontWeightChecked);inline-size:auto;z-index:1;margin-inline-start:.5ch;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;cursor:var(--components-filterPill-label-cursor);max-inline-size:15rem}.filterPill-value .lucca-icon{color:var(--components-filterPill-arrowColor)}.filterPill-value:has(.lucca-icon){display:flex;align-items:center;gap:var(--pr-t-spacings-50)}.filterPill-label-placeholder{display:block;block-size:0;overflow:hidden;text-overflow:ellipsis;font-weight:var(--components-filterPill-label-fontWeightChecked)}.filterPill-checkbox{border:2px solid var(--components-filterPill-checkbox-borderColor);border-radius:var(--pr-t-border-radius-50);color:var(--components-filterPill-checkbox-color);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--components-filterPill-checkbox-backgroundColor);cursor:pointer;display:flex;order:-1}@media(prefers-reduced-motion:reduce){.filterPill-checkbox{transition-property:none}}.filterPill-checkbox-icon{inline-size:var(--pr-t-spacings-150);block-size:var(--pr-t-spacings-150)}.filterPill-checkbox-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(var(--components-filterPill-checkbox-icon-scale));transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transition-timing-function:var(--components-filterPill-checkbox-icon-timingFonction)}@media(prefers-reduced-motion:reduce){.filterPill-checkbox-icon-check{transition-property:none}}.filterPill-checkbox-icon-check:before{font-weight:var(--pr-t-font-fontWeight-regular);font-size:1rem;direction:ltr;font-family:var(--icon-fontFamily);font-feature-settings:\"liga\";font-style:normal;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;overflow-wrap:normal;content:\"\\e97d\"/\"\"}.filterPill-checkbox-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}}@layer mods{.filterPill:not(.is-filled) .filterPill-value{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.filterPill:not(.is-filled)+.filterPill_clear.clear{--components-clear-display: none}.filterPill:hover{--components-filterPill-borderColor: var(--palettes-product-400);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor), var(--pr-t-elevation-shadow-button)}.filterPill:active{--components-filterPill-backgroundColor: var(--palettes-neutral-0);box-shadow:0 0 0 1px var(--palettes-product-500),var(--pr-t-elevation-shadow-button)}.filterPill[aria-expanded=true]{--components-filterPill-toggle-rotation: 180deg}.filterPill.is-filled{--components-filterPill-borderColor: var(--palettes-product-300);--components-filterPill-backgroundColor: var(--palettes-product-50);--components-filterPill-color: var(--palettes-product-800);--components-filterPill-toggle-iconColor: var(--palettes-product-700)}.filterPill.is-filled:hover{--components-filterPill-borderColor: var(--palettes-product-400);--components-filterPill-checkbox-borderColor: var(--palettes-product-600);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-600)}.filterPill.is-filled:active{--components-filterPill-backgroundColor: var(--palettes-product-100);--components-filterPill-checkbox-borderColor: var(--palettes-product-700);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700)}.filterPill.is-filled:has(~.filterPill_clear){--components-filterPill-toggle-marginInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}.filterPill.mod-checkbox{--components-filterPill-gap: var(--pr-t-spacings-100);--components-filterPill-label-maxInlineSize: 15rem}.filterPill.mod-checkbox:has(.filterPill-checkbox-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.filterPill.mod-checkbox[aria-pressed=true],.filterPill.mod-checkbox:has(.filterPill-checkbox-input:checked){--components-filterPill-borderColor: var(--palettes-product-300);--components-filterPill-backgroundColor: var(--palettes-product-50);--components-filterPill-color: var(--palettes-product-800);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700);--components-filterPill-checkbox-borderColor: var(--palettes-product-700);--components-filterPill-checkbox-icon-scale: 1;--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(.5, 1, .5, 1.5);--components-filterPill-label-fontWeight: var(--components-filterPill-label-fontWeightChecked)}.filterPill.mod-checkbox[aria-pressed=true]:hover,.filterPill.mod-checkbox:has(.filterPill-checkbox-input:checked):hover{--components-filterPill-borderColor: var(--palettes-product-400);--components-filterPill-checkbox-borderColor: var(--palettes-product-600);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-600)}.filterPill.mod-checkbox[aria-pressed=true]:active,.filterPill.mod-checkbox:has(.filterPill-checkbox-input:checked):active{--components-filterPill-backgroundColor: var(--palettes-product-100);--components-filterPill-checkbox-borderColor: var(--palettes-product-700);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700)}.filterPill.mod-checkbox[disabled],.filterPill.mod-checkbox:has(.filterPill-checkbox-input:disabled){--components-filterPill-backgroundColor: var(--palettes-neutral-50);--components-filterPill-borderColor: var(--palettes-neutral-300);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-500);--components-filterPill-color: var(--palettes-neutral-500);--components-filterPill-label-cursor: default;box-shadow:0 0 0 1px var(--components-filterPill-borderColor)}.filterPill.mod-checkbox[disabled][aria-pressed=true],.filterPill.mod-checkbox[disabled]:has(.filterPill-checkbox-input:checked),.filterPill.mod-checkbox:has(.filterPill-checkbox-input:disabled)[aria-pressed=true],.filterPill.mod-checkbox:has(.filterPill-checkbox-input:disabled):has(.filterPill-checkbox-input:checked){--components-filterPill-backgroundColor: var(--palettes-neutral-50);--components-filterPill-borderColor: var(--palettes-neutral-300);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-100);--components-filterPill-checkbox-backgroundColor: var(--palettes-neutral-100);--components-filterPill-color: var(--palettes-neutral-500);--components-filterPill-checkbox-color: var(--palettes-neutral-500);--components-filterPill-label-cursor: default}.filterPill.mod-button{--components-filterPill-backgroundColor: var(--pr-t-elevation-surface-raised);border:0;padding:var(--pr-t-spacings-75);cursor:pointer}.filterPill.mod-button:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.filterPill[disabled]{--components-filterPill-backgroundColor: var(--palettes-neutral-50);--components-filterPill-borderColor: var(--palettes-neutral-300) !important;--components-filterPill-color: var(--palettes-neutral-500);--components-filterPill-toggle-iconColor: var(--palettes-neutral-500);--components-filterPill-label-cursor: default;--components-filterPill-arrowColor: var(--palettes-neutral-500);--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);box-shadow:var(--components-filterPill-shadow);--components-clear-display: none}}@layer components{.filterPillWrapper{--components-filterPillWrapper-display: block;--components-filterPill-option-backgroundColor: transparent}}@layer mods{.filterPillWrapper.is-hidden{--components-filterPillWrapper-display: none}}@layer components{.filterBar{--components-filterBar-scrollBox-flexGrow: 0;--components-filterBar-scrollBox-group-flexWrap: wrap;--components-filterBar-flexWrap: nowrap;--components-filterBar-scrollBox-export-marginInlineStart: auto;--components-filterBar-scrollBox-export-paddingInlineStart: var(--pr-t-spacings-200);display:flex;align-items:flex-start;flex-wrap:var(--components-filterBar-flexWrap);gap:var(--pr-t-spacings-100)}.filterBar .textField{--component-textField-borderRadius: var(--pr-t-border-radius-default);--component-textField-border: var(--palettes-neutral-100);--component-textField-borderHover: var(--palettes-product-400);--component-textField-width: 15rem;--component-textField-font: var(--pr-t-font-body-S);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem;--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}.filterBar .textField .textField-input-affix-toggle{--icon-size: 1.25rem}.filterBar .textField .textField-input-affix-clear.clear,.filterBar .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.filterBar .textField .textField-input-affix-icon{--icon-size: 1.25rem}.filterBar .textField .textField-prefix-lang:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture{--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-500) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-600) + var(--pr-t-spacings-50))}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{--components-divider-marginBlock: 0;--components-divider-marginInline: var(--pr-t-spacings-50);--components-divider-alignSelf: stretch}.filterBar-divider.divider:where(:empty),.filterBar-scrollBox-divider.divider:where(:empty){border-inline-start:var(--commons-divider-border)}.filterBar-divider.divider:not(:empty),.filterBar-scrollBox-divider.divider:not(:empty){--components-divider-direction: column;--components-divider-iconBottom: var(--pr-t-spacings-25);--components-divider-justify: center}.filterBar-divider.divider:not(:empty):before,.filterBar-divider.divider:not(:empty):after,.filterBar-scrollBox-divider.divider:not(:empty):before,.filterBar-scrollBox-divider.divider:not(:empty):after{border-inline-start:var(--commons-divider-border);min-block-size:var(--components-divider-minSize)}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{margin-inline:0;--components-divider-marginBlock: var(--pr-t-spacings-50)}.filterBar-divider.divider:last-child,.filterBar-scrollBox-divider.divider:last-child{display:none}.filterBar-scrollBox{flex-grow:var(--components-filterBar-scrollBox-flexGrow)}.filterBar-segmentedControl.segmentedControl{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.filterBar-segmentedControl.segmentedControl .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.filterBar-scrollBox-group{display:flex;gap:var(--pr-t-spacings-100);flex-wrap:var(--components-filterBar-scrollBox-group-flexWrap);flex-grow:1;flex-shrink:1!important}.filterBar-scrollBox-export{margin-inline-start:var(--components-filterBar-scrollBox-export-marginInlineStart);padding-inline-start:var(--components-filterBar-scrollBox-export-paddingInlineStart);flex-shrink:0;display:flex;gap:var(--pr-t-spacings-100)}.filterBar-scrollBox-tabs{margin-inline-start:auto;padding-inline-start:var(--pr-t-spacings-200);flex-shrink:0}.filterBar-scrollBox-tabs .segmentedControl{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.filterBar-scrollBox-tabs .segmentedControl .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}}@layer mods{@media not all and (min-width:40em){.filterBar{--components-filterBar-flexWrap: wrap}.filterBar .filterBar-segmentedControl.segmentedControl{--components-segmentedControl-direction: row;--components-segmentedControl-width: 100%}.filterBar .filterBar-scrollBox-tabs .segmentedControl{--components-segmentedControl-direction: row}.filterBar .filterBar-divider.divider{inline-size:100%}}@media(pointer:coarse){.filterBar{--components-filterBar-scrollBox-flexGrow: 1;--components-filterBar-scrollBox-group-flexWrap: nowrap}.filterBar .filterBar-segmentedControl.segmentedControl{--components-segmentedControl-whiteSpace: nowrap;--components-segmentedControl-width: auto;--components-segmentedControl-wrap: nowrap}.filterBar .filterBar-scrollBox-tabs .segmentedControl{--components-segmentedControl-whiteSpace: nowrap;--components-segmentedControl-wrap: nowrap}.filterBar .filterBar-scrollBox.scrollBox{scrollbar-width:none}.filterBar .filterBar-scrollBox.scrollBox::-webkit-scrollbar{display:none}.filterBar .filterBar-scrollBox.scrollBox{--components-scrollBox-backgroundColor: transparent}}@media not (pointer:coarse){.filterBar .filterBar-scrollBox.scrollBox{--components-scrollBox-pseudoElementsContent: none;--components-scrollBox-display: contents;--components-scrollBox-firstLast-display: none}}.filterBar .filterBar-scrollBox-tabs~.filterBar-scrollBox-export{--components-filterBar-scrollBox-export-marginInlineStart: 0;--components-filterBar-scrollBox-export-paddingInlineStart: 0}}\n"], dependencies: [{ kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["intl", "luPopover2", "luPopoverPosition", "luPopoverMaxBlockSize", "luPopoverMaxInlineSize", "overlayScrollStrategy", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverBackdrop", "luPopoverIgnoredOutsidePointerTargets", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: i1.LuTooltipTriggerDirective, selector: "[luTooltip],[prTooltip]", inputs: ["luTooltip", "prTooltip", "luTooltipEnterDelay", "prTooltipEnterDelay", "luTooltipLeaveDelay", "prTooltipLeaveDelay", "luTooltipDisabled", "prTooltipDisabled", "luTooltipOnlyForDisplay", "prTooltipOnlyForDisplay", "luTooltipPosition", "prTooltipPosition", "luTooltipWhenEllipsis", "prTooltipWhenEllipsis", "luTooltipAnchor", "prTooltipAnchor", "luTooltipTriggerAnchor", "prTooltipTriggerAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
342
|
+
], queries: [{ propertyName: "childInputComponentRef", first: true, predicate: FILTER_PILL_INPUT_COMPONENT, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverDirective, descendants: true, isSignal: true }, { propertyName: "defaultLabelTpl", first: true, predicate: ["defaultLabel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!isHidden()) {\n\t@if (iconOnly()) {\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"filterPill mod-button\"\n\t\t\t[attr.disabled]=\"disabled() ? 'disabled' : null\"\n\t\t\t[attr.aria-expanded]=\"popoverRef.opened()\"\n\t\t\t[luTooltip]=\"label()\"\n\t\t\tluTooltipOnlyForDisplay\n\t\t\t(keydown.arrowDown)=\"$event.preventDefault(); popoverRef.openPopover()\"\n\t\t\t(keydown.arrowUp)=\"$event.preventDefault(); popoverRef.openPopover()\"\n\t\t\t[luPopover2]=\"pillContent\"\n\t\t\t[luPopoverAnchor]=\"elementRef\"\n\t\t\t[luPopoverNoCloseButton]=\"true\"\n\t\t\t[luPopoverBackdrop]=\"backdrop()\"\n\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t(luPopoverOpened)=\"popoverOpened()\"\n\t\t\t(luPopoverClosed)=\"popoverClosed()\"\n\t\t\t#popoverRef=\"luPopover2\"\n\t\t>\n\t\t\t<lu-icon class=\"filterPill-icon\" [icon]=\"displayedIcon()\" [alt]=\"label()\" />\n\t\t</button>\n\t} @else if (layout() === \"default\") {\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"filterPill\"\n\t\t\t[attr.disabled]=\"disabled() ? 'disabled' : null\"\n\t\t\t[class.is-filled]=\"!this.inputIsEmpty()\"\n\t\t\t[attr.aria-expanded]=\"popoverRef.opened()\"\n\t\t\t(keydown.arrowDown)=\"$event.preventDefault(); popoverRef.openPopover(true)\"\n\t\t\t(keydown.arrowUp)=\"$event.preventDefault(); popoverRef.openPopover(true)\"\n\t\t\t[luPopover2]=\"pillContent\"\n\t\t\t[luPopoverAnchor]=\"elementRef\"\n\t\t\t[luPopoverNoCloseButton]=\"true\"\n\t\t\t[luPopoverBackdrop]=\"backdrop()\"\n\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t(luPopoverOpened)=\"popoverOpened()\"\n\t\t\t(luPopoverClosed)=\"popoverClosed()\"\n\t\t\t#filterPillRef\n\t\t\t#popoverRef=\"luPopover2\"\n\t\t>\n\t\t\t<span class=\"filterPill-label\">\n\t\t\t\t<ng-container\n\t\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\t\tlabelTpl();\n\t\t\t\t\t\tcontext: { label: label(), isEmpty: inputIsEmpty(), placeholder: placeholder(), colon: colonDisplay() }\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"filterPill-value\"\n\t\t\t\tluTooltip\n\t\t\t\tluTooltipWhenEllipsis\n\t\t\t\t[luTooltipDisabled]=\"inputIsEmpty()\"\n\t\t\t\t[luTooltipTriggerAnchor]=\"filterPillRef\"\n\t\t\t>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"pillTpl; context: { label: label(), isEmpty: inputIsEmpty() }\" />\n\t\t\t\t@if (inputIsEmpty() && !disabled()) {\n\t\t\t\t\t{{ placeholder() }}\n\t\t\t\t}\n\t\t\t</span>\n\t\t\t<span class=\"filterPill-toggle\">\n\t\t\t\t<lu-icon [icon]=\"displayedIcon()\" size=\"S\" />\n\t\t\t</span>\n\t\t</button>\n\t\t@if (inputIsClearable() && !disabled()) {\n\t\t\t<lu-clear class=\"filterPill_clear\" (onClear)=\"clear(); popoverRef.opened() ? null : filterPillRef.focus()\">{{\n\t\t\t\tintl().clear\n\t\t\t}}</lu-clear>\n\t\t}\n\t} @else {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\tlabelTpl();\n\t\t\t\tcontext: { label: label(), isEmpty: inputIsEmpty(), placeholder: placeholder(), colon: colonDisplay() }\n\t\t\t\"\n\t\t/>\n\t}\n}\n<ng-template #pillContent>\n\t<div class=\"filterPill_popover-content popover-contentOptional\">\n\t\t<ng-content />\n\t</div>\n</ng-template>\n<ng-template #defaultLabel>{{ label() }}{{ colonDisplay() }}</ng-template>\n", styles: ["@layer components{.filterPill{--components-filterPill-gap: 0;--components-filterPill-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-filterPill-label-fontWeightNormal: 400;--components-filterPill-label-fontWeightChecked: 600;--components-filterPill-borderColor: var(--palettes-neutral-100);--components-filterPill-backgroundColor: var(--palettes-neutral-0);--components-filterPill-color: var(--pr-t-color-text);--components-filterPill-label-cursor: pointer;--components-filterPill-checkbox-backgroundColor: var(--palettes-neutral-0);--components-filterPill-checkbox-color: var(--palettes-neutral-0);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-700);--components-filterPill-checkbox-icon-scale: 0;--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(.5, -.5, .5, 0);--components-filterPill-toggle-rotation: 0deg;--components-filterPill-toggle-iconColor: var(--palettes-neutral-600);--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);--components-filterPill-arrowColor: var(--palettes-product-700);--components-filterPill-label-maxInlineSize: none;--components-filterPill-toggle-marginInlineStart: var(--pr-t-spacings-50);display:flex;gap:var(--components-filterPill-gap);align-items:center;background-color:var(--components-filterPill-backgroundColor);inline-size:fit-content;padding:var(--components-filterPill-padding);border-radius:var(--pr-t-border-radius-default);color:var(--components-filterPill-color);font:var(--pr-t-font-body-S);box-shadow:var(--components-filterPill-shadow);position:relative;white-space:nowrap;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast);border:0}.filterPillWrapper{position:relative;inline-size:fit-content;display:var(--components-filterPillWrapper-display)}.filterPill_popover-content.popover-contentOptional{--components-dateInput-width: none;display:flex;flex-direction:column;gap:var(--pr-t-spacings-50)}.filterPill_popover-content.popover-contentOptional:has(.filterPill_popover-content-option){--components-popover-padding: var(--pr-t-spacings-50)}.filterPill_popover-content-option{padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);border-radius:var(--pr-t-border-radius-default);background-color:var(--components-filterPill-option-backgroundColor);position:relative;display:flex;gap:var(--pr-t-spacings-100);justify-content:space-between}.filterPill_popover-content-option .formLabel{position:static;cursor:pointer}.filterPill_popover-content-option .formLabel:before{content:\"\";position:absolute;inset:0}.filterPill_popover-content-option .filterPill_popover-content-option-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.filterPill_popover-content-option:hover{--components-filterPill-option-backgroundColor: var(--palettes-neutral-50)}.filterPill_popover-content-option:has(:checked){--components-filterPill-option-backgroundColor: var(--palettes-product-50)}.filterPill_popover-content-option:has(:checked) .filterPill_popover-content-option-actions:hover{background-color:var(--palettes-product-200)}.filterPill_popover-content-option:has(:checked):hover{--components-filterPill-option-backgroundColor: var(--palettes-product-100)}.filterPill_popover-content-option .filterPill_popover-content-option-actions:hover{background-color:var(--palettes-neutral-100)}.filterPill-icon{display:flex}.filterPill-icon .lucca-icon{--icon-size: 1.25rem}.filterPill-label{font-weight:var(--components-filterPill-label-fontWeight);overflow:hidden;text-overflow:ellipsis;text-align:center;flex-shrink:0;max-inline-size:var(--components-filterPill-label-maxInlineSize)}.filterPill-label:before{content:\"\";position:absolute;inset:0;cursor:var(--components-filterPill-label-cursor);z-index:1}.filterPill-toggle{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:flex;margin-block-start:-1px;inline-size:calc(var(--pr-t-spacings-50) + var(--pr-t-spacings-200));flex-shrink:0;z-index:1;color:var(--components-filterPill-toggle-iconColor);cursor:var(--components-filterPill-label-cursor);margin-inline-start:var(--components-filterPill-toggle-marginInlineStart)}.filterPill-toggle .icon-arrowChevronBottom{transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transform:rotate(var(--components-filterPill-toggle-rotation))}.filterPill-clear.clear{margin-inline-start:var(--pr-t-spacings-75);margin-inline-end:var(--pr-t-spacings-25);position:relative;z-index:1;--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-product-800)}.filterPill-clear.clear:hover{--components-clear-background: var(--palettes-product-700)}.filterPill-clear.clear:active{--components-clear-background: var(--palettes-product-900)}.filterPill_clear.clear{position:absolute;z-index:1;inset-inline-end:calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25));inset-block-start:var(--pr-t-spacings-100);--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-product-800)}.filterPill_clear.clear:hover{--components-clear-background: var(--palettes-product-700)}.filterPill_clear.clear:active{--components-clear-background: var(--palettes-product-900)}.filterPill-value{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;font-weight:var(--components-filterPill-label-fontWeightChecked);inline-size:auto;z-index:1;margin-inline-start:.5ch;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;cursor:var(--components-filterPill-label-cursor);max-inline-size:15rem}.filterPill-value .lucca-icon{color:var(--components-filterPill-arrowColor)}.filterPill-value:has(.lucca-icon){display:flex;align-items:center;gap:var(--pr-t-spacings-50)}.filterPill-label-placeholder{display:block;block-size:0;overflow:hidden;text-overflow:ellipsis;font-weight:var(--components-filterPill-label-fontWeightChecked)}.filterPill-checkbox{border:2px solid var(--components-filterPill-checkbox-borderColor);border-radius:var(--pr-t-border-radius-50);color:var(--components-filterPill-checkbox-color);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--components-filterPill-checkbox-backgroundColor);cursor:pointer;display:flex;order:-1}@media(prefers-reduced-motion:reduce){.filterPill-checkbox{transition-property:none}}.filterPill-checkbox-icon{inline-size:var(--pr-t-spacings-150);block-size:var(--pr-t-spacings-150)}.filterPill-checkbox-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(var(--components-filterPill-checkbox-icon-scale));transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transition-timing-function:var(--components-filterPill-checkbox-icon-timingFonction)}@media(prefers-reduced-motion:reduce){.filterPill-checkbox-icon-check{transition-property:none}}.filterPill-checkbox-icon-check:before{font-weight:var(--pr-t-font-fontWeight-regular);font-size:1rem;direction:ltr;font-family:var(--icon-fontFamily);font-feature-settings:\"liga\";font-style:normal;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;overflow-wrap:normal;content:\"\\e97d\"/\"\"}.filterPill-checkbox-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}}@layer mods{.filterPill:not(.is-filled) .filterPill-value{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.filterPill:not(.is-filled)+.filterPill_clear.clear{--components-clear-display: none}.filterPill:hover{--components-filterPill-borderColor: var(--palettes-product-400);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor), var(--pr-t-elevation-shadow-button)}.filterPill:active{--components-filterPill-backgroundColor: var(--palettes-neutral-0);box-shadow:0 0 0 1px var(--palettes-product-500),var(--pr-t-elevation-shadow-button)}.filterPill[aria-expanded=true]{--components-filterPill-toggle-rotation: 180deg}.filterPill.is-filled{--components-filterPill-borderColor: var(--palettes-product-300);--components-filterPill-backgroundColor: var(--palettes-product-50);--components-filterPill-color: var(--palettes-product-800);--components-filterPill-toggle-iconColor: var(--palettes-product-700)}.filterPill.is-filled:hover{--components-filterPill-borderColor: var(--palettes-product-400);--components-filterPill-checkbox-borderColor: var(--palettes-product-600);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-600)}.filterPill.is-filled:active{--components-filterPill-backgroundColor: var(--palettes-product-100);--components-filterPill-checkbox-borderColor: var(--palettes-product-700);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700)}.filterPill.is-filled:has(~.filterPill_clear){--components-filterPill-toggle-marginInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}.filterPill.mod-checkbox{--components-filterPill-gap: var(--pr-t-spacings-100);--components-filterPill-label-maxInlineSize: 15rem}.filterPill.mod-checkbox:has(.filterPill-checkbox-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.filterPill.mod-checkbox[aria-pressed=true],.filterPill.mod-checkbox:has(.filterPill-checkbox-input:checked){--components-filterPill-borderColor: var(--palettes-product-300);--components-filterPill-backgroundColor: var(--palettes-product-50);--components-filterPill-color: var(--palettes-product-800);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700);--components-filterPill-checkbox-borderColor: var(--palettes-product-700);--components-filterPill-checkbox-icon-scale: 1;--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(.5, 1, .5, 1.5);--components-filterPill-label-fontWeight: var(--components-filterPill-label-fontWeightChecked)}.filterPill.mod-checkbox[aria-pressed=true]:hover,.filterPill.mod-checkbox:has(.filterPill-checkbox-input:checked):hover{--components-filterPill-borderColor: var(--palettes-product-400);--components-filterPill-checkbox-borderColor: var(--palettes-product-600);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-600)}.filterPill.mod-checkbox[aria-pressed=true]:active,.filterPill.mod-checkbox:has(.filterPill-checkbox-input:checked):active{--components-filterPill-backgroundColor: var(--palettes-product-100);--components-filterPill-checkbox-borderColor: var(--palettes-product-700);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700)}.filterPill.mod-checkbox[disabled],.filterPill.mod-checkbox:has(.filterPill-checkbox-input:disabled){--components-filterPill-backgroundColor: var(--palettes-neutral-50);--components-filterPill-borderColor: var(--palettes-neutral-300);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-500);--components-filterPill-color: var(--palettes-neutral-500);--components-filterPill-label-cursor: default;box-shadow:0 0 0 1px var(--components-filterPill-borderColor)}.filterPill.mod-checkbox[disabled][aria-pressed=true],.filterPill.mod-checkbox[disabled]:has(.filterPill-checkbox-input:checked),.filterPill.mod-checkbox:has(.filterPill-checkbox-input:disabled)[aria-pressed=true],.filterPill.mod-checkbox:has(.filterPill-checkbox-input:disabled):has(.filterPill-checkbox-input:checked){--components-filterPill-backgroundColor: var(--palettes-neutral-50);--components-filterPill-borderColor: var(--palettes-neutral-300);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-100);--components-filterPill-checkbox-backgroundColor: var(--palettes-neutral-100);--components-filterPill-color: var(--palettes-neutral-500);--components-filterPill-checkbox-color: var(--palettes-neutral-500);--components-filterPill-label-cursor: default}.filterPill.mod-button{--components-filterPill-backgroundColor: var(--pr-t-elevation-surface-raised);border:0;padding:var(--pr-t-spacings-75);cursor:pointer}.filterPill.mod-button:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.filterPill[disabled]{--components-filterPill-backgroundColor: var(--palettes-neutral-50);--components-filterPill-borderColor: var(--palettes-neutral-300) !important;--components-filterPill-color: var(--palettes-neutral-500);--components-filterPill-toggle-iconColor: var(--palettes-neutral-500);--components-filterPill-label-cursor: default;--components-filterPill-arrowColor: var(--palettes-neutral-500);--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);box-shadow:var(--components-filterPill-shadow);--components-clear-display: none}}@layer components{.filterPillWrapper{--components-filterPillWrapper-display: block;--components-filterPill-option-backgroundColor: transparent}}@layer mods{.filterPillWrapper.is-hidden{--components-filterPillWrapper-display: none}}@layer components{.filterBar{--components-filterBar-scrollBox-flexGrow: 0;--components-filterBar-scrollBox-group-flexWrap: wrap;--components-filterBar-flexWrap: nowrap;--components-filterBar-scrollBox-export-marginInlineStart: auto;--components-filterBar-scrollBox-export-paddingInlineStart: var(--pr-t-spacings-200);display:flex;align-items:flex-start;flex-wrap:var(--components-filterBar-flexWrap);gap:var(--pr-t-spacings-100)}.filterBar .textField{--component-textField-borderRadius: var(--pr-t-border-radius-default);--component-textField-border: var(--palettes-neutral-100);--component-textField-borderHover: var(--palettes-product-400);--component-textField-width: 15rem;--component-textField-font: var(--pr-t-font-body-S);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem;--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}.filterBar .textField .textField-input-affix-toggle{--icon-size: 1.25rem}.filterBar .textField .textField-input-affix-clear.clear,.filterBar .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.filterBar .textField .textField-input-affix-icon{--icon-size: 1.25rem}.filterBar .textField .textField-prefix-lang:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture{--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-500) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-600) + var(--pr-t-spacings-50))}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{--components-divider-marginBlock: 0;--components-divider-marginInline: var(--pr-t-spacings-50);--components-divider-alignSelf: stretch}.filterBar-divider.divider:where(:empty),.filterBar-scrollBox-divider.divider:where(:empty){border-inline-start:var(--commons-divider-border)}.filterBar-divider.divider:not(:empty),.filterBar-scrollBox-divider.divider:not(:empty){--components-divider-direction: column;--components-divider-iconBottom: var(--pr-t-spacings-25);--components-divider-justify: center}.filterBar-divider.divider:not(:empty):before,.filterBar-divider.divider:not(:empty):after,.filterBar-scrollBox-divider.divider:not(:empty):before,.filterBar-scrollBox-divider.divider:not(:empty):after{border-inline-start:var(--commons-divider-border);min-block-size:var(--components-divider-minSize)}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{margin-inline:0;--components-divider-marginBlock: var(--pr-t-spacings-75)}.filterBar-divider.divider:last-child,.filterBar-scrollBox-divider.divider:last-child{display:none}.filterBar-scrollBox{flex-grow:var(--components-filterBar-scrollBox-flexGrow)}.filterBar-segmentedControl.segmentedControl{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.filterBar-segmentedControl.segmentedControl .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.filterBar-scrollBox-group{display:flex;gap:var(--pr-t-spacings-100);flex-wrap:var(--components-filterBar-scrollBox-group-flexWrap);flex-grow:1;flex-shrink:1!important}.filterBar-scrollBox-group .button{white-space:nowrap}.filterBar-scrollBox-group-results{align-self:center;color:var(--pr-t-color-text-subtle);white-space:nowrap}.filterBar-scrollBox-export{margin-inline-start:var(--components-filterBar-scrollBox-export-marginInlineStart);padding-inline-start:var(--components-filterBar-scrollBox-export-paddingInlineStart);flex-shrink:0;display:flex;gap:var(--pr-t-spacings-100)}.filterBar-scrollBox-tabs{margin-inline-start:auto;padding-inline-start:var(--pr-t-spacings-200);flex-shrink:0}.filterBar-scrollBox-tabs .segmentedControl{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.filterBar-scrollBox-tabs .segmentedControl .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}}@layer mods{@media not all and (min-width:40em){.filterBar{--components-filterBar-flexWrap: wrap}.filterBar .filterBar-segmentedControl.segmentedControl{--components-segmentedControl-direction: row;--components-segmentedControl-width: 100%}.filterBar .filterBar-scrollBox-tabs .segmentedControl{--components-segmentedControl-direction: row}.filterBar .filterBar-divider.divider{inline-size:100%}}@media(pointer:coarse){.filterBar{--components-filterBar-scrollBox-flexGrow: 1;--components-filterBar-scrollBox-group-flexWrap: nowrap}.filterBar .filterBar-segmentedControl.segmentedControl{--components-segmentedControl-whiteSpace: nowrap;--components-segmentedControl-width: auto;--components-segmentedControl-wrap: nowrap}.filterBar .filterBar-scrollBox-tabs .segmentedControl{--components-segmentedControl-whiteSpace: nowrap;--components-segmentedControl-wrap: nowrap}.filterBar .filterBar-scrollBox.scrollBox{scrollbar-width:none}.filterBar .filterBar-scrollBox.scrollBox::-webkit-scrollbar{display:none}.filterBar .filterBar-scrollBox.scrollBox{--components-scrollBox-backgroundColor: transparent}}@media not (pointer:coarse){.filterBar .filterBar-scrollBox.scrollBox{--components-scrollBox-pseudoElementsContent: none;--components-scrollBox-display: contents;--components-scrollBox-firstLast-display: none}}.filterBar .filterBar-scrollBox-tabs~.filterBar-scrollBox-export{--components-filterBar-scrollBox-export-marginInlineStart: 0;--components-filterBar-scrollBox-export-paddingInlineStart: 0}}\n"], dependencies: [{ kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["intl", "luPopover2", "luPopoverPosition", "luPopoverMaxBlockSize", "luPopoverMaxInlineSize", "overlayScrollStrategy", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverBackdrop", "luPopoverIgnoredOutsidePointerTargets", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: i1.LuTooltipTriggerDirective, selector: "[luTooltip],[prTooltip]", inputs: ["luTooltip", "prTooltip", "luTooltipEnterDelay", "prTooltipEnterDelay", "luTooltipLeaveDelay", "prTooltipLeaveDelay", "luTooltipDisabled", "prTooltipDisabled", "luTooltipOnlyForDisplay", "prTooltipOnlyForDisplay", "luTooltipPosition", "prTooltipPosition", "luTooltipWhenEllipsis", "prTooltipWhenEllipsis", "luTooltipAnchor", "prTooltipAnchor", "luTooltipTriggerAnchor", "prTooltipTriggerAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
296
343
|
}
|
|
297
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1
|
|
344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: FilterPillComponent, decorators: [{
|
|
298
345
|
type: Component,
|
|
299
346
|
args: [{ selector: 'lu-filter-pill', imports: [PopoverDirective, FormsModule, IconComponent, NgTemplateOutlet, LuTooltipModule, ClearComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
300
347
|
{
|
|
@@ -308,7 +355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
308
355
|
'[class.is-filled]': 'isFilled',
|
|
309
356
|
'[class.is-comboboxHidden]': 'hideCombobox',
|
|
310
357
|
'(click)': 'hostClick()',
|
|
311
|
-
}, template: "@if (!isHidden()) {\n\t@if (iconOnly()) {\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"filterPill mod-button\"\n\t\t\t[attr.disabled]=\"disabled() ? 'disabled' : null\"\n\t\t\t[attr.aria-expanded]=\"popoverRef.opened()\"\n\t\t\t[luTooltip]=\"label()\"\n\t\t\tluTooltipOnlyForDisplay\n\t\t\t(keydown.arrowDown)=\"$event.preventDefault(); popoverRef.openPopover()\"\n\t\t\t(keydown.arrowUp)=\"$event.preventDefault(); popoverRef.openPopover()\"\n\t\t\t[luPopover2]=\"pillContent\"\n\t\t\t[luPopoverAnchor]=\"elementRef\"\n\t\t\t[luPopoverNoCloseButton]=\"true\"\n\t\t\t[luPopoverBackdrop]=\"backdrop()\"\n\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t(luPopoverOpened)=\"popoverOpened()\"\n\t\t\t(luPopoverClosed)=\"popoverClosed()\"\n\t\t\t#popoverRef=\"luPopover2\"\n\t\t>\n\t\t\t<lu-icon class=\"filterPill-icon\" [icon]=\"displayedIcon()\" [alt]=\"label()\" />\n\t\t</button>\n\t} @else if (layout() === \"default\") {\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"filterPill\"\n\t\t\t[attr.disabled]=\"disabled() ? 'disabled' : null\"\n\t\t\t[class.is-filled]=\"!this.inputIsEmpty()\"\n\t\t\t[attr.aria-expanded]=\"popoverRef.opened()\"\n\t\t\t(keydown.arrowDown)=\"$event.preventDefault(); popoverRef.openPopover(true)\"\n\t\t\t(keydown.arrowUp)=\"$event.preventDefault(); popoverRef.openPopover(true)\"\n\t\t\t[luPopover2]=\"pillContent\"\n\t\t\t[luPopoverAnchor]=\"elementRef\"\n\t\t\t[luPopoverNoCloseButton]=\"true\"\n\t\t\t[luPopoverBackdrop]=\"backdrop()\"\n\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t(luPopoverOpened)=\"popoverOpened()\"\n\t\t\t(luPopoverClosed)=\"popoverClosed()\"\n\t\t\t#filterPillRef\n\t\t\t#popoverRef=\"luPopover2\"\n\t\t>\n\t\t\t<span class=\"filterPill-label\">\n\t\t\t\t<ng-container\n\t\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\t\tlabelTpl();\n\t\t\t\t\t\tcontext: { label: label(), isEmpty: inputIsEmpty(), placeholder: placeholder(), colon: colonDisplay() }\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"filterPill-value\"\n\t\t\t\tluTooltip\n\t\t\t\tluTooltipWhenEllipsis\n\t\t\t\t[luTooltipDisabled]=\"inputIsEmpty()\"\n\t\t\t\t[luTooltipTriggerAnchor]=\"filterPillRef\"\n\t\t\t>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"pillTpl; context: { label: label(), isEmpty: inputIsEmpty() }\" />\n\t\t\t\t@if (inputIsEmpty() && !disabled()) {\n\t\t\t\t\t{{ placeholder() }}\n\t\t\t\t}\n\t\t\t</span>\n\t\t\t<span class=\"filterPill-toggle\">\n\t\t\t\t<lu-icon [icon]=\"displayedIcon()\" size=\"S\" />\n\t\t\t</span>\n\t\t</button>\n\t\t@if (inputIsClearable()) {\n\t\t\t<lu-clear class=\"filterPill_clear\" (onClear)=\"clear(); popoverRef.opened() ? null : filterPillRef.focus()\">{{\n\t\t\t\tintl().clear\n\t\t\t}}</lu-clear>\n\t\t}\n\t} @else {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\tlabelTpl();\n\t\t\t\tcontext: { label: label(), isEmpty: inputIsEmpty(), placeholder: placeholder(), colon: colonDisplay() }\n\t\t\t\"\n\t\t/>\n\t}\n}\n<ng-template #pillContent>\n\t<div class=\"filterPill_popover-content popover-contentOptional\">\n\t\t<ng-content />\n\t</div>\n</ng-template>\n<ng-template #defaultLabel>{{ label() }}{{ colonDisplay() }}</ng-template>\n", styles: ["@layer components{.filterPill{--components-filterPill-gap: 0;--components-filterPill-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-filterPill-label-fontWeightNormal: 400;--components-filterPill-label-fontWeightChecked: 600;--components-filterPill-borderColor: var(--palettes-neutral-100);--components-filterPill-backgroundColor: var(--palettes-neutral-0);--components-filterPill-color: var(--pr-t-color-text);--components-filterPill-label-cursor: pointer;--components-filterPill-checkbox-backgroundColor: var(--palettes-neutral-0);--components-filterPill-checkbox-color: var(--palettes-neutral-0);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-700);--components-filterPill-checkbox-icon-scale: 0;--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(.5, -.5, .5, 0);--components-filterPill-toggle-rotation: 0deg;--components-filterPill-toggle-iconColor: var(--palettes-neutral-600);--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);--components-filterPill-arrowColor: var(--palettes-product-700);--components-filterPill-label-maxInlineSize: none;--components-filterPill-toggle-marginInlineStart: var(--pr-t-spacings-50);display:flex;gap:var(--components-filterPill-gap);align-items:center;background-color:var(--components-filterPill-backgroundColor);inline-size:fit-content;padding:var(--components-filterPill-padding);border-radius:var(--pr-t-border-radius-default);color:var(--components-filterPill-color);font:var(--pr-t-font-body-S);box-shadow:var(--components-filterPill-shadow);position:relative;white-space:nowrap;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast);border:0}.filterPillWrapper{position:relative;inline-size:fit-content;display:var(--components-filterPillWrapper-display)}.filterPill_popover-content.popover-contentOptional{--components-dateInput-width: none;display:flex;flex-direction:column;gap:var(--pr-t-spacings-50)}.filterPill_popover-content.popover-contentOptional:has(.filterPill_popover-content-option){--components-popover-padding: var(--pr-t-spacings-50)}.filterPill_popover-content-option{padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);border-radius:var(--pr-t-border-radius-default);background-color:var(--components-filterPill-option-backgroundColor);position:relative;display:flex;gap:var(--pr-t-spacings-100);justify-content:space-between}.filterPill_popover-content-option .formLabel{position:static;cursor:pointer}.filterPill_popover-content-option .formLabel:before{content:\"\";position:absolute;inset:0}.filterPill_popover-content-option .filterPill_popover-content-option-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.filterPill_popover-content-option:hover{--components-filterPill-option-backgroundColor: var(--palettes-neutral-50)}.filterPill_popover-content-option:has(:checked){--components-filterPill-option-backgroundColor: var(--palettes-product-50)}.filterPill_popover-content-option:has(:checked) .filterPill_popover-content-option-actions:hover{background-color:var(--palettes-product-200)}.filterPill_popover-content-option:has(:checked):hover{--components-filterPill-option-backgroundColor: var(--palettes-product-100)}.filterPill_popover-content-option .filterPill_popover-content-option-actions:hover{background-color:var(--palettes-neutral-100)}.filterPill-icon{display:flex}.filterPill-icon .lucca-icon{--icon-size: 1.25rem}.filterPill-label{font-weight:var(--components-filterPill-label-fontWeight);overflow:hidden;text-overflow:ellipsis;text-align:center;flex-shrink:0;max-inline-size:var(--components-filterPill-label-maxInlineSize)}.filterPill-label:before{content:\"\";position:absolute;inset:0;cursor:var(--components-filterPill-label-cursor);z-index:1}.filterPill-toggle{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:flex;margin-block-start:-1px;inline-size:calc(var(--pr-t-spacings-50) + var(--pr-t-spacings-200));flex-shrink:0;z-index:1;color:var(--components-filterPill-toggle-iconColor);cursor:var(--components-filterPill-label-cursor);margin-inline-start:var(--components-filterPill-toggle-marginInlineStart)}.filterPill-toggle .icon-arrowChevronBottom{transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transform:rotate(var(--components-filterPill-toggle-rotation))}.filterPill-clear.clear{margin-inline-start:var(--pr-t-spacings-75);margin-inline-end:var(--pr-t-spacings-25);position:relative;z-index:1;--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-product-800)}.filterPill-clear.clear:hover{--components-clear-background: var(--palettes-product-700)}.filterPill-clear.clear:active{--components-clear-background: var(--palettes-product-900)}.filterPill_clear.clear{position:absolute;z-index:1;inset-inline-end:calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25));inset-block-start:var(--pr-t-spacings-100);--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-product-800)}.filterPill_clear.clear:hover{--components-clear-background: var(--palettes-product-700)}.filterPill_clear.clear:active{--components-clear-background: var(--palettes-product-900)}.filterPill-value{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;font-weight:var(--components-filterPill-label-fontWeightChecked);inline-size:auto;z-index:1;margin-inline-start:.5ch;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;cursor:var(--components-filterPill-label-cursor);max-inline-size:15rem}.filterPill-value .lucca-icon{color:var(--components-filterPill-arrowColor)}.filterPill-value:has(.lucca-icon){display:flex;align-items:center;gap:var(--pr-t-spacings-50)}.filterPill-label-placeholder{display:block;block-size:0;overflow:hidden;text-overflow:ellipsis;font-weight:var(--components-filterPill-label-fontWeightChecked)}.filterPill-checkbox{border:2px solid var(--components-filterPill-checkbox-borderColor);border-radius:var(--pr-t-border-radius-50);color:var(--components-filterPill-checkbox-color);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--components-filterPill-checkbox-backgroundColor);cursor:pointer;display:flex;order:-1}@media(prefers-reduced-motion:reduce){.filterPill-checkbox{transition-property:none}}.filterPill-checkbox-icon{inline-size:var(--pr-t-spacings-150);block-size:var(--pr-t-spacings-150)}.filterPill-checkbox-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(var(--components-filterPill-checkbox-icon-scale));transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transition-timing-function:var(--components-filterPill-checkbox-icon-timingFonction)}@media(prefers-reduced-motion:reduce){.filterPill-checkbox-icon-check{transition-property:none}}.filterPill-checkbox-icon-check:before{font-weight:var(--pr-t-font-fontWeight-regular);font-size:1rem;direction:ltr;font-family:var(--icon-fontFamily);font-feature-settings:\"liga\";font-style:normal;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;overflow-wrap:normal;content:\"\\e97d\"/\"\"}.filterPill-checkbox-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}}@layer mods{.filterPill:not(.is-filled) .filterPill-value{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.filterPill:not(.is-filled)+.filterPill_clear.clear{--components-clear-display: none}.filterPill:hover{--components-filterPill-borderColor: var(--palettes-product-400);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor), var(--pr-t-elevation-shadow-button)}.filterPill:active{--components-filterPill-backgroundColor: var(--palettes-neutral-0);box-shadow:0 0 0 1px var(--palettes-product-500),var(--pr-t-elevation-shadow-button)}.filterPill[aria-expanded=true]{--components-filterPill-toggle-rotation: 180deg}.filterPill.is-filled{--components-filterPill-borderColor: var(--palettes-product-300);--components-filterPill-backgroundColor: var(--palettes-product-50);--components-filterPill-color: var(--palettes-product-800);--components-filterPill-toggle-iconColor: var(--palettes-product-700)}.filterPill.is-filled:hover{--components-filterPill-borderColor: var(--palettes-product-400);--components-filterPill-checkbox-borderColor: var(--palettes-product-600);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-600)}.filterPill.is-filled:active{--components-filterPill-backgroundColor: var(--palettes-product-100);--components-filterPill-checkbox-borderColor: var(--palettes-product-700);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700)}.filterPill.is-filled:has(~.filterPill_clear){--components-filterPill-toggle-marginInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}.filterPill.mod-checkbox{--components-filterPill-gap: var(--pr-t-spacings-100);--components-filterPill-label-maxInlineSize: 15rem}.filterPill.mod-checkbox:has(.filterPill-checkbox-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.filterPill.mod-checkbox[aria-pressed=true],.filterPill.mod-checkbox:has(.filterPill-checkbox-input:checked){--components-filterPill-borderColor: var(--palettes-product-300);--components-filterPill-backgroundColor: var(--palettes-product-50);--components-filterPill-color: var(--palettes-product-800);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700);--components-filterPill-checkbox-borderColor: var(--palettes-product-700);--components-filterPill-checkbox-icon-scale: 1;--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(.5, 1, .5, 1.5);--components-filterPill-label-fontWeight: var(--components-filterPill-label-fontWeightChecked)}.filterPill.mod-checkbox[aria-pressed=true]:hover,.filterPill.mod-checkbox:has(.filterPill-checkbox-input:checked):hover{--components-filterPill-borderColor: var(--palettes-product-400);--components-filterPill-checkbox-borderColor: var(--palettes-product-600);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-600)}.filterPill.mod-checkbox[aria-pressed=true]:active,.filterPill.mod-checkbox:has(.filterPill-checkbox-input:checked):active{--components-filterPill-backgroundColor: var(--palettes-product-100);--components-filterPill-checkbox-borderColor: var(--palettes-product-700);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700)}.filterPill.mod-checkbox[disabled],.filterPill.mod-checkbox:has(.filterPill-checkbox-input:disabled){--components-filterPill-backgroundColor: var(--palettes-neutral-50);--components-filterPill-borderColor: var(--palettes-neutral-300);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-500);--components-filterPill-color: var(--palettes-neutral-500);--components-filterPill-label-cursor: default;box-shadow:0 0 0 1px var(--components-filterPill-borderColor)}.filterPill.mod-checkbox[disabled][aria-pressed=true],.filterPill.mod-checkbox[disabled]:has(.filterPill-checkbox-input:checked),.filterPill.mod-checkbox:has(.filterPill-checkbox-input:disabled)[aria-pressed=true],.filterPill.mod-checkbox:has(.filterPill-checkbox-input:disabled):has(.filterPill-checkbox-input:checked){--components-filterPill-backgroundColor: var(--palettes-neutral-50);--components-filterPill-borderColor: var(--palettes-neutral-300);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-100);--components-filterPill-checkbox-backgroundColor: var(--palettes-neutral-100);--components-filterPill-color: var(--palettes-neutral-500);--components-filterPill-checkbox-color: var(--palettes-neutral-500);--components-filterPill-label-cursor: default}.filterPill.mod-button{--components-filterPill-backgroundColor: var(--pr-t-elevation-surface-raised);border:0;padding:var(--pr-t-spacings-75);cursor:pointer}.filterPill.mod-button:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.filterPill[disabled]{--components-filterPill-backgroundColor: var(--palettes-neutral-50);--components-filterPill-borderColor: var(--palettes-neutral-300) !important;--components-filterPill-color: var(--palettes-neutral-500);--components-filterPill-toggle-iconColor: var(--palettes-neutral-500);--components-filterPill-label-cursor: default;--components-filterPill-arrowColor: var(--palettes-neutral-500);--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);box-shadow:var(--components-filterPill-shadow);--components-clear-display: none}}@layer components{.filterPillWrapper{--components-filterPillWrapper-display: block;--components-filterPill-option-backgroundColor: transparent}}@layer mods{.filterPillWrapper.is-hidden{--components-filterPillWrapper-display: none}}@layer components{.filterBar{--components-filterBar-scrollBox-flexGrow: 0;--components-filterBar-scrollBox-group-flexWrap: wrap;--components-filterBar-flexWrap: nowrap;--components-filterBar-scrollBox-export-marginInlineStart: auto;--components-filterBar-scrollBox-export-paddingInlineStart: var(--pr-t-spacings-200);display:flex;align-items:flex-start;flex-wrap:var(--components-filterBar-flexWrap);gap:var(--pr-t-spacings-100)}.filterBar .textField{--component-textField-borderRadius: var(--pr-t-border-radius-default);--component-textField-border: var(--palettes-neutral-100);--component-textField-borderHover: var(--palettes-product-400);--component-textField-width: 15rem;--component-textField-font: var(--pr-t-font-body-S);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem;--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}.filterBar .textField .textField-input-affix-toggle{--icon-size: 1.25rem}.filterBar .textField .textField-input-affix-clear.clear,.filterBar .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.filterBar .textField .textField-input-affix-icon{--icon-size: 1.25rem}.filterBar .textField .textField-prefix-lang:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture{--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-500) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-600) + var(--pr-t-spacings-50))}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{--components-divider-marginBlock: 0;--components-divider-marginInline: var(--pr-t-spacings-50);--components-divider-alignSelf: stretch}.filterBar-divider.divider:where(:empty),.filterBar-scrollBox-divider.divider:where(:empty){border-inline-start:var(--commons-divider-border)}.filterBar-divider.divider:not(:empty),.filterBar-scrollBox-divider.divider:not(:empty){--components-divider-direction: column;--components-divider-iconBottom: var(--pr-t-spacings-25);--components-divider-justify: center}.filterBar-divider.divider:not(:empty):before,.filterBar-divider.divider:not(:empty):after,.filterBar-scrollBox-divider.divider:not(:empty):before,.filterBar-scrollBox-divider.divider:not(:empty):after{border-inline-start:var(--commons-divider-border);min-block-size:var(--components-divider-minSize)}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{margin-inline:0;--components-divider-marginBlock: var(--pr-t-spacings-50)}.filterBar-divider.divider:last-child,.filterBar-scrollBox-divider.divider:last-child{display:none}.filterBar-scrollBox{flex-grow:var(--components-filterBar-scrollBox-flexGrow)}.filterBar-segmentedControl.segmentedControl{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.filterBar-segmentedControl.segmentedControl .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.filterBar-scrollBox-group{display:flex;gap:var(--pr-t-spacings-100);flex-wrap:var(--components-filterBar-scrollBox-group-flexWrap);flex-grow:1;flex-shrink:1!important}.filterBar-scrollBox-export{margin-inline-start:var(--components-filterBar-scrollBox-export-marginInlineStart);padding-inline-start:var(--components-filterBar-scrollBox-export-paddingInlineStart);flex-shrink:0;display:flex;gap:var(--pr-t-spacings-100)}.filterBar-scrollBox-tabs{margin-inline-start:auto;padding-inline-start:var(--pr-t-spacings-200);flex-shrink:0}.filterBar-scrollBox-tabs .segmentedControl{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.filterBar-scrollBox-tabs .segmentedControl .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}}@layer mods{@media not all and (min-width:40em){.filterBar{--components-filterBar-flexWrap: wrap}.filterBar .filterBar-segmentedControl.segmentedControl{--components-segmentedControl-direction: row;--components-segmentedControl-width: 100%}.filterBar .filterBar-scrollBox-tabs .segmentedControl{--components-segmentedControl-direction: row}.filterBar .filterBar-divider.divider{inline-size:100%}}@media(pointer:coarse){.filterBar{--components-filterBar-scrollBox-flexGrow: 1;--components-filterBar-scrollBox-group-flexWrap: nowrap}.filterBar .filterBar-segmentedControl.segmentedControl{--components-segmentedControl-whiteSpace: nowrap;--components-segmentedControl-width: auto;--components-segmentedControl-wrap: nowrap}.filterBar .filterBar-scrollBox-tabs .segmentedControl{--components-segmentedControl-whiteSpace: nowrap;--components-segmentedControl-wrap: nowrap}.filterBar .filterBar-scrollBox.scrollBox{scrollbar-width:none}.filterBar .filterBar-scrollBox.scrollBox::-webkit-scrollbar{display:none}.filterBar .filterBar-scrollBox.scrollBox{--components-scrollBox-backgroundColor: transparent}}@media not (pointer:coarse){.filterBar .filterBar-scrollBox.scrollBox{--components-scrollBox-pseudoElementsContent: none;--components-scrollBox-display: contents;--components-scrollBox-firstLast-display: none}}.filterBar .filterBar-scrollBox-tabs~.filterBar-scrollBox-export{--components-filterBar-scrollBox-export-marginInlineStart: 0;--components-filterBar-scrollBox-export-paddingInlineStart: 0}}\n"] }]
|
|
358
|
+
}, template: "@if (!isHidden()) {\n\t@if (iconOnly()) {\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"filterPill mod-button\"\n\t\t\t[attr.disabled]=\"disabled() ? 'disabled' : null\"\n\t\t\t[attr.aria-expanded]=\"popoverRef.opened()\"\n\t\t\t[luTooltip]=\"label()\"\n\t\t\tluTooltipOnlyForDisplay\n\t\t\t(keydown.arrowDown)=\"$event.preventDefault(); popoverRef.openPopover()\"\n\t\t\t(keydown.arrowUp)=\"$event.preventDefault(); popoverRef.openPopover()\"\n\t\t\t[luPopover2]=\"pillContent\"\n\t\t\t[luPopoverAnchor]=\"elementRef\"\n\t\t\t[luPopoverNoCloseButton]=\"true\"\n\t\t\t[luPopoverBackdrop]=\"backdrop()\"\n\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t(luPopoverOpened)=\"popoverOpened()\"\n\t\t\t(luPopoverClosed)=\"popoverClosed()\"\n\t\t\t#popoverRef=\"luPopover2\"\n\t\t>\n\t\t\t<lu-icon class=\"filterPill-icon\" [icon]=\"displayedIcon()\" [alt]=\"label()\" />\n\t\t</button>\n\t} @else if (layout() === \"default\") {\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"filterPill\"\n\t\t\t[attr.disabled]=\"disabled() ? 'disabled' : null\"\n\t\t\t[class.is-filled]=\"!this.inputIsEmpty()\"\n\t\t\t[attr.aria-expanded]=\"popoverRef.opened()\"\n\t\t\t(keydown.arrowDown)=\"$event.preventDefault(); popoverRef.openPopover(true)\"\n\t\t\t(keydown.arrowUp)=\"$event.preventDefault(); popoverRef.openPopover(true)\"\n\t\t\t[luPopover2]=\"pillContent\"\n\t\t\t[luPopoverAnchor]=\"elementRef\"\n\t\t\t[luPopoverNoCloseButton]=\"true\"\n\t\t\t[luPopoverBackdrop]=\"backdrop()\"\n\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t(luPopoverOpened)=\"popoverOpened()\"\n\t\t\t(luPopoverClosed)=\"popoverClosed()\"\n\t\t\t#filterPillRef\n\t\t\t#popoverRef=\"luPopover2\"\n\t\t>\n\t\t\t<span class=\"filterPill-label\">\n\t\t\t\t<ng-container\n\t\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\t\tlabelTpl();\n\t\t\t\t\t\tcontext: { label: label(), isEmpty: inputIsEmpty(), placeholder: placeholder(), colon: colonDisplay() }\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"filterPill-value\"\n\t\t\t\tluTooltip\n\t\t\t\tluTooltipWhenEllipsis\n\t\t\t\t[luTooltipDisabled]=\"inputIsEmpty()\"\n\t\t\t\t[luTooltipTriggerAnchor]=\"filterPillRef\"\n\t\t\t>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"pillTpl; context: { label: label(), isEmpty: inputIsEmpty() }\" />\n\t\t\t\t@if (inputIsEmpty() && !disabled()) {\n\t\t\t\t\t{{ placeholder() }}\n\t\t\t\t}\n\t\t\t</span>\n\t\t\t<span class=\"filterPill-toggle\">\n\t\t\t\t<lu-icon [icon]=\"displayedIcon()\" size=\"S\" />\n\t\t\t</span>\n\t\t</button>\n\t\t@if (inputIsClearable() && !disabled()) {\n\t\t\t<lu-clear class=\"filterPill_clear\" (onClear)=\"clear(); popoverRef.opened() ? null : filterPillRef.focus()\">{{\n\t\t\t\tintl().clear\n\t\t\t}}</lu-clear>\n\t\t}\n\t} @else {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\tlabelTpl();\n\t\t\t\tcontext: { label: label(), isEmpty: inputIsEmpty(), placeholder: placeholder(), colon: colonDisplay() }\n\t\t\t\"\n\t\t/>\n\t}\n}\n<ng-template #pillContent>\n\t<div class=\"filterPill_popover-content popover-contentOptional\">\n\t\t<ng-content />\n\t</div>\n</ng-template>\n<ng-template #defaultLabel>{{ label() }}{{ colonDisplay() }}</ng-template>\n", styles: ["@layer components{.filterPill{--components-filterPill-gap: 0;--components-filterPill-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-filterPill-label-fontWeightNormal: 400;--components-filterPill-label-fontWeightChecked: 600;--components-filterPill-borderColor: var(--palettes-neutral-100);--components-filterPill-backgroundColor: var(--palettes-neutral-0);--components-filterPill-color: var(--pr-t-color-text);--components-filterPill-label-cursor: pointer;--components-filterPill-checkbox-backgroundColor: var(--palettes-neutral-0);--components-filterPill-checkbox-color: var(--palettes-neutral-0);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-700);--components-filterPill-checkbox-icon-scale: 0;--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(.5, -.5, .5, 0);--components-filterPill-toggle-rotation: 0deg;--components-filterPill-toggle-iconColor: var(--palettes-neutral-600);--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);--components-filterPill-arrowColor: var(--palettes-product-700);--components-filterPill-label-maxInlineSize: none;--components-filterPill-toggle-marginInlineStart: var(--pr-t-spacings-50);display:flex;gap:var(--components-filterPill-gap);align-items:center;background-color:var(--components-filterPill-backgroundColor);inline-size:fit-content;padding:var(--components-filterPill-padding);border-radius:var(--pr-t-border-radius-default);color:var(--components-filterPill-color);font:var(--pr-t-font-body-S);box-shadow:var(--components-filterPill-shadow);position:relative;white-space:nowrap;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast);border:0}.filterPillWrapper{position:relative;inline-size:fit-content;display:var(--components-filterPillWrapper-display)}.filterPill_popover-content.popover-contentOptional{--components-dateInput-width: none;display:flex;flex-direction:column;gap:var(--pr-t-spacings-50)}.filterPill_popover-content.popover-contentOptional:has(.filterPill_popover-content-option){--components-popover-padding: var(--pr-t-spacings-50)}.filterPill_popover-content-option{padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);border-radius:var(--pr-t-border-radius-default);background-color:var(--components-filterPill-option-backgroundColor);position:relative;display:flex;gap:var(--pr-t-spacings-100);justify-content:space-between}.filterPill_popover-content-option .formLabel{position:static;cursor:pointer}.filterPill_popover-content-option .formLabel:before{content:\"\";position:absolute;inset:0}.filterPill_popover-content-option .filterPill_popover-content-option-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.filterPill_popover-content-option:hover{--components-filterPill-option-backgroundColor: var(--palettes-neutral-50)}.filterPill_popover-content-option:has(:checked){--components-filterPill-option-backgroundColor: var(--palettes-product-50)}.filterPill_popover-content-option:has(:checked) .filterPill_popover-content-option-actions:hover{background-color:var(--palettes-product-200)}.filterPill_popover-content-option:has(:checked):hover{--components-filterPill-option-backgroundColor: var(--palettes-product-100)}.filterPill_popover-content-option .filterPill_popover-content-option-actions:hover{background-color:var(--palettes-neutral-100)}.filterPill-icon{display:flex}.filterPill-icon .lucca-icon{--icon-size: 1.25rem}.filterPill-label{font-weight:var(--components-filterPill-label-fontWeight);overflow:hidden;text-overflow:ellipsis;text-align:center;flex-shrink:0;max-inline-size:var(--components-filterPill-label-maxInlineSize)}.filterPill-label:before{content:\"\";position:absolute;inset:0;cursor:var(--components-filterPill-label-cursor);z-index:1}.filterPill-toggle{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:flex;margin-block-start:-1px;inline-size:calc(var(--pr-t-spacings-50) + var(--pr-t-spacings-200));flex-shrink:0;z-index:1;color:var(--components-filterPill-toggle-iconColor);cursor:var(--components-filterPill-label-cursor);margin-inline-start:var(--components-filterPill-toggle-marginInlineStart)}.filterPill-toggle .icon-arrowChevronBottom{transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transform:rotate(var(--components-filterPill-toggle-rotation))}.filterPill-clear.clear{margin-inline-start:var(--pr-t-spacings-75);margin-inline-end:var(--pr-t-spacings-25);position:relative;z-index:1;--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-product-800)}.filterPill-clear.clear:hover{--components-clear-background: var(--palettes-product-700)}.filterPill-clear.clear:active{--components-clear-background: var(--palettes-product-900)}.filterPill_clear.clear{position:absolute;z-index:1;inset-inline-end:calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25));inset-block-start:var(--pr-t-spacings-100);--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-product-800)}.filterPill_clear.clear:hover{--components-clear-background: var(--palettes-product-700)}.filterPill_clear.clear:active{--components-clear-background: var(--palettes-product-900)}.filterPill-value{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;font-weight:var(--components-filterPill-label-fontWeightChecked);inline-size:auto;z-index:1;margin-inline-start:.5ch;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;cursor:var(--components-filterPill-label-cursor);max-inline-size:15rem}.filterPill-value .lucca-icon{color:var(--components-filterPill-arrowColor)}.filterPill-value:has(.lucca-icon){display:flex;align-items:center;gap:var(--pr-t-spacings-50)}.filterPill-label-placeholder{display:block;block-size:0;overflow:hidden;text-overflow:ellipsis;font-weight:var(--components-filterPill-label-fontWeightChecked)}.filterPill-checkbox{border:2px solid var(--components-filterPill-checkbox-borderColor);border-radius:var(--pr-t-border-radius-50);color:var(--components-filterPill-checkbox-color);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--components-filterPill-checkbox-backgroundColor);cursor:pointer;display:flex;order:-1}@media(prefers-reduced-motion:reduce){.filterPill-checkbox{transition-property:none}}.filterPill-checkbox-icon{inline-size:var(--pr-t-spacings-150);block-size:var(--pr-t-spacings-150)}.filterPill-checkbox-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(var(--components-filterPill-checkbox-icon-scale));transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transition-timing-function:var(--components-filterPill-checkbox-icon-timingFonction)}@media(prefers-reduced-motion:reduce){.filterPill-checkbox-icon-check{transition-property:none}}.filterPill-checkbox-icon-check:before{font-weight:var(--pr-t-font-fontWeight-regular);font-size:1rem;direction:ltr;font-family:var(--icon-fontFamily);font-feature-settings:\"liga\";font-style:normal;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;overflow-wrap:normal;content:\"\\e97d\"/\"\"}.filterPill-checkbox-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}}@layer mods{.filterPill:not(.is-filled) .filterPill-value{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.filterPill:not(.is-filled)+.filterPill_clear.clear{--components-clear-display: none}.filterPill:hover{--components-filterPill-borderColor: var(--palettes-product-400);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor), var(--pr-t-elevation-shadow-button)}.filterPill:active{--components-filterPill-backgroundColor: var(--palettes-neutral-0);box-shadow:0 0 0 1px var(--palettes-product-500),var(--pr-t-elevation-shadow-button)}.filterPill[aria-expanded=true]{--components-filterPill-toggle-rotation: 180deg}.filterPill.is-filled{--components-filterPill-borderColor: var(--palettes-product-300);--components-filterPill-backgroundColor: var(--palettes-product-50);--components-filterPill-color: var(--palettes-product-800);--components-filterPill-toggle-iconColor: var(--palettes-product-700)}.filterPill.is-filled:hover{--components-filterPill-borderColor: var(--palettes-product-400);--components-filterPill-checkbox-borderColor: var(--palettes-product-600);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-600)}.filterPill.is-filled:active{--components-filterPill-backgroundColor: var(--palettes-product-100);--components-filterPill-checkbox-borderColor: var(--palettes-product-700);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700)}.filterPill.is-filled:has(~.filterPill_clear){--components-filterPill-toggle-marginInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}.filterPill.mod-checkbox{--components-filterPill-gap: var(--pr-t-spacings-100);--components-filterPill-label-maxInlineSize: 15rem}.filterPill.mod-checkbox:has(.filterPill-checkbox-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.filterPill.mod-checkbox[aria-pressed=true],.filterPill.mod-checkbox:has(.filterPill-checkbox-input:checked){--components-filterPill-borderColor: var(--palettes-product-300);--components-filterPill-backgroundColor: var(--palettes-product-50);--components-filterPill-color: var(--palettes-product-800);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700);--components-filterPill-checkbox-borderColor: var(--palettes-product-700);--components-filterPill-checkbox-icon-scale: 1;--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(.5, 1, .5, 1.5);--components-filterPill-label-fontWeight: var(--components-filterPill-label-fontWeightChecked)}.filterPill.mod-checkbox[aria-pressed=true]:hover,.filterPill.mod-checkbox:has(.filterPill-checkbox-input:checked):hover{--components-filterPill-borderColor: var(--palettes-product-400);--components-filterPill-checkbox-borderColor: var(--palettes-product-600);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-600)}.filterPill.mod-checkbox[aria-pressed=true]:active,.filterPill.mod-checkbox:has(.filterPill-checkbox-input:checked):active{--components-filterPill-backgroundColor: var(--palettes-product-100);--components-filterPill-checkbox-borderColor: var(--palettes-product-700);--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700)}.filterPill.mod-checkbox[disabled],.filterPill.mod-checkbox:has(.filterPill-checkbox-input:disabled){--components-filterPill-backgroundColor: var(--palettes-neutral-50);--components-filterPill-borderColor: var(--palettes-neutral-300);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-500);--components-filterPill-color: var(--palettes-neutral-500);--components-filterPill-label-cursor: default;box-shadow:0 0 0 1px var(--components-filterPill-borderColor)}.filterPill.mod-checkbox[disabled][aria-pressed=true],.filterPill.mod-checkbox[disabled]:has(.filterPill-checkbox-input:checked),.filterPill.mod-checkbox:has(.filterPill-checkbox-input:disabled)[aria-pressed=true],.filterPill.mod-checkbox:has(.filterPill-checkbox-input:disabled):has(.filterPill-checkbox-input:checked){--components-filterPill-backgroundColor: var(--palettes-neutral-50);--components-filterPill-borderColor: var(--palettes-neutral-300);--components-filterPill-checkbox-borderColor: var(--palettes-neutral-100);--components-filterPill-checkbox-backgroundColor: var(--palettes-neutral-100);--components-filterPill-color: var(--palettes-neutral-500);--components-filterPill-checkbox-color: var(--palettes-neutral-500);--components-filterPill-label-cursor: default}.filterPill.mod-button{--components-filterPill-backgroundColor: var(--pr-t-elevation-surface-raised);border:0;padding:var(--pr-t-spacings-75);cursor:pointer}.filterPill.mod-button:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.filterPill[disabled]{--components-filterPill-backgroundColor: var(--palettes-neutral-50);--components-filterPill-borderColor: var(--palettes-neutral-300) !important;--components-filterPill-color: var(--palettes-neutral-500);--components-filterPill-toggle-iconColor: var(--palettes-neutral-500);--components-filterPill-label-cursor: default;--components-filterPill-arrowColor: var(--palettes-neutral-500);--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);box-shadow:var(--components-filterPill-shadow);--components-clear-display: none}}@layer components{.filterPillWrapper{--components-filterPillWrapper-display: block;--components-filterPill-option-backgroundColor: transparent}}@layer mods{.filterPillWrapper.is-hidden{--components-filterPillWrapper-display: none}}@layer components{.filterBar{--components-filterBar-scrollBox-flexGrow: 0;--components-filterBar-scrollBox-group-flexWrap: wrap;--components-filterBar-flexWrap: nowrap;--components-filterBar-scrollBox-export-marginInlineStart: auto;--components-filterBar-scrollBox-export-paddingInlineStart: var(--pr-t-spacings-200);display:flex;align-items:flex-start;flex-wrap:var(--components-filterBar-flexWrap);gap:var(--pr-t-spacings-100)}.filterBar .textField{--component-textField-borderRadius: var(--pr-t-border-radius-default);--component-textField-border: var(--palettes-neutral-100);--component-textField-borderHover: var(--palettes-product-400);--component-textField-width: 15rem;--component-textField-font: var(--pr-t-font-body-S);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem;--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}.filterBar .textField .textField-input-affix-toggle{--icon-size: 1.25rem}.filterBar .textField .textField-input-affix-clear.clear,.filterBar .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.filterBar .textField .textField-input-affix-icon{--icon-size: 1.25rem}.filterBar .textField .textField-prefix-lang:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture{--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-500) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-600) + var(--pr-t-spacings-50))}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{--components-divider-marginBlock: 0;--components-divider-marginInline: var(--pr-t-spacings-50);--components-divider-alignSelf: stretch}.filterBar-divider.divider:where(:empty),.filterBar-scrollBox-divider.divider:where(:empty){border-inline-start:var(--commons-divider-border)}.filterBar-divider.divider:not(:empty),.filterBar-scrollBox-divider.divider:not(:empty){--components-divider-direction: column;--components-divider-iconBottom: var(--pr-t-spacings-25);--components-divider-justify: center}.filterBar-divider.divider:not(:empty):before,.filterBar-divider.divider:not(:empty):after,.filterBar-scrollBox-divider.divider:not(:empty):before,.filterBar-scrollBox-divider.divider:not(:empty):after{border-inline-start:var(--commons-divider-border);min-block-size:var(--components-divider-minSize)}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{margin-inline:0;--components-divider-marginBlock: var(--pr-t-spacings-75)}.filterBar-divider.divider:last-child,.filterBar-scrollBox-divider.divider:last-child{display:none}.filterBar-scrollBox{flex-grow:var(--components-filterBar-scrollBox-flexGrow)}.filterBar-segmentedControl.segmentedControl{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.filterBar-segmentedControl.segmentedControl .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.filterBar-scrollBox-group{display:flex;gap:var(--pr-t-spacings-100);flex-wrap:var(--components-filterBar-scrollBox-group-flexWrap);flex-grow:1;flex-shrink:1!important}.filterBar-scrollBox-group .button{white-space:nowrap}.filterBar-scrollBox-group-results{align-self:center;color:var(--pr-t-color-text-subtle);white-space:nowrap}.filterBar-scrollBox-export{margin-inline-start:var(--components-filterBar-scrollBox-export-marginInlineStart);padding-inline-start:var(--components-filterBar-scrollBox-export-paddingInlineStart);flex-shrink:0;display:flex;gap:var(--pr-t-spacings-100)}.filterBar-scrollBox-tabs{margin-inline-start:auto;padding-inline-start:var(--pr-t-spacings-200);flex-shrink:0}.filterBar-scrollBox-tabs .segmentedControl{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.filterBar-scrollBox-tabs .segmentedControl .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}}@layer mods{@media not all and (min-width:40em){.filterBar{--components-filterBar-flexWrap: wrap}.filterBar .filterBar-segmentedControl.segmentedControl{--components-segmentedControl-direction: row;--components-segmentedControl-width: 100%}.filterBar .filterBar-scrollBox-tabs .segmentedControl{--components-segmentedControl-direction: row}.filterBar .filterBar-divider.divider{inline-size:100%}}@media(pointer:coarse){.filterBar{--components-filterBar-scrollBox-flexGrow: 1;--components-filterBar-scrollBox-group-flexWrap: nowrap}.filterBar .filterBar-segmentedControl.segmentedControl{--components-segmentedControl-whiteSpace: nowrap;--components-segmentedControl-width: auto;--components-segmentedControl-wrap: nowrap}.filterBar .filterBar-scrollBox-tabs .segmentedControl{--components-segmentedControl-whiteSpace: nowrap;--components-segmentedControl-wrap: nowrap}.filterBar .filterBar-scrollBox.scrollBox{scrollbar-width:none}.filterBar .filterBar-scrollBox.scrollBox::-webkit-scrollbar{display:none}.filterBar .filterBar-scrollBox.scrollBox{--components-scrollBox-backgroundColor: transparent}}@media not (pointer:coarse){.filterBar .filterBar-scrollBox.scrollBox{--components-scrollBox-pseudoElementsContent: none;--components-scrollBox-display: contents;--components-scrollBox-firstLast-display: none}}.filterBar .filterBar-scrollBox-tabs~.filterBar-scrollBox-export{--components-filterBar-scrollBox-export-marginInlineStart: 0;--components-filterBar-scrollBox-export-paddingInlineStart: 0}}\n"] }]
|
|
312
359
|
}], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], childInputComponentRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FILTER_PILL_INPUT_COMPONENT), { isSignal: true }] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverDirective), { isSignal: true }] }], defaultLabelTpl: [{ type: i0.ViewChild, args: ['defaultLabel', { isSignal: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], grouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouping", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], displayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayed", required: false }] }, { type: i0.Output, args: ["displayedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholderOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
|
|
313
360
|
|
|
314
361
|
const LU_FILTER_BAR_INSTANCE = new InjectionToken('LU_FILTER_BAR_INSTANCE');
|
|
@@ -322,6 +369,9 @@ function normalizeSearch(value) {
|
|
|
322
369
|
.toLowerCase();
|
|
323
370
|
}
|
|
324
371
|
class FilterBarComponent {
|
|
372
|
+
#pluralRules;
|
|
373
|
+
#numberFormat;
|
|
374
|
+
#intlParams;
|
|
325
375
|
constructor() {
|
|
326
376
|
this.intl = input(...intlInputOptions(LU_FILTER_PILLS_TRANSLATIONS), /* @ts-ignore */
|
|
327
377
|
...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
|
|
@@ -337,6 +387,25 @@ class FilterBarComponent {
|
|
|
337
387
|
*/
|
|
338
388
|
this.segmentedControlTabs = input(null, /* @ts-ignore */
|
|
339
389
|
...(ngDevMode ? [{ debugName: "segmentedControlTabs" }] : /* istanbul ignore next */ []));
|
|
390
|
+
/**
|
|
391
|
+
* Number of results matching the filters, displayed after the filters and announced to assistive technology
|
|
392
|
+
* users when it changes. `null` hides it, for instance while results are loading.
|
|
393
|
+
*/
|
|
394
|
+
this.resultsCount = input(null, { ...(ngDevMode ? { debugName: "resultsCount" } : /* istanbul ignore next */ {}), transform: luNullableNumberAttribute });
|
|
395
|
+
this.#pluralRules = inject(LOCALE_PLURAL_RULES);
|
|
396
|
+
this.#numberFormat = new Intl.NumberFormat(inject(LOCALE_ID));
|
|
397
|
+
this.#intlParams = new IntlParamsPipe();
|
|
398
|
+
this.resultsCountLabel = computed(() => {
|
|
399
|
+
const count = this.resultsCount();
|
|
400
|
+
if (count === null) {
|
|
401
|
+
return '';
|
|
402
|
+
}
|
|
403
|
+
if (count === 0) {
|
|
404
|
+
return this.intl().noResults;
|
|
405
|
+
}
|
|
406
|
+
return this.#intlParams.transform(getIntlPluralLabel(this.#pluralRules, this.intl().resultsCount, count), { count: this.#numberFormat.format(count) });
|
|
407
|
+
}, /* @ts-ignore */
|
|
408
|
+
...(ngDevMode ? [{ debugName: "resultsCountLabel" }] : /* istanbul ignore next */ []));
|
|
340
409
|
this.autoApplyAnnouncementId = `filterBar-autoApplyAnnouncement-${nextId$1++}`;
|
|
341
410
|
this.addonBefore = signal(null, /* @ts-ignore */
|
|
342
411
|
...(ngDevMode ? [{ debugName: "addonBefore" }] : /* istanbul ignore next */ []));
|
|
@@ -396,15 +465,15 @@ class FilterBarComponent {
|
|
|
396
465
|
displayOptionalPills(pills) {
|
|
397
466
|
this.optionalPills().forEach((pill) => pill.displayed.set(pills.includes(pill)));
|
|
398
467
|
}
|
|
399
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1
|
|
400
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1
|
|
468
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: FilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
469
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: FilterBarComponent, isStandalone: true, selector: "lu-filter-bar", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, manualApply: { classPropertyName: "manualApply", publicName: "manualApply", isSignal: true, isRequired: false, transformFunction: null }, segmentedControlTabs: { classPropertyName: "segmentedControlTabs", publicName: "segmentedControlTabs", isSignal: true, isRequired: false, transformFunction: null }, resultsCount: { classPropertyName: "resultsCount", publicName: "resultsCount", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-describedby": "manualApply() ? null : autoApplyAnnouncementId" }, classAttribute: "filterBar" }, providers: [
|
|
401
470
|
{
|
|
402
471
|
provide: LU_FILTER_BAR_INSTANCE,
|
|
403
472
|
useExisting: forwardRef(() => FilterBarComponent),
|
|
404
473
|
},
|
|
405
|
-
], queries: [{ propertyName: "pills", predicate: FilterPillComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionalPillsSelect", first: true, predicate: LuMultiSelectInputComponent, descendants: true, isSignal: true }, { propertyName: "optionalPillsGroupTpl", first: true, predicate: ["optionalPillsGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!manualApply()) {\n\t<span class=\"pr-u-mask\" [attr.id]=\"autoApplyAnnouncementId\">{{ intl().autoApplyAnnouncement }}</span>\n}\n<lu-scroll-box class=\"filterBar-scrollBox\">\n\t<div class=\"filterBar-scrollBox-group\">\n\t\t@if (addonBefore()) {\n\t\t\t<ng-container *ngTemplateOutlet=\"addonBefore()\" />\n\n\t\t\t<lu-divider class=\"filterBar-divider\" />\n\t\t}\n\t\t@if (optionalPills().length > 0) {\n\t\t\t<lu-filter-pill [label]=\"intl().additionalFilters\" icon=\"filtersDescending\" iconOnly backdrop>\n\t\t\t\t<lu-multi-select\n\t\t\t\t\t#optionalPillsSelect\n\t\t\t\t\t[options]=\"optionalPillOptions()\"\n\t\t\t\t\t[optionComparer]=\"optionalPillComparer\"\n\t\t\t\t\t[ngModel]=\"displayedOptionalPills()\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t(ngModelChange)=\"displayOptionalPills($event)\"\n\t\t\t\t\t(clueChange)=\"clue.set($event)\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container *luOption=\"let pill; select: optionalPillsSelect\">{{ pill.label() }}</ng-container>\n\t\t\t\t\t<ng-template #optionalPillsGroup let-group>{{ group.key }}</ng-template>\n\t\t\t\t</lu-multi-select>\n\t\t\t</lu-filter-pill>\n\t\t}\n\n\t\t<ng-content />\n\t</div>\n\n\t@if (segmentedControlTabs(); as segmentedControlTabs) {\n\t\t<div class=\"filterBar-scrollBox-tabs\">\n\t\t\t<ng-container *ngTemplateOutlet=\"segmentedControlTabs.tablistTemplate()\" />\n\t\t</div>\n\t\t<lu-divider class=\"filterBar-scrollBox-divider\" />\n\t}\n\t@if (addonAfter()) {\n\t\t<div class=\"filterBar-scrollBox-export\">\n\t\t\t<ng-container *ngTemplateOutlet=\"addonAfter()\" />\n\t\t</div>\n\t}\n</lu-scroll-box>\n", styles: ["@layer components{.filterBar{--components-filterBar-scrollBox-flexGrow: 0;--components-filterBar-scrollBox-group-flexWrap: wrap;--components-filterBar-flexWrap: nowrap;--components-filterBar-scrollBox-export-marginInlineStart: auto;--components-filterBar-scrollBox-export-paddingInlineStart: var(--pr-t-spacings-200);display:flex;align-items:flex-start;flex-wrap:var(--components-filterBar-flexWrap);gap:var(--pr-t-spacings-100)}.filterBar .textField{--component-textField-borderRadius: var(--pr-t-border-radius-default);--component-textField-border: var(--palettes-neutral-100);--component-textField-borderHover: var(--palettes-product-400);--component-textField-width: 15rem;--component-textField-font: var(--pr-t-font-body-S);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem;--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}.filterBar .textField .textField-input-affix-toggle{--icon-size: 1.25rem}.filterBar .textField .textField-input-affix-clear.clear,.filterBar .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.filterBar .textField .textField-input-affix-icon{--icon-size: 1.25rem}.filterBar .textField .textField-prefix-lang:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture{--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-500) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-600) + var(--pr-t-spacings-50))}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{--components-divider-marginBlock: 0;--components-divider-marginInline: var(--pr-t-spacings-50);--components-divider-alignSelf: stretch}.filterBar-divider.divider:where(:empty),.filterBar-scrollBox-divider.divider:where(:empty){border-inline-start:var(--commons-divider-border)}.filterBar-divider.divider:not(:empty),.filterBar-scrollBox-divider.divider:not(:empty){--components-divider-direction: column;--components-divider-iconBottom: var(--pr-t-spacings-25);--components-divider-justify: center}.filterBar-divider.divider:not(:empty):before,.filterBar-divider.divider:not(:empty):after,.filterBar-scrollBox-divider.divider:not(:empty):before,.filterBar-scrollBox-divider.divider:not(:empty):after{border-inline-start:var(--commons-divider-border);min-block-size:var(--components-divider-minSize)}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{margin-inline:0;--components-divider-marginBlock: var(--pr-t-spacings-
|
|
474
|
+
], queries: [{ propertyName: "pills", predicate: FilterPillComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionalPillsSelect", first: true, predicate: LuMultiSelectInputComponent, descendants: true, isSignal: true }, { propertyName: "optionalPillsGroupTpl", first: true, predicate: ["optionalPillsGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!manualApply()) {\n\t<span class=\"pr-u-mask\" [attr.id]=\"autoApplyAnnouncementId\">{{ intl().autoApplyAnnouncement }}</span>\n}\n<!-- Always rendered so that the first count, received after loading, is announced -->\n<span class=\"pr-u-mask\" role=\"status\">{{ resultsCountLabel() }}</span>\n<lu-scroll-box class=\"filterBar-scrollBox\">\n\t<div class=\"filterBar-scrollBox-group\">\n\t\t@if (addonBefore()) {\n\t\t\t<ng-container *ngTemplateOutlet=\"addonBefore()\" />\n\n\t\t\t<lu-divider class=\"filterBar-divider\" />\n\t\t}\n\t\t@if (optionalPills().length > 0) {\n\t\t\t<lu-filter-pill [label]=\"intl().additionalFilters\" icon=\"filtersDescending\" iconOnly backdrop>\n\t\t\t\t<lu-multi-select\n\t\t\t\t\t#optionalPillsSelect\n\t\t\t\t\t[options]=\"optionalPillOptions()\"\n\t\t\t\t\t[optionComparer]=\"optionalPillComparer\"\n\t\t\t\t\t[ngModel]=\"displayedOptionalPills()\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t(ngModelChange)=\"displayOptionalPills($event)\"\n\t\t\t\t\t(clueChange)=\"clue.set($event)\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container *luOption=\"let pill; select: optionalPillsSelect\">{{ pill.label() }}</ng-container>\n\t\t\t\t\t<ng-template #optionalPillsGroup let-group>{{ group.key }}</ng-template>\n\t\t\t\t</lu-multi-select>\n\t\t\t</lu-filter-pill>\n\t\t}\n\n\t\t<ng-content />\n\n\t\t@if (resultsCount() !== null) {\n\t\t\t<span class=\"filterBar-scrollBox-group-results\" aria-hidden=\"true\">{{ resultsCountLabel() }}</span>\n\t\t}\n\t</div>\n\n\t@if (segmentedControlTabs(); as segmentedControlTabs) {\n\t\t<div class=\"filterBar-scrollBox-tabs\">\n\t\t\t<ng-container *ngTemplateOutlet=\"segmentedControlTabs.tablistTemplate()\" />\n\t\t</div>\n\t\t<lu-divider class=\"filterBar-scrollBox-divider\" />\n\t}\n\t@if (addonAfter()) {\n\t\t<div class=\"filterBar-scrollBox-export\">\n\t\t\t<ng-container *ngTemplateOutlet=\"addonAfter()\" />\n\t\t</div>\n\t}\n</lu-scroll-box>\n", styles: ["@layer components{.filterBar{--components-filterBar-scrollBox-flexGrow: 0;--components-filterBar-scrollBox-group-flexWrap: wrap;--components-filterBar-flexWrap: nowrap;--components-filterBar-scrollBox-export-marginInlineStart: auto;--components-filterBar-scrollBox-export-paddingInlineStart: var(--pr-t-spacings-200);display:flex;align-items:flex-start;flex-wrap:var(--components-filterBar-flexWrap);gap:var(--pr-t-spacings-100)}.filterBar .textField{--component-textField-borderRadius: var(--pr-t-border-radius-default);--component-textField-border: var(--palettes-neutral-100);--component-textField-borderHover: var(--palettes-product-400);--component-textField-width: 15rem;--component-textField-font: var(--pr-t-font-body-S);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem;--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}.filterBar .textField .textField-input-affix-toggle{--icon-size: 1.25rem}.filterBar .textField .textField-input-affix-clear.clear,.filterBar .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.filterBar .textField .textField-input-affix-icon{--icon-size: 1.25rem}.filterBar .textField .textField-prefix-lang:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture{--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-500) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-600) + var(--pr-t-spacings-50))}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{--components-divider-marginBlock: 0;--components-divider-marginInline: var(--pr-t-spacings-50);--components-divider-alignSelf: stretch}.filterBar-divider.divider:where(:empty),.filterBar-scrollBox-divider.divider:where(:empty){border-inline-start:var(--commons-divider-border)}.filterBar-divider.divider:not(:empty),.filterBar-scrollBox-divider.divider:not(:empty){--components-divider-direction: column;--components-divider-iconBottom: var(--pr-t-spacings-25);--components-divider-justify: center}.filterBar-divider.divider:not(:empty):before,.filterBar-divider.divider:not(:empty):after,.filterBar-scrollBox-divider.divider:not(:empty):before,.filterBar-scrollBox-divider.divider:not(:empty):after{border-inline-start:var(--commons-divider-border);min-block-size:var(--components-divider-minSize)}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{margin-inline:0;--components-divider-marginBlock: var(--pr-t-spacings-75)}.filterBar-divider.divider:last-child,.filterBar-scrollBox-divider.divider:last-child{display:none}.filterBar-scrollBox{flex-grow:var(--components-filterBar-scrollBox-flexGrow)}.filterBar-segmentedControl.segmentedControl{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.filterBar-segmentedControl.segmentedControl .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.filterBar-scrollBox-group{display:flex;gap:var(--pr-t-spacings-100);flex-wrap:var(--components-filterBar-scrollBox-group-flexWrap);flex-grow:1;flex-shrink:1!important}.filterBar-scrollBox-group .button{white-space:nowrap}.filterBar-scrollBox-group-results{align-self:center;color:var(--pr-t-color-text-subtle);white-space:nowrap}.filterBar-scrollBox-export{margin-inline-start:var(--components-filterBar-scrollBox-export-marginInlineStart);padding-inline-start:var(--components-filterBar-scrollBox-export-paddingInlineStart);flex-shrink:0;display:flex;gap:var(--pr-t-spacings-100)}.filterBar-scrollBox-tabs{margin-inline-start:auto;padding-inline-start:var(--pr-t-spacings-200);flex-shrink:0}.filterBar-scrollBox-tabs .segmentedControl{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.filterBar-scrollBox-tabs .segmentedControl .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}}@layer mods{@media not all and (min-width:40em){.filterBar{--components-filterBar-flexWrap: wrap}.filterBar .filterBar-segmentedControl.segmentedControl{--components-segmentedControl-direction: row;--components-segmentedControl-width: 100%}.filterBar .filterBar-scrollBox-tabs .segmentedControl{--components-segmentedControl-direction: row}.filterBar .filterBar-divider.divider{inline-size:100%}}@media(pointer:coarse){.filterBar{--components-filterBar-scrollBox-flexGrow: 1;--components-filterBar-scrollBox-group-flexWrap: nowrap}.filterBar .filterBar-segmentedControl.segmentedControl{--components-segmentedControl-whiteSpace: nowrap;--components-segmentedControl-width: auto;--components-segmentedControl-wrap: nowrap}.filterBar .filterBar-scrollBox-tabs .segmentedControl{--components-segmentedControl-whiteSpace: nowrap;--components-segmentedControl-wrap: nowrap}.filterBar .filterBar-scrollBox.scrollBox{scrollbar-width:none}.filterBar .filterBar-scrollBox.scrollBox::-webkit-scrollbar{display:none}.filterBar .filterBar-scrollBox.scrollBox{--components-scrollBox-backgroundColor: transparent}}@media not (pointer:coarse){.filterBar .filterBar-scrollBox.scrollBox{--components-scrollBox-pseudoElementsContent: none;--components-scrollBox-display: contents;--components-scrollBox-firstLast-display: none}}.filterBar .filterBar-scrollBox-tabs~.filterBar-scrollBox-export{--components-filterBar-scrollBox-export-marginInlineStart: 0;--components-filterBar-scrollBox-export-paddingInlineStart: 0}}\n"], dependencies: [{ kind: "component", type: DividerComponent, selector: "lu-divider", inputs: ["separatorRole", "vertical", "size", "withRole"] }, { kind: "component", type: ScrollBoxComponent, selector: "lu-scroll-box", inputs: ["vertical"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FilterPillComponent, selector: "lu-filter-pill", inputs: ["intl", "name", "optional", "grouping", "iconOnly", "backdrop", "displayed", "label", "placeholder", "icon"], outputs: ["displayedChange"] }, { kind: "component", type: LuMultiSelectInputComponent, selector: "lu-multi-select", inputs: ["intl", "valuesTpl", "maxValuesShown", "keepSearchAfterSelection", "filterPillLabelPlural", "filterPillLabelPluralFn"], outputs: ["valuesTplChange"] }, { kind: "directive", type: LuOptionDirective, selector: "[luOption]", inputs: ["luOptionSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
406
475
|
}
|
|
407
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1
|
|
476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: FilterBarComponent, decorators: [{
|
|
408
477
|
type: Component,
|
|
409
478
|
args: [{ selector: 'lu-filter-bar', imports: [DividerComponent, ScrollBoxComponent, FormsModule, NgTemplateOutlet, FilterPillComponent, LuMultiSelectInputComponent, LuOptionDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
410
479
|
class: 'filterBar',
|
|
@@ -414,8 +483,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
414
483
|
provide: LU_FILTER_BAR_INSTANCE,
|
|
415
484
|
useExisting: forwardRef(() => FilterBarComponent),
|
|
416
485
|
},
|
|
417
|
-
], template: "@if (!manualApply()) {\n\t<span class=\"pr-u-mask\" [attr.id]=\"autoApplyAnnouncementId\">{{ intl().autoApplyAnnouncement }}</span>\n}\n<lu-scroll-box class=\"filterBar-scrollBox\">\n\t<div class=\"filterBar-scrollBox-group\">\n\t\t@if (addonBefore()) {\n\t\t\t<ng-container *ngTemplateOutlet=\"addonBefore()\" />\n\n\t\t\t<lu-divider class=\"filterBar-divider\" />\n\t\t}\n\t\t@if (optionalPills().length > 0) {\n\t\t\t<lu-filter-pill [label]=\"intl().additionalFilters\" icon=\"filtersDescending\" iconOnly backdrop>\n\t\t\t\t<lu-multi-select\n\t\t\t\t\t#optionalPillsSelect\n\t\t\t\t\t[options]=\"optionalPillOptions()\"\n\t\t\t\t\t[optionComparer]=\"optionalPillComparer\"\n\t\t\t\t\t[ngModel]=\"displayedOptionalPills()\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t(ngModelChange)=\"displayOptionalPills($event)\"\n\t\t\t\t\t(clueChange)=\"clue.set($event)\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container *luOption=\"let pill; select: optionalPillsSelect\">{{ pill.label() }}</ng-container>\n\t\t\t\t\t<ng-template #optionalPillsGroup let-group>{{ group.key }}</ng-template>\n\t\t\t\t</lu-multi-select>\n\t\t\t</lu-filter-pill>\n\t\t}\n\n\t\t<ng-content />\n\t</div>\n\n\t@if (segmentedControlTabs(); as segmentedControlTabs) {\n\t\t<div class=\"filterBar-scrollBox-tabs\">\n\t\t\t<ng-container *ngTemplateOutlet=\"segmentedControlTabs.tablistTemplate()\" />\n\t\t</div>\n\t\t<lu-divider class=\"filterBar-scrollBox-divider\" />\n\t}\n\t@if (addonAfter()) {\n\t\t<div class=\"filterBar-scrollBox-export\">\n\t\t\t<ng-container *ngTemplateOutlet=\"addonAfter()\" />\n\t\t</div>\n\t}\n</lu-scroll-box>\n", styles: ["@layer components{.filterBar{--components-filterBar-scrollBox-flexGrow: 0;--components-filterBar-scrollBox-group-flexWrap: wrap;--components-filterBar-flexWrap: nowrap;--components-filterBar-scrollBox-export-marginInlineStart: auto;--components-filterBar-scrollBox-export-paddingInlineStart: var(--pr-t-spacings-200);display:flex;align-items:flex-start;flex-wrap:var(--components-filterBar-flexWrap);gap:var(--pr-t-spacings-100)}.filterBar .textField{--component-textField-borderRadius: var(--pr-t-border-radius-default);--component-textField-border: var(--palettes-neutral-100);--component-textField-borderHover: var(--palettes-product-400);--component-textField-width: 15rem;--component-textField-font: var(--pr-t-font-body-S);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem;--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}.filterBar .textField .textField-input-affix-toggle{--icon-size: 1.25rem}.filterBar .textField .textField-input-affix-clear.clear,.filterBar .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.filterBar .textField .textField-input-affix-icon{--icon-size: 1.25rem}.filterBar .textField .textField-prefix-lang:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture{--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-500) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-600) + var(--pr-t-spacings-50))}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{--components-divider-marginBlock: 0;--components-divider-marginInline: var(--pr-t-spacings-50);--components-divider-alignSelf: stretch}.filterBar-divider.divider:where(:empty),.filterBar-scrollBox-divider.divider:where(:empty){border-inline-start:var(--commons-divider-border)}.filterBar-divider.divider:not(:empty),.filterBar-scrollBox-divider.divider:not(:empty){--components-divider-direction: column;--components-divider-iconBottom: var(--pr-t-spacings-25);--components-divider-justify: center}.filterBar-divider.divider:not(:empty):before,.filterBar-divider.divider:not(:empty):after,.filterBar-scrollBox-divider.divider:not(:empty):before,.filterBar-scrollBox-divider.divider:not(:empty):after{border-inline-start:var(--commons-divider-border);min-block-size:var(--components-divider-minSize)}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{margin-inline:0;--components-divider-marginBlock: var(--pr-t-spacings-
|
|
418
|
-
}], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], manualApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualApply", required: false }] }], segmentedControlTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "segmentedControlTabs", required: false }] }], pills: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FilterPillComponent), { ...{ descendants: true }, isSignal: true }] }], optionalPillsSelect: [{ type: i0.ViewChild, args: [i0.forwardRef(() => LuMultiSelectInputComponent), { isSignal: true }] }], optionalPillsGroupTpl: [{ type: i0.ViewChild, args: ['optionalPillsGroup', { isSignal: true }] }] } });
|
|
486
|
+
], template: "@if (!manualApply()) {\n\t<span class=\"pr-u-mask\" [attr.id]=\"autoApplyAnnouncementId\">{{ intl().autoApplyAnnouncement }}</span>\n}\n<!-- Always rendered so that the first count, received after loading, is announced -->\n<span class=\"pr-u-mask\" role=\"status\">{{ resultsCountLabel() }}</span>\n<lu-scroll-box class=\"filterBar-scrollBox\">\n\t<div class=\"filterBar-scrollBox-group\">\n\t\t@if (addonBefore()) {\n\t\t\t<ng-container *ngTemplateOutlet=\"addonBefore()\" />\n\n\t\t\t<lu-divider class=\"filterBar-divider\" />\n\t\t}\n\t\t@if (optionalPills().length > 0) {\n\t\t\t<lu-filter-pill [label]=\"intl().additionalFilters\" icon=\"filtersDescending\" iconOnly backdrop>\n\t\t\t\t<lu-multi-select\n\t\t\t\t\t#optionalPillsSelect\n\t\t\t\t\t[options]=\"optionalPillOptions()\"\n\t\t\t\t\t[optionComparer]=\"optionalPillComparer\"\n\t\t\t\t\t[ngModel]=\"displayedOptionalPills()\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t(ngModelChange)=\"displayOptionalPills($event)\"\n\t\t\t\t\t(clueChange)=\"clue.set($event)\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container *luOption=\"let pill; select: optionalPillsSelect\">{{ pill.label() }}</ng-container>\n\t\t\t\t\t<ng-template #optionalPillsGroup let-group>{{ group.key }}</ng-template>\n\t\t\t\t</lu-multi-select>\n\t\t\t</lu-filter-pill>\n\t\t}\n\n\t\t<ng-content />\n\n\t\t@if (resultsCount() !== null) {\n\t\t\t<span class=\"filterBar-scrollBox-group-results\" aria-hidden=\"true\">{{ resultsCountLabel() }}</span>\n\t\t}\n\t</div>\n\n\t@if (segmentedControlTabs(); as segmentedControlTabs) {\n\t\t<div class=\"filterBar-scrollBox-tabs\">\n\t\t\t<ng-container *ngTemplateOutlet=\"segmentedControlTabs.tablistTemplate()\" />\n\t\t</div>\n\t\t<lu-divider class=\"filterBar-scrollBox-divider\" />\n\t}\n\t@if (addonAfter()) {\n\t\t<div class=\"filterBar-scrollBox-export\">\n\t\t\t<ng-container *ngTemplateOutlet=\"addonAfter()\" />\n\t\t</div>\n\t}\n</lu-scroll-box>\n", styles: ["@layer components{.filterBar{--components-filterBar-scrollBox-flexGrow: 0;--components-filterBar-scrollBox-group-flexWrap: wrap;--components-filterBar-flexWrap: nowrap;--components-filterBar-scrollBox-export-marginInlineStart: auto;--components-filterBar-scrollBox-export-paddingInlineStart: var(--pr-t-spacings-200);display:flex;align-items:flex-start;flex-wrap:var(--components-filterBar-flexWrap);gap:var(--pr-t-spacings-100)}.filterBar .textField{--component-textField-borderRadius: var(--pr-t-border-radius-default);--component-textField-border: var(--palettes-neutral-100);--component-textField-borderHover: var(--palettes-product-400);--component-textField-width: 15rem;--component-textField-font: var(--pr-t-font-body-S);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem;--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}.filterBar .textField .textField-input-affix-toggle{--icon-size: 1.25rem}.filterBar .textField .textField-input-affix-clear.clear,.filterBar .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.filterBar .textField .textField-input-affix-icon{--icon-size: 1.25rem}.filterBar .textField .textField-prefix-lang:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture{--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-500) + var(--pr-t-spacings-50))}.filterBar .textField .textField-prefix-lang.mod-withCulture:has(.formLabel-required){--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-600) + var(--pr-t-spacings-50))}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{--components-divider-marginBlock: 0;--components-divider-marginInline: var(--pr-t-spacings-50);--components-divider-alignSelf: stretch}.filterBar-divider.divider:where(:empty),.filterBar-scrollBox-divider.divider:where(:empty){border-inline-start:var(--commons-divider-border)}.filterBar-divider.divider:not(:empty),.filterBar-scrollBox-divider.divider:not(:empty){--components-divider-direction: column;--components-divider-iconBottom: var(--pr-t-spacings-25);--components-divider-justify: center}.filterBar-divider.divider:not(:empty):before,.filterBar-divider.divider:not(:empty):after,.filterBar-scrollBox-divider.divider:not(:empty):before,.filterBar-scrollBox-divider.divider:not(:empty):after{border-inline-start:var(--commons-divider-border);min-block-size:var(--components-divider-minSize)}.filterBar-divider.divider,.filterBar-scrollBox-divider.divider{margin-inline:0;--components-divider-marginBlock: var(--pr-t-spacings-75)}.filterBar-divider.divider:last-child,.filterBar-scrollBox-divider.divider:last-child{display:none}.filterBar-scrollBox{flex-grow:var(--components-filterBar-scrollBox-flexGrow)}.filterBar-segmentedControl.segmentedControl{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.filterBar-segmentedControl.segmentedControl .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.filterBar-scrollBox-group{display:flex;gap:var(--pr-t-spacings-100);flex-wrap:var(--components-filterBar-scrollBox-group-flexWrap);flex-grow:1;flex-shrink:1!important}.filterBar-scrollBox-group .button{white-space:nowrap}.filterBar-scrollBox-group-results{align-self:center;color:var(--pr-t-color-text-subtle);white-space:nowrap}.filterBar-scrollBox-export{margin-inline-start:var(--components-filterBar-scrollBox-export-marginInlineStart);padding-inline-start:var(--components-filterBar-scrollBox-export-paddingInlineStart);flex-shrink:0;display:flex;gap:var(--pr-t-spacings-100)}.filterBar-scrollBox-tabs{margin-inline-start:auto;padding-inline-start:var(--pr-t-spacings-200);flex-shrink:0}.filterBar-scrollBox-tabs .segmentedControl{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.filterBar-scrollBox-tabs .segmentedControl .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}}@layer mods{@media not all and (min-width:40em){.filterBar{--components-filterBar-flexWrap: wrap}.filterBar .filterBar-segmentedControl.segmentedControl{--components-segmentedControl-direction: row;--components-segmentedControl-width: 100%}.filterBar .filterBar-scrollBox-tabs .segmentedControl{--components-segmentedControl-direction: row}.filterBar .filterBar-divider.divider{inline-size:100%}}@media(pointer:coarse){.filterBar{--components-filterBar-scrollBox-flexGrow: 1;--components-filterBar-scrollBox-group-flexWrap: nowrap}.filterBar .filterBar-segmentedControl.segmentedControl{--components-segmentedControl-whiteSpace: nowrap;--components-segmentedControl-width: auto;--components-segmentedControl-wrap: nowrap}.filterBar .filterBar-scrollBox-tabs .segmentedControl{--components-segmentedControl-whiteSpace: nowrap;--components-segmentedControl-wrap: nowrap}.filterBar .filterBar-scrollBox.scrollBox{scrollbar-width:none}.filterBar .filterBar-scrollBox.scrollBox::-webkit-scrollbar{display:none}.filterBar .filterBar-scrollBox.scrollBox{--components-scrollBox-backgroundColor: transparent}}@media not (pointer:coarse){.filterBar .filterBar-scrollBox.scrollBox{--components-scrollBox-pseudoElementsContent: none;--components-scrollBox-display: contents;--components-scrollBox-firstLast-display: none}}.filterBar .filterBar-scrollBox-tabs~.filterBar-scrollBox-export{--components-filterBar-scrollBox-export-marginInlineStart: 0;--components-filterBar-scrollBox-export-paddingInlineStart: 0}}\n"] }]
|
|
487
|
+
}], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], manualApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualApply", required: false }] }], segmentedControlTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "segmentedControlTabs", required: false }] }], resultsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultsCount", required: false }] }], pills: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FilterPillComponent), { ...{ descendants: true }, isSignal: true }] }], optionalPillsSelect: [{ type: i0.ViewChild, args: [i0.forwardRef(() => LuMultiSelectInputComponent), { isSignal: true }] }], optionalPillsGroupTpl: [{ type: i0.ViewChild, args: ['optionalPillsGroup', { isSignal: true }] }] } });
|
|
419
488
|
|
|
420
489
|
const filterViewDefaultOptionComparer = (a, b) => JSON.stringify(a) === JSON.stringify(b);
|
|
421
490
|
const filterViewDefaultOptionKey = (option) => option;
|
|
@@ -475,10 +544,10 @@ class FilterViewSelectorComponent {
|
|
|
475
544
|
this.selectedView.set(view);
|
|
476
545
|
this.popoverRef()?.close();
|
|
477
546
|
}
|
|
478
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1
|
|
479
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1
|
|
547
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: FilterViewSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
548
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: FilterViewSelectorComponent, isStandalone: true, selector: "lu-filter-view-selector", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null }, viewLabel: { classPropertyName: "viewLabel", publicName: "viewLabel", isSignal: true, isRequired: false, transformFunction: null }, optionComparer: { classPropertyName: "optionComparer", publicName: "optionComparer", isSignal: true, isRequired: false, transformFunction: null }, optionKey: { classPropertyName: "optionKey", publicName: "optionKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedView: "selectedViewChange", renameView: "renameView", deleteView: "deleteView" }, host: { listeners: { "keydown.arrowDown": "popoverRef()?.openPopover()" }, classAttribute: "filterBar-viewSelector" }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n\ttype=\"button\"\n\tluButton=\"outlined\"\n\tsize=\"S\"\n\tdisclosure\n\tluPopoverNoCloseButton\n\t[luPopover2]=\"viewsPopover\"\n\t[customPositions]=\"popoverPositions\"\n>\n\t@if (selectedLabel(); as label) {\n\t\t<span class=\"pr-u-mask\">{{ intl().selectView }} - </span>\n\t\t{{ label }}\n\t} @else {\n\t\t{{ intl().selectView }}\n\t}\n\t<lu-icon icon=\"arrowChevronBottom\" />\n</button>\n\n<ng-template #viewsPopover>\n\t<div class=\"filterPill_popover-content popover-contentOptional\">\n\t\t@for (view of views(); track optionKey()(view); let index = $index) {\n\t\t\t<div class=\"filterPill_popover-content-option\">\n\t\t\t\t<label luFormLabel [attr.for]=\"inputId(index)\">{{ viewLabel()(view) }}</label>\n\t\t\t\t<span class=\"filterPill_popover-content-option-input\">\n\t\t\t\t\t<input type=\"radio\" [attr.id]=\"inputId(index)\" [attr.name]=\"groupName\" [checked]=\"isSelected(view)\" (change)=\"selectView(view)\" />\n\t\t\t\t</span>\n\t\t\t\t<button type=\"button\" class=\"filterPill_popover-content-option-actions\" size=\"XS\" luButton=\"ghost\" [luDropdown]=\"optionsDropdown\">\n\t\t\t\t\t<lu-icon icon=\"menuDots\" [alt]=\"intl().viewOptions | intlParams: { viewName: viewLabel()(view) }\" />\n\t\t\t\t</button>\n\n\t\t\t\t<ng-template #optionsDropdown>\n\t\t\t\t\t<lu-dropdown-menu>\n\t\t\t\t\t\t<lu-dropdown-item>\n\t\t\t\t\t\t\t<button type=\"button\" lu-dropdown-action (click)=\"renameView.emit(view); popoverRef()?.close()\">\n\t\t\t\t\t\t\t\t<lu-icon icon=\"edit\" />\n\t\t\t\t\t\t\t\t{{ intl().renameView }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</lu-dropdown-item>\n\t\t\t\t\t\t<lu-dropdown-item>\n\t\t\t\t\t\t\t<button type=\"button\" lu-dropdown-action critical (click)=\"deleteView.emit(view); popoverRef()?.close()\">\n\t\t\t\t\t\t\t\t<lu-icon icon=\"trash\" />\n\t\t\t\t\t\t\t\t{{ intl().deleteView }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</lu-dropdown-item>\n\t\t\t\t\t</lu-dropdown-menu>\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-template>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[luButton], a[luButton], span[luButton], button[prButton], a[prButton], span[prButton]", inputs: ["size", "block", "disabled", "critical", "delete", "disclosure", "palette", "state", "luButton", "prButton"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["intl", "luPopover2", "luPopoverPosition", "luPopoverMaxBlockSize", "luPopoverMaxInlineSize", "overlayScrollStrategy", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverBackdrop", "luPopoverIgnoredOutsidePointerTargets", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "component", type: FormLabelComponent, selector: "label[luFormLabel], legend[luFormLabel]", inputs: ["intl", "required", "error", "tooltip", "tag", "size", "counterStatus", "counterMax", "counterId"] }, { kind: "directive", type: LuDropdownTriggerDirective, selector: "[luDropdown]", inputs: ["luDropdown"], exportAs: ["LuDropdownTrigger"] }, { kind: "component", type: DropdownMenuComponent, selector: "lu-dropdown-menu" }, { kind: "component", type: DropdownItemComponent, selector: "lu-dropdown-item" }, { kind: "component", type: DropdownActionComponent, selector: "[lu-dropdown-action]", inputs: ["disabled", "critical"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
480
549
|
}
|
|
481
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1
|
|
550
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: FilterViewSelectorComponent, decorators: [{
|
|
482
551
|
type: Component,
|
|
483
552
|
args: [{ selector: 'lu-filter-view-selector', imports: [ButtonComponent, IconComponent, PopoverDirective, FormLabelComponent, LuDropdownTriggerDirective, DropdownMenuComponent, DropdownItemComponent, DropdownActionComponent, IntlParamsPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
484
553
|
class: 'filterBar-viewSelector',
|
|
@@ -493,10 +562,10 @@ class FilterPillAddonBeforeDirective {
|
|
|
493
562
|
static ngTemplateContextGuard(_dir, _ctx) {
|
|
494
563
|
return true;
|
|
495
564
|
}
|
|
496
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1
|
|
497
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1
|
|
565
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: FilterPillAddonBeforeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
566
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: FilterPillAddonBeforeDirective, isStandalone: true, selector: "[luFilterPillAddonBefore]", ngImport: i0 }); }
|
|
498
567
|
}
|
|
499
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1
|
|
568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: FilterPillAddonBeforeDirective, decorators: [{
|
|
500
569
|
type: Directive,
|
|
501
570
|
args: [{
|
|
502
571
|
selector: '[luFilterPillAddonBefore]',
|
|
@@ -509,10 +578,10 @@ class FilterPillAddonAfterDirective {
|
|
|
509
578
|
static ngTemplateContextGuard(_dir, _ctx) {
|
|
510
579
|
return true;
|
|
511
580
|
}
|
|
512
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1
|
|
513
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1
|
|
581
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: FilterPillAddonAfterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
582
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: FilterPillAddonAfterDirective, isStandalone: true, selector: "[luFilterPillAddonAfter]", ngImport: i0 }); }
|
|
514
583
|
}
|
|
515
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1
|
|
584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: FilterPillAddonAfterDirective, decorators: [{
|
|
516
585
|
type: Directive,
|
|
517
586
|
args: [{
|
|
518
587
|
selector: '[luFilterPillAddonAfter]',
|