Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | 182x 515x 182x 515x 162x 487x 162x 515x 15x 77x 12x 58x 58x 12x 1x 2x 5x 19x 19x 19x 19x 19x 15x 515x 182x 20x 28x 28x 20x 2x 2x 15x 58x 58x 15x 3x 24x 83x 83x 24x 123x 346x 346x 123x 8x 182x 515x 182x 515x 182x | <div
cdkMonitorSubtreeFocus
class="criteria pill-group"
[class.disabled]="disabled()"
[attr.aria-disabled]="disabled()"
[class.invalid-criterion]="invalidCriterion()"
(cdkFocusChange)="focusChange($event)"
>
@if (type() !== 'free-text') {
<div class="pill pill-interactive criterion-label si-h5" (click)="edit()">
{{ definition().label | translate }}
</div>
}
@if (definition().operators?.length) {
<div class="pill pill-interactive px-0 criterion-operator-section">
<!-- criterion operator input -->
@if (active()) {
<input
#operatorInput
type="text"
class="focus-inside operator-input py-0 border-0"
[siTypeahead]="definition().operators!"
[typeaheadScrollStrategy]="operatorScrollStrategy()"
[typeaheadProcess]="false"
[typeaheadAutoSelectIndex]="selectedOperatorIndex()"
[typeaheadMinLength]="0"
[typeaheadOptionsLimit]="0"
[readOnly]="false"
[typeaheadScrollable]="true"
[typeaheadOptionsInScrollableView]="optionsInScrollableView()"
[attr.aria-label]="searchLabel() | translate"
[attr.size]="longestOperatorLength()"
[ngModel]="value().operator"
(ngModelChange)="operatorUpdate($event)"
(keydown.backspace)="operatorBackspace()"
(keydown.enter)="operatorEnter()"
(typeaheadOnSelect)="operatorEnter()"
(blur)="operatorBlur()"
/>
} @else {
<!-- criterion operator field -->
<div
class="criterion-operator-text px-2 focus-inside"
[tabindex]="!disabled() ? 0 : -1"
(keydown.enter)="edit('operator')"
(click)="edit('operator')"
>
{{ value().operator }}
</div>
}
</div>
}
@switch (type()) {
@case ('free-text') {
<si-filtered-search-free-text
[definition]="definition()"
[disabled]="disabled()"
[searchLabel]="searchLabel()"
[(active)]="active"
[(criterionValue)]="value"
(backspaceOverflow)="backspaceOverflow()"
(editValue)="edit('value')"
(submitValue)="submitCriterion.emit($event)"
(activeChange)="freeTextActiveChange($event)"
/>
}
@case ('date') {
<si-filtered-search-date-value
[definition]="definition()"
[disabled]="disabled()"
[searchLabel]="searchLabel()"
[scrollStrategy]="datepickerScrollStrategy()"
[(active)]="active"
[(criterionValue)]="value"
(backspaceOverflow)="backspaceOverflow()"
(editValue)="edit('value')"
(submitValue)="submitCriterion.emit($event)"
/>
}
@case ('multi-select') {
<si-filtered-search-multi-select
[definition]="definition()"
[initialValueText]="initialValueText()"
[disabled]="disabled()"
[searchLabel]="searchLabel()"
[scrollStrategy]="multiSelectScrollStrategy()"
[searchDebounceTime]="searchDebounceTime()"
[onlySelectValue]="onlySelectValue()"
[optionsInScrollableView]="optionsInScrollableView()"
[maxCriteriaOptions]="maxCriteriaOptions()"
[lazyValueProvider]="lazyValueProvider()"
[itemCountText]="itemCountText()"
[isStrictOrOnlySelectValue]="isStrictOrOnlySelectValue()"
[disableSelectionByColonAndSemicolon]="disableSelectionByColonAndSemicolon()"
[(active)]="active"
[(criterionValue)]="value"
(backspaceOverflow)="backspaceOverflow()"
(editValue)="edit('value')"
(submitValue)="submitCriterion.emit($event)"
/>
}
@case ('typeahead') {
<si-filtered-search-typeahead
[definition]="definition()"
[initialValueText]="initialValueText()"
[disabled]="disabled()"
[searchLabel]="searchLabel()"
[scrollStrategy]="typeaheadScrollStrategy()"
[searchDebounceTime]="searchDebounceTime()"
[onlySelectValue]="onlySelectValue()"
[optionsInScrollableView]="optionsInScrollableView()"
[maxCriteriaOptions]="maxCriteriaOptions()"
[lazyValueProvider]="lazyValueProvider()"
[isStrictOrOnlySelectValue]="isStrictOrOnlySelectValue()"
[disableSelectionByColonAndSemicolon]="disableSelectionByColonAndSemicolon()"
[(active)]="active"
[(criterionValue)]="value"
(backspaceOverflow)="backspaceOverflow()"
(editValue)="edit('value')"
(submitValue)="submitCriterion.emit($event)"
/>
}
}
<div class="pill px-0 ms-n1">
<button
type="button"
class="btn btn-circle btn-sm btn-tertiary-ghost focus-inside"
[attr.aria-label]="clearButtonLabel() | translate"
[disabled]="disabled()"
(click)="clear()"
(mousedown)="$event.preventDefault()"
>
<si-icon [icon]="icons.elementCancel" />
</button>
</div>
</div>
|