[ACS-5181] Logical search components (#8616)

* [ACS-5181] Add logical search component

* [ACS-5181] Add unit tests to logical search components

* [ACS-5181] Logical filter components docs

* [ACS-5181] CR fixes

* [ACS-5181] CR and accessibility fixes
This commit is contained in:
MichalKinas
2023-06-05 17:23:41 +02:00
committed by GitHub
parent 9845b1e2a0
commit 85fd98874a
18 changed files with 756 additions and 1 deletions

View File

@@ -0,0 +1,49 @@
---
Title: Search Chip Input component
Added: v6.1.0
Status: Active
Last reviewed: 2023-06-01
---
# [Search Chip Input component](../../../lib/content-services/src/lib/search/components/search-chip-input/search-chip-input.component.ts "Defined in search-chip-input.component.ts")
Represents an input with stacked list of chips as phrases added through input.
![Search Chip Input](../../docassets/images/search-chip-input.png)
## Basic usage
```html
<adf-search-chip-input
[label]="'Some label'"
[onReset]="onResetObservable"
(phrasesChanged)="handlePhraseChanged($event)">
</adf-search-chip-input>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| label | `string` | | Label that will be associated with the input |
| addOnBlur | `boolean` | true | Specifies whether new phrase will be added when input blurs |
| onReset | [`Observable`](https://rxjs.dev/guide/observable)`<void>` | | Observable that will listen to any reset event causing component to clear the chips and input |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| phrasesChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string[]>` | Emitted when new phrase is entered |
## See also
- [Search Configuration Guide](../../user-guide/search-configuration-guide.md)
- [Search Query Builder service](../services/search-query-builder.service.md)
- [Search Widget Interface](../interfaces/search-widget.interface.md)
- [Search Logical Filter component](search-logical-filter.component.md)
- [Search check list component](search-check-list.component.md)
- [Search date range component](search-date-range.component.md)
- [Search number range component](search-number-range.component.md)
- [Search radio component](search-radio.component.md)
- [Search slider component](search-slider.component.md)
- [Search text component](search-text.component.md)

View File

@@ -0,0 +1,61 @@
---
Title: Search Logical Filter component
Added: v6.1.0
Status: Active
Last reviewed: 2023-06-01
---
# [Search Logical Filter component](../../../lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts "Defined in search-logical-filter.component.ts")
Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of 3 chip inputs representing logical conditions to form search query from.
![Search Logical Filter](../../docassets/images/search-logical-filter.png)
## Basic usage
```json
{
"search": {
"categories": [
{
"id": "logic",
"name": "Logic",
"enabled": true,
"component": {
"selector": "logical-filter",
"settings": {
"allowUpdateOnChange": false,
"hideDefaultAction": true,
"field": "cm:name,cm:title,TEXT"
}
}
}
]
}
}
```
### Settings
| Name | Type | Description |
| ---- | ---- | ----------- |
| field | string | Field/fields to apply the query to. Required value |
| hideDefaultAction | boolean | Show/hide the [widget](../../../lib/testing/src/lib/protractor/core/pages/form/widgets/widget.ts) actions. By default is false. |
## Details
This component lets the user provide logical conditions to apply to each `field` in the search query.
See the [Search chip input component](search-chip-input.component.md) for full details of how to use chip inputs.
## See also
- [Search Configuration Guide](../../user-guide/search-configuration-guide.md)
- [Search Query Builder service](../services/search-query-builder.service.md)
- [Search Widget Interface](../interfaces/search-widget.interface.md)
- [Search Chip Input component](search-chip-input.component.md)
- [Search check list component](search-check-list.component.md)
- [Search date range component](search-date-range.component.md)
- [Search number range component](search-number-range.component.md)
- [Search radio component](search-radio.component.md)
- [Search slider component](search-slider.component.md)
- [Search text component](search-text.component.md)