@siemens/element-ng 49.14.0 → 51.0.0-rc.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/fesm2022/siemens-element-ng-about.mjs +41 -25
- package/fesm2022/siemens-element-ng-about.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-accordion.mjs +58 -40
- package/fesm2022/siemens-element-ng-accordion.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-action-modal.mjs +83 -53
- package/fesm2022/siemens-element-ng-action-modal.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-ag-grid.mjs +15 -12
- package/fesm2022/siemens-element-ng-ag-grid.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-application-header.mjs +176 -166
- package/fesm2022/siemens-element-ng-application-header.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-auto-collapsable-list.mjs +34 -28
- package/fesm2022/siemens-element-ng-auto-collapsable-list.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-autocomplete.mjs +27 -22
- package/fesm2022/siemens-element-ng-autocomplete.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-avatar.mjs +31 -21
- package/fesm2022/siemens-element-ng-avatar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-badge.mjs +9 -8
- package/fesm2022/siemens-element-ng-badge.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-breadcrumb-router.mjs +17 -14
- package/fesm2022/siemens-element-ng-breadcrumb-router.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-breadcrumb.mjs +21 -17
- package/fesm2022/siemens-element-ng-breadcrumb.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-card.mjs +71 -46
- package/fesm2022/siemens-element-ng-card.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-carousel.mjs +57 -33
- package/fesm2022/siemens-element-ng-carousel.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-chat-messages.mjs +181 -117
- package/fesm2022/siemens-element-ng-chat-messages.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-circle-status.mjs +39 -25
- package/fesm2022/siemens-element-ng-circle-status.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-color-picker.mjs +26 -17
- package/fesm2022/siemens-element-ng-color-picker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-column-selection-dialog.mjs +56 -35
- package/fesm2022/siemens-element-ng-column-selection-dialog.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-common.mjs +12 -12
- package/fesm2022/siemens-element-ng-connection-strength.mjs +14 -12
- package/fesm2022/siemens-element-ng-connection-strength.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-content-action-bar.mjs +36 -27
- package/fesm2022/siemens-element-ng-content-action-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-copyright-notice.mjs +19 -14
- package/fesm2022/siemens-element-ng-copyright-notice.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-dashboard.mjs +335 -221
- package/fesm2022/siemens-element-ng-dashboard.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-datatable.mjs +8 -8
- package/fesm2022/siemens-element-ng-datatable.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-date-range-filter.mjs +119 -72
- package/fesm2022/siemens-element-ng-date-range-filter.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-datepicker.mjs +376 -244
- package/fesm2022/siemens-element-ng-datepicker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-electron-titlebar.mjs +22 -17
- package/fesm2022/siemens-element-ng-electron-titlebar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-empty-state.mjs +15 -12
- package/fesm2022/siemens-element-ng-empty-state.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-file-uploader.mjs +105 -91
- package/fesm2022/siemens-element-ng-file-uploader.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-filter-bar.mjs +32 -24
- package/fesm2022/siemens-element-ng-filter-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-filtered-search.mjs +251 -153
- package/fesm2022/siemens-element-ng-filtered-search.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-footer.mjs +12 -10
- package/fesm2022/siemens-element-ng-footer.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-form.mjs +345 -113
- package/fesm2022/siemens-element-ng-form.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-formly-legacy.mjs +99 -0
- package/fesm2022/siemens-element-ng-formly-legacy.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-formly.mjs +222 -316
- package/fesm2022/siemens-element-ng-formly.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-header-dropdown.mjs +40 -30
- package/fesm2022/siemens-element-ng-header-dropdown.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-help-button.mjs +5 -5
- package/fesm2022/siemens-element-ng-help-button.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-icon.mjs +46 -47
- package/fesm2022/siemens-element-ng-icon.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-info-page.mjs +17 -11
- package/fesm2022/siemens-element-ng-info-page.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-inline-notification.mjs +19 -14
- package/fesm2022/siemens-element-ng-inline-notification.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-ip-input.mjs +25 -25
- package/fesm2022/siemens-element-ng-ip-input.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-landing-page.mjs +120 -74
- package/fesm2022/siemens-element-ng-landing-page.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-language-switcher.mjs +16 -12
- package/fesm2022/siemens-element-ng-language-switcher.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-link.mjs +31 -21
- package/fesm2022/siemens-element-ng-link.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-list-details.mjs +76 -56
- package/fesm2022/siemens-element-ng-list-details.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-loading-spinner.mjs +46 -63
- package/fesm2022/siemens-element-ng-loading-spinner.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-localization.mjs +14 -12
- package/fesm2022/siemens-element-ng-localization.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-main-detail-container.mjs +47 -30
- package/fesm2022/siemens-element-ng-main-detail-container.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-maplibre.mjs +42 -0
- package/fesm2022/siemens-element-ng-maplibre.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-markdown-renderer.mjs +6 -5
- package/fesm2022/siemens-element-ng-markdown-renderer.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-menu.mjs +56 -48
- package/fesm2022/siemens-element-ng-menu.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-modal.mjs +14 -11
- package/fesm2022/siemens-element-ng-modal.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs +249 -204
- package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs +120 -83
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar.mjs +72 -45
- package/fesm2022/siemens-element-ng-navbar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-notification-item.mjs +19 -11
- package/fesm2022/siemens-element-ng-notification-item.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-number-input.mjs +40 -28
- package/fesm2022/siemens-element-ng-number-input.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-pagination.mjs +31 -20
- package/fesm2022/siemens-element-ng-pagination.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-password-strength.mjs +32 -23
- package/fesm2022/siemens-element-ng-password-strength.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-password-toggle.mjs +18 -13
- package/fesm2022/siemens-element-ng-password-toggle.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-phone-number.mjs +123 -139
- package/fesm2022/siemens-element-ng-phone-number.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-photo-upload.mjs +84 -51
- package/fesm2022/siemens-element-ng-photo-upload.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-pills-input.mjs +63 -58
- package/fesm2022/siemens-element-ng-pills-input.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-popover-legacy.mjs +43 -28
- package/fesm2022/siemens-element-ng-popover-legacy.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-popover.mjs +35 -27
- package/fesm2022/siemens-element-ng-popover.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-progressbar.mjs +23 -16
- package/fesm2022/siemens-element-ng-progressbar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-resize-observer.mjs +32 -43
- package/fesm2022/siemens-element-ng-resize-observer.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-result-details-list.mjs +12 -10
- package/fesm2022/siemens-element-ng-result-details-list.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-search-bar.mjs +38 -31
- package/fesm2022/siemens-element-ng-search-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-select.mjs +218 -163
- package/fesm2022/siemens-element-ng-select.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-shadow-root.mjs +3 -3
- package/fesm2022/siemens-element-ng-side-panel.mjs +128 -86
- package/fesm2022/siemens-element-ng-side-panel.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-skip-links.mjs +21 -24
- package/fesm2022/siemens-element-ng-skip-links.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-slider.mjs +44 -29
- package/fesm2022/siemens-element-ng-slider.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-split.mjs +273 -293
- package/fesm2022/siemens-element-ng-split.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-bar.mjs +65 -51
- package/fesm2022/siemens-element-ng-status-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-counter.mjs +15 -11
- package/fesm2022/siemens-element-ng-status-counter.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-toggle.mjs +26 -16
- package/fesm2022/siemens-element-ng-status-toggle.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-summary-chip.mjs +25 -16
- package/fesm2022/siemens-element-ng-summary-chip.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-summary-widget.mjs +27 -17
- package/fesm2022/siemens-element-ng-summary-widget.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-system-banner.mjs +11 -8
- package/fesm2022/siemens-element-ng-system-banner.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tabs-legacy.mjs +20 -17
- package/fesm2022/siemens-element-ng-tabs-legacy.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tabs.mjs +73 -70
- package/fesm2022/siemens-element-ng-tabs.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-theme.mjs +29 -6
- package/fesm2022/siemens-element-ng-theme.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-threshold.mjs +60 -41
- package/fesm2022/siemens-element-ng-threshold.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-toast-notification.mjs +45 -40
- package/fesm2022/siemens-element-ng-toast-notification.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tooltip.mjs +105 -82
- package/fesm2022/siemens-element-ng-tooltip.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tour.mjs +24 -18
- package/fesm2022/siemens-element-ng-tour.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-translate.mjs +0 -1
- package/fesm2022/siemens-element-ng-translate.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tree-view.mjs +96 -75
- package/fesm2022/siemens-element-ng-tree-view.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-typeahead.mjs +76 -70
- package/fesm2022/siemens-element-ng-typeahead.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-wizard.mjs +72 -48
- package/fesm2022/siemens-element-ng-wizard.mjs.map +1 -1
- package/formly-legacy/package.json +4 -0
- package/maplibre/package.json +4 -0
- package/maplibre/styles/_index.scss +1 -0
- package/maplibre/styles/maplibre-gl.scss +715 -0
- package/package.json +37 -23
- package/schematics/migration.json +4 -4
- package/schematics/migrations/data/class-member-replacement.js +1 -19
- package/schematics/migrations/data/component-property-names.js +1 -25
- package/schematics/migrations/data/element-class-changes.js +1 -28
- package/schematics/migrations/data/element-migration-data.js +2 -0
- package/schematics/migrations/data/element-selectors.js +1 -11
- package/schematics/migrations/data/index.js +0 -4
- package/schematics/migrations/data/migration-test-data.js +9 -6
- package/schematics/migrations/data/provider-function-removals.js +7 -0
- package/schematics/migrations/data/symbol-removals.js +7 -7
- package/schematics/migrations/data/symbol-renaming.js +1 -48
- package/schematics/migrations/element-migration/element-migration.js +3 -6
- package/schematics/migrations/utilities/import-removal.js +39 -0
- package/schematics/migrations/utilities/index.js +2 -0
- package/schematics/migrations/utilities/provider-function-removal.migration.js +116 -0
- package/schematics/ng-update/index.js +1 -1
- package/schematics/ng-update/migrate-split-sizes.js +105 -0
- package/schematics/ng-update/{migrate-to-v49.js → migrate-to-v51.js} +5 -3
- package/template-i18n.json +45 -47
- package/types/siemens-element-ng-application-header.d.ts +8 -28
- package/types/siemens-element-ng-breadcrumb.d.ts +1 -1
- package/types/siemens-element-ng-chat-messages.d.ts +11 -9
- package/types/siemens-element-ng-circle-status.d.ts +1 -1
- package/types/siemens-element-ng-content-action-bar.d.ts +1 -1
- package/types/siemens-element-ng-dashboard.d.ts +2 -2
- package/types/siemens-element-ng-date-range-filter.d.ts +1 -1
- package/types/siemens-element-ng-datepicker.d.ts +3 -14
- package/types/siemens-element-ng-electron-titlebar.d.ts +1 -1
- package/types/siemens-element-ng-file-uploader.d.ts +13 -31
- package/types/siemens-element-ng-filter-bar.d.ts +1 -1
- package/types/siemens-element-ng-filtered-search.d.ts +4 -4
- package/types/siemens-element-ng-form.d.ts +180 -44
- package/types/siemens-element-ng-formly-legacy.d.ts +40 -0
- package/types/siemens-element-ng-formly.d.ts +34 -167
- package/types/siemens-element-ng-icon.d.ts +2 -19
- package/types/siemens-element-ng-ip-input.d.ts +1 -1
- package/types/siemens-element-ng-landing-page.d.ts +2 -2
- package/types/siemens-element-ng-loading-spinner.d.ts +7 -17
- package/types/siemens-element-ng-maplibre.d.ts +26 -0
- package/types/siemens-element-ng-navbar-vertical-next.d.ts +86 -38
- package/types/siemens-element-ng-navbar-vertical.d.ts +1 -1
- package/types/siemens-element-ng-navbar.d.ts +3 -3
- package/types/siemens-element-ng-notification-item.d.ts +12 -0
- package/types/siemens-element-ng-phone-number.d.ts +5 -8
- package/types/siemens-element-ng-photo-upload.d.ts +4 -4
- package/types/siemens-element-ng-resize-observer.d.ts +0 -17
- package/types/siemens-element-ng-search-bar.d.ts +1 -1
- package/types/siemens-element-ng-select.d.ts +1 -1
- package/types/siemens-element-ng-side-panel.d.ts +3 -3
- package/types/siemens-element-ng-split.d.ts +99 -70
- package/types/siemens-element-ng-status-bar.d.ts +5 -13
- package/types/siemens-element-ng-status-counter.d.ts +1 -1
- package/types/siemens-element-ng-tabs.d.ts +1 -2
- package/types/siemens-element-ng-theme.d.ts +12 -2
- package/types/siemens-element-ng-threshold.d.ts +1 -1
- package/types/siemens-element-ng-toast-notification.d.ts +0 -1
- package/types/siemens-element-ng-tooltip.d.ts +7 -7
- package/types/siemens-element-ng-translate.d.ts +2 -5
- package/fesm2022/siemens-element-ng-icon-status.mjs +0 -46
- package/fesm2022/siemens-element-ng-icon-status.mjs.map +0 -1
- package/fesm2022/siemens-element-ng-sort-bar.mjs +0 -99
- package/fesm2022/siemens-element-ng-sort-bar.mjs.map +0 -1
- package/icon-status/package.json +0 -4
- package/schematics/vitest-setup.js +0 -5
- package/sort-bar/package.json +0 -4
- package/types/siemens-element-ng-icon-status.d.ts +0 -25
- package/types/siemens-element-ng-sort-bar.d.ts +0 -59
- /package/{LICENSE.md → LICENSE} +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, model, output, viewChild, computed,
|
|
2
|
+
import { input, model, output, viewChild, computed, Component, signal, Directive, inject, LOCALE_ID, DestroyRef, untracked, Injector, afterNextRender, booleanAttribute, ElementRef, viewChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
3
3
|
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
4
4
|
import { elementCancel, elementSearch } from '@siemens/element-icons';
|
|
5
5
|
import { isRTL } from '@siemens/element-ng/common';
|
|
@@ -59,33 +59,48 @@ const getISODateString = (date, format, locale) => {
|
|
|
59
59
|
*/
|
|
60
60
|
class SiFilteredSearchInputComponent {
|
|
61
61
|
static criterionRegex = /(.+?):(.*)$/;
|
|
62
|
-
dataSource = input.required(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
62
|
+
dataSource = input.required(/* @ts-ignore */
|
|
63
|
+
...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
|
|
64
|
+
typeaheadOptionsLimit = input.required(/* @ts-ignore */
|
|
65
|
+
...(ngDevMode ? [{ debugName: "typeaheadOptionsLimit" }] : /* istanbul ignore next */ []));
|
|
66
|
+
optionsInScrollableView = input.required(/* @ts-ignore */
|
|
67
|
+
...(ngDevMode ? [{ debugName: "optionsInScrollableView" }] : /* istanbul ignore next */ []));
|
|
68
|
+
disabled = input.required(/* @ts-ignore */
|
|
69
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
70
|
+
placeholder = input.required(/* @ts-ignore */
|
|
71
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
72
|
+
searchLabel = input.required(/* @ts-ignore */
|
|
73
|
+
...(ngDevMode ? [{ debugName: "searchLabel" }] : /* istanbul ignore next */ []));
|
|
74
|
+
searchValue = model.required(/* @ts-ignore */
|
|
75
|
+
...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
|
|
76
|
+
freeTextCriterion = input.required(/* @ts-ignore */
|
|
77
|
+
...(ngDevMode ? [{ debugName: "freeTextCriterion" }] : /* istanbul ignore next */ []));
|
|
78
|
+
maxCriteriaReached = input.required(/* @ts-ignore */
|
|
79
|
+
...(ngDevMode ? [{ debugName: "maxCriteriaReached" }] : /* istanbul ignore next */ []));
|
|
80
|
+
allowFreeText = input.required(/* @ts-ignore */
|
|
81
|
+
...(ngDevMode ? [{ debugName: "allowFreeText" }] : /* istanbul ignore next */ []));
|
|
82
|
+
searchForFreeTextLabel = input.required(/* @ts-ignore */
|
|
83
|
+
...(ngDevMode ? [{ debugName: "searchForFreeTextLabel" }] : /* istanbul ignore next */ []));
|
|
84
|
+
disableSelectionByColonAndSemicolon = input.required(/* @ts-ignore */
|
|
85
|
+
...(ngDevMode ? [{ debugName: "disableSelectionByColonAndSemicolon" }] : /* istanbul ignore next */ []));
|
|
86
|
+
onlySelectValue = input.required(/* @ts-ignore */
|
|
87
|
+
...(ngDevMode ? [{ debugName: "onlySelectValue" }] : /* istanbul ignore next */ []));
|
|
75
88
|
createCriterion = output();
|
|
76
89
|
createCriterionByName = output();
|
|
77
90
|
backspaceOverflow = output();
|
|
78
91
|
createFreeTextPill = output();
|
|
79
92
|
inputFocus = output();
|
|
80
93
|
enterSubmit = output();
|
|
81
|
-
inputElement = viewChild.required('freeTextInputElement'
|
|
94
|
+
inputElement = viewChild.required('freeTextInputElement', /* @ts-ignore */
|
|
95
|
+
...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []));
|
|
82
96
|
/** Public method to focus the input element */
|
|
83
97
|
focus() {
|
|
84
98
|
this.inputElement().nativeElement.focus();
|
|
85
99
|
}
|
|
86
100
|
typeaheadCreateOption = computed(() => this.freeTextCriterion() && !this.maxCriteriaReached() && this.allowFreeText()
|
|
87
101
|
? this.searchForFreeTextLabel()
|
|
88
|
-
: undefined,
|
|
102
|
+
: undefined, /* @ts-ignore */
|
|
103
|
+
...(ngDevMode ? [{ debugName: "typeaheadCreateOption" }] : /* istanbul ignore next */ []));
|
|
89
104
|
freeTextBackspaceHandler(event) {
|
|
90
105
|
if (!event.target.value) {
|
|
91
106
|
this.backspaceOverflow.emit();
|
|
@@ -122,12 +137,12 @@ class SiFilteredSearchInputComponent {
|
|
|
122
137
|
this.createFreeTextPill.emit(query);
|
|
123
138
|
this.searchValue.set('');
|
|
124
139
|
}
|
|
125
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
126
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
140
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
141
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: SiFilteredSearchInputComponent, isStandalone: true, selector: "si-filtered-search-input", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: true, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: true, transformFunction: null }, freeTextCriterion: { classPropertyName: "freeTextCriterion", publicName: "freeTextCriterion", isSignal: true, isRequired: true, transformFunction: null }, maxCriteriaReached: { classPropertyName: "maxCriteriaReached", publicName: "maxCriteriaReached", isSignal: true, isRequired: true, transformFunction: null }, allowFreeText: { classPropertyName: "allowFreeText", publicName: "allowFreeText", isSignal: true, isRequired: true, transformFunction: null }, searchForFreeTextLabel: { classPropertyName: "searchForFreeTextLabel", publicName: "searchForFreeTextLabel", isSignal: true, isRequired: true, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: true, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { searchValue: "searchValueChange", createCriterion: "createCriterion", createCriterionByName: "createCriterionByName", backspaceOverflow: "backspaceOverflow", createFreeTextPill: "createFreeTextPill", inputFocus: "inputFocus", enterSubmit: "enterSubmit" }, host: { classAttribute: "w-100" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["freeTextInputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #freeTextInputElement\n type=\"text\"\n class=\"value-input ps-2 me-2 w-100\"\n typeaheadOptionField=\"translatedLabel\"\n typeaheadClearValueOnSelect\n [siTypeahead]=\"dataSource()\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n [typeaheadScrollable]=\"true\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [typeaheadAutoSelectIndex]=\"searchValue() ? 0 : -1\"\n [typeaheadCreateOption]=\"typeaheadCreateOption()\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [value]=\"searchValue()\"\n (focus)=\"inputFocus.emit()\"\n (input)=\"freeTextInputHandler($event)\"\n (blur)=\"freeTextBlurHandler()\"\n (keydown.backspace)=\"freeTextBackspaceHandler($event)\"\n (keydown.enter)=\"enterSubmit.emit()\"\n (typeaheadOnSelect)=\"typeaheadOnSelectCriterionHandler($event.option)\"\n (typeaheadOnCreateOption)=\"createFreeTextPillHandler($event)\"\n/>\n", styles: ["input{background:transparent;border:0;padding-block:0}input:focus{min-inline-size:20ch}input:hover::placeholder{opacity:1}:host-context(si-filtered-search-value + :host) input::placeholder{color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
127
142
|
}
|
|
128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
143
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchInputComponent, decorators: [{
|
|
129
144
|
type: Component,
|
|
130
|
-
args: [{ selector: 'si-filtered-search-input', imports: [FormsModule, SiTypeaheadDirective, SiTranslatePipe],
|
|
145
|
+
args: [{ selector: 'si-filtered-search-input', imports: [FormsModule, SiTypeaheadDirective, SiTranslatePipe], host: {
|
|
131
146
|
class: 'w-100'
|
|
132
147
|
}, template: "<input\n #freeTextInputElement\n type=\"text\"\n class=\"value-input ps-2 me-2 w-100\"\n typeaheadOptionField=\"translatedLabel\"\n typeaheadClearValueOnSelect\n [siTypeahead]=\"dataSource()\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n [typeaheadScrollable]=\"true\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [typeaheadAutoSelectIndex]=\"searchValue() ? 0 : -1\"\n [typeaheadCreateOption]=\"typeaheadCreateOption()\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [value]=\"searchValue()\"\n (focus)=\"inputFocus.emit()\"\n (input)=\"freeTextInputHandler($event)\"\n (blur)=\"freeTextBlurHandler()\"\n (keydown.backspace)=\"freeTextBackspaceHandler($event)\"\n (keydown.enter)=\"enterSubmit.emit()\"\n (typeaheadOnSelect)=\"typeaheadOnSelectCriterionHandler($event.option)\"\n (typeaheadOnCreateOption)=\"createFreeTextPillHandler($event)\"\n/>\n", styles: ["input{background:transparent;border:0;padding-block:0}input:focus{min-inline-size:20ch}input:hover::placeholder{opacity:1}:host-context(si-filtered-search-value + :host) input::placeholder{color:transparent}\n"] }]
|
|
133
148
|
}], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], typeaheadOptionsLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadOptionsLimit", required: true }] }], optionsInScrollableView: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsInScrollableView", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: true }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: true }] }, { type: i0.Output, args: ["searchValueChange"] }], freeTextCriterion: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeTextCriterion", required: true }] }], maxCriteriaReached: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteriaReached", required: true }] }], allowFreeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFreeText", required: true }] }], searchForFreeTextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchForFreeTextLabel", required: true }] }], disableSelectionByColonAndSemicolon: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSelectionByColonAndSemicolon", required: true }] }], onlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelectValue", required: true }] }], createCriterion: [{ type: i0.Output, args: ["createCriterion"] }], createCriterionByName: [{ type: i0.Output, args: ["createCriterionByName"] }], backspaceOverflow: [{ type: i0.Output, args: ["backspaceOverflow"] }], createFreeTextPill: [{ type: i0.Output, args: ["createFreeTextPill"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], enterSubmit: [{ type: i0.Output, args: ["enterSubmit"] }], inputElement: [{ type: i0.ViewChild, args: ['freeTextInputElement', { isSignal: true }] }] } });
|
|
@@ -137,11 +152,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
137
152
|
* SPDX-License-Identifier: MIT
|
|
138
153
|
*/
|
|
139
154
|
class SiFilteredSearchValueBase {
|
|
140
|
-
active = model.required(
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
155
|
+
active = model.required(/* @ts-ignore */
|
|
156
|
+
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
157
|
+
criterionValue = model.required(/* @ts-ignore */
|
|
158
|
+
...(ngDevMode ? [{ debugName: "criterionValue" }] : /* istanbul ignore next */ []));
|
|
159
|
+
definition = input.required(/* @ts-ignore */
|
|
160
|
+
...(ngDevMode ? [{ debugName: "definition" }] : /* istanbul ignore next */ []));
|
|
161
|
+
disabled = input.required(/* @ts-ignore */
|
|
162
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
163
|
+
searchLabel = input.required(/* @ts-ignore */
|
|
164
|
+
...(ngDevMode ? [{ debugName: "searchLabel" }] : /* istanbul ignore next */ []));
|
|
145
165
|
submitValue = output();
|
|
146
166
|
editValue = output();
|
|
147
167
|
backspaceOverflow = output();
|
|
@@ -161,10 +181,10 @@ class SiFilteredSearchValueBase {
|
|
|
161
181
|
this.backspaceOverflow.emit();
|
|
162
182
|
}
|
|
163
183
|
}
|
|
164
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
165
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
184
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchValueBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
185
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: SiFilteredSearchValueBase, isStandalone: true, inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, criterionValue: { classPropertyName: "criterionValue", publicName: "criterionValue", isSignal: true, isRequired: true, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { active: "activeChange", criterionValue: "criterionValueChange", submitValue: "submitValue", editValue: "editValue", backspaceOverflow: "backspaceOverflow" }, host: { properties: { "class.invalid-criterion": "!validValue()" }, classAttribute: "pill pill-interactive px-0 criterion-value-section" }, ngImport: i0 });
|
|
166
186
|
}
|
|
167
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
187
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchValueBase, decorators: [{
|
|
168
188
|
type: Directive,
|
|
169
189
|
args: [{
|
|
170
190
|
host: {
|
|
@@ -180,20 +200,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
180
200
|
*/
|
|
181
201
|
class SiFilteredSearchDateValueComponent extends SiFilteredSearchValueBase {
|
|
182
202
|
locale = inject(LOCALE_ID).toString();
|
|
183
|
-
valueInput = viewChild('valueInput',
|
|
184
|
-
|
|
185
|
-
|
|
203
|
+
valueInput = viewChild('valueInput', /* @ts-ignore */
|
|
204
|
+
...(ngDevMode ? [{ debugName: "valueInput" }] : /* istanbul ignore next */ []));
|
|
205
|
+
datepickerOverlay = viewChild(SiDatepickerOverlayDirective, /* @ts-ignore */
|
|
206
|
+
...(ngDevMode ? [{ debugName: "datepickerOverlay" }] : /* istanbul ignore next */ []));
|
|
207
|
+
disableTime = signal(false, /* @ts-ignore */
|
|
208
|
+
...(ngDevMode ? [{ debugName: "disableTime" }] : /* istanbul ignore next */ []));
|
|
186
209
|
shortDateFormat;
|
|
187
|
-
focusInOverlay = computed(() => !!this.datepickerOverlay()?.isShown(),
|
|
188
|
-
|
|
210
|
+
focusInOverlay = computed(() => !!this.datepickerOverlay()?.isShown(), /* @ts-ignore */
|
|
211
|
+
...(ngDevMode ? [{ debugName: "focusInOverlay" }] : /* istanbul ignore next */ []));
|
|
212
|
+
validFormat = computed(() => isValid(this.criterionValue().dateValue), /* @ts-ignore */
|
|
213
|
+
...(ngDevMode ? [{ debugName: "validFormat" }] : /* istanbul ignore next */ []));
|
|
189
214
|
// The information if the time is currently disabled is only present in the
|
|
190
215
|
// current search criterion instance and not in the generic configuration.
|
|
191
216
|
// So we need to merge the initial config with the current instance config.
|
|
192
217
|
dateConfig = computed(() => ({
|
|
193
218
|
...this.definition().datepickerConfig,
|
|
194
219
|
disabledTime: this.disableTime()
|
|
195
|
-
}),
|
|
196
|
-
|
|
220
|
+
}), /* @ts-ignore */
|
|
221
|
+
...(ngDevMode ? [{ debugName: "dateConfig" }] : /* istanbul ignore next */ []));
|
|
222
|
+
dateFormat = computed(() => getDatepickerFormat(this.locale, this.dateConfig()), /* @ts-ignore */
|
|
223
|
+
...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
|
|
197
224
|
validValue = computed(() => {
|
|
198
225
|
const dateConfig = this.dateConfig();
|
|
199
226
|
const minDate = dateConfig?.minDate ?? false;
|
|
@@ -201,7 +228,8 @@ class SiFilteredSearchDateValueComponent extends SiFilteredSearchValueBase {
|
|
|
201
228
|
const dateValue = this.criterionValue().dateValue ?? false;
|
|
202
229
|
return ((!minDate || (minDate && dateValue && dateValue >= minDate)) &&
|
|
203
230
|
(!maxDate || (maxDate && dateValue && dateValue <= maxDate)));
|
|
204
|
-
},
|
|
231
|
+
}, /* @ts-ignore */
|
|
232
|
+
...(ngDevMode ? [{ debugName: "validValue" }] : /* istanbul ignore next */ []));
|
|
205
233
|
constructor() {
|
|
206
234
|
super();
|
|
207
235
|
this.shortDateFormat = getNamedFormat(this.locale, 'shortDate');
|
|
@@ -230,16 +258,16 @@ class SiFilteredSearchDateValueComponent extends SiFilteredSearchValueBase {
|
|
|
230
258
|
}
|
|
231
259
|
this.criterionValue.update(v => ({ ...v, value, dateValue: date }));
|
|
232
260
|
}
|
|
233
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
234
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
261
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchDateValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
262
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiFilteredSearchDateValueComponent, isStandalone: true, selector: "si-filtered-search-date-value", providers: [
|
|
235
263
|
{ provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchDateValueComponent }
|
|
236
|
-
], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }, { propertyName: "datepickerOverlay", first: true, predicate: SiDatepickerOverlayDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let dateValue = criterionValue().dateValue;\n@if (!active()) {\n <div\n class=\"criterion-value-text focus-inside px-4\"\n [tabindex]=\"disabled() ? -1 : 0\"\n (keydown.enter)=\"editValue.emit()\"\n (click)=\"editValue.emit()\"\n >\n @if (!validFormat()) {\n <!-- DatePipe throws an error if the date is invalid, so we have to do it on our own. -->\n <!-- We may should have a better solution here. Ideally we would keep the broken string so that a user can fix it later. -->\n\n {{ dateValue?.toString() }}\n } @else if (!disableTime() || definition().validationType === 'date-time') {\n {{ dateValue | date: dateFormat() }}\n } @else {\n {{ dateValue | date: shortDateFormat }}\n }\n </div>\n} @else {\n <input\n #valueInput\n type=\"text\"\n siDatepicker\n class=\"px-4 py-0 border-0 focus-inside\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [siDatepickerConfig]=\"dateConfig()\"\n [ngModel]=\"dateValue\"\n (keydown.backspace)=\"valueBackspace()\"\n (keydown.enter)=\"valueEnter()\"\n (siDatepickerDisabledTime)=\"disableTime.set($event)\"\n (ngModelChange)=\"valueDateSelect($event)\"\n />\n}\n", styles: ["input{background:transparent}.criterion-value-text{block-size:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose"], exportAs: ["siDatepicker"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }]
|
|
264
|
+
], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }, { propertyName: "datepickerOverlay", first: true, predicate: SiDatepickerOverlayDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let dateValue = criterionValue().dateValue;\n@if (!active()) {\n <div\n class=\"criterion-value-text focus-inside px-4\"\n [tabindex]=\"disabled() ? -1 : 0\"\n (keydown.enter)=\"editValue.emit()\"\n (click)=\"editValue.emit()\"\n >\n @if (!validFormat()) {\n <!-- DatePipe throws an error if the date is invalid, so we have to do it on our own. -->\n <!-- We may should have a better solution here. Ideally we would keep the broken string so that a user can fix it later. -->\n\n {{ dateValue?.toString() }}\n } @else if (!disableTime() || definition().validationType === 'date-time') {\n {{ dateValue | date: dateFormat() }}\n } @else {\n {{ dateValue | date: shortDateFormat }}\n }\n </div>\n} @else {\n <input\n #valueInput\n type=\"text\"\n siDatepicker\n class=\"px-4 py-0 border-0 focus-inside\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [siDatepickerConfig]=\"dateConfig()\"\n [ngModel]=\"dateValue\"\n (keydown.backspace)=\"valueBackspace()\"\n (keydown.enter)=\"valueEnter()\"\n (siDatepickerDisabledTime)=\"disableTime.set($event)\"\n (ngModelChange)=\"valueDateSelect($event)\"\n />\n}\n", styles: ["input{background:transparent}.criterion-value-text{block-size:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose"], exportAs: ["siDatepicker"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
237
265
|
}
|
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchDateValueComponent, decorators: [{
|
|
239
267
|
type: Component,
|
|
240
268
|
args: [{ selector: 'si-filtered-search-date-value', imports: [DatePipe, FormsModule, SiDatepickerDirective, SiTranslatePipe], providers: [
|
|
241
269
|
{ provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchDateValueComponent }
|
|
242
|
-
],
|
|
270
|
+
], template: "@let dateValue = criterionValue().dateValue;\n@if (!active()) {\n <div\n class=\"criterion-value-text focus-inside px-4\"\n [tabindex]=\"disabled() ? -1 : 0\"\n (keydown.enter)=\"editValue.emit()\"\n (click)=\"editValue.emit()\"\n >\n @if (!validFormat()) {\n <!-- DatePipe throws an error if the date is invalid, so we have to do it on our own. -->\n <!-- We may should have a better solution here. Ideally we would keep the broken string so that a user can fix it later. -->\n\n {{ dateValue?.toString() }}\n } @else if (!disableTime() || definition().validationType === 'date-time') {\n {{ dateValue | date: dateFormat() }}\n } @else {\n {{ dateValue | date: shortDateFormat }}\n }\n </div>\n} @else {\n <input\n #valueInput\n type=\"text\"\n siDatepicker\n class=\"px-4 py-0 border-0 focus-inside\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [siDatepickerConfig]=\"dateConfig()\"\n [ngModel]=\"dateValue\"\n (keydown.backspace)=\"valueBackspace()\"\n (keydown.enter)=\"valueEnter()\"\n (siDatepickerDisabledTime)=\"disableTime.set($event)\"\n (ngModelChange)=\"valueDateSelect($event)\"\n />\n}\n", styles: ["input{background:transparent}.criterion-value-text{block-size:100%;display:flex;align-items:center}\n"] }]
|
|
243
271
|
}], ctorParameters: () => [], propDecorators: { valueInput: [{ type: i0.ViewChild, args: ['valueInput', { isSignal: true }] }], datepickerOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiDatepickerOverlayDirective), { isSignal: true }] }] } });
|
|
244
272
|
|
|
245
273
|
/**
|
|
@@ -247,8 +275,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
247
275
|
* SPDX-License-Identifier: MIT
|
|
248
276
|
*/
|
|
249
277
|
class SiFilteredSearchFreeTextComponent extends SiFilteredSearchValueBase {
|
|
250
|
-
valueInput = viewChild('freeTextInput',
|
|
251
|
-
|
|
278
|
+
valueInput = viewChild('freeTextInput', /* @ts-ignore */
|
|
279
|
+
...(ngDevMode ? [{ debugName: "valueInput" }] : /* istanbul ignore next */ []));
|
|
280
|
+
validValue = computed(() => true, /* @ts-ignore */
|
|
281
|
+
...(ngDevMode ? [{ debugName: "validValue" }] : /* istanbul ignore next */ []));
|
|
252
282
|
freeTextValueChange(event) {
|
|
253
283
|
const inputElement = event.target;
|
|
254
284
|
this.criterionValue.update(v => ({ ...v, value: inputElement.value }));
|
|
@@ -257,16 +287,16 @@ class SiFilteredSearchFreeTextComponent extends SiFilteredSearchValueBase {
|
|
|
257
287
|
this.active.set(false);
|
|
258
288
|
this.submitValue.emit();
|
|
259
289
|
}
|
|
260
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
261
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
290
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchFreeTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
291
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiFilteredSearchFreeTextComponent, isStandalone: true, selector: "si-filtered-search-free-text", providers: [
|
|
262
292
|
{ provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchFreeTextComponent }
|
|
263
|
-
], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["freeTextInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (!active()) {\n <div\n class=\"criterion-value-text focus-inside px-4\"\n [tabindex]=\"disabled() ? -1 : 0\"\n (keydown.enter)=\"editValue.emit()\"\n (click)=\"editValue.emit()\"\n >\n {{ criterionValue().value }}\n </div>\n} @else {\n <input\n #freeTextInput\n type=\"text\"\n class=\"px-4 py-0 border-0 focus-inside\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [disabled]=\"disabled()\"\n [value]=\"criterionValue().value\"\n (input)=\"freeTextValueChange($event)\"\n (keydown.backspace)=\"valueBackspace()\"\n (keydown.enter)=\"valueEnter()\"\n (blur)=\"active.set(false)\"\n />\n}\n", styles: ["input{background:transparent}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }]
|
|
293
|
+
], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["freeTextInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (!active()) {\n <div\n class=\"criterion-value-text focus-inside px-4\"\n [tabindex]=\"disabled() ? -1 : 0\"\n (keydown.enter)=\"editValue.emit()\"\n (click)=\"editValue.emit()\"\n >\n {{ criterionValue().value }}\n </div>\n} @else {\n <input\n #freeTextInput\n type=\"text\"\n class=\"px-4 py-0 border-0 focus-inside\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [disabled]=\"disabled()\"\n [value]=\"criterionValue().value\"\n (input)=\"freeTextValueChange($event)\"\n (keydown.backspace)=\"valueBackspace()\"\n (keydown.enter)=\"valueEnter()\"\n (blur)=\"active.set(false)\"\n />\n}\n", styles: ["input{background:transparent}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
264
294
|
}
|
|
265
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchFreeTextComponent, decorators: [{
|
|
266
296
|
type: Component,
|
|
267
297
|
args: [{ selector: 'si-filtered-search-free-text', imports: [SiTranslatePipe], providers: [
|
|
268
298
|
{ provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchFreeTextComponent }
|
|
269
|
-
],
|
|
299
|
+
], template: "@if (!active()) {\n <div\n class=\"criterion-value-text focus-inside px-4\"\n [tabindex]=\"disabled() ? -1 : 0\"\n (keydown.enter)=\"editValue.emit()\"\n (click)=\"editValue.emit()\"\n >\n {{ criterionValue().value }}\n </div>\n} @else {\n <input\n #freeTextInput\n type=\"text\"\n class=\"px-4 py-0 border-0 focus-inside\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [disabled]=\"disabled()\"\n [value]=\"criterionValue().value\"\n (input)=\"freeTextValueChange($event)\"\n (keydown.backspace)=\"valueBackspace()\"\n (keydown.enter)=\"valueEnter()\"\n (blur)=\"active.set(false)\"\n />\n}\n", styles: ["input{background:transparent}\n"] }]
|
|
270
300
|
}], propDecorators: { valueInput: [{ type: i0.ViewChild, args: ['freeTextInput', { isSignal: true }] }] } });
|
|
271
301
|
|
|
272
302
|
/**
|
|
@@ -274,21 +304,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
274
304
|
* SPDX-License-Identifier: MIT
|
|
275
305
|
*/
|
|
276
306
|
class SiFilteredSearchOptionValueBase extends SiFilteredSearchValueBase {
|
|
277
|
-
lazyValueProvider = input(
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
307
|
+
lazyValueProvider = input(/* @ts-ignore */
|
|
308
|
+
...(ngDevMode ? [undefined, { debugName: "lazyValueProvider" }] : /* istanbul ignore next */ []));
|
|
309
|
+
searchDebounceTime = input.required(/* @ts-ignore */
|
|
310
|
+
...(ngDevMode ? [{ debugName: "searchDebounceTime" }] : /* istanbul ignore next */ []));
|
|
311
|
+
onlySelectValue = input.required(/* @ts-ignore */
|
|
312
|
+
...(ngDevMode ? [{ debugName: "onlySelectValue" }] : /* istanbul ignore next */ []));
|
|
313
|
+
maxCriteriaOptions = input.required(/* @ts-ignore */
|
|
314
|
+
...(ngDevMode ? [{ debugName: "maxCriteriaOptions" }] : /* istanbul ignore next */ []));
|
|
315
|
+
optionsInScrollableView = input.required(/* @ts-ignore */
|
|
316
|
+
...(ngDevMode ? [{ debugName: "optionsInScrollableView" }] : /* istanbul ignore next */ []));
|
|
317
|
+
disableSelectionByColonAndSemicolon = input.required(/* @ts-ignore */
|
|
318
|
+
...(ngDevMode ? [{ debugName: "disableSelectionByColonAndSemicolon" }] : /* istanbul ignore next */ []));
|
|
319
|
+
isStrictOrOnlySelectValue = input.required(/* @ts-ignore */
|
|
320
|
+
...(ngDevMode ? [{ debugName: "isStrictOrOnlySelectValue" }] : /* istanbul ignore next */ []));
|
|
284
321
|
inputChange = new BehaviorSubject('');
|
|
285
322
|
destroyRef = inject(DestroyRef);
|
|
286
323
|
translateService = injectSiTranslateService();
|
|
287
324
|
inputType = computed(() => this.definition().validationType === 'integer' || this.definition().validationType === 'float'
|
|
288
325
|
? 'number'
|
|
289
|
-
: 'text',
|
|
290
|
-
|
|
291
|
-
|
|
326
|
+
: 'text', /* @ts-ignore */
|
|
327
|
+
...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
|
|
328
|
+
step = computed(() => (this.definition().validationType === 'integer' ? '1' : 'any'), /* @ts-ignore */
|
|
329
|
+
...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
|
|
330
|
+
options = computed(() => this.buildOptions(), /* @ts-ignore */
|
|
331
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
292
332
|
validValue = computed(() => {
|
|
293
333
|
const config = this.definition();
|
|
294
334
|
if (!this.isStrictOrOnlySelectValue() && !config.strictValue && !config.onlySelectValue) {
|
|
@@ -298,7 +338,8 @@ class SiFilteredSearchOptionValueBase extends SiFilteredSearchValueBase {
|
|
|
298
338
|
// TODO: checking if options are empty is also questionable. Should be changed v47.
|
|
299
339
|
return ((config.options?.length && this.hasOptionValue()) ||
|
|
300
340
|
(!config.options?.length && !!this.criterionValue().value));
|
|
301
|
-
},
|
|
341
|
+
}, /* @ts-ignore */
|
|
342
|
+
...(ngDevMode ? [{ debugName: "validValue" }] : /* istanbul ignore next */ []));
|
|
302
343
|
buildOptions() {
|
|
303
344
|
let optionsStream;
|
|
304
345
|
if (this.lazyValueProvider()) {
|
|
@@ -327,10 +368,10 @@ class SiFilteredSearchOptionValueBase extends SiFilteredSearchValueBase {
|
|
|
327
368
|
.subscribe(options => this.processTypeaheadOptions(options));
|
|
328
369
|
}
|
|
329
370
|
}
|
|
330
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
331
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
371
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchOptionValueBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
372
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: SiFilteredSearchOptionValueBase, isStandalone: true, inputs: { lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: true, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: true, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: true, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: true, transformFunction: null }, isStrictOrOnlySelectValue: { classPropertyName: "isStrictOrOnlySelectValue", publicName: "isStrictOrOnlySelectValue", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
|
|
332
373
|
}
|
|
333
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
374
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchOptionValueBase, decorators: [{
|
|
334
375
|
type: Directive
|
|
335
376
|
}], propDecorators: { lazyValueProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyValueProvider", required: false }] }], searchDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceTime", required: true }] }], onlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelectValue", required: true }] }], maxCriteriaOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteriaOptions", required: true }] }], optionsInScrollableView: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsInScrollableView", required: true }] }], disableSelectionByColonAndSemicolon: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSelectionByColonAndSemicolon", required: true }] }], isStrictOrOnlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStrictOrOnlySelectValue", required: true }] }] } });
|
|
336
377
|
|
|
@@ -339,11 +380,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
339
380
|
* SPDX-License-Identifier: MIT
|
|
340
381
|
*/
|
|
341
382
|
class SiFilteredSearchMultiSelectComponent extends SiFilteredSearchOptionValueBase {
|
|
342
|
-
itemCountText = input.required(
|
|
343
|
-
|
|
344
|
-
|
|
383
|
+
itemCountText = input.required(/* @ts-ignore */
|
|
384
|
+
...(ngDevMode ? [{ debugName: "itemCountText" }] : /* istanbul ignore next */ []));
|
|
385
|
+
valueInput = viewChild('valueInput', /* @ts-ignore */
|
|
386
|
+
...(ngDevMode ? [{ debugName: "valueInput" }] : /* istanbul ignore next */ []));
|
|
387
|
+
optionValue = signal([], /* @ts-ignore */
|
|
388
|
+
...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
|
|
345
389
|
selectionChange = new BehaviorSubject([]);
|
|
346
|
-
hasMultiSelections = computed(() => Array.isArray(this.criterionValue().value) && this.criterionValue().value.length > 1,
|
|
390
|
+
hasMultiSelections = computed(() => Array.isArray(this.criterionValue().value) && this.criterionValue().value.length > 1, /* @ts-ignore */
|
|
391
|
+
...(ngDevMode ? [{ debugName: "hasMultiSelections" }] : /* istanbul ignore next */ []));
|
|
347
392
|
ngOnChanges(changes) {
|
|
348
393
|
if (changes.criterionValue &&
|
|
349
394
|
this.criterionValue().value?.length !== this.optionValue().length) {
|
|
@@ -393,16 +438,16 @@ class SiFilteredSearchMultiSelectComponent extends SiFilteredSearchOptionValueBa
|
|
|
393
438
|
hasOptionValue() {
|
|
394
439
|
return !!this.optionValue().length;
|
|
395
440
|
}
|
|
396
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
397
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
441
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
442
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiFilteredSearchMultiSelectComponent, isStandalone: true, selector: "si-filtered-search-multi-select", inputs: { itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
398
443
|
{ provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchMultiSelectComponent }
|
|
399
|
-
], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let value = criterionValue().value;\n@if (!active()) {\n <div\n class=\"criterion-value-text focus-inside px-4\"\n [tabindex]=\"disabled() ? -1 : 0\"\n (keydown.enter)=\"editValue.emit()\"\n (click)=\"editValue.emit()\"\n >\n @if (!!value && hasMultiSelections()) {\n {{ itemCountText() | translate: { itemCount: value.length } }}\n } @else if (optionValue()[0]) {\n {{ optionValue()[0].label ?? optionValue()[0].value | translate }}\n } @else {\n {{ value }}\n }\n </div>\n} @else {\n <input\n #valueInput\n typeaheadOptionField=\"translatedLabel\"\n class=\"px-4 py-0 border-0 focus-inside\"\n typeaheadScrollable\n typeaheadMultiSelect\n [type]=\"inputType()\"\n [step]=\"step()\"\n [siTypeahead]=\"options() ?? []\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n [readOnly]=\"onlySelectValue()\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n (keydown.backspace)=\"valueBackspace()\"\n (keydown.enter)=\"valueEnter()\"\n (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n (typeaheadOnInput)=\"inputChange.next($event)\"\n />\n}\n", styles: ["input{background:transparent}.criterion-value-text{block-size:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }]
|
|
444
|
+
], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let value = criterionValue().value;\n@if (!active()) {\n <div\n class=\"criterion-value-text focus-inside px-4\"\n [tabindex]=\"disabled() ? -1 : 0\"\n (keydown.enter)=\"editValue.emit()\"\n (click)=\"editValue.emit()\"\n >\n @if (!!value && hasMultiSelections()) {\n {{ itemCountText() | translate: { itemCount: value.length } }}\n } @else if (optionValue()[0]) {\n {{ optionValue()[0].label ?? optionValue()[0].value | translate }}\n } @else {\n {{ value }}\n }\n </div>\n} @else {\n <input\n #valueInput\n typeaheadOptionField=\"translatedLabel\"\n class=\"px-4 py-0 border-0 focus-inside\"\n typeaheadScrollable\n typeaheadMultiSelect\n [type]=\"inputType()\"\n [step]=\"step()\"\n [siTypeahead]=\"options() ?? []\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n [readOnly]=\"onlySelectValue()\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n (keydown.backspace)=\"valueBackspace()\"\n (keydown.enter)=\"valueEnter()\"\n (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n (typeaheadOnInput)=\"inputChange.next($event)\"\n />\n}\n", styles: ["input{background:transparent}.criterion-value-text{block-size:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
400
445
|
}
|
|
401
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
446
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchMultiSelectComponent, decorators: [{
|
|
402
447
|
type: Component,
|
|
403
448
|
args: [{ selector: 'si-filtered-search-multi-select', imports: [SiTranslatePipe, SiTypeaheadDirective], providers: [
|
|
404
449
|
{ provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchMultiSelectComponent }
|
|
405
|
-
],
|
|
450
|
+
], template: "@let value = criterionValue().value;\n@if (!active()) {\n <div\n class=\"criterion-value-text focus-inside px-4\"\n [tabindex]=\"disabled() ? -1 : 0\"\n (keydown.enter)=\"editValue.emit()\"\n (click)=\"editValue.emit()\"\n >\n @if (!!value && hasMultiSelections()) {\n {{ itemCountText() | translate: { itemCount: value.length } }}\n } @else if (optionValue()[0]) {\n {{ optionValue()[0].label ?? optionValue()[0].value | translate }}\n } @else {\n {{ value }}\n }\n </div>\n} @else {\n <input\n #valueInput\n typeaheadOptionField=\"translatedLabel\"\n class=\"px-4 py-0 border-0 focus-inside\"\n typeaheadScrollable\n typeaheadMultiSelect\n [type]=\"inputType()\"\n [step]=\"step()\"\n [siTypeahead]=\"options() ?? []\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n [readOnly]=\"onlySelectValue()\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n (keydown.backspace)=\"valueBackspace()\"\n (keydown.enter)=\"valueEnter()\"\n (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n (typeaheadOnInput)=\"inputChange.next($event)\"\n />\n}\n", styles: ["input{background:transparent}.criterion-value-text{block-size:100%;display:flex;align-items:center}\n"] }]
|
|
406
451
|
}], propDecorators: { itemCountText: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCountText", required: true }] }], valueInput: [{ type: i0.ViewChild, args: ['valueInput', { isSignal: true }] }] } });
|
|
407
452
|
|
|
408
453
|
/**
|
|
@@ -410,10 +455,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
410
455
|
* SPDX-License-Identifier: MIT
|
|
411
456
|
*/
|
|
412
457
|
class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase {
|
|
413
|
-
valueInput = viewChild('valueInput',
|
|
414
|
-
|
|
458
|
+
valueInput = viewChild('valueInput', /* @ts-ignore */
|
|
459
|
+
...(ngDevMode ? [{ debugName: "valueInput" }] : /* istanbul ignore next */ []));
|
|
460
|
+
optionValue = signal(undefined, /* @ts-ignore */
|
|
461
|
+
...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
|
|
415
462
|
// This must be a separate signal as it should only emit when the actual empty state changes.
|
|
416
|
-
inputEmpty = computed(() => !this.criterionValue().value,
|
|
463
|
+
inputEmpty = computed(() => !this.criterionValue().value, /* @ts-ignore */
|
|
464
|
+
...(ngDevMode ? [{ debugName: "inputEmpty" }] : /* istanbul ignore next */ []));
|
|
417
465
|
// This MUST only be updated if the active state changes.
|
|
418
466
|
// Otherwise, user values might be overridden.
|
|
419
467
|
// It is only used to pass the initial input value if the user starts editing the input.
|
|
@@ -433,7 +481,8 @@ class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase
|
|
|
433
481
|
}
|
|
434
482
|
}
|
|
435
483
|
return '';
|
|
436
|
-
},
|
|
484
|
+
}, /* @ts-ignore */
|
|
485
|
+
...(ngDevMode ? [{ debugName: "valueLabel" }] : /* istanbul ignore next */ []));
|
|
437
486
|
ngOnChanges(changes) {
|
|
438
487
|
if (changes.criterionValue && this.criterionValue().value !== this.optionValue()?.value) {
|
|
439
488
|
this.optionValue.set(undefined);
|
|
@@ -491,16 +540,16 @@ class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase
|
|
|
491
540
|
hasOptionValue() {
|
|
492
541
|
return !!this.optionValue();
|
|
493
542
|
}
|
|
494
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
495
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
543
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchTypeaheadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
544
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiFilteredSearchTypeaheadComponent, isStandalone: true, selector: "si-filtered-search-typeahead", providers: [
|
|
496
545
|
{ provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchTypeaheadComponent }
|
|
497
|
-
], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let value = criterionValue().value;\n@if (!active()) {\n <div\n class=\"criterion-value-text focus-inside px-4\"\n [tabindex]=\"disabled() ? -1 : 0\"\n (keydown.enter)=\"editValue.emit()\"\n (click)=\"editValue.emit()\"\n >\n @let optionValue = this.optionValue();\n @if (optionValue) {\n {{ optionValue.label ?? optionValue.value | translate }}\n } @else {\n {{ value }}\n }\n </div>\n} @else {\n <input\n #valueInput\n typeaheadOptionField=\"translatedLabel\"\n class=\"px-4 py-0 border-0 focus-inside\"\n typeaheadScrollable\n [type]=\"inputType()\"\n [step]=\"step()\"\n [value]=\"valueLabel()\"\n [siTypeahead]=\"options() ?? []\"\n [typeaheadProcess]=\"!onlySelectValue()\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n [typeaheadAutoSelectIndex]=\"value?.length ? 0 : -1\"\n [readOnly]=\"onlySelectValue() || definition().onlySelectValue\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n (keydown)=\"valueFilterKeys($event)\"\n (keydown.backspace)=\"valueBackspace()\"\n (keydown.enter)=\"valueEnter()\"\n (typeaheadOnInput)=\"valueChange($event)\"\n (typeaheadOnFullMatch)=\"valueTypeaheadFullMatch($event)\"\n (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n />\n}\n", styles: ["input{background:transparent;-moz-appearance:textfield}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.criterion-value-text{block-size:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }]
|
|
546
|
+
], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let value = criterionValue().value;\n@if (!active()) {\n <div\n class=\"criterion-value-text focus-inside px-4\"\n [tabindex]=\"disabled() ? -1 : 0\"\n (keydown.enter)=\"editValue.emit()\"\n (click)=\"editValue.emit()\"\n >\n @let optionValue = this.optionValue();\n @if (optionValue) {\n {{ optionValue.label ?? optionValue.value | translate }}\n } @else {\n {{ value }}\n }\n </div>\n} @else {\n <input\n #valueInput\n typeaheadOptionField=\"translatedLabel\"\n class=\"px-4 py-0 border-0 focus-inside\"\n typeaheadScrollable\n [type]=\"inputType()\"\n [step]=\"step()\"\n [value]=\"valueLabel()\"\n [siTypeahead]=\"options() ?? []\"\n [typeaheadProcess]=\"!onlySelectValue()\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n [typeaheadAutoSelectIndex]=\"value?.length ? 0 : -1\"\n [readOnly]=\"onlySelectValue() || definition().onlySelectValue\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n (keydown)=\"valueFilterKeys($event)\"\n (keydown.backspace)=\"valueBackspace()\"\n (keydown.enter)=\"valueEnter()\"\n (typeaheadOnInput)=\"valueChange($event)\"\n (typeaheadOnFullMatch)=\"valueTypeaheadFullMatch($event)\"\n (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n />\n}\n", styles: ["input{background:transparent;-moz-appearance:textfield}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.criterion-value-text{block-size:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
498
547
|
}
|
|
499
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
548
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchTypeaheadComponent, decorators: [{
|
|
500
549
|
type: Component,
|
|
501
550
|
args: [{ selector: 'si-filtered-search-typeahead', imports: [SiTypeaheadDirective, SiTranslatePipe], providers: [
|
|
502
551
|
{ provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchTypeaheadComponent }
|
|
503
|
-
],
|
|
552
|
+
], template: "@let value = criterionValue().value;\n@if (!active()) {\n <div\n class=\"criterion-value-text focus-inside px-4\"\n [tabindex]=\"disabled() ? -1 : 0\"\n (keydown.enter)=\"editValue.emit()\"\n (click)=\"editValue.emit()\"\n >\n @let optionValue = this.optionValue();\n @if (optionValue) {\n {{ optionValue.label ?? optionValue.value | translate }}\n } @else {\n {{ value }}\n }\n </div>\n} @else {\n <input\n #valueInput\n typeaheadOptionField=\"translatedLabel\"\n class=\"px-4 py-0 border-0 focus-inside\"\n typeaheadScrollable\n [type]=\"inputType()\"\n [step]=\"step()\"\n [value]=\"valueLabel()\"\n [siTypeahead]=\"options() ?? []\"\n [typeaheadProcess]=\"!onlySelectValue()\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n [typeaheadAutoSelectIndex]=\"value?.length ? 0 : -1\"\n [readOnly]=\"onlySelectValue() || definition().onlySelectValue\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n (keydown)=\"valueFilterKeys($event)\"\n (keydown.backspace)=\"valueBackspace()\"\n (keydown.enter)=\"valueEnter()\"\n (typeaheadOnInput)=\"valueChange($event)\"\n (typeaheadOnFullMatch)=\"valueTypeaheadFullMatch($event)\"\n (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n />\n}\n", styles: ["input{background:transparent;-moz-appearance:textfield}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.criterion-value-text{block-size:100%;display:flex;align-items:center}\n"] }]
|
|
504
553
|
}], propDecorators: { valueInput: [{ type: i0.ViewChild, args: ['valueInput', { isSignal: true }] }] } });
|
|
505
554
|
|
|
506
555
|
/**
|
|
@@ -509,28 +558,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
509
558
|
*/
|
|
510
559
|
class SiFilteredSearchValueComponent {
|
|
511
560
|
injector = inject(Injector);
|
|
512
|
-
value = model.required(
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
561
|
+
value = model.required(/* @ts-ignore */
|
|
562
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
563
|
+
definition = input.required(/* @ts-ignore */
|
|
564
|
+
...(ngDevMode ? [{ debugName: "definition" }] : /* istanbul ignore next */ []));
|
|
565
|
+
disabled = input.required(/* @ts-ignore */
|
|
566
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
567
|
+
onlySelectValue = input.required(/* @ts-ignore */
|
|
568
|
+
...(ngDevMode ? [{ debugName: "onlySelectValue" }] : /* istanbul ignore next */ []));
|
|
569
|
+
maxCriteriaOptions = input.required(/* @ts-ignore */
|
|
570
|
+
...(ngDevMode ? [{ debugName: "maxCriteriaOptions" }] : /* istanbul ignore next */ []));
|
|
571
|
+
optionsInScrollableView = input.required(/* @ts-ignore */
|
|
572
|
+
...(ngDevMode ? [{ debugName: "optionsInScrollableView" }] : /* istanbul ignore next */ []));
|
|
573
|
+
clearButtonLabel = input.required(/* @ts-ignore */
|
|
574
|
+
...(ngDevMode ? [{ debugName: "clearButtonLabel" }] : /* istanbul ignore next */ []));
|
|
575
|
+
lazyValueProvider = input(/* @ts-ignore */
|
|
576
|
+
...(ngDevMode ? [undefined, { debugName: "lazyValueProvider" }] : /* istanbul ignore next */ []));
|
|
577
|
+
searchDebounceTime = input.required(/* @ts-ignore */
|
|
578
|
+
...(ngDevMode ? [{ debugName: "searchDebounceTime" }] : /* istanbul ignore next */ []));
|
|
579
|
+
itemCountText = input.required(/* @ts-ignore */
|
|
580
|
+
...(ngDevMode ? [{ debugName: "itemCountText" }] : /* istanbul ignore next */ []));
|
|
581
|
+
disableSelectionByColonAndSemicolon = input.required(/* @ts-ignore */
|
|
582
|
+
...(ngDevMode ? [{ debugName: "disableSelectionByColonAndSemicolon" }] : /* istanbul ignore next */ []));
|
|
583
|
+
searchLabel = input.required(/* @ts-ignore */
|
|
584
|
+
...(ngDevMode ? [{ debugName: "searchLabel" }] : /* istanbul ignore next */ []));
|
|
585
|
+
invalidCriterion = input.required(/* @ts-ignore */
|
|
586
|
+
...(ngDevMode ? [{ debugName: "invalidCriterion" }] : /* istanbul ignore next */ []));
|
|
587
|
+
isStrictOrOnlySelectValue = input.required(/* @ts-ignore */
|
|
588
|
+
...(ngDevMode ? [{ debugName: "isStrictOrOnlySelectValue" }] : /* istanbul ignore next */ []));
|
|
589
|
+
editOnCreation = input.required(/* @ts-ignore */
|
|
590
|
+
...(ngDevMode ? [{ debugName: "editOnCreation" }] : /* istanbul ignore next */ []));
|
|
527
591
|
deleteCriterion = output();
|
|
528
592
|
submitCriterion = output();
|
|
529
|
-
active = signal(false,
|
|
593
|
+
active = signal(false, /* @ts-ignore */
|
|
594
|
+
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
530
595
|
icons = addIcons({ elementCancel });
|
|
531
596
|
hasPendingFocus = false;
|
|
532
|
-
operatorInput = viewChild('operatorInput',
|
|
533
|
-
|
|
597
|
+
operatorInput = viewChild('operatorInput', /* @ts-ignore */
|
|
598
|
+
...(ngDevMode ? [{ debugName: "operatorInput" }] : /* istanbul ignore next */ []));
|
|
599
|
+
valueInput = viewChild(SiFilteredSearchValueBase, /* @ts-ignore */
|
|
600
|
+
...(ngDevMode ? [{ debugName: "valueInput" }] : /* istanbul ignore next */ []));
|
|
534
601
|
type = computed(() => {
|
|
535
602
|
// Check if this is a free text criterion first
|
|
536
603
|
const definition = this.definition();
|
|
@@ -543,7 +610,8 @@ class SiFilteredSearchValueComponent {
|
|
|
543
610
|
}
|
|
544
611
|
// Handle multi-select vs single-select for other validation types.
|
|
545
612
|
return definition.multiSelect ? 'multi-select' : 'typeahead';
|
|
546
|
-
},
|
|
613
|
+
}, /* @ts-ignore */
|
|
614
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
547
615
|
selectedOperatorIndex = computed(() => {
|
|
548
616
|
const operator = this.value().operator;
|
|
549
617
|
const operators = this.definition().operators;
|
|
@@ -551,14 +619,16 @@ class SiFilteredSearchValueComponent {
|
|
|
551
619
|
return -1;
|
|
552
620
|
}
|
|
553
621
|
return operators.findIndex(op => op.includes(operator));
|
|
554
|
-
},
|
|
622
|
+
}, /* @ts-ignore */
|
|
623
|
+
...(ngDevMode ? [{ debugName: "selectedOperatorIndex" }] : /* istanbul ignore next */ []));
|
|
555
624
|
longestOperatorLength = computed(() => {
|
|
556
625
|
const operators = this.definition().operators;
|
|
557
626
|
if (!operators) {
|
|
558
627
|
return 0;
|
|
559
628
|
}
|
|
560
629
|
return Math.max(...operators.map(a => a.length));
|
|
561
|
-
},
|
|
630
|
+
}, /* @ts-ignore */
|
|
631
|
+
...(ngDevMode ? [{ debugName: "longestOperatorLength" }] : /* istanbul ignore next */ []));
|
|
562
632
|
ngOnInit() {
|
|
563
633
|
if (this.editOnCreation() && this.type() !== 'free-text') {
|
|
564
634
|
this.edit();
|
|
@@ -638,10 +708,10 @@ class SiFilteredSearchValueComponent {
|
|
|
638
708
|
this.deleteCriterion.emit({ triggerSearch: true });
|
|
639
709
|
}
|
|
640
710
|
}
|
|
641
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
642
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFilteredSearchValueComponent, isStandalone: true, selector: "si-filtered-search-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: true, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: true, transformFunction: null }, clearButtonLabel: { classPropertyName: "clearButtonLabel", publicName: "clearButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: true, transformFunction: null }, itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: true, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null }, invalidCriterion: { classPropertyName: "invalidCriterion", publicName: "invalidCriterion", isSignal: true, isRequired: true, transformFunction: null }, isStrictOrOnlySelectValue: { classPropertyName: "isStrictOrOnlySelectValue", publicName: "isStrictOrOnlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, editOnCreation: { classPropertyName: "editOnCreation", publicName: "editOnCreation", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange", deleteCriterion: "deleteCriterion", submitCriterion: "submitCriterion" }, viewQueries: [{ propertyName: "operatorInput", first: true, predicate: ["operatorInput"], descendants: true, isSignal: true }, { propertyName: "valueInput", first: true, predicate: SiFilteredSearchValueBase, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n cdkMonitorSubtreeFocus\n class=\"criteria pill-group\"\n [class.disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled()\"\n [class.invalid-criterion]=\"invalidCriterion()\"\n (cdkFocusChange)=\"focusChange($event)\"\n>\n @if (type() !== 'free-text') {\n <div class=\"pill pill-interactive criterion-label si-h5\" (click)=\"edit()\">\n {{ definition().label | translate }}\n </div>\n }\n @if (definition().operators?.length) {\n <div class=\"pill pill-interactive px-0 criterion-operator-section\">\n <!-- criterion operator input -->\n @if (active()) {\n <input\n #operatorInput\n type=\"text\"\n class=\"focus-inside operator-input py-0 border-0\"\n [siTypeahead]=\"definition().operators!\"\n [typeaheadProcess]=\"false\"\n [typeaheadAutoSelectIndex]=\"selectedOperatorIndex()\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"0\"\n [readOnly]=\"false\"\n [typeaheadScrollable]=\"true\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [attr.size]=\"longestOperatorLength()\"\n [ngModel]=\"value().operator\"\n (ngModelChange)=\"operatorUpdate($event)\"\n (keydown.backspace)=\"operatorBackspace()\"\n (keydown.enter)=\"operatorEnter()\"\n (typeaheadOnSelect)=\"operatorEnter()\"\n (blur)=\"operatorBlur()\"\n />\n } @else {\n <!-- criterion operator field -->\n <div\n class=\"criterion-operator-text px-2 focus-inside\"\n [tabindex]=\"!disabled() ? 0 : -1\"\n (keydown.enter)=\"edit('operator')\"\n (click)=\"edit('operator')\"\n >\n {{ value().operator }}\n </div>\n }\n </div>\n }\n @switch (type()) {\n @case ('free-text') {\n <si-filtered-search-free-text\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n (activeChange)=\"freeTextActiveChange($event)\"\n />\n }\n @case ('date') {\n <si-filtered-search-date-value\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('multi-select') {\n <si-filtered-search-multi-select\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [itemCountText]=\"itemCountText()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('typeahead') {\n <si-filtered-search-typeahead\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n }\n <div class=\"pill px-0 ms-n1\">\n <button\n type=\"button\"\n class=\"btn btn-circle btn-sm btn-tertiary-ghost focus-inside\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n [disabled]=\"disabled()\"\n (click)=\"clear()\"\n (mousedown)=\"$event.preventDefault()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n</div>\n", styles: [".criteria{cursor:pointer;white-space:nowrap}.criteria.invalid-criterion{border-radius:.75rem;box-shadow:0 0 0 1px var(--element-status-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--element-status-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{padding-inline:4px;inline-size:calc(1ch + 8px)}input{background:transparent}\n"], dependencies: [{ kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SiFilteredSearchDateValueComponent, selector: "si-filtered-search-date-value" }, { kind: "component", type: SiFilteredSearchFreeTextComponent, selector: "si-filtered-search-free-text" }, { kind: "component", type: SiFilteredSearchTypeaheadComponent, selector: "si-filtered-search-typeahead" }, { kind: "component", type: SiFilteredSearchMultiSelectComponent, selector: "si-filtered-search-multi-select", inputs: ["itemCountText"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
711
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
712
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiFilteredSearchValueComponent, isStandalone: true, selector: "si-filtered-search-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: true, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: true, transformFunction: null }, clearButtonLabel: { classPropertyName: "clearButtonLabel", publicName: "clearButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: true, transformFunction: null }, itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: true, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null }, invalidCriterion: { classPropertyName: "invalidCriterion", publicName: "invalidCriterion", isSignal: true, isRequired: true, transformFunction: null }, isStrictOrOnlySelectValue: { classPropertyName: "isStrictOrOnlySelectValue", publicName: "isStrictOrOnlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, editOnCreation: { classPropertyName: "editOnCreation", publicName: "editOnCreation", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange", deleteCriterion: "deleteCriterion", submitCriterion: "submitCriterion" }, viewQueries: [{ propertyName: "operatorInput", first: true, predicate: ["operatorInput"], descendants: true, isSignal: true }, { propertyName: "valueInput", first: true, predicate: SiFilteredSearchValueBase, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n cdkMonitorSubtreeFocus\n class=\"criteria pill-group\"\n [class.disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled()\"\n [class.invalid-criterion]=\"invalidCriterion()\"\n (cdkFocusChange)=\"focusChange($event)\"\n>\n @if (type() !== 'free-text') {\n <div class=\"pill pill-interactive criterion-label si-h5\" (click)=\"edit()\">\n {{ definition().label | translate }}\n </div>\n }\n @if (definition().operators?.length) {\n <div class=\"pill pill-interactive px-0 criterion-operator-section\">\n <!-- criterion operator input -->\n @if (active()) {\n <input\n #operatorInput\n type=\"text\"\n class=\"focus-inside operator-input py-0 border-0\"\n [siTypeahead]=\"definition().operators!\"\n [typeaheadProcess]=\"false\"\n [typeaheadAutoSelectIndex]=\"selectedOperatorIndex()\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"0\"\n [readOnly]=\"false\"\n [typeaheadScrollable]=\"true\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [attr.size]=\"longestOperatorLength()\"\n [ngModel]=\"value().operator\"\n (ngModelChange)=\"operatorUpdate($event)\"\n (keydown.backspace)=\"operatorBackspace()\"\n (keydown.enter)=\"operatorEnter()\"\n (typeaheadOnSelect)=\"operatorEnter()\"\n (blur)=\"operatorBlur()\"\n />\n } @else {\n <!-- criterion operator field -->\n <div\n class=\"criterion-operator-text px-2 focus-inside\"\n [tabindex]=\"!disabled() ? 0 : -1\"\n (keydown.enter)=\"edit('operator')\"\n (click)=\"edit('operator')\"\n >\n {{ value().operator }}\n </div>\n }\n </div>\n }\n @switch (type()) {\n @case ('free-text') {\n <si-filtered-search-free-text\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n (activeChange)=\"freeTextActiveChange($event)\"\n />\n }\n @case ('date') {\n <si-filtered-search-date-value\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('multi-select') {\n <si-filtered-search-multi-select\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [itemCountText]=\"itemCountText()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('typeahead') {\n <si-filtered-search-typeahead\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n }\n <div class=\"pill px-0 ms-n1\">\n <button\n type=\"button\"\n class=\"btn btn-circle btn-sm btn-tertiary-ghost focus-inside\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n [disabled]=\"disabled()\"\n (click)=\"clear()\"\n (mousedown)=\"$event.preventDefault()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n</div>\n", styles: [".criteria{cursor:pointer;white-space:nowrap}.criteria.invalid-criterion{border-radius:.75rem;box-shadow:0 0 0 1px var(--element-status-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--element-status-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{padding-inline:4px;inline-size:calc(1ch + 8px)}input{background:transparent}\n"], dependencies: [{ kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SiFilteredSearchDateValueComponent, selector: "si-filtered-search-date-value" }, { kind: "component", type: SiFilteredSearchFreeTextComponent, selector: "si-filtered-search-free-text" }, { kind: "component", type: SiFilteredSearchTypeaheadComponent, selector: "si-filtered-search-typeahead" }, { kind: "component", type: SiFilteredSearchMultiSelectComponent, selector: "si-filtered-search-multi-select", inputs: ["itemCountText"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
643
713
|
}
|
|
644
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
714
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchValueComponent, decorators: [{
|
|
645
715
|
type: Component,
|
|
646
716
|
args: [{ selector: 'si-filtered-search-value', imports: [
|
|
647
717
|
CdkMonitorFocus,
|
|
@@ -653,7 +723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
653
723
|
SiFilteredSearchTypeaheadComponent,
|
|
654
724
|
SiFilteredSearchMultiSelectComponent,
|
|
655
725
|
SiIconComponent
|
|
656
|
-
],
|
|
726
|
+
], template: "<div\n cdkMonitorSubtreeFocus\n class=\"criteria pill-group\"\n [class.disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled()\"\n [class.invalid-criterion]=\"invalidCriterion()\"\n (cdkFocusChange)=\"focusChange($event)\"\n>\n @if (type() !== 'free-text') {\n <div class=\"pill pill-interactive criterion-label si-h5\" (click)=\"edit()\">\n {{ definition().label | translate }}\n </div>\n }\n @if (definition().operators?.length) {\n <div class=\"pill pill-interactive px-0 criterion-operator-section\">\n <!-- criterion operator input -->\n @if (active()) {\n <input\n #operatorInput\n type=\"text\"\n class=\"focus-inside operator-input py-0 border-0\"\n [siTypeahead]=\"definition().operators!\"\n [typeaheadProcess]=\"false\"\n [typeaheadAutoSelectIndex]=\"selectedOperatorIndex()\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"0\"\n [readOnly]=\"false\"\n [typeaheadScrollable]=\"true\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [attr.size]=\"longestOperatorLength()\"\n [ngModel]=\"value().operator\"\n (ngModelChange)=\"operatorUpdate($event)\"\n (keydown.backspace)=\"operatorBackspace()\"\n (keydown.enter)=\"operatorEnter()\"\n (typeaheadOnSelect)=\"operatorEnter()\"\n (blur)=\"operatorBlur()\"\n />\n } @else {\n <!-- criterion operator field -->\n <div\n class=\"criterion-operator-text px-2 focus-inside\"\n [tabindex]=\"!disabled() ? 0 : -1\"\n (keydown.enter)=\"edit('operator')\"\n (click)=\"edit('operator')\"\n >\n {{ value().operator }}\n </div>\n }\n </div>\n }\n @switch (type()) {\n @case ('free-text') {\n <si-filtered-search-free-text\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n (activeChange)=\"freeTextActiveChange($event)\"\n />\n }\n @case ('date') {\n <si-filtered-search-date-value\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('multi-select') {\n <si-filtered-search-multi-select\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [itemCountText]=\"itemCountText()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('typeahead') {\n <si-filtered-search-typeahead\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n }\n <div class=\"pill px-0 ms-n1\">\n <button\n type=\"button\"\n class=\"btn btn-circle btn-sm btn-tertiary-ghost focus-inside\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n [disabled]=\"disabled()\"\n (click)=\"clear()\"\n (mousedown)=\"$event.preventDefault()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n</div>\n", styles: [".criteria{cursor:pointer;white-space:nowrap}.criteria.invalid-criterion{border-radius:.75rem;box-shadow:0 0 0 1px var(--element-status-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--element-status-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{padding-inline:4px;inline-size:calc(1ch + 8px)}input{background:transparent}\n"] }]
|
|
657
727
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], definition: [{ type: i0.Input, args: [{ isSignal: true, alias: "definition", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], onlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelectValue", required: true }] }], maxCriteriaOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteriaOptions", required: true }] }], optionsInScrollableView: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsInScrollableView", required: true }] }], clearButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonLabel", required: true }] }], lazyValueProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyValueProvider", required: false }] }], searchDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceTime", required: true }] }], itemCountText: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCountText", required: true }] }], disableSelectionByColonAndSemicolon: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSelectionByColonAndSemicolon", required: true }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: true }] }], invalidCriterion: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidCriterion", required: true }] }], isStrictOrOnlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStrictOrOnlySelectValue", required: true }] }], editOnCreation: [{ type: i0.Input, args: [{ isSignal: true, alias: "editOnCreation", required: true }] }], deleteCriterion: [{ type: i0.Output, args: ["deleteCriterion"] }], submitCriterion: [{ type: i0.Output, args: ["submitCriterion"] }], operatorInput: [{ type: i0.ViewChild, args: ['operatorInput', { isSignal: true }] }], valueInput: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiFilteredSearchValueBase), { isSignal: true }] }] } });
|
|
658
728
|
|
|
659
729
|
/**
|
|
@@ -673,49 +743,52 @@ class SiFilteredSearchComponent {
|
|
|
673
743
|
*
|
|
674
744
|
* @defaultValue false
|
|
675
745
|
*/
|
|
676
|
-
doSearchOnInputChange = input(false, { ...(ngDevMode ? { debugName: "doSearchOnInputChange" } : {}), transform: booleanAttribute });
|
|
746
|
+
doSearchOnInputChange = input(false, { ...(ngDevMode ? { debugName: "doSearchOnInputChange" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
677
747
|
/**
|
|
678
748
|
* In addition to lazy loaded value, you can also lazy load the criteria itself
|
|
679
749
|
*/
|
|
680
|
-
lazyCriterionProvider = input(
|
|
750
|
+
lazyCriterionProvider = input(/* @ts-ignore */
|
|
751
|
+
...(ngDevMode ? [undefined, { debugName: "lazyCriterionProvider" }] : /* istanbul ignore next */ []));
|
|
681
752
|
/**
|
|
682
753
|
* In many cases, your application defines the criteria, but the values need
|
|
683
754
|
* to be loaded from a server. In this case you can provide a function that
|
|
684
755
|
* returns the possible criterion options as an Observable.
|
|
685
756
|
*/
|
|
686
|
-
lazyValueProvider = input(
|
|
757
|
+
lazyValueProvider = input(/* @ts-ignore */
|
|
758
|
+
...(ngDevMode ? [undefined, { debugName: "lazyValueProvider" }] : /* istanbul ignore next */ []));
|
|
687
759
|
/**
|
|
688
760
|
* Disable any interactivity.
|
|
689
761
|
*
|
|
690
762
|
* @defaultValue false
|
|
691
763
|
*/
|
|
692
|
-
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
764
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
693
765
|
/**
|
|
694
766
|
* Limit criteria to the predefined ones.
|
|
695
767
|
*
|
|
696
768
|
* @defaultValue false
|
|
697
769
|
*/
|
|
698
|
-
strictCriterion = input(false, { ...(ngDevMode ? { debugName: "strictCriterion" } : {}), transform: booleanAttribute });
|
|
770
|
+
strictCriterion = input(false, { ...(ngDevMode ? { debugName: "strictCriterion" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
699
771
|
/**
|
|
700
772
|
* Limit criterion options to the predefined ones. `[strictValue]`
|
|
701
773
|
* enforces `[strictCriterion]` to true automatically.
|
|
702
774
|
*
|
|
703
775
|
* @defaultValue false
|
|
704
776
|
*/
|
|
705
|
-
strictValue = input(false, { ...(ngDevMode ? { debugName: "strictValue" } : {}), transform: booleanAttribute });
|
|
777
|
+
strictValue = input(false, { ...(ngDevMode ? { debugName: "strictValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
706
778
|
/**
|
|
707
779
|
* Limit criterion options to the predefined ones and prevent typing. `[onlySelectValue]`
|
|
708
780
|
* enforces `[strictValue]` and `[strictCriterion]` to true automatically.
|
|
709
781
|
*
|
|
710
782
|
* @defaultValue false
|
|
711
783
|
*/
|
|
712
|
-
onlySelectValue = input(false, { ...(ngDevMode ? { debugName: "onlySelectValue" } : {}), transform: booleanAttribute });
|
|
784
|
+
onlySelectValue = input(false, { ...(ngDevMode ? { debugName: "onlySelectValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
713
785
|
/**
|
|
714
786
|
* Custom debounce time for lazy loading of criteria data.
|
|
715
787
|
*
|
|
716
788
|
* @defaultValue 500
|
|
717
789
|
*/
|
|
718
|
-
lazyLoadingDebounceTime = input(500,
|
|
790
|
+
lazyLoadingDebounceTime = input(500, /* @ts-ignore */
|
|
791
|
+
...(ngDevMode ? [{ debugName: "lazyLoadingDebounceTime" }] : /* istanbul ignore next */ []));
|
|
719
792
|
/**
|
|
720
793
|
* Custom debounce time (in mills) to delay the search emission.
|
|
721
794
|
* (Default is 0 as in most cases a users manually triggers a search.
|
|
@@ -723,19 +796,22 @@ class SiFilteredSearchComponent {
|
|
|
723
796
|
*
|
|
724
797
|
* @defaultValue 0
|
|
725
798
|
*/
|
|
726
|
-
searchDebounceTime = input(0,
|
|
799
|
+
searchDebounceTime = input(0, /* @ts-ignore */
|
|
800
|
+
...(ngDevMode ? [{ debugName: "searchDebounceTime" }] : /* istanbul ignore next */ []));
|
|
727
801
|
/**
|
|
728
802
|
* The placeholder for input field.
|
|
729
803
|
*
|
|
730
804
|
* @defaultValue ''
|
|
731
805
|
*/
|
|
732
|
-
placeholder = input('',
|
|
806
|
+
placeholder = input('', /* @ts-ignore */
|
|
807
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
733
808
|
/**
|
|
734
809
|
* Defines the number of criteria, criteria values and operators visible at once.
|
|
735
810
|
*
|
|
736
811
|
* @defaultValue 10
|
|
737
812
|
*/
|
|
738
|
-
optionsInScrollableView = input(10,
|
|
813
|
+
optionsInScrollableView = input(10, /* @ts-ignore */
|
|
814
|
+
...(ngDevMode ? [{ debugName: "optionsInScrollableView" }] : /* istanbul ignore next */ []));
|
|
739
815
|
/**
|
|
740
816
|
* The current selected search criteria and entered search text.
|
|
741
817
|
*
|
|
@@ -744,19 +820,21 @@ class SiFilteredSearchComponent {
|
|
|
744
820
|
* { criteria: [], value: '' }
|
|
745
821
|
* ```
|
|
746
822
|
*/
|
|
747
|
-
searchCriteria = model({ criteria: [], value: '' },
|
|
823
|
+
searchCriteria = model({ criteria: [], value: '' }, /* @ts-ignore */
|
|
824
|
+
...(ngDevMode ? [{ debugName: "searchCriteria" }] : /* istanbul ignore next */ []));
|
|
748
825
|
/**
|
|
749
826
|
* Predefine criteria options.
|
|
750
827
|
*
|
|
751
828
|
* @defaultValue []
|
|
752
829
|
*/
|
|
753
|
-
criteria = input([],
|
|
830
|
+
criteria = input([], /* @ts-ignore */
|
|
831
|
+
...(ngDevMode ? [{ debugName: "criteria" }] : /* istanbul ignore next */ []));
|
|
754
832
|
/**
|
|
755
833
|
* Opt-in to search for each criterion only once.
|
|
756
834
|
*
|
|
757
835
|
* @defaultValue false
|
|
758
836
|
*/
|
|
759
|
-
exclusiveCriteria = input(false, { ...(ngDevMode ? { debugName: "exclusiveCriteria" } : {}), transform: booleanAttribute });
|
|
837
|
+
exclusiveCriteria = input(false, { ...(ngDevMode ? { debugName: "exclusiveCriteria" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
760
838
|
/**
|
|
761
839
|
* Limit the number of possible criteria. The default is undefined so that any number of criteria can be used.
|
|
762
840
|
* For example, setting the value to 1 let you only select one criterion that you need to remove before being
|
|
@@ -764,22 +842,25 @@ class SiFilteredSearchComponent {
|
|
|
764
842
|
*
|
|
765
843
|
* @defaultValue undefined
|
|
766
844
|
*/
|
|
767
|
-
maxCriteria = input(undefined,
|
|
845
|
+
maxCriteria = input(undefined, /* @ts-ignore */
|
|
846
|
+
...(ngDevMode ? [{ debugName: "maxCriteria" }] : /* istanbul ignore next */ []));
|
|
768
847
|
/**
|
|
769
848
|
* Defines the maximum options within one criterion. The default is 20 and 0 means unlimited.
|
|
770
849
|
*
|
|
771
850
|
* @defaultValue 20
|
|
772
851
|
*/
|
|
773
|
-
maxCriteriaOptions = input(20,
|
|
852
|
+
maxCriteriaOptions = input(20, /* @ts-ignore */
|
|
853
|
+
...(ngDevMode ? [{ debugName: "maxCriteriaOptions" }] : /* istanbul ignore next */ []));
|
|
774
854
|
/**
|
|
775
855
|
* Search input aria label, Needed by a11y
|
|
776
856
|
*
|
|
777
857
|
* @defaultValue
|
|
778
858
|
* ```
|
|
779
|
-
* t(() => $localize`:@@SI_FILTERED_SEARCH.SEARCH:Search
|
|
859
|
+
* t(() => $localize`:@@SI_FILTERED_SEARCH.SEARCH:Search…`)
|
|
780
860
|
* ```
|
|
781
861
|
*/
|
|
782
|
-
searchLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.SEARCH:Search
|
|
862
|
+
searchLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.SEARCH:Search…`), /* @ts-ignore */
|
|
863
|
+
...(ngDevMode ? [{ debugName: "searchLabel" }] : /* istanbul ignore next */ []));
|
|
783
864
|
/**
|
|
784
865
|
* Clear button aria label. Needed for a11y
|
|
785
866
|
*
|
|
@@ -788,44 +869,49 @@ class SiFilteredSearchComponent {
|
|
|
788
869
|
* t(() => $localize`:@@SI_FILTERED_SEARCH.CLEAR:Clear`)
|
|
789
870
|
* ```
|
|
790
871
|
*/
|
|
791
|
-
clearButtonLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.CLEAR:Clear`),
|
|
872
|
+
clearButtonLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.CLEAR:Clear`), /* @ts-ignore */
|
|
873
|
+
...(ngDevMode ? [{ debugName: "clearButtonLabel" }] : /* istanbul ignore next */ []));
|
|
792
874
|
/**
|
|
793
875
|
* The accessible label of the search button.
|
|
794
876
|
*
|
|
795
877
|
* @defaultValue
|
|
796
878
|
* ```
|
|
797
|
-
* t(() => $localize`:@@SI_FILTERED_SEARCH.SUBMIT_BUTTON:
|
|
879
|
+
* t(() => $localize`:@@SI_FILTERED_SEARCH.SUBMIT_BUTTON:Apply search criteria`)
|
|
798
880
|
* ```
|
|
799
881
|
*/
|
|
800
|
-
submitButtonLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.SUBMIT_BUTTON:
|
|
882
|
+
submitButtonLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.SUBMIT_BUTTON:Apply search criteria`), /* @ts-ignore */
|
|
883
|
+
...(ngDevMode ? [{ debugName: "submitButtonLabel" }] : /* istanbul ignore next */ []));
|
|
801
884
|
/**
|
|
802
885
|
* Items count text appended to the count in case of multi-selection of values.
|
|
803
886
|
* Translation key, `{{itemCount}}` in the translation will be replaced with the actual value.
|
|
804
887
|
*
|
|
805
888
|
* @defaultValue
|
|
806
889
|
* ```
|
|
807
|
-
* t(() => $localize`:@@SI_FILTERED_SEARCH.ITEM_COUNT:{{itemCount}}
|
|
890
|
+
* t(() => $localize`:@@SI_FILTERED_SEARCH.ITEM_COUNT:{{itemCount}} selected`)
|
|
808
891
|
* ```
|
|
809
892
|
*/
|
|
810
|
-
itemCountText = input(t(() => $localize `:@@SI_FILTERED_SEARCH.ITEM_COUNT:{{itemCount}}
|
|
893
|
+
itemCountText = input(t(() => $localize `:@@SI_FILTERED_SEARCH.ITEM_COUNT:{{itemCount}} selected`), /* @ts-ignore */
|
|
894
|
+
...(ngDevMode ? [{ debugName: "itemCountText" }] : /* istanbul ignore next */ []));
|
|
811
895
|
/**
|
|
812
896
|
* Color variant to determine component background
|
|
813
897
|
*
|
|
814
898
|
* @defaultValue 'base-1'
|
|
815
899
|
*/
|
|
816
|
-
colorVariant = input('base-1',
|
|
900
|
+
colorVariant = input('base-1', /* @ts-ignore */
|
|
901
|
+
...(ngDevMode ? [{ debugName: "colorVariant" }] : /* istanbul ignore next */ []));
|
|
817
902
|
/**
|
|
818
903
|
* Disables the free text search to only use the criterion for filtering.
|
|
819
904
|
*
|
|
820
905
|
* @defaultValue false
|
|
821
906
|
*/
|
|
822
|
-
disableFreeTextSearch = input(false, { ...(ngDevMode ? { debugName: "disableFreeTextSearch" } : {}), transform: booleanAttribute });
|
|
907
|
+
disableFreeTextSearch = input(false, { ...(ngDevMode ? { debugName: "disableFreeTextSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
823
908
|
/**
|
|
824
909
|
* Limit on the number of criteria/criteria value to be displayed by the typeahead
|
|
825
910
|
*
|
|
826
911
|
* @defaultValue 20
|
|
827
912
|
*/
|
|
828
|
-
typeaheadOptionsLimit = input(20,
|
|
913
|
+
typeaheadOptionsLimit = input(20, /* @ts-ignore */
|
|
914
|
+
...(ngDevMode ? [{ debugName: "typeaheadOptionsLimit" }] : /* istanbul ignore next */ []));
|
|
829
915
|
/**
|
|
830
916
|
* By default, the Filtered Search will treat `:` as a special character
|
|
831
917
|
* to submit the current input in the freetext and immediately create a criterion.
|
|
@@ -833,7 +919,7 @@ class SiFilteredSearchComponent {
|
|
|
833
919
|
*
|
|
834
920
|
* @defaultValue false
|
|
835
921
|
*/
|
|
836
|
-
disableSelectionByColonAndSemicolon = input(false, { ...(ngDevMode ? { debugName: "disableSelectionByColonAndSemicolon" } : {}), transform: booleanAttribute });
|
|
922
|
+
disableSelectionByColonAndSemicolon = input(false, { ...(ngDevMode ? { debugName: "disableSelectionByColonAndSemicolon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
837
923
|
/**
|
|
838
924
|
* Criterion definition for free-text pills.
|
|
839
925
|
* When set, free-text values will be added as a pill with this criterion.
|
|
@@ -845,7 +931,8 @@ class SiFilteredSearchComponent {
|
|
|
845
931
|
*
|
|
846
932
|
* @experimental
|
|
847
933
|
*/
|
|
848
|
-
freeTextCriterion = input(
|
|
934
|
+
freeTextCriterion = input(/* @ts-ignore */
|
|
935
|
+
...(ngDevMode ? [undefined, { debugName: "freeTextCriterion" }] : /* istanbul ignore next */ []));
|
|
849
936
|
/**
|
|
850
937
|
* The value to be shown for creating free-text pills.
|
|
851
938
|
* Use the `{{query}}` placeholder to show the user input in the label.
|
|
@@ -858,7 +945,8 @@ class SiFilteredSearchComponent {
|
|
|
858
945
|
*
|
|
859
946
|
* @experimental
|
|
860
947
|
*/
|
|
861
|
-
searchForFreeTextLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.SEARCH_FOR_FREE_TEXT:Search for "{{query}}"`),
|
|
948
|
+
searchForFreeTextLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.SEARCH_FOR_FREE_TEXT:Search for "{{query}}"`), /* @ts-ignore */
|
|
949
|
+
...(ngDevMode ? [{ debugName: "searchForFreeTextLabel" }] : /* istanbul ignore next */ []));
|
|
862
950
|
/**
|
|
863
951
|
* The interceptor is called when the list of criteria is shown as soon as the user starts typing in the input field.
|
|
864
952
|
* The interceptor's {@link DisplayedCriteriaEventArgs.allow} method can be used to filter the list of displayed criteria.
|
|
@@ -879,13 +967,17 @@ class SiFilteredSearchComponent {
|
|
|
879
967
|
* ```
|
|
880
968
|
*/
|
|
881
969
|
interceptDisplayedCriteria = output();
|
|
882
|
-
freeTextInput = viewChild.required(SiFilteredSearchInputComponent
|
|
883
|
-
|
|
884
|
-
|
|
970
|
+
freeTextInput = viewChild.required(SiFilteredSearchInputComponent, /* @ts-ignore */
|
|
971
|
+
...(ngDevMode ? [{ debugName: "freeTextInput" }] : /* istanbul ignore next */ []));
|
|
972
|
+
scrollContainer = viewChild.required('scrollContainer', { ...(ngDevMode ? { debugName: "scrollContainer" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
973
|
+
valueComponents = viewChildren(SiFilteredSearchValueComponent, /* @ts-ignore */
|
|
974
|
+
...(ngDevMode ? [{ debugName: "valueComponents" }] : /* istanbul ignore next */ []));
|
|
885
975
|
dataSource;
|
|
886
976
|
autoEditCriteria = false;
|
|
887
|
-
values = signal([],
|
|
888
|
-
|
|
977
|
+
values = signal([], /* @ts-ignore */
|
|
978
|
+
...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
|
|
979
|
+
searchValue = signal('', /* @ts-ignore */
|
|
980
|
+
...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
|
|
889
981
|
/** Internal criteria model */
|
|
890
982
|
internalCriterionDefinitions = [];
|
|
891
983
|
icons = addIcons({ elementCancel, elementSearch });
|
|
@@ -895,17 +987,21 @@ class SiFilteredSearchComponent {
|
|
|
895
987
|
translateService = injectSiTranslateService();
|
|
896
988
|
locale = inject(LOCALE_ID).toString();
|
|
897
989
|
freeTextFocused = new Subject();
|
|
898
|
-
allowFreeTextCache = signal(true,
|
|
990
|
+
allowFreeTextCache = signal(true, /* @ts-ignore */
|
|
991
|
+
...(ngDevMode ? [{ debugName: "allowFreeTextCache" }] : /* istanbul ignore next */ []));
|
|
899
992
|
// Angular also calls ngOnChanges if we emitted a change and then two-way-databinding writes back our own change.
|
|
900
993
|
// We use this to ensure that we do not write our own change back to the input.
|
|
901
994
|
lastEmittedSearchCriteria;
|
|
902
995
|
isStrictOrOnlySelectValue = computed(() => {
|
|
903
996
|
return this.strictValue() || this.onlySelectValue();
|
|
904
|
-
},
|
|
997
|
+
}, /* @ts-ignore */
|
|
998
|
+
...(ngDevMode ? [{ debugName: "isStrictOrOnlySelectValue" }] : /* istanbul ignore next */ []));
|
|
905
999
|
strictCriterionOrValue = computed(() => {
|
|
906
1000
|
return this.strictCriterion() || this.isStrictOrOnlySelectValue();
|
|
907
|
-
},
|
|
908
|
-
|
|
1001
|
+
}, /* @ts-ignore */
|
|
1002
|
+
...(ngDevMode ? [{ debugName: "strictCriterionOrValue" }] : /* istanbul ignore next */ []));
|
|
1003
|
+
lazyLoadedCriteria = signal(undefined, /* @ts-ignore */
|
|
1004
|
+
...(ngDevMode ? [{ debugName: "lazyLoadedCriteria" }] : /* istanbul ignore next */ []));
|
|
909
1005
|
loadedCriteria = computed(() => {
|
|
910
1006
|
const lazyLoadedCriteria = this.lazyLoadedCriteria();
|
|
911
1007
|
if (lazyLoadedCriteria) {
|
|
@@ -914,7 +1010,8 @@ class SiFilteredSearchComponent {
|
|
|
914
1010
|
else {
|
|
915
1011
|
return this.criteria() ?? [];
|
|
916
1012
|
}
|
|
917
|
-
},
|
|
1013
|
+
}, /* @ts-ignore */
|
|
1014
|
+
...(ngDevMode ? [{ debugName: "loadedCriteria" }] : /* istanbul ignore next */ []));
|
|
918
1015
|
internalFreeTextCriterion = computed(() => {
|
|
919
1016
|
const freeTextDef = this.freeTextCriterion();
|
|
920
1017
|
if (!freeTextDef) {
|
|
@@ -926,7 +1023,8 @@ class SiFilteredSearchComponent {
|
|
|
926
1023
|
translatedLabel: freeTextDef.label ?? freeTextDef.name,
|
|
927
1024
|
type: 'free-text'
|
|
928
1025
|
};
|
|
929
|
-
},
|
|
1026
|
+
}, /* @ts-ignore */
|
|
1027
|
+
...(ngDevMode ? [{ debugName: "internalFreeTextCriterion" }] : /* istanbul ignore next */ []));
|
|
930
1028
|
constructor() {
|
|
931
1029
|
const typeaheadInputChange = merge(toObservable(this.searchValue), this.freeTextFocused.pipe(map(() => this.searchValue())));
|
|
932
1030
|
const criteriaRestrictions = toObservable(computed(() => ({
|
|
@@ -1232,17 +1330,17 @@ class SiFilteredSearchComponent {
|
|
|
1232
1330
|
]);
|
|
1233
1331
|
this.emitChangeEvent();
|
|
1234
1332
|
}
|
|
1235
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1236
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFilteredSearchComponent, isStandalone: true, selector: "si-filtered-search", inputs: { doSearchOnInputChange: { classPropertyName: "doSearchOnInputChange", publicName: "doSearchOnInputChange", isSignal: true, isRequired: false, transformFunction: null }, lazyCriterionProvider: { classPropertyName: "lazyCriterionProvider", publicName: "lazyCriterionProvider", isSignal: true, isRequired: false, transformFunction: null }, lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, strictCriterion: { classPropertyName: "strictCriterion", publicName: "strictCriterion", isSignal: true, isRequired: false, transformFunction: null }, strictValue: { classPropertyName: "strictValue", publicName: "strictValue", isSignal: true, isRequired: false, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadingDebounceTime: { classPropertyName: "lazyLoadingDebounceTime", publicName: "lazyLoadingDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: false, transformFunction: null }, searchCriteria: { classPropertyName: "searchCriteria", publicName: "searchCriteria", isSignal: true, isRequired: false, transformFunction: null }, criteria: { classPropertyName: "criteria", publicName: "criteria", isSignal: true, isRequired: false, transformFunction: null }, exclusiveCriteria: { classPropertyName: "exclusiveCriteria", publicName: "exclusiveCriteria", isSignal: true, isRequired: false, transformFunction: null }, maxCriteria: { classPropertyName: "maxCriteria", publicName: "maxCriteria", isSignal: true, isRequired: false, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, clearButtonLabel: { classPropertyName: "clearButtonLabel", publicName: "clearButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, submitButtonLabel: { classPropertyName: "submitButtonLabel", publicName: "submitButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, disableFreeTextSearch: { classPropertyName: "disableFreeTextSearch", publicName: "disableFreeTextSearch", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: false, transformFunction: null }, freeTextCriterion: { classPropertyName: "freeTextCriterion", publicName: "freeTextCriterion", isSignal: true, isRequired: false, transformFunction: null }, searchForFreeTextLabel: { classPropertyName: "searchForFreeTextLabel", publicName: "searchForFreeTextLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { doSearch: "doSearch", searchCriteria: "searchCriteriaChange", interceptDisplayedCriteria: "interceptDisplayedCriteria" }, host: { properties: { "class.disabled": "disabled()", "class.dark-background": "colorVariant() === 'base-0'" } }, viewQueries: [{ propertyName: "freeTextInput", first: true, predicate: SiFilteredSearchInputComponent, descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "valueComponents", predicate: SiFilteredSearchValueComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #scrollContainer\n class=\"search-container d-flex align-items-center overflow-auto py-2 w-100 ps-2 pe-2\"\n>\n @for (criterion of values(); track criterion) {\n <si-filtered-search-value\n [editOnCreation]=\"autoEditCriteria\"\n [definition]=\"criterion.config\"\n [value]=\"criterion.value\"\n [invalidCriterion]=\"!validateCriterionLabel(criterion.config)\"\n [disabled]=\"disabled()\"\n [clearButtonLabel]=\"clearButtonLabel()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [itemCountText]=\"itemCountText()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [searchLabel]=\"searchLabel()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n (submitCriterion)=\"focusNext($index, $event)\"\n (deleteCriterion)=\"deleteCriterion($index, $event)\"\n (valueChange)=\"valueChange($event, criterion)\"\n />\n }\n <!-- criterion input -->\n <si-filtered-search-input\n [dataSource]=\"dataSource\"\n [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [searchLabel]=\"searchLabel()\"\n [freeTextCriterion]=\"!!freeTextCriterion()\"\n [maxCriteriaReached]=\"!!maxCriteria() && values().length >= maxCriteria()!\"\n [allowFreeText]=\"allowFreeTextCache()\"\n [searchForFreeTextLabel]=\"searchForFreeTextLabel()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [(searchValue)]=\"searchValue\"\n (createCriterion)=\"onCreateCriterion($event)\"\n (createCriterionByName)=\"onCreateCriterionByName($event)\"\n (backspaceOverflow)=\"freeTextBackspace()\"\n (createFreeTextPill)=\"createFreeTextPill($event)\"\n (searchValueChange)=\"onSearchValueChange()\"\n (inputFocus)=\"freeTextFocus()\"\n (enterSubmit)=\"submit()\"\n />\n</div>\n<!-- clear all searchCriteria -->\n@if (values().length || searchValue().length) {\n <div class=\"clear-button-container\">\n <button\n type=\"button\"\n class=\"btn btn-icon btn-sm btn-tertiary-ghost mx-2\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n (click)=\"deleteAllCriteria($event)\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n}\n\n@if (!disabled()) {\n <button\n type=\"button\"\n class=\"search-button btn btn-icon btn-sm btn-secondary focus-inside\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"submitButtonLabel() | translate\"\n (click)=\"submit()\"\n >\n <si-icon [icon]=\"icons.elementSearch\" />\n </button>\n}\n", styles: [":host{--search-bar-icon-color: var(--element-text-primary);--input-background-color: var(--element-base-1);--input-background-hover-color: var(--element-base-1);--filter-search-background-color: var(--element-base-1);--filter-pill-background-color: var(--element-base-4)}:host.dark-background{--input-background-color: var(--element-base-4);--input-background-hover-color: var(--element-ui-4);--filter-search-background-color: var(--element-base-4);--filter-pill-background-color: var(--element-base-1)}:host{display:flex;align-items:center;line-height:24px;min-inline-size:0}:host.disabled{color:var(--element-text-disabled)}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:4px}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:4px;background-color:var(--filter-search-background-color)}.search-button{align-self:stretch;background-color:var(--filter-search-background-color);border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;margin-block:0;margin-inline:1px 0;aspect-ratio:auto;block-size:auto;inline-size:auto;padding-inline:4px!important}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiFilteredSearchInputComponent, selector: "si-filtered-search-input", inputs: ["dataSource", "typeaheadOptionsLimit", "optionsInScrollableView", "disabled", "placeholder", "searchLabel", "searchValue", "freeTextCriterion", "maxCriteriaReached", "allowFreeText", "searchForFreeTextLabel", "disableSelectionByColonAndSemicolon", "onlySelectValue"], outputs: ["searchValueChange", "createCriterion", "createCriterionByName", "backspaceOverflow", "createFreeTextPill", "inputFocus", "enterSubmit"] }, { kind: "component", type: SiFilteredSearchValueComponent, selector: "si-filtered-search-value", inputs: ["value", "definition", "disabled", "onlySelectValue", "maxCriteriaOptions", "optionsInScrollableView", "clearButtonLabel", "lazyValueProvider", "searchDebounceTime", "itemCountText", "disableSelectionByColonAndSemicolon", "searchLabel", "invalidCriterion", "isStrictOrOnlySelectValue", "editOnCreation"], outputs: ["valueChange", "deleteCriterion", "submitCriterion"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
1333
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1334
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiFilteredSearchComponent, isStandalone: true, selector: "si-filtered-search", inputs: { doSearchOnInputChange: { classPropertyName: "doSearchOnInputChange", publicName: "doSearchOnInputChange", isSignal: true, isRequired: false, transformFunction: null }, lazyCriterionProvider: { classPropertyName: "lazyCriterionProvider", publicName: "lazyCriterionProvider", isSignal: true, isRequired: false, transformFunction: null }, lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, strictCriterion: { classPropertyName: "strictCriterion", publicName: "strictCriterion", isSignal: true, isRequired: false, transformFunction: null }, strictValue: { classPropertyName: "strictValue", publicName: "strictValue", isSignal: true, isRequired: false, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadingDebounceTime: { classPropertyName: "lazyLoadingDebounceTime", publicName: "lazyLoadingDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: false, transformFunction: null }, searchCriteria: { classPropertyName: "searchCriteria", publicName: "searchCriteria", isSignal: true, isRequired: false, transformFunction: null }, criteria: { classPropertyName: "criteria", publicName: "criteria", isSignal: true, isRequired: false, transformFunction: null }, exclusiveCriteria: { classPropertyName: "exclusiveCriteria", publicName: "exclusiveCriteria", isSignal: true, isRequired: false, transformFunction: null }, maxCriteria: { classPropertyName: "maxCriteria", publicName: "maxCriteria", isSignal: true, isRequired: false, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, clearButtonLabel: { classPropertyName: "clearButtonLabel", publicName: "clearButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, submitButtonLabel: { classPropertyName: "submitButtonLabel", publicName: "submitButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, disableFreeTextSearch: { classPropertyName: "disableFreeTextSearch", publicName: "disableFreeTextSearch", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: false, transformFunction: null }, freeTextCriterion: { classPropertyName: "freeTextCriterion", publicName: "freeTextCriterion", isSignal: true, isRequired: false, transformFunction: null }, searchForFreeTextLabel: { classPropertyName: "searchForFreeTextLabel", publicName: "searchForFreeTextLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { doSearch: "doSearch", searchCriteria: "searchCriteriaChange", interceptDisplayedCriteria: "interceptDisplayedCriteria" }, host: { properties: { "class.disabled": "disabled()", "class.dark-background": "colorVariant() === 'base-0'" } }, viewQueries: [{ propertyName: "freeTextInput", first: true, predicate: SiFilteredSearchInputComponent, descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "valueComponents", predicate: SiFilteredSearchValueComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #scrollContainer\n class=\"search-container d-flex align-items-center overflow-auto py-2 w-100 ps-2 pe-2\"\n>\n @for (criterion of values(); track criterion) {\n <si-filtered-search-value\n [editOnCreation]=\"autoEditCriteria\"\n [definition]=\"criterion.config\"\n [value]=\"criterion.value\"\n [invalidCriterion]=\"!validateCriterionLabel(criterion.config)\"\n [disabled]=\"disabled()\"\n [clearButtonLabel]=\"clearButtonLabel()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [itemCountText]=\"itemCountText()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [searchLabel]=\"searchLabel()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n (submitCriterion)=\"focusNext($index, $event)\"\n (deleteCriterion)=\"deleteCriterion($index, $event)\"\n (valueChange)=\"valueChange($event, criterion)\"\n />\n }\n <!-- criterion input -->\n <si-filtered-search-input\n [dataSource]=\"dataSource\"\n [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [searchLabel]=\"searchLabel()\"\n [freeTextCriterion]=\"!!freeTextCriterion()\"\n [maxCriteriaReached]=\"!!maxCriteria() && values().length >= maxCriteria()!\"\n [allowFreeText]=\"allowFreeTextCache()\"\n [searchForFreeTextLabel]=\"searchForFreeTextLabel()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [(searchValue)]=\"searchValue\"\n (createCriterion)=\"onCreateCriterion($event)\"\n (createCriterionByName)=\"onCreateCriterionByName($event)\"\n (backspaceOverflow)=\"freeTextBackspace()\"\n (createFreeTextPill)=\"createFreeTextPill($event)\"\n (searchValueChange)=\"onSearchValueChange()\"\n (inputFocus)=\"freeTextFocus()\"\n (enterSubmit)=\"submit()\"\n />\n</div>\n<!-- clear all searchCriteria -->\n@if (values().length || searchValue().length) {\n <div class=\"clear-button-container\">\n <button\n type=\"button\"\n class=\"btn btn-icon btn-sm btn-tertiary-ghost mx-2\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n (click)=\"deleteAllCriteria($event)\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n}\n\n@if (!disabled()) {\n <button\n type=\"button\"\n class=\"search-button btn btn-icon btn-sm btn-secondary focus-inside\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"submitButtonLabel() | translate\"\n (click)=\"submit()\"\n >\n <si-icon [icon]=\"icons.elementSearch\" />\n </button>\n}\n", styles: [":host{--search-bar-icon-color: var(--element-text-primary);--input-background-color: var(--element-base-1);--input-background-hover-color: var(--element-base-1);--filter-search-background-color: var(--element-base-1);--filter-pill-background-color: var(--element-base-4)}:host.dark-background{--input-background-color: var(--element-base-4);--input-background-hover-color: var(--element-ui-4);--filter-search-background-color: var(--element-base-4);--filter-pill-background-color: var(--element-base-1)}:host{display:flex;align-items:center;line-height:24px;min-inline-size:0}:host.disabled{color:var(--element-text-disabled)}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:4px}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:4px;background-color:var(--filter-search-background-color)}.search-button{align-self:stretch;background-color:var(--filter-search-background-color);border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;margin-block:0;margin-inline:1px 0;aspect-ratio:auto;block-size:auto;inline-size:auto;padding-inline:4px!important}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiFilteredSearchInputComponent, selector: "si-filtered-search-input", inputs: ["dataSource", "typeaheadOptionsLimit", "optionsInScrollableView", "disabled", "placeholder", "searchLabel", "searchValue", "freeTextCriterion", "maxCriteriaReached", "allowFreeText", "searchForFreeTextLabel", "disableSelectionByColonAndSemicolon", "onlySelectValue"], outputs: ["searchValueChange", "createCriterion", "createCriterionByName", "backspaceOverflow", "createFreeTextPill", "inputFocus", "enterSubmit"] }, { kind: "component", type: SiFilteredSearchValueComponent, selector: "si-filtered-search-value", inputs: ["value", "definition", "disabled", "onlySelectValue", "maxCriteriaOptions", "optionsInScrollableView", "clearButtonLabel", "lazyValueProvider", "searchDebounceTime", "itemCountText", "disableSelectionByColonAndSemicolon", "searchLabel", "invalidCriterion", "isStrictOrOnlySelectValue", "editOnCreation"], outputs: ["valueChange", "deleteCriterion", "submitCriterion"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
1237
1335
|
}
|
|
1238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1336
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchComponent, decorators: [{
|
|
1239
1337
|
type: Component,
|
|
1240
1338
|
args: [{ selector: 'si-filtered-search', imports: [
|
|
1241
1339
|
SiIconComponent,
|
|
1242
1340
|
SiTranslatePipe,
|
|
1243
1341
|
SiFilteredSearchInputComponent,
|
|
1244
1342
|
SiFilteredSearchValueComponent
|
|
1245
|
-
], changeDetection: ChangeDetectionStrategy.
|
|
1343
|
+
], changeDetection: ChangeDetectionStrategy.Eager, host: {
|
|
1246
1344
|
'[class.disabled]': 'disabled()',
|
|
1247
1345
|
'[class.dark-background]': "colorVariant() === 'base-0'"
|
|
1248
1346
|
}, template: "<div\n #scrollContainer\n class=\"search-container d-flex align-items-center overflow-auto py-2 w-100 ps-2 pe-2\"\n>\n @for (criterion of values(); track criterion) {\n <si-filtered-search-value\n [editOnCreation]=\"autoEditCriteria\"\n [definition]=\"criterion.config\"\n [value]=\"criterion.value\"\n [invalidCriterion]=\"!validateCriterionLabel(criterion.config)\"\n [disabled]=\"disabled()\"\n [clearButtonLabel]=\"clearButtonLabel()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [itemCountText]=\"itemCountText()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [searchLabel]=\"searchLabel()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n (submitCriterion)=\"focusNext($index, $event)\"\n (deleteCriterion)=\"deleteCriterion($index, $event)\"\n (valueChange)=\"valueChange($event, criterion)\"\n />\n }\n <!-- criterion input -->\n <si-filtered-search-input\n [dataSource]=\"dataSource\"\n [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [searchLabel]=\"searchLabel()\"\n [freeTextCriterion]=\"!!freeTextCriterion()\"\n [maxCriteriaReached]=\"!!maxCriteria() && values().length >= maxCriteria()!\"\n [allowFreeText]=\"allowFreeTextCache()\"\n [searchForFreeTextLabel]=\"searchForFreeTextLabel()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [(searchValue)]=\"searchValue\"\n (createCriterion)=\"onCreateCriterion($event)\"\n (createCriterionByName)=\"onCreateCriterionByName($event)\"\n (backspaceOverflow)=\"freeTextBackspace()\"\n (createFreeTextPill)=\"createFreeTextPill($event)\"\n (searchValueChange)=\"onSearchValueChange()\"\n (inputFocus)=\"freeTextFocus()\"\n (enterSubmit)=\"submit()\"\n />\n</div>\n<!-- clear all searchCriteria -->\n@if (values().length || searchValue().length) {\n <div class=\"clear-button-container\">\n <button\n type=\"button\"\n class=\"btn btn-icon btn-sm btn-tertiary-ghost mx-2\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n (click)=\"deleteAllCriteria($event)\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n}\n\n@if (!disabled()) {\n <button\n type=\"button\"\n class=\"search-button btn btn-icon btn-sm btn-secondary focus-inside\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"submitButtonLabel() | translate\"\n (click)=\"submit()\"\n >\n <si-icon [icon]=\"icons.elementSearch\" />\n </button>\n}\n", styles: [":host{--search-bar-icon-color: var(--element-text-primary);--input-background-color: var(--element-base-1);--input-background-hover-color: var(--element-base-1);--filter-search-background-color: var(--element-base-1);--filter-pill-background-color: var(--element-base-4)}:host.dark-background{--input-background-color: var(--element-base-4);--input-background-hover-color: var(--element-ui-4);--filter-search-background-color: var(--element-base-4);--filter-pill-background-color: var(--element-base-1)}:host{display:flex;align-items:center;line-height:24px;min-inline-size:0}:host.disabled{color:var(--element-text-disabled)}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:4px}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:4px;background-color:var(--filter-search-background-color)}.search-button{align-self:stretch;background-color:var(--filter-search-background-color);border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;margin-block:0;margin-inline:1px 0;aspect-ratio:auto;block-size:auto;inline-size:auto;padding-inline:4px!important}\n"] }]
|
|
@@ -1253,11 +1351,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1253
1351
|
* SPDX-License-Identifier: MIT
|
|
1254
1352
|
*/
|
|
1255
1353
|
class SiFilteredSearchModule {
|
|
1256
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1257
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1258
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1354
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1355
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchModule, imports: [SiFilteredSearchComponent], exports: [SiFilteredSearchComponent] });
|
|
1356
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchModule, imports: [SiFilteredSearchComponent] });
|
|
1259
1357
|
}
|
|
1260
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1358
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFilteredSearchModule, decorators: [{
|
|
1261
1359
|
type: NgModule,
|
|
1262
1360
|
args: [{
|
|
1263
1361
|
imports: [SiFilteredSearchComponent],
|