@siemens/element-ng 49.13.0 → 51.0.0-rc.3
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 +56 -39
- package/fesm2022/siemens-element-ng-accordion.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-action-modal.mjs +81 -51
- 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 +142 -137
- 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 +18 -15
- 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 +55 -32
- package/fesm2022/siemens-element-ng-carousel.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-chat-messages.mjs +175 -111
- package/fesm2022/siemens-element-ng-chat-messages.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-circle-status.mjs +37 -24
- package/fesm2022/siemens-element-ng-circle-status.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-color-picker.mjs +24 -16
- package/fesm2022/siemens-element-ng-color-picker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-column-selection-dialog.mjs +52 -33
- 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 +35 -26
- 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 +327 -213
- 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 +358 -234
- package/fesm2022/siemens-element-ng-datepicker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-electron-titlebar.mjs +21 -16
- 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 +93 -81
- package/fesm2022/siemens-element-ng-file-uploader.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-filter-bar.mjs +29 -22
- package/fesm2022/siemens-element-ng-filter-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-filtered-search.mjs +243 -147
- 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 +267 -84
- 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 +220 -315
- package/fesm2022/siemens-element-ng-formly.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-header-dropdown.mjs +38 -29
- 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 +19 -15
- package/fesm2022/siemens-element-ng-ip-input.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-landing-page.mjs +118 -72
- 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 +73 -54
- package/fesm2022/siemens-element-ng-list-details.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-loading-spinner.mjs +42 -33
- 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 +46 -29
- package/fesm2022/siemens-element-ng-main-detail-container.mjs.map +1 -1
- 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 +12 -10
- package/fesm2022/siemens-element-ng-modal.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs +133 -94
- package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs +117 -81
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar.mjs +67 -41
- 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 +38 -27
- 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 +31 -22
- 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 +121 -138
- package/fesm2022/siemens-element-ng-phone-number.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-photo-upload.mjs +76 -45
- 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 +33 -26
- 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 +32 -24
- package/fesm2022/siemens-element-ng-search-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-select.mjs +212 -154
- 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 +119 -75
- package/fesm2022/siemens-element-ng-side-panel.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-skip-links.mjs +14 -13
- package/fesm2022/siemens-element-ng-skip-links.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-slider.mjs +42 -28
- package/fesm2022/siemens-element-ng-slider.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-split.mjs +268 -254
- package/fesm2022/siemens-element-ng-split.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-bar.mjs +57 -47
- 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 +22 -14
- 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 +16 -15
- package/fesm2022/siemens-element-ng-tabs-legacy.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tabs.mjs +59 -45
- package/fesm2022/siemens-element-ng-tabs.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-theme.mjs +5 -4
- package/fesm2022/siemens-element-ng-theme.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-threshold.mjs +59 -40
- 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 +52 -54
- package/fesm2022/siemens-element-ng-tooltip.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tour.mjs +28 -19
- 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 +92 -73
- package/fesm2022/siemens-element-ng-tree-view.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-typeahead.mjs +75 -67
- 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/package.json +20 -22
- 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-to-v49.js → migrate-to-v51.js} +2 -2
- package/template-i18n.json +3 -6
- package/types/siemens-element-ng-application-header.d.ts +1 -21
- package/types/siemens-element-ng-chat-messages.d.ts +6 -4
- package/types/siemens-element-ng-circle-status.d.ts +1 -1
- package/types/siemens-element-ng-date-range-filter.d.ts +1 -1
- package/types/siemens-element-ng-datepicker.d.ts +1 -12
- package/types/siemens-element-ng-file-uploader.d.ts +5 -23
- package/types/siemens-element-ng-filtered-search.d.ts +1 -1
- package/types/siemens-element-ng-form.d.ts +134 -37
- 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-navbar-vertical-next.d.ts +6 -1
- 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-resize-observer.d.ts +0 -17
- package/types/siemens-element-ng-split.d.ts +95 -63
- 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-toast-notification.d.ts +0 -1
- package/types/siemens-element-ng-translate.d.ts +1 -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,19 +59,32 @@ 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();
|
|
@@ -85,7 +98,8 @@ class SiFilteredSearchInputComponent {
|
|
|
85
98
|
}
|
|
86
99
|
typeaheadCreateOption = computed(() => this.freeTextCriterion() && !this.maxCriteriaReached() && this.allowFreeText()
|
|
87
100
|
? this.searchForFreeTextLabel()
|
|
88
|
-
: undefined,
|
|
101
|
+
: undefined, /* @ts-ignore */
|
|
102
|
+
...(ngDevMode ? [{ debugName: "typeaheadCreateOption" }] : /* istanbul ignore next */ []));
|
|
89
103
|
freeTextBackspaceHandler(event) {
|
|
90
104
|
if (!event.target.value) {
|
|
91
105
|
this.backspaceOverflow.emit();
|
|
@@ -122,12 +136,12 @@ class SiFilteredSearchInputComponent {
|
|
|
122
136
|
this.createFreeTextPill.emit(query);
|
|
123
137
|
this.searchValue.set('');
|
|
124
138
|
}
|
|
125
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
126
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
139
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
140
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", 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
141
|
}
|
|
128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchInputComponent, decorators: [{
|
|
129
143
|
type: Component,
|
|
130
|
-
args: [{ selector: 'si-filtered-search-input', imports: [FormsModule, SiTypeaheadDirective, SiTranslatePipe],
|
|
144
|
+
args: [{ selector: 'si-filtered-search-input', imports: [FormsModule, SiTypeaheadDirective, SiTranslatePipe], host: {
|
|
131
145
|
class: 'w-100'
|
|
132
146
|
}, 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
147
|
}], 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 +151,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
137
151
|
* SPDX-License-Identifier: MIT
|
|
138
152
|
*/
|
|
139
153
|
class SiFilteredSearchValueBase {
|
|
140
|
-
active = model.required(
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
154
|
+
active = model.required(/* @ts-ignore */
|
|
155
|
+
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
156
|
+
criterionValue = model.required(/* @ts-ignore */
|
|
157
|
+
...(ngDevMode ? [{ debugName: "criterionValue" }] : /* istanbul ignore next */ []));
|
|
158
|
+
definition = input.required(/* @ts-ignore */
|
|
159
|
+
...(ngDevMode ? [{ debugName: "definition" }] : /* istanbul ignore next */ []));
|
|
160
|
+
disabled = input.required(/* @ts-ignore */
|
|
161
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
162
|
+
searchLabel = input.required(/* @ts-ignore */
|
|
163
|
+
...(ngDevMode ? [{ debugName: "searchLabel" }] : /* istanbul ignore next */ []));
|
|
145
164
|
submitValue = output();
|
|
146
165
|
editValue = output();
|
|
147
166
|
backspaceOverflow = output();
|
|
@@ -161,10 +180,10 @@ class SiFilteredSearchValueBase {
|
|
|
161
180
|
this.backspaceOverflow.emit();
|
|
162
181
|
}
|
|
163
182
|
}
|
|
164
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
165
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
183
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchValueBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
184
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", 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
185
|
}
|
|
167
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchValueBase, decorators: [{
|
|
168
187
|
type: Directive,
|
|
169
188
|
args: [{
|
|
170
189
|
host: {
|
|
@@ -180,20 +199,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
180
199
|
*/
|
|
181
200
|
class SiFilteredSearchDateValueComponent extends SiFilteredSearchValueBase {
|
|
182
201
|
locale = inject(LOCALE_ID).toString();
|
|
183
|
-
valueInput = viewChild('valueInput',
|
|
184
|
-
|
|
185
|
-
|
|
202
|
+
valueInput = viewChild('valueInput', /* @ts-ignore */
|
|
203
|
+
...(ngDevMode ? [{ debugName: "valueInput" }] : /* istanbul ignore next */ []));
|
|
204
|
+
datepickerOverlay = viewChild(SiDatepickerOverlayDirective, /* @ts-ignore */
|
|
205
|
+
...(ngDevMode ? [{ debugName: "datepickerOverlay" }] : /* istanbul ignore next */ []));
|
|
206
|
+
disableTime = signal(false, /* @ts-ignore */
|
|
207
|
+
...(ngDevMode ? [{ debugName: "disableTime" }] : /* istanbul ignore next */ []));
|
|
186
208
|
shortDateFormat;
|
|
187
|
-
focusInOverlay = computed(() => !!this.datepickerOverlay()?.isShown(),
|
|
188
|
-
|
|
209
|
+
focusInOverlay = computed(() => !!this.datepickerOverlay()?.isShown(), /* @ts-ignore */
|
|
210
|
+
...(ngDevMode ? [{ debugName: "focusInOverlay" }] : /* istanbul ignore next */ []));
|
|
211
|
+
validFormat = computed(() => isValid(this.criterionValue().dateValue), /* @ts-ignore */
|
|
212
|
+
...(ngDevMode ? [{ debugName: "validFormat" }] : /* istanbul ignore next */ []));
|
|
189
213
|
// The information if the time is currently disabled is only present in the
|
|
190
214
|
// current search criterion instance and not in the generic configuration.
|
|
191
215
|
// So we need to merge the initial config with the current instance config.
|
|
192
216
|
dateConfig = computed(() => ({
|
|
193
217
|
...this.definition().datepickerConfig,
|
|
194
218
|
disabledTime: this.disableTime()
|
|
195
|
-
}),
|
|
196
|
-
|
|
219
|
+
}), /* @ts-ignore */
|
|
220
|
+
...(ngDevMode ? [{ debugName: "dateConfig" }] : /* istanbul ignore next */ []));
|
|
221
|
+
dateFormat = computed(() => getDatepickerFormat(this.locale, this.dateConfig()), /* @ts-ignore */
|
|
222
|
+
...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
|
|
197
223
|
validValue = computed(() => {
|
|
198
224
|
const dateConfig = this.dateConfig();
|
|
199
225
|
const minDate = dateConfig?.minDate ?? false;
|
|
@@ -201,7 +227,8 @@ class SiFilteredSearchDateValueComponent extends SiFilteredSearchValueBase {
|
|
|
201
227
|
const dateValue = this.criterionValue().dateValue ?? false;
|
|
202
228
|
return ((!minDate || (minDate && dateValue && dateValue >= minDate)) &&
|
|
203
229
|
(!maxDate || (maxDate && dateValue && dateValue <= maxDate)));
|
|
204
|
-
},
|
|
230
|
+
}, /* @ts-ignore */
|
|
231
|
+
...(ngDevMode ? [{ debugName: "validValue" }] : /* istanbul ignore next */ []));
|
|
205
232
|
constructor() {
|
|
206
233
|
super();
|
|
207
234
|
this.shortDateFormat = getNamedFormat(this.locale, 'shortDate');
|
|
@@ -230,16 +257,16 @@ class SiFilteredSearchDateValueComponent extends SiFilteredSearchValueBase {
|
|
|
230
257
|
}
|
|
231
258
|
this.criterionValue.update(v => ({ ...v, value, dateValue: date }));
|
|
232
259
|
}
|
|
233
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
234
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
260
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchDateValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
261
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SiFilteredSearchDateValueComponent, isStandalone: true, selector: "si-filtered-search-date-value", providers: [
|
|
235
262
|
{ 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" }]
|
|
263
|
+
], 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
264
|
}
|
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
265
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchDateValueComponent, decorators: [{
|
|
239
266
|
type: Component,
|
|
240
267
|
args: [{ selector: 'si-filtered-search-date-value', imports: [DatePipe, FormsModule, SiDatepickerDirective, SiTranslatePipe], providers: [
|
|
241
268
|
{ provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchDateValueComponent }
|
|
242
|
-
],
|
|
269
|
+
], 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
270
|
}], ctorParameters: () => [], propDecorators: { valueInput: [{ type: i0.ViewChild, args: ['valueInput', { isSignal: true }] }], datepickerOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiDatepickerOverlayDirective), { isSignal: true }] }] } });
|
|
244
271
|
|
|
245
272
|
/**
|
|
@@ -247,8 +274,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
247
274
|
* SPDX-License-Identifier: MIT
|
|
248
275
|
*/
|
|
249
276
|
class SiFilteredSearchFreeTextComponent extends SiFilteredSearchValueBase {
|
|
250
|
-
valueInput = viewChild('freeTextInput',
|
|
251
|
-
|
|
277
|
+
valueInput = viewChild('freeTextInput', /* @ts-ignore */
|
|
278
|
+
...(ngDevMode ? [{ debugName: "valueInput" }] : /* istanbul ignore next */ []));
|
|
279
|
+
validValue = computed(() => true, /* @ts-ignore */
|
|
280
|
+
...(ngDevMode ? [{ debugName: "validValue" }] : /* istanbul ignore next */ []));
|
|
252
281
|
freeTextValueChange(event) {
|
|
253
282
|
const inputElement = event.target;
|
|
254
283
|
this.criterionValue.update(v => ({ ...v, value: inputElement.value }));
|
|
@@ -257,16 +286,16 @@ class SiFilteredSearchFreeTextComponent extends SiFilteredSearchValueBase {
|
|
|
257
286
|
this.active.set(false);
|
|
258
287
|
this.submitValue.emit();
|
|
259
288
|
}
|
|
260
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
261
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
289
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchFreeTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
290
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SiFilteredSearchFreeTextComponent, isStandalone: true, selector: "si-filtered-search-free-text", providers: [
|
|
262
291
|
{ 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" }]
|
|
292
|
+
], 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
293
|
}
|
|
265
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
294
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchFreeTextComponent, decorators: [{
|
|
266
295
|
type: Component,
|
|
267
296
|
args: [{ selector: 'si-filtered-search-free-text', imports: [SiTranslatePipe], providers: [
|
|
268
297
|
{ provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchFreeTextComponent }
|
|
269
|
-
],
|
|
298
|
+
], 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
299
|
}], propDecorators: { valueInput: [{ type: i0.ViewChild, args: ['freeTextInput', { isSignal: true }] }] } });
|
|
271
300
|
|
|
272
301
|
/**
|
|
@@ -274,21 +303,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
274
303
|
* SPDX-License-Identifier: MIT
|
|
275
304
|
*/
|
|
276
305
|
class SiFilteredSearchOptionValueBase extends SiFilteredSearchValueBase {
|
|
277
|
-
lazyValueProvider = input(
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
306
|
+
lazyValueProvider = input(/* @ts-ignore */
|
|
307
|
+
...(ngDevMode ? [undefined, { debugName: "lazyValueProvider" }] : /* istanbul ignore next */ []));
|
|
308
|
+
searchDebounceTime = input.required(/* @ts-ignore */
|
|
309
|
+
...(ngDevMode ? [{ debugName: "searchDebounceTime" }] : /* istanbul ignore next */ []));
|
|
310
|
+
onlySelectValue = input.required(/* @ts-ignore */
|
|
311
|
+
...(ngDevMode ? [{ debugName: "onlySelectValue" }] : /* istanbul ignore next */ []));
|
|
312
|
+
maxCriteriaOptions = input.required(/* @ts-ignore */
|
|
313
|
+
...(ngDevMode ? [{ debugName: "maxCriteriaOptions" }] : /* istanbul ignore next */ []));
|
|
314
|
+
optionsInScrollableView = input.required(/* @ts-ignore */
|
|
315
|
+
...(ngDevMode ? [{ debugName: "optionsInScrollableView" }] : /* istanbul ignore next */ []));
|
|
316
|
+
disableSelectionByColonAndSemicolon = input.required(/* @ts-ignore */
|
|
317
|
+
...(ngDevMode ? [{ debugName: "disableSelectionByColonAndSemicolon" }] : /* istanbul ignore next */ []));
|
|
318
|
+
isStrictOrOnlySelectValue = input.required(/* @ts-ignore */
|
|
319
|
+
...(ngDevMode ? [{ debugName: "isStrictOrOnlySelectValue" }] : /* istanbul ignore next */ []));
|
|
284
320
|
inputChange = new BehaviorSubject('');
|
|
285
321
|
destroyRef = inject(DestroyRef);
|
|
286
322
|
translateService = injectSiTranslateService();
|
|
287
323
|
inputType = computed(() => this.definition().validationType === 'integer' || this.definition().validationType === 'float'
|
|
288
324
|
? 'number'
|
|
289
|
-
: 'text',
|
|
290
|
-
|
|
291
|
-
|
|
325
|
+
: 'text', /* @ts-ignore */
|
|
326
|
+
...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
|
|
327
|
+
step = computed(() => (this.definition().validationType === 'integer' ? '1' : 'any'), /* @ts-ignore */
|
|
328
|
+
...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
|
|
329
|
+
options = computed(() => this.buildOptions(), /* @ts-ignore */
|
|
330
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
292
331
|
validValue = computed(() => {
|
|
293
332
|
const config = this.definition();
|
|
294
333
|
if (!this.isStrictOrOnlySelectValue() && !config.strictValue && !config.onlySelectValue) {
|
|
@@ -298,7 +337,8 @@ class SiFilteredSearchOptionValueBase extends SiFilteredSearchValueBase {
|
|
|
298
337
|
// TODO: checking if options are empty is also questionable. Should be changed v47.
|
|
299
338
|
return ((config.options?.length && this.hasOptionValue()) ||
|
|
300
339
|
(!config.options?.length && !!this.criterionValue().value));
|
|
301
|
-
},
|
|
340
|
+
}, /* @ts-ignore */
|
|
341
|
+
...(ngDevMode ? [{ debugName: "validValue" }] : /* istanbul ignore next */ []));
|
|
302
342
|
buildOptions() {
|
|
303
343
|
let optionsStream;
|
|
304
344
|
if (this.lazyValueProvider()) {
|
|
@@ -327,10 +367,10 @@ class SiFilteredSearchOptionValueBase extends SiFilteredSearchValueBase {
|
|
|
327
367
|
.subscribe(options => this.processTypeaheadOptions(options));
|
|
328
368
|
}
|
|
329
369
|
}
|
|
330
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
331
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
370
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchOptionValueBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
371
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", 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
372
|
}
|
|
333
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
373
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchOptionValueBase, decorators: [{
|
|
334
374
|
type: Directive
|
|
335
375
|
}], 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
376
|
|
|
@@ -339,11 +379,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
339
379
|
* SPDX-License-Identifier: MIT
|
|
340
380
|
*/
|
|
341
381
|
class SiFilteredSearchMultiSelectComponent extends SiFilteredSearchOptionValueBase {
|
|
342
|
-
itemCountText = input.required(
|
|
343
|
-
|
|
344
|
-
|
|
382
|
+
itemCountText = input.required(/* @ts-ignore */
|
|
383
|
+
...(ngDevMode ? [{ debugName: "itemCountText" }] : /* istanbul ignore next */ []));
|
|
384
|
+
valueInput = viewChild('valueInput', /* @ts-ignore */
|
|
385
|
+
...(ngDevMode ? [{ debugName: "valueInput" }] : /* istanbul ignore next */ []));
|
|
386
|
+
optionValue = signal([], /* @ts-ignore */
|
|
387
|
+
...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
|
|
345
388
|
selectionChange = new BehaviorSubject([]);
|
|
346
|
-
hasMultiSelections = computed(() => Array.isArray(this.criterionValue().value) && this.criterionValue().value.length > 1,
|
|
389
|
+
hasMultiSelections = computed(() => Array.isArray(this.criterionValue().value) && this.criterionValue().value.length > 1, /* @ts-ignore */
|
|
390
|
+
...(ngDevMode ? [{ debugName: "hasMultiSelections" }] : /* istanbul ignore next */ []));
|
|
347
391
|
ngOnChanges(changes) {
|
|
348
392
|
if (changes.criterionValue &&
|
|
349
393
|
this.criterionValue().value?.length !== this.optionValue().length) {
|
|
@@ -393,16 +437,16 @@ class SiFilteredSearchMultiSelectComponent extends SiFilteredSearchOptionValueBa
|
|
|
393
437
|
hasOptionValue() {
|
|
394
438
|
return !!this.optionValue().length;
|
|
395
439
|
}
|
|
396
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
397
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
440
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
441
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SiFilteredSearchMultiSelectComponent, isStandalone: true, selector: "si-filtered-search-multi-select", inputs: { itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
398
442
|
{ 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" }]
|
|
443
|
+
], 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
444
|
}
|
|
401
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
445
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchMultiSelectComponent, decorators: [{
|
|
402
446
|
type: Component,
|
|
403
447
|
args: [{ selector: 'si-filtered-search-multi-select', imports: [SiTranslatePipe, SiTypeaheadDirective], providers: [
|
|
404
448
|
{ provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchMultiSelectComponent }
|
|
405
|
-
],
|
|
449
|
+
], 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
450
|
}], propDecorators: { itemCountText: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCountText", required: true }] }], valueInput: [{ type: i0.ViewChild, args: ['valueInput', { isSignal: true }] }] } });
|
|
407
451
|
|
|
408
452
|
/**
|
|
@@ -410,10 +454,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
410
454
|
* SPDX-License-Identifier: MIT
|
|
411
455
|
*/
|
|
412
456
|
class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase {
|
|
413
|
-
valueInput = viewChild('valueInput',
|
|
414
|
-
|
|
457
|
+
valueInput = viewChild('valueInput', /* @ts-ignore */
|
|
458
|
+
...(ngDevMode ? [{ debugName: "valueInput" }] : /* istanbul ignore next */ []));
|
|
459
|
+
optionValue = signal(undefined, /* @ts-ignore */
|
|
460
|
+
...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
|
|
415
461
|
// This must be a separate signal as it should only emit when the actual empty state changes.
|
|
416
|
-
inputEmpty = computed(() => !this.criterionValue().value,
|
|
462
|
+
inputEmpty = computed(() => !this.criterionValue().value, /* @ts-ignore */
|
|
463
|
+
...(ngDevMode ? [{ debugName: "inputEmpty" }] : /* istanbul ignore next */ []));
|
|
417
464
|
// This MUST only be updated if the active state changes.
|
|
418
465
|
// Otherwise, user values might be overridden.
|
|
419
466
|
// It is only used to pass the initial input value if the user starts editing the input.
|
|
@@ -433,7 +480,8 @@ class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase
|
|
|
433
480
|
}
|
|
434
481
|
}
|
|
435
482
|
return '';
|
|
436
|
-
},
|
|
483
|
+
}, /* @ts-ignore */
|
|
484
|
+
...(ngDevMode ? [{ debugName: "valueLabel" }] : /* istanbul ignore next */ []));
|
|
437
485
|
ngOnChanges(changes) {
|
|
438
486
|
if (changes.criterionValue && this.criterionValue().value !== this.optionValue()?.value) {
|
|
439
487
|
this.optionValue.set(undefined);
|
|
@@ -491,16 +539,16 @@ class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase
|
|
|
491
539
|
hasOptionValue() {
|
|
492
540
|
return !!this.optionValue();
|
|
493
541
|
}
|
|
494
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
495
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
542
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchTypeaheadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
543
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SiFilteredSearchTypeaheadComponent, isStandalone: true, selector: "si-filtered-search-typeahead", providers: [
|
|
496
544
|
{ 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" }]
|
|
545
|
+
], 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
546
|
}
|
|
499
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchTypeaheadComponent, decorators: [{
|
|
500
548
|
type: Component,
|
|
501
549
|
args: [{ selector: 'si-filtered-search-typeahead', imports: [SiTypeaheadDirective, SiTranslatePipe], providers: [
|
|
502
550
|
{ provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchTypeaheadComponent }
|
|
503
|
-
],
|
|
551
|
+
], 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
552
|
}], propDecorators: { valueInput: [{ type: i0.ViewChild, args: ['valueInput', { isSignal: true }] }] } });
|
|
505
553
|
|
|
506
554
|
/**
|
|
@@ -509,28 +557,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
509
557
|
*/
|
|
510
558
|
class SiFilteredSearchValueComponent {
|
|
511
559
|
injector = inject(Injector);
|
|
512
|
-
value = model.required(
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
560
|
+
value = model.required(/* @ts-ignore */
|
|
561
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
562
|
+
definition = input.required(/* @ts-ignore */
|
|
563
|
+
...(ngDevMode ? [{ debugName: "definition" }] : /* istanbul ignore next */ []));
|
|
564
|
+
disabled = input.required(/* @ts-ignore */
|
|
565
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
566
|
+
onlySelectValue = input.required(/* @ts-ignore */
|
|
567
|
+
...(ngDevMode ? [{ debugName: "onlySelectValue" }] : /* istanbul ignore next */ []));
|
|
568
|
+
maxCriteriaOptions = input.required(/* @ts-ignore */
|
|
569
|
+
...(ngDevMode ? [{ debugName: "maxCriteriaOptions" }] : /* istanbul ignore next */ []));
|
|
570
|
+
optionsInScrollableView = input.required(/* @ts-ignore */
|
|
571
|
+
...(ngDevMode ? [{ debugName: "optionsInScrollableView" }] : /* istanbul ignore next */ []));
|
|
572
|
+
clearButtonLabel = input.required(/* @ts-ignore */
|
|
573
|
+
...(ngDevMode ? [{ debugName: "clearButtonLabel" }] : /* istanbul ignore next */ []));
|
|
574
|
+
lazyValueProvider = input(/* @ts-ignore */
|
|
575
|
+
...(ngDevMode ? [undefined, { debugName: "lazyValueProvider" }] : /* istanbul ignore next */ []));
|
|
576
|
+
searchDebounceTime = input.required(/* @ts-ignore */
|
|
577
|
+
...(ngDevMode ? [{ debugName: "searchDebounceTime" }] : /* istanbul ignore next */ []));
|
|
578
|
+
itemCountText = input.required(/* @ts-ignore */
|
|
579
|
+
...(ngDevMode ? [{ debugName: "itemCountText" }] : /* istanbul ignore next */ []));
|
|
580
|
+
disableSelectionByColonAndSemicolon = input.required(/* @ts-ignore */
|
|
581
|
+
...(ngDevMode ? [{ debugName: "disableSelectionByColonAndSemicolon" }] : /* istanbul ignore next */ []));
|
|
582
|
+
searchLabel = input.required(/* @ts-ignore */
|
|
583
|
+
...(ngDevMode ? [{ debugName: "searchLabel" }] : /* istanbul ignore next */ []));
|
|
584
|
+
invalidCriterion = input.required(/* @ts-ignore */
|
|
585
|
+
...(ngDevMode ? [{ debugName: "invalidCriterion" }] : /* istanbul ignore next */ []));
|
|
586
|
+
isStrictOrOnlySelectValue = input.required(/* @ts-ignore */
|
|
587
|
+
...(ngDevMode ? [{ debugName: "isStrictOrOnlySelectValue" }] : /* istanbul ignore next */ []));
|
|
588
|
+
editOnCreation = input.required(/* @ts-ignore */
|
|
589
|
+
...(ngDevMode ? [{ debugName: "editOnCreation" }] : /* istanbul ignore next */ []));
|
|
527
590
|
deleteCriterion = output();
|
|
528
591
|
submitCriterion = output();
|
|
529
|
-
active = signal(false,
|
|
592
|
+
active = signal(false, /* @ts-ignore */
|
|
593
|
+
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
530
594
|
icons = addIcons({ elementCancel });
|
|
531
595
|
hasPendingFocus = false;
|
|
532
|
-
operatorInput = viewChild('operatorInput',
|
|
533
|
-
|
|
596
|
+
operatorInput = viewChild('operatorInput', /* @ts-ignore */
|
|
597
|
+
...(ngDevMode ? [{ debugName: "operatorInput" }] : /* istanbul ignore next */ []));
|
|
598
|
+
valueInput = viewChild(SiFilteredSearchValueBase, /* @ts-ignore */
|
|
599
|
+
...(ngDevMode ? [{ debugName: "valueInput" }] : /* istanbul ignore next */ []));
|
|
534
600
|
type = computed(() => {
|
|
535
601
|
// Check if this is a free text criterion first
|
|
536
602
|
const definition = this.definition();
|
|
@@ -543,7 +609,8 @@ class SiFilteredSearchValueComponent {
|
|
|
543
609
|
}
|
|
544
610
|
// Handle multi-select vs single-select for other validation types.
|
|
545
611
|
return definition.multiSelect ? 'multi-select' : 'typeahead';
|
|
546
|
-
},
|
|
612
|
+
}, /* @ts-ignore */
|
|
613
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
547
614
|
selectedOperatorIndex = computed(() => {
|
|
548
615
|
const operator = this.value().operator;
|
|
549
616
|
const operators = this.definition().operators;
|
|
@@ -551,14 +618,16 @@ class SiFilteredSearchValueComponent {
|
|
|
551
618
|
return -1;
|
|
552
619
|
}
|
|
553
620
|
return operators.findIndex(op => op.includes(operator));
|
|
554
|
-
},
|
|
621
|
+
}, /* @ts-ignore */
|
|
622
|
+
...(ngDevMode ? [{ debugName: "selectedOperatorIndex" }] : /* istanbul ignore next */ []));
|
|
555
623
|
longestOperatorLength = computed(() => {
|
|
556
624
|
const operators = this.definition().operators;
|
|
557
625
|
if (!operators) {
|
|
558
626
|
return 0;
|
|
559
627
|
}
|
|
560
628
|
return Math.max(...operators.map(a => a.length));
|
|
561
|
-
},
|
|
629
|
+
}, /* @ts-ignore */
|
|
630
|
+
...(ngDevMode ? [{ debugName: "longestOperatorLength" }] : /* istanbul ignore next */ []));
|
|
562
631
|
ngOnInit() {
|
|
563
632
|
if (this.editOnCreation() && this.type() !== 'free-text') {
|
|
564
633
|
this.edit();
|
|
@@ -638,10 +707,10 @@ class SiFilteredSearchValueComponent {
|
|
|
638
707
|
this.deleteCriterion.emit({ triggerSearch: true });
|
|
639
708
|
}
|
|
640
709
|
}
|
|
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 });
|
|
710
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
711
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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
712
|
}
|
|
644
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
713
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchValueComponent, decorators: [{
|
|
645
714
|
type: Component,
|
|
646
715
|
args: [{ selector: 'si-filtered-search-value', imports: [
|
|
647
716
|
CdkMonitorFocus,
|
|
@@ -653,7 +722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
653
722
|
SiFilteredSearchTypeaheadComponent,
|
|
654
723
|
SiFilteredSearchMultiSelectComponent,
|
|
655
724
|
SiIconComponent
|
|
656
|
-
],
|
|
725
|
+
], 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
726
|
}], 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
727
|
|
|
659
728
|
/**
|
|
@@ -673,49 +742,52 @@ class SiFilteredSearchComponent {
|
|
|
673
742
|
*
|
|
674
743
|
* @defaultValue false
|
|
675
744
|
*/
|
|
676
|
-
doSearchOnInputChange = input(false, { ...(ngDevMode ? { debugName: "doSearchOnInputChange" } : {}), transform: booleanAttribute });
|
|
745
|
+
doSearchOnInputChange = input(false, { ...(ngDevMode ? { debugName: "doSearchOnInputChange" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
677
746
|
/**
|
|
678
747
|
* In addition to lazy loaded value, you can also lazy load the criteria itself
|
|
679
748
|
*/
|
|
680
|
-
lazyCriterionProvider = input(
|
|
749
|
+
lazyCriterionProvider = input(/* @ts-ignore */
|
|
750
|
+
...(ngDevMode ? [undefined, { debugName: "lazyCriterionProvider" }] : /* istanbul ignore next */ []));
|
|
681
751
|
/**
|
|
682
752
|
* In many cases, your application defines the criteria, but the values need
|
|
683
753
|
* to be loaded from a server. In this case you can provide a function that
|
|
684
754
|
* returns the possible criterion options as an Observable.
|
|
685
755
|
*/
|
|
686
|
-
lazyValueProvider = input(
|
|
756
|
+
lazyValueProvider = input(/* @ts-ignore */
|
|
757
|
+
...(ngDevMode ? [undefined, { debugName: "lazyValueProvider" }] : /* istanbul ignore next */ []));
|
|
687
758
|
/**
|
|
688
759
|
* Disable any interactivity.
|
|
689
760
|
*
|
|
690
761
|
* @defaultValue false
|
|
691
762
|
*/
|
|
692
|
-
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
763
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
693
764
|
/**
|
|
694
765
|
* Limit criteria to the predefined ones.
|
|
695
766
|
*
|
|
696
767
|
* @defaultValue false
|
|
697
768
|
*/
|
|
698
|
-
strictCriterion = input(false, { ...(ngDevMode ? { debugName: "strictCriterion" } : {}), transform: booleanAttribute });
|
|
769
|
+
strictCriterion = input(false, { ...(ngDevMode ? { debugName: "strictCriterion" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
699
770
|
/**
|
|
700
771
|
* Limit criterion options to the predefined ones. `[strictValue]`
|
|
701
772
|
* enforces `[strictCriterion]` to true automatically.
|
|
702
773
|
*
|
|
703
774
|
* @defaultValue false
|
|
704
775
|
*/
|
|
705
|
-
strictValue = input(false, { ...(ngDevMode ? { debugName: "strictValue" } : {}), transform: booleanAttribute });
|
|
776
|
+
strictValue = input(false, { ...(ngDevMode ? { debugName: "strictValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
706
777
|
/**
|
|
707
778
|
* Limit criterion options to the predefined ones and prevent typing. `[onlySelectValue]`
|
|
708
779
|
* enforces `[strictValue]` and `[strictCriterion]` to true automatically.
|
|
709
780
|
*
|
|
710
781
|
* @defaultValue false
|
|
711
782
|
*/
|
|
712
|
-
onlySelectValue = input(false, { ...(ngDevMode ? { debugName: "onlySelectValue" } : {}), transform: booleanAttribute });
|
|
783
|
+
onlySelectValue = input(false, { ...(ngDevMode ? { debugName: "onlySelectValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
713
784
|
/**
|
|
714
785
|
* Custom debounce time for lazy loading of criteria data.
|
|
715
786
|
*
|
|
716
787
|
* @defaultValue 500
|
|
717
788
|
*/
|
|
718
|
-
lazyLoadingDebounceTime = input(500,
|
|
789
|
+
lazyLoadingDebounceTime = input(500, /* @ts-ignore */
|
|
790
|
+
...(ngDevMode ? [{ debugName: "lazyLoadingDebounceTime" }] : /* istanbul ignore next */ []));
|
|
719
791
|
/**
|
|
720
792
|
* Custom debounce time (in mills) to delay the search emission.
|
|
721
793
|
* (Default is 0 as in most cases a users manually triggers a search.
|
|
@@ -723,19 +795,22 @@ class SiFilteredSearchComponent {
|
|
|
723
795
|
*
|
|
724
796
|
* @defaultValue 0
|
|
725
797
|
*/
|
|
726
|
-
searchDebounceTime = input(0,
|
|
798
|
+
searchDebounceTime = input(0, /* @ts-ignore */
|
|
799
|
+
...(ngDevMode ? [{ debugName: "searchDebounceTime" }] : /* istanbul ignore next */ []));
|
|
727
800
|
/**
|
|
728
801
|
* The placeholder for input field.
|
|
729
802
|
*
|
|
730
803
|
* @defaultValue ''
|
|
731
804
|
*/
|
|
732
|
-
placeholder = input('',
|
|
805
|
+
placeholder = input('', /* @ts-ignore */
|
|
806
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
733
807
|
/**
|
|
734
808
|
* Defines the number of criteria, criteria values and operators visible at once.
|
|
735
809
|
*
|
|
736
810
|
* @defaultValue 10
|
|
737
811
|
*/
|
|
738
|
-
optionsInScrollableView = input(10,
|
|
812
|
+
optionsInScrollableView = input(10, /* @ts-ignore */
|
|
813
|
+
...(ngDevMode ? [{ debugName: "optionsInScrollableView" }] : /* istanbul ignore next */ []));
|
|
739
814
|
/**
|
|
740
815
|
* The current selected search criteria and entered search text.
|
|
741
816
|
*
|
|
@@ -744,19 +819,21 @@ class SiFilteredSearchComponent {
|
|
|
744
819
|
* { criteria: [], value: '' }
|
|
745
820
|
* ```
|
|
746
821
|
*/
|
|
747
|
-
searchCriteria = model({ criteria: [], value: '' },
|
|
822
|
+
searchCriteria = model({ criteria: [], value: '' }, /* @ts-ignore */
|
|
823
|
+
...(ngDevMode ? [{ debugName: "searchCriteria" }] : /* istanbul ignore next */ []));
|
|
748
824
|
/**
|
|
749
825
|
* Predefine criteria options.
|
|
750
826
|
*
|
|
751
827
|
* @defaultValue []
|
|
752
828
|
*/
|
|
753
|
-
criteria = input([],
|
|
829
|
+
criteria = input([], /* @ts-ignore */
|
|
830
|
+
...(ngDevMode ? [{ debugName: "criteria" }] : /* istanbul ignore next */ []));
|
|
754
831
|
/**
|
|
755
832
|
* Opt-in to search for each criterion only once.
|
|
756
833
|
*
|
|
757
834
|
* @defaultValue false
|
|
758
835
|
*/
|
|
759
|
-
exclusiveCriteria = input(false, { ...(ngDevMode ? { debugName: "exclusiveCriteria" } : {}), transform: booleanAttribute });
|
|
836
|
+
exclusiveCriteria = input(false, { ...(ngDevMode ? { debugName: "exclusiveCriteria" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
760
837
|
/**
|
|
761
838
|
* Limit the number of possible criteria. The default is undefined so that any number of criteria can be used.
|
|
762
839
|
* For example, setting the value to 1 let you only select one criterion that you need to remove before being
|
|
@@ -764,13 +841,15 @@ class SiFilteredSearchComponent {
|
|
|
764
841
|
*
|
|
765
842
|
* @defaultValue undefined
|
|
766
843
|
*/
|
|
767
|
-
maxCriteria = input(undefined,
|
|
844
|
+
maxCriteria = input(undefined, /* @ts-ignore */
|
|
845
|
+
...(ngDevMode ? [{ debugName: "maxCriteria" }] : /* istanbul ignore next */ []));
|
|
768
846
|
/**
|
|
769
847
|
* Defines the maximum options within one criterion. The default is 20 and 0 means unlimited.
|
|
770
848
|
*
|
|
771
849
|
* @defaultValue 20
|
|
772
850
|
*/
|
|
773
|
-
maxCriteriaOptions = input(20,
|
|
851
|
+
maxCriteriaOptions = input(20, /* @ts-ignore */
|
|
852
|
+
...(ngDevMode ? [{ debugName: "maxCriteriaOptions" }] : /* istanbul ignore next */ []));
|
|
774
853
|
/**
|
|
775
854
|
* Search input aria label, Needed by a11y
|
|
776
855
|
*
|
|
@@ -779,7 +858,8 @@ class SiFilteredSearchComponent {
|
|
|
779
858
|
* t(() => $localize`:@@SI_FILTERED_SEARCH.SEARCH:Search`)
|
|
780
859
|
* ```
|
|
781
860
|
*/
|
|
782
|
-
searchLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.SEARCH:Search`),
|
|
861
|
+
searchLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.SEARCH:Search`), /* @ts-ignore */
|
|
862
|
+
...(ngDevMode ? [{ debugName: "searchLabel" }] : /* istanbul ignore next */ []));
|
|
783
863
|
/**
|
|
784
864
|
* Clear button aria label. Needed for a11y
|
|
785
865
|
*
|
|
@@ -788,7 +868,8 @@ class SiFilteredSearchComponent {
|
|
|
788
868
|
* t(() => $localize`:@@SI_FILTERED_SEARCH.CLEAR:Clear`)
|
|
789
869
|
* ```
|
|
790
870
|
*/
|
|
791
|
-
clearButtonLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.CLEAR:Clear`),
|
|
871
|
+
clearButtonLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.CLEAR:Clear`), /* @ts-ignore */
|
|
872
|
+
...(ngDevMode ? [{ debugName: "clearButtonLabel" }] : /* istanbul ignore next */ []));
|
|
792
873
|
/**
|
|
793
874
|
* The accessible label of the search button.
|
|
794
875
|
*
|
|
@@ -797,7 +878,8 @@ class SiFilteredSearchComponent {
|
|
|
797
878
|
* t(() => $localize`:@@SI_FILTERED_SEARCH.SUBMIT_BUTTON:Submit search`)
|
|
798
879
|
* ```
|
|
799
880
|
*/
|
|
800
|
-
submitButtonLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.SUBMIT_BUTTON:Submit search`),
|
|
881
|
+
submitButtonLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.SUBMIT_BUTTON:Submit search`), /* @ts-ignore */
|
|
882
|
+
...(ngDevMode ? [{ debugName: "submitButtonLabel" }] : /* istanbul ignore next */ []));
|
|
801
883
|
/**
|
|
802
884
|
* Items count text appended to the count in case of multi-selection of values.
|
|
803
885
|
* Translation key, `{{itemCount}}` in the translation will be replaced with the actual value.
|
|
@@ -807,25 +889,28 @@ class SiFilteredSearchComponent {
|
|
|
807
889
|
* t(() => $localize`:@@SI_FILTERED_SEARCH.ITEM_COUNT:{{itemCount}} items`)
|
|
808
890
|
* ```
|
|
809
891
|
*/
|
|
810
|
-
itemCountText = input(t(() => $localize `:@@SI_FILTERED_SEARCH.ITEM_COUNT:{{itemCount}} items`),
|
|
892
|
+
itemCountText = input(t(() => $localize `:@@SI_FILTERED_SEARCH.ITEM_COUNT:{{itemCount}} items`), /* @ts-ignore */
|
|
893
|
+
...(ngDevMode ? [{ debugName: "itemCountText" }] : /* istanbul ignore next */ []));
|
|
811
894
|
/**
|
|
812
895
|
* Color variant to determine component background
|
|
813
896
|
*
|
|
814
897
|
* @defaultValue 'base-1'
|
|
815
898
|
*/
|
|
816
|
-
colorVariant = input('base-1',
|
|
899
|
+
colorVariant = input('base-1', /* @ts-ignore */
|
|
900
|
+
...(ngDevMode ? [{ debugName: "colorVariant" }] : /* istanbul ignore next */ []));
|
|
817
901
|
/**
|
|
818
902
|
* Disables the free text search to only use the criterion for filtering.
|
|
819
903
|
*
|
|
820
904
|
* @defaultValue false
|
|
821
905
|
*/
|
|
822
|
-
disableFreeTextSearch = input(false, { ...(ngDevMode ? { debugName: "disableFreeTextSearch" } : {}), transform: booleanAttribute });
|
|
906
|
+
disableFreeTextSearch = input(false, { ...(ngDevMode ? { debugName: "disableFreeTextSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
823
907
|
/**
|
|
824
908
|
* Limit on the number of criteria/criteria value to be displayed by the typeahead
|
|
825
909
|
*
|
|
826
910
|
* @defaultValue 20
|
|
827
911
|
*/
|
|
828
|
-
typeaheadOptionsLimit = input(20,
|
|
912
|
+
typeaheadOptionsLimit = input(20, /* @ts-ignore */
|
|
913
|
+
...(ngDevMode ? [{ debugName: "typeaheadOptionsLimit" }] : /* istanbul ignore next */ []));
|
|
829
914
|
/**
|
|
830
915
|
* By default, the Filtered Search will treat `:` as a special character
|
|
831
916
|
* to submit the current input in the freetext and immediately create a criterion.
|
|
@@ -833,7 +918,7 @@ class SiFilteredSearchComponent {
|
|
|
833
918
|
*
|
|
834
919
|
* @defaultValue false
|
|
835
920
|
*/
|
|
836
|
-
disableSelectionByColonAndSemicolon = input(false, { ...(ngDevMode ? { debugName: "disableSelectionByColonAndSemicolon" } : {}), transform: booleanAttribute });
|
|
921
|
+
disableSelectionByColonAndSemicolon = input(false, { ...(ngDevMode ? { debugName: "disableSelectionByColonAndSemicolon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
837
922
|
/**
|
|
838
923
|
* Criterion definition for free-text pills.
|
|
839
924
|
* When set, free-text values will be added as a pill with this criterion.
|
|
@@ -845,7 +930,8 @@ class SiFilteredSearchComponent {
|
|
|
845
930
|
*
|
|
846
931
|
* @experimental
|
|
847
932
|
*/
|
|
848
|
-
freeTextCriterion = input(
|
|
933
|
+
freeTextCriterion = input(/* @ts-ignore */
|
|
934
|
+
...(ngDevMode ? [undefined, { debugName: "freeTextCriterion" }] : /* istanbul ignore next */ []));
|
|
849
935
|
/**
|
|
850
936
|
* The value to be shown for creating free-text pills.
|
|
851
937
|
* Use the `{{query}}` placeholder to show the user input in the label.
|
|
@@ -858,7 +944,8 @@ class SiFilteredSearchComponent {
|
|
|
858
944
|
*
|
|
859
945
|
* @experimental
|
|
860
946
|
*/
|
|
861
|
-
searchForFreeTextLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.SEARCH_FOR_FREE_TEXT:Search for "{{query}}"`),
|
|
947
|
+
searchForFreeTextLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.SEARCH_FOR_FREE_TEXT:Search for "{{query}}"`), /* @ts-ignore */
|
|
948
|
+
...(ngDevMode ? [{ debugName: "searchForFreeTextLabel" }] : /* istanbul ignore next */ []));
|
|
862
949
|
/**
|
|
863
950
|
* The interceptor is called when the list of criteria is shown as soon as the user starts typing in the input field.
|
|
864
951
|
* The interceptor's {@link DisplayedCriteriaEventArgs.allow} method can be used to filter the list of displayed criteria.
|
|
@@ -881,11 +968,14 @@ class SiFilteredSearchComponent {
|
|
|
881
968
|
interceptDisplayedCriteria = output();
|
|
882
969
|
freeTextInput = viewChild.required(SiFilteredSearchInputComponent);
|
|
883
970
|
scrollContainer = viewChild.required('scrollContainer', { read: ElementRef });
|
|
884
|
-
valueComponents = viewChildren(SiFilteredSearchValueComponent,
|
|
971
|
+
valueComponents = viewChildren(SiFilteredSearchValueComponent, /* @ts-ignore */
|
|
972
|
+
...(ngDevMode ? [{ debugName: "valueComponents" }] : /* istanbul ignore next */ []));
|
|
885
973
|
dataSource;
|
|
886
974
|
autoEditCriteria = false;
|
|
887
|
-
values = signal([],
|
|
888
|
-
|
|
975
|
+
values = signal([], /* @ts-ignore */
|
|
976
|
+
...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
|
|
977
|
+
searchValue = signal('', /* @ts-ignore */
|
|
978
|
+
...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
|
|
889
979
|
/** Internal criteria model */
|
|
890
980
|
internalCriterionDefinitions = [];
|
|
891
981
|
icons = addIcons({ elementCancel, elementSearch });
|
|
@@ -895,17 +985,21 @@ class SiFilteredSearchComponent {
|
|
|
895
985
|
translateService = injectSiTranslateService();
|
|
896
986
|
locale = inject(LOCALE_ID).toString();
|
|
897
987
|
freeTextFocused = new Subject();
|
|
898
|
-
allowFreeTextCache = signal(true,
|
|
988
|
+
allowFreeTextCache = signal(true, /* @ts-ignore */
|
|
989
|
+
...(ngDevMode ? [{ debugName: "allowFreeTextCache" }] : /* istanbul ignore next */ []));
|
|
899
990
|
// Angular also calls ngOnChanges if we emitted a change and then two-way-databinding writes back our own change.
|
|
900
991
|
// We use this to ensure that we do not write our own change back to the input.
|
|
901
992
|
lastEmittedSearchCriteria;
|
|
902
993
|
isStrictOrOnlySelectValue = computed(() => {
|
|
903
994
|
return this.strictValue() || this.onlySelectValue();
|
|
904
|
-
},
|
|
995
|
+
}, /* @ts-ignore */
|
|
996
|
+
...(ngDevMode ? [{ debugName: "isStrictOrOnlySelectValue" }] : /* istanbul ignore next */ []));
|
|
905
997
|
strictCriterionOrValue = computed(() => {
|
|
906
998
|
return this.strictCriterion() || this.isStrictOrOnlySelectValue();
|
|
907
|
-
},
|
|
908
|
-
|
|
999
|
+
}, /* @ts-ignore */
|
|
1000
|
+
...(ngDevMode ? [{ debugName: "strictCriterionOrValue" }] : /* istanbul ignore next */ []));
|
|
1001
|
+
lazyLoadedCriteria = signal(undefined, /* @ts-ignore */
|
|
1002
|
+
...(ngDevMode ? [{ debugName: "lazyLoadedCriteria" }] : /* istanbul ignore next */ []));
|
|
909
1003
|
loadedCriteria = computed(() => {
|
|
910
1004
|
const lazyLoadedCriteria = this.lazyLoadedCriteria();
|
|
911
1005
|
if (lazyLoadedCriteria) {
|
|
@@ -914,7 +1008,8 @@ class SiFilteredSearchComponent {
|
|
|
914
1008
|
else {
|
|
915
1009
|
return this.criteria() ?? [];
|
|
916
1010
|
}
|
|
917
|
-
},
|
|
1011
|
+
}, /* @ts-ignore */
|
|
1012
|
+
...(ngDevMode ? [{ debugName: "loadedCriteria" }] : /* istanbul ignore next */ []));
|
|
918
1013
|
internalFreeTextCriterion = computed(() => {
|
|
919
1014
|
const freeTextDef = this.freeTextCriterion();
|
|
920
1015
|
if (!freeTextDef) {
|
|
@@ -926,7 +1021,8 @@ class SiFilteredSearchComponent {
|
|
|
926
1021
|
translatedLabel: freeTextDef.label ?? freeTextDef.name,
|
|
927
1022
|
type: 'free-text'
|
|
928
1023
|
};
|
|
929
|
-
},
|
|
1024
|
+
}, /* @ts-ignore */
|
|
1025
|
+
...(ngDevMode ? [{ debugName: "internalFreeTextCriterion" }] : /* istanbul ignore next */ []));
|
|
930
1026
|
constructor() {
|
|
931
1027
|
const typeaheadInputChange = merge(toObservable(this.searchValue), this.freeTextFocused.pipe(map(() => this.searchValue())));
|
|
932
1028
|
const criteriaRestrictions = toObservable(computed(() => ({
|
|
@@ -1232,17 +1328,17 @@ class SiFilteredSearchComponent {
|
|
|
1232
1328
|
]);
|
|
1233
1329
|
this.emitChangeEvent();
|
|
1234
1330
|
}
|
|
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 });
|
|
1331
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1332
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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
1333
|
}
|
|
1238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchComponent, decorators: [{
|
|
1239
1335
|
type: Component,
|
|
1240
1336
|
args: [{ selector: 'si-filtered-search', imports: [
|
|
1241
1337
|
SiIconComponent,
|
|
1242
1338
|
SiTranslatePipe,
|
|
1243
1339
|
SiFilteredSearchInputComponent,
|
|
1244
1340
|
SiFilteredSearchValueComponent
|
|
1245
|
-
], changeDetection: ChangeDetectionStrategy.
|
|
1341
|
+
], changeDetection: ChangeDetectionStrategy.Eager, host: {
|
|
1246
1342
|
'[class.disabled]': 'disabled()',
|
|
1247
1343
|
'[class.dark-background]': "colorVariant() === 'base-0'"
|
|
1248
1344
|
}, 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 +1349,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1253
1349
|
* SPDX-License-Identifier: MIT
|
|
1254
1350
|
*/
|
|
1255
1351
|
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: "
|
|
1352
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1353
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchModule, imports: [SiFilteredSearchComponent], exports: [SiFilteredSearchComponent] });
|
|
1354
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchModule, imports: [SiFilteredSearchComponent] });
|
|
1259
1355
|
}
|
|
1260
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1356
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFilteredSearchModule, decorators: [{
|
|
1261
1357
|
type: NgModule,
|
|
1262
1358
|
args: [{
|
|
1263
1359
|
imports: [SiFilteredSearchComponent],
|