search fixes (#3272)

* "show less" button for search filter container

* consistent button styles across widgets

* i18n support for facets

* page sizes for check list

* display page buttons only when needed

* page sizes for all facet fields

* test fixes

* update lib versions

* fix angular configuration

.angular-cli.json

@@ -107,7 +107,7 @@
         },
         {
           "glob": "**/*",
-          "input": "./resources",
+          "input": "../resources",
           "output": "./resources"
         },
         {

demo-shell/src/app.config.json

@@ -67,6 +67,7 @@
       ],
       "facetQueries": {
         "label": "My facet queries",
+        "pageSize": 5,
         "queries": [
           { "query": "created:2018", "label": "Created This Year" },
           { "query": "content.mimetype", "label": "Type" },
@@ -100,6 +101,7 @@
           "component": {
             "selector": "check-list",
             "settings": {
+              "pageSize": 5,
               "operator": "OR",
               "options": [
                 { "name": "Folder", "value": "TYPE:'cm:folder'" },
@@ -153,6 +155,7 @@
             "selector": "radio",
             "settings": {
               "field": null,
+              "pageSize": 5,
               "options": [
                 { "name": "None", "value": "", "default": true },
                 { "name": "All", "value": "TYPE:'cm:folder' OR TYPE:'cm:content'" },

docs/content-services/search-filter.component.md

@@ -44,16 +44,20 @@ Below is an example configuration:
             { "field": "creator", "mincount": 1, "label": "Creator" },
             { "field": "modifier", "mincount": 1, "label": "Modifier" }
         ],
-        "facetQueries": [
+        "facetQueries": {
-            { "query": "created:2018", "label": "Created This Year" },
+            "label": "My facet queries",
-            { "query": "content.mimetype", "label": "Type" },
+            "pageSize": 4,
-            { "query": "content.size:[0 TO 10240]", "label": "Size: xtra small"},
+            "queries": [
-            { "query": "content.size:[10240 TO 102400]", "label": "Size: small"},
+                { "query": "created:2018", "label": "Created This Year" },
-            { "query": "content.size:[102400 TO 1048576]", "label": "Size: medium" },
+                { "query": "content.mimetype", "label": "Type" },
-            { "query": "content.size:[1048576 TO 16777216]", "label": "Size: large" },
+                { "query": "content.size:[0 TO 10240]", "label": "Size: xtra small"},
-            { "query": "content.size:[16777216 TO 134217728]", "label": "Size: xtra large" },
+                { "query": "content.size:[10240 TO 102400]", "label": "Size: small"},
-            { "query": "content.size:[134217728 TO MAX]", "label": "Size: XX large" }
+                { "query": "content.size:[102400 TO 1048576]", "label": "Size: medium" },
-        ],
+                { "query": "content.size:[1048576 TO 16777216]", "label": "Size: large" },
+                { "query": "content.size:[16777216 TO 134217728]", "label": "Size: xtra large" },
+                { "query": "content.size:[134217728 TO MAX]", "label": "Size: XX large" }
+            ]
+        },
         "categories": [
             {
                 "id": "queryName",
@@ -168,6 +172,18 @@ If there are more than 5 entries, the "Show more" button is displayed to allow d
 
 ![Facet Fields](../docassets/images/search-facet-fields.png)
 
+#### FacetField Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| field | string | | This specifies the facet field. |
+| mincount | number | 1 | This specifies the minimum count required for a facet field to be included in the response. The default value is 1. |
+| label | string | | This specifies the label to include in place of the facet field. |
+| prefix | string | | This restricts the possible constraints to only indexed values with a specified prefix. |
+| limit | number | | Maximum number of results |
+| pageSize | number | 5 | Display page size |
+| offset | number | | Offset position |
+
 ### Facet Queries
 
 Provides a custom category based on admin-defined facet queries.
@@ -200,6 +216,10 @@ Based on the `pageSize` value, the component provides a `Show more` button to di
 
 You can also provide a custom `label` (or i18n resource key) for the resulting collapsible category.
 
+The `pageSize` property allows you to define the amount of results to display.
+Users will see `Show more` or `Show less` buttons depending on the result set.
+The default page size is `5`, it is going to be used in case you set the value to `0` or omit the value entirely.
+
 ![Facet Queries](../docassets/images/search-facet-queries.png)
 
 ## Widgets
@@ -233,6 +253,7 @@ You can choose a `label` (or i18n resources key) and a `value`, alongside the co
                 "enabled": true,
                 "component": {
                     "selector": "check-list",
+                    "pageSize": 5,
                     "settings": {
                         "operator": "OR",
                         "options": [
@@ -255,6 +276,15 @@ If user checks both boxes, the underlying query will get the following fragment:
 ... (TYPE:'cm:folder' OR TYPE:'cm:content') ...
 ```
 
+It is possible to set the size of the page to display items. The default size is 5.
+If all items fit a single page, then a "Clear all" action button is displayed at the bottom of the widget.
+
+In case there are more than one page three icon buttons will be displayed to allow:
+
+- clear all values
+- show more items (if applicable)
+- show less items (if applicable)
+
 ### Date Range Widget
 
 Provides ability to select a range between two Dates based on the particular `field`.
@@ -324,6 +354,7 @@ The behaviour is very similar to those of the `check-list` except `radio` allows
                     "selector": "radio",
                     "settings": {
                         "field": null,
+                        "pageSize": 5,
                         "options": [
                             { "name": "None", "value": "", "default": true },
                             { "name": "All", "value": "TYPE:'cm:folder' OR TYPE:'cm:content'" },
@@ -340,6 +371,12 @@ The behaviour is very similar to those of the `check-list` except `radio` allows
 
 ![Radio Widget](../docassets/images/search-radio.png)
 
+It is possible to set the size of the page to display items. The default size is 5.
+In case there are more than one page three icon buttons will be displayed to allow:
+
+- show more items (if applicable)
+- show less items (if applicable)
+
 ### Slider Widget
 
 Provides ability to select a numeric range based on `min` and `max` values in the form of horizontal slider.

lib/content-services/i18n/en.json

@@ -175,7 +175,8 @@
         "CLEAR": "Clear",
         "APPLY": "Apply",
         "CLEAR-ALL": "Clear all",
-        "SHOW-MORE": "Show more"
+        "SHOW-MORE": "Show more",
+        "SHOW-LESS": "Show less"
       },
       "RANGE": {
         "FROM": "From",

lib/content-services/search/components/search-check-list/search-check-list.component.html

@@ -5,8 +5,28 @@
     {{ option.name | translate }}
 </mat-checkbox>
 
-<div>
+<div class="facet-buttons" *ngIf="options.fitsPage">
     <button mat-button color="primary" (click)="reset()">
         {{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}
     </button>
 </div>
+
+<div class="facet-buttons" *ngIf="!options.fitsPage">
+    <button mat-icon-button
+        title="{{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}"
+        (click)="reset()">
+        <mat-icon>clear</mat-icon>
+    </button>
+    <button mat-icon-button
+        [disabled]="!options.canShowLessItems"
+        title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-LESS' | translate }}"
+        (click)="options.showLessItems()">
+        <mat-icon>keyboard_arrow_up</mat-icon>
+    </button>
+    <button mat-icon-button
+        [disabled]="!options.canShowMoreItems"
+        title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-MORE' | translate }}"
+        (click)="options.showMoreItems()">
+        <mat-icon>keyboard_arrow_down</mat-icon>
+    </button>
+</div>

lib/content-services/search/components/search-check-list/search-check-list.component.spec.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { SearchCheckListComponent } from './search-check-list.component';
+import { SearchCheckListComponent, SearchListOption } from './search-check-list.component';
+import { SearchFilterList } from '../search-filter/models/search-filter-list.model';
 
 describe('SearchCheckListComponent', () => {
 
@@ -33,7 +34,7 @@ describe('SearchCheckListComponent', () => {
         component.settings = <any> { options: options };
         component.ngOnInit();
 
-        expect(component.options).toEqual(options);
+        expect(component.options.items).toEqual(options);
     });
 
     it('should setup operator from the settings', () => {
@@ -49,10 +50,10 @@ describe('SearchCheckListComponent', () => {
     });
 
     it('should update query builder on checkbox change', () => {
-        component.options = [
+        component.options = new SearchFilterList<SearchListOption>([
             { name: 'Folder', value: "TYPE:'cm:folder'", checked: false },
             { name: 'Document', value: "TYPE:'cm:content'", checked: false }
-        ];
+        ]);
 
         component.id = 'checklist';
         component.context = <any> {
@@ -66,14 +67,14 @@ describe('SearchCheckListComponent', () => {
 
         component.changeHandler(
             <any> { checked: true },
-            component.options[0]
+            component.options.items[0]
         );
 
         expect(component.context.queryFragments[component.id]).toEqual(`TYPE:'cm:folder'`);
 
         component.changeHandler(
             <any> { checked: true },
-            component.options[1]
+            component.options.items[1]
         );
 
         expect(component.context.queryFragments[component.id]).toEqual(
@@ -82,15 +83,15 @@ describe('SearchCheckListComponent', () => {
     });
 
     it('should reset selected boxes', () => {
-        component.options = [
+        component.options = new SearchFilterList<SearchListOption>([
             { name: 'Folder', value: "TYPE:'cm:folder'", checked: true },
             { name: 'Document', value: "TYPE:'cm:content'", checked: true }
-        ];
+        ]);
 
         component.reset();
 
-        expect(component.options[0].checked).toBeFalsy();
+        expect(component.options.items[0].checked).toBeFalsy();
-        expect(component.options[1].checked).toBeFalsy();
+        expect(component.options.items[1].checked).toBeFalsy();
     });
 
     it('should update query builder on reset', () => {
@@ -104,10 +105,10 @@ describe('SearchCheckListComponent', () => {
         spyOn(component.context, 'update').and.stub();
 
         component.ngOnInit();
-        component.options = [
+        component.options = new SearchFilterList<SearchListOption>([
             { name: 'Folder', value: "TYPE:'cm:folder'", checked: true },
             { name: 'Document', value: "TYPE:'cm:content'", checked: true }
-        ];
+        ]);
 
         component.reset();
 

lib/content-services/search/components/search-check-list/search-check-list.component.ts

@@ -20,6 +20,13 @@ import { MatCheckboxChange } from '@angular/material';
 import { SearchWidget } from '../../search-widget.interface';
 import { SearchWidgetSettings } from '../../search-widget-settings.interface';
 import { SearchQueryBuilderService } from '../../search-query-builder.service';
+import { SearchFilterList } from '../search-filter/models/search-filter-list.model';
+
+export interface SearchListOption {
+    name: string;
+    value: string;
+    checked: boolean;
+}
 
 @Component({
     selector: 'adf-search-check-list',
@@ -33,21 +40,27 @@ export class SearchCheckListComponent implements SearchWidget, OnInit {
     id: string;
     settings?: SearchWidgetSettings;
     context?: SearchQueryBuilderService;
-    options: { name: string, value: string, checked: boolean }[] = [];
+    options: SearchFilterList<SearchListOption>;
     operator: string = 'OR';
+    pageSize = 5;
+
+    constructor() {
+        this.options = new SearchFilterList<SearchListOption>();
+    }
 
     ngOnInit(): void {
         if (this.settings) {
             this.operator = this.settings.operator || 'OR';
+            this.pageSize = this.settings.pageSize || 5;
 
             if (this.settings.options && this.settings.options.length > 0) {
-                this.options = [...this.settings.options];
+                this.options = new SearchFilterList(this.settings.options, this.pageSize);
             }
         }
     }
 
     reset() {
-        this.options.forEach(opt => {
+        this.options.items.forEach(opt => {
             opt.checked = false;
         });
 
@@ -63,7 +76,7 @@ export class SearchCheckListComponent implements SearchWidget, OnInit {
     }
 
     flush() {
-        const checkedValues = this.options
+        const checkedValues = this.options.items
             .filter(option => option.checked)
             .map(option => option.value);
 

lib/content-services/search/components/search-chip-list/search-chip-list.component.html

@@ -4,7 +4,7 @@
             *ngFor="let label of searchFilter.selectedFacetQueries"
             [removable]="true"
             (remove)="searchFilter.unselectFacetQuery(label)">
-            {{ label }}
+            {{ label | translate }}
             <mat-icon matChipRemove>cancel</mat-icon>
         </mat-chip>
     </ng-container>
@@ -13,7 +13,7 @@
             *ngFor="let bucket of searchFilter.selectedBuckets"
             [removable]="true"
             (remove)="searchFilter.unselectFacetBucket(bucket)">
-            {{ bucket.display || bucket.label }}
+            {{ (bucket.display || bucket.label) | translate }}
             <mat-icon matChipRemove>cancel</mat-icon>
         </mat-chip>
     </ng-container>

lib/content-services/search/components/search-date-range/search-date-range.component.html

@@ -1,36 +1,34 @@
 <form [formGroup]="form" novalidate (ngSubmit)="apply(form.value, form.valid)">
+    <mat-form-field>
+        <input matInput [formControl]="from" [errorStateMatcher]="matcher"
+                placeholder="{{ 'SEARCH.FILTER.RANGE.FROM-DATE' | translate }}"
+                [matDatepicker]="fromDatepicker"
+                [max]="maxFrom">
+        <mat-datepicker-toggle matSuffix [for]="fromDatepicker"></mat-datepicker-toggle>
+        <mat-datepicker #fromDatepicker></mat-datepicker>
+        <mat-error *ngIf="from.hasError('required')">
+            {{ 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE' | translate }}
+        </mat-error>
+    </mat-form-field>
 
-        <mat-form-field>
+    <mat-form-field>
-            <input matInput [formControl]="from" [errorStateMatcher]="matcher"
+        <input matInput [formControl]="to" [errorStateMatcher]="matcher"
-                   placeholder="{{ 'SEARCH.FILTER.RANGE.FROM-DATE' | translate }}"
+                placeholder="{{ 'SEARCH.FILTER.RANGE.TO-DATE' | translate }}"
-                   [matDatepicker]="fromDatepicker"
+                [matDatepicker]="toDatepicker"
-                   [max]="maxFrom">
+                [min]="from.value">
-            <mat-datepicker-toggle matSuffix [for]="fromDatepicker"></mat-datepicker-toggle>
+        <mat-datepicker-toggle matSuffix [for]="toDatepicker"></mat-datepicker-toggle>
-            <mat-datepicker #fromDatepicker></mat-datepicker>
+        <mat-datepicker #toDatepicker></mat-datepicker>
-            <mat-error *ngIf="from.hasError('required')">
+        <mat-error *ngIf="!hasSelectedDays(from.value, to.value)">
-                {{ 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE' | translate }}
+                {{ 'SEARCH.FILTER.VALIDATION.NO-DAYS' | translate }}
-            </mat-error>
+        </mat-error>
-        </mat-form-field>
+    </mat-form-field>
-
-        <mat-form-field>
-            <input matInput [formControl]="to" [errorStateMatcher]="matcher"
-                   placeholder="{{ 'SEARCH.FILTER.RANGE.TO-DATE' | translate }}"
-                   [matDatepicker]="toDatepicker"
-                   [min]="from.value">
-            <mat-datepicker-toggle matSuffix [for]="toDatepicker"></mat-datepicker-toggle>
-            <mat-datepicker #toDatepicker></mat-datepicker>
-            <mat-error *ngIf="!hasSelectedDays(from.value, to.value)">
-                    {{ 'SEARCH.FILTER.VALIDATION.NO-DAYS' | translate }}
-            </mat-error>
-        </mat-form-field>
-
-        <div>
-            <button mat-button color="primary" type="button" (click)="reset()">
-                {{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
-            </button>
-            <button mat-button color="primary" type="submit" [disabled]="!form.valid">
-                {{ 'SEARCH.FILTER.ACTIONS.APPLY' | translate }}
-            </button>
-        </div>
-    </form>
 
+    <div class="facet-buttons">
+        <button mat-button color="primary" type="button" (click)="reset()">
+            {{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
+        </button>
+        <button mat-button color="primary" type="submit" [disabled]="!form.valid">
+            {{ 'SEARCH.FILTER.ACTIONS.APPLY' | translate }}
+        </button>
+    </div>
+</form>

lib/content-services/search/components/search-date-range/search-date-range.component.scss

@@ -1,8 +1,5 @@
 .adf-search-date-range > form {
     display: inline-flex;
     flex-direction: column;
-
+    width: 100%;
-    .mat-button {
-        text-transform: uppercase;
-    }
 }

lib/content-services/search/components/search-filter/models/response-facet-query-list.model.ts

@@ -16,43 +16,20 @@
  */
 
 import { ResponseFacetQuery } from '../../../facet-query.interface';
+import { SearchFilterList } from './search-filter-list.model';
 
-export class ResponseFacetQueryList {
+export class ResponseFacetQueryList extends SearchFilterList<ResponseFacetQuery> {
-
-    items: ResponseFacetQuery[] = [];
-    pageSize: number = 5;
-    currentPageSize: number = 5;
-
-    get visibleItems(): ResponseFacetQuery[] {
-        return this.items.slice(0, this.currentPageSize);
-    }
-
-    get length(): number {
-        return this.items.length;
-    }
 
     constructor(items: ResponseFacetQuery[] = [], pageSize: number = 5) {
-        this.items = items
+        const filtered = items
             .filter(item => {
                 return item.count > 0;
             })
             .map(item => {
                 return <ResponseFacetQuery> { ...item };
             });
-        this.pageSize = pageSize;
+
-        this.currentPageSize = pageSize;
+        super(filtered, pageSize);
     }
 
-    hasMoreItems(): boolean {
-        return this.items.length > this.currentPageSize;
-    }
-
-    showMoreItems() {
-        this.currentPageSize += this.pageSize;
-    }
-
-    clear() {
-        this.currentPageSize = this.pageSize;
-        this.items = [];
-    }
 }

lib/content-services/search/components/search-filter/models/search-filter-list.model.ts

@@ -0,0 +1,86 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class SearchFilterList<T> implements Iterable<T> {
+    items: T[] = [];
+    pageSize: number = 5;
+    currentPageSize: number = 5;
+
+    get visibleItems(): T[] {
+        return this.items.slice(0, this.currentPageSize);
+    }
+
+    get length(): number {
+        return this.items.length;
+    }
+
+    get canShowMoreItems(): boolean {
+        return this.items.length > this.currentPageSize;
+    }
+
+    get canShowLessItems(): boolean {
+        return this.currentPageSize > this.pageSize;
+    }
+
+    get fitsPage(): boolean {
+        return this.pageSize > this.items.length;
+    }
+
+    constructor(items: T[] = [], pageSize: number = 5) {
+        this.items = items;
+        this.pageSize = pageSize;
+        this.currentPageSize = pageSize;
+    }
+
+    showMoreItems() {
+        if (this.canShowMoreItems) {
+            this.currentPageSize += this.pageSize;
+        }
+    }
+
+    showLessItems() {
+        if (this.canShowLessItems) {
+            this.currentPageSize -= this.pageSize;
+        }
+    }
+
+    clear() {
+        this.currentPageSize = this.pageSize;
+        this.items = [];
+    }
+
+    [Symbol.iterator](): Iterator<T> {
+        let pointer = 0;
+        let items = this.visibleItems;
+
+        return {
+            next(): IteratorResult<T> {
+                if (pointer < items.length) {
+                    return {
+                        done: false,
+                        value: items[pointer++]
+                    };
+                } else {
+                    return {
+                        done: true,
+                        value: null
+                    };
+                }
+            }
+        };
+    }
+}

lib/content-services/search/components/search-filter/search-filter.component.html

@@ -22,20 +22,28 @@
             <mat-panel-title>{{ facetQueriesLabel | translate }}</mat-panel-title>
         </mat-expansion-panel-header>
         <div class="checklist">
-            <ng-container *ngFor="let query of responseFacetQueries.visibleItems">
+            <ng-container *ngFor="let query of responseFacetQueries">
                 <mat-checkbox
                     [checked]="query.$checked"
                     (change)="onFacetQueryToggle($event, query)">
-                    {{ query.label }} ({{ query.count }})
+                    {{ query.label | translate }} ({{ query.count }})
                 </mat-checkbox>
             </ng-container>
         </div>
-        <button mat-button
+        <div class="facet-buttons">
-            *ngIf="responseFacetQueries.hasMoreItems()"
+            <button mat-button
-            (click)="responseFacetQueries.showMoreItems()">
+                *ngIf="responseFacetQueries.canShowLessItems"
-            {{ 'SEARCH.FILTER.ACTIONS.SHOW-MORE' | translate }}
+                (click)="responseFacetQueries.showLessItems()">
-            <mat-icon>keyboard_arrow_down</mat-icon>
+                {{ 'SEARCH.FILTER.ACTIONS.SHOW-LESS' | translate }}
-        </button>
+                <mat-icon>keyboard_arrow_up</mat-icon>
+            </button>
+            <button mat-button
+                *ngIf="responseFacetQueries.canShowMoreItems"
+                (click)="responseFacetQueries.showMoreItems()">
+                {{ 'SEARCH.FILTER.ACTIONS.SHOW-MORE' | translate }}
+                <mat-icon>keyboard_arrow_down</mat-icon>
+            </button>
+        </div>
     </mat-expansion-panel>
 
     <mat-expansion-panel
@@ -44,23 +52,31 @@
         (opened)="onFacetFieldExpanded(field)"
         (closed)="onFacetFieldCollapsed(field)">
         <mat-expansion-panel-header>
-            <mat-panel-title>{{ field.label }}</mat-panel-title>
+            <mat-panel-title>{{ field.label | translate }}</mat-panel-title>
         </mat-expansion-panel-header>
         <div class="checklist">
             <mat-checkbox
-                *ngFor="let bucket of field.getVisibleBuckets()"
+                *ngFor="let bucket of field.buckets"
                 [checked]="bucket.$checked"
                 (change)="onFacetToggle($event, field, bucket)">
-                {{ bucket.display || bucket.label }} ({{ bucket.count }})
+                {{ (bucket.display || bucket.label) | translate }} ({{ bucket.count }})
             </mat-checkbox>
         </div>
 
-        <button mat-button
+        <div class="facet-buttons" *ngIf="!field.buckets.fitsPage">
-            *ngIf="field.hasMoreItems()"
+            <button mat-button
-            (click)="field.showMoreItems()">
+                *ngIf="field.buckets.canShowLessItems"
-            {{ 'SEARCH.FILTER.ACTIONS.SHOW-MORE' | translate }}
+                (click)="field.buckets.showLessItems()">
-            <mat-icon>keyboard_arrow_down</mat-icon>
+                {{ 'SEARCH.FILTER.ACTIONS.SHOW-LESS' | translate }}
-        </button>
+                <mat-icon>keyboard_arrow_up</mat-icon>
+            </button>
+            <button mat-button
+                *ngIf="field.buckets.canShowMoreItems"
+                (click)="field.buckets.showMoreItems()">
+                {{ 'SEARCH.FILTER.ACTIONS.SHOW-MORE' | translate }}
+                <mat-icon>keyboard_arrow_down</mat-icon>
+            </button>
+        </div>
     </mat-expansion-panel>
 
 </mat-accordion>

lib/content-services/search/components/search-filter/search-filter.component.scss

@@ -6,3 +6,11 @@
         margin: 5px;
     }
 }
+
+.facet-buttons {
+    text-align: right;
+
+    .mat-button {
+        text-transform: uppercase;
+    }
+}

lib/content-services/search/components/search-filter/search-filter.component.spec.ts

@@ -307,8 +307,8 @@ describe('SearchSettingsComponent', () => {
         component.onDataLoaded(data);
 
         expect(component.responseFacetFields.length).toBe(2);
-        expect(component.responseFacetFields[0].buckets[0].$checked).toBeFalsy();
+        expect(component.responseFacetFields[0].buckets.items[0].$checked).toBeFalsy();
-        expect(component.responseFacetFields[1].buckets[0].$checked).toBeTruthy();
+        expect(component.responseFacetFields[1].buckets.items[0].$checked).toBeTruthy();
     });
 
     it('should reset queries and fields on empty response payload', () => {

lib/content-services/search/components/search-filter/search-filter.component.ts

@@ -24,6 +24,7 @@ import { FacetFieldBucket } from '../../facet-field-bucket.interface';
 import { SearchCategory } from '../../search-category.interface';
 import { ResponseFacetQuery } from '../../response-facet-query.interface';
 import { ResponseFacetQueryList } from './models/response-facet-query-list.model';
+import { SearchFilterList } from './models/search-filter-list.model';
 
 @Component({
     selector: 'adf-search-filter',
@@ -44,6 +45,8 @@ export class SearchFilterComponent implements OnInit {
     facetQueriesExpanded = false;
 
     constructor(public queryBuilder: SearchQueryBuilderService, private search: SearchService) {
+        this.responseFacetQueries = new ResponseFacetQueryList();
+
         if (queryBuilder.config && queryBuilder.config.facetQueries) {
             this.facetQueriesLabel = queryBuilder.config.facetQueries.label || 'Facet Queries';
             this.facetQueriesPageSize = queryBuilder.config.facetQueries.pageSize || 5;
@@ -158,12 +161,12 @@ export class SearchFilterComponent implements OnInit {
             const expandedFields = this.responseFacetFields.filter(f => f.expanded).map(f => f.label);
 
             this.responseFacetFields = (context.facetsFields || []).map(
-                (field: ResponseFacetField) => {
+                field => {
                     field.pageSize = field.pageSize || 5;
                     field.currentPageSize = field.pageSize;
                     field.expanded = expandedFields.includes(field.label);
 
-                    (field.buckets || []).forEach(bucket => {
+                    const buckets = (field.buckets || []).map(bucket => {
                         bucket.$field = field.label;
                         bucket.$checked = false;
 
@@ -173,21 +176,9 @@ export class SearchFilterComponent implements OnInit {
                         if (previousBucket) {
                            bucket.$checked = true;
                         }
+                        return bucket;
                     });
-
+                    field.buckets = new SearchFilterList<FacetFieldBucket>(buckets, field.pageSize);
-                    field.hasMoreItems = (): boolean => {
-                        return field.buckets && field.buckets.length > 0 && field.buckets.length > field.currentPageSize;
-                    };
-
-                    field.showMoreItems = () => {
-                        field.currentPageSize += field.pageSize;
-                    };
-
-                    field.getVisibleBuckets = (): FacetFieldBucket[] => {
-                        const buckets = field.buckets || [];
-                        return buckets.slice(0, field.currentPageSize);
-                    };
-
                     return field;
                 }
             );

lib/content-services/search/components/search-number-range/search-number-range.component.html

@@ -3,7 +3,8 @@
     <mat-form-field>
         <input
             matInput [formControl]="from" [errorStateMatcher]="matcher"
-            placeholder="{{ 'SEARCH.FILTER.RANGE.FROM' | translate }}">
+            placeholder="{{ 'SEARCH.FILTER.RANGE.FROM' | translate }}"
+            autocomplete="off">
         <mat-error *ngIf="from.hasError('pattern')">
             {{ 'SEARCH.FILTER.VALIDATION.INVALID-FORMAT' | translate }}
         </mat-error>
@@ -12,17 +13,18 @@
         </mat-error>
     </mat-form-field>
 
-    <mat-form-field >
+    <mat-form-field>
         <input
             matInput [formControl]="to" [errorStateMatcher]="matcher"
-            placeholder="{{ 'SEARCH.FILTER.RANGE.TO' | translate }}">
+            placeholder="{{ 'SEARCH.FILTER.RANGE.TO' | translate }}"
+            autocomplete="off">
         <mat-error *ngIf="to.invalid">
             {{ 'SEARCH.FILTER.VALIDATION.INVALID-FORMAT' | translate }}
         </mat-error>
     </mat-form-field>
 
 
-    <div>
+    <div class="facet-buttons">
         <button mat-button color="primary" (click)="reset()">
             {{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
         </button>

lib/content-services/search/components/search-number-range/search-number-range.component.scss

@@ -1,8 +1,5 @@
 .adf-search-number-range > form {
     display: inline-flex;
     flex-direction: column;
-
+    width: 100%;
-    .mat-button {
-        text-transform: uppercase;
-    }
 }

lib/content-services/search/components/search-radio/search-radio.component.html

@@ -1,6 +1,24 @@
-<mat-radio-group [(ngModel)]="value" (change)="changeHandler($event)">
+<mat-radio-group
+    [(ngModel)]="value"
+    (change)="changeHandler($event)">
     <mat-radio-button
-        *ngFor="let option of settings.options" [value]="option.value">
+        *ngFor="let option of options"
-        {{ option.name }}
+        [value]="option.value">
+        {{ option.name | translate }}
     </mat-radio-button>
 </mat-radio-group>
+
+<div class="facet-buttons" *ngIf="!options.fitsPage">
+    <button mat-icon-button
+        [disabled]="!options.canShowLessItems"
+        title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-LESS' | translate }}"
+        (click)="options.showLessItems()">
+        <mat-icon>keyboard_arrow_up</mat-icon>
+    </button>
+    <button mat-icon-button
+        [disabled]="!options.canShowMoreItems"
+        title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-MORE' | translate }}"
+        (click)="options.showMoreItems()">
+        <mat-icon>keyboard_arrow_down</mat-icon>
+    </button>
+</div>

lib/content-services/search/components/search-radio/search-radio.component.ts

@@ -21,6 +21,12 @@ import { MatRadioChange } from '@angular/material';
 import { SearchWidget } from '../../search-widget.interface';
 import { SearchWidgetSettings } from '../../search-widget-settings.interface';
 import { SearchQueryBuilderService } from '../../search-query-builder.service';
+import { SearchFilterList } from '../search-filter/models/search-filter-list.model';
+
+export interface SearchRadioOption {
+    name: string;
+    value: string;
+}
 
 @Component({
     selector: 'adf-search-radio',
@@ -37,8 +43,24 @@ export class SearchRadioComponent implements SearchWidget, OnInit {
     id: string;
     settings: SearchWidgetSettings;
     context: SearchQueryBuilderService;
+    options: SearchFilterList<SearchRadioOption>;
+    pageSize = 5;
+
+    constructor() {
+        this.options = new SearchFilterList<SearchRadioOption>();
+    }
 
     ngOnInit() {
+        if (this.settings) {
+            this.pageSize = this.settings.pageSize || 5;
+
+            if (this.settings.options && this.settings.options.length > 0) {
+                this.options = new SearchFilterList<SearchRadioOption>(
+                    this.settings.options, this.pageSize
+                );
+            }
+        }
+
         this.setValue(
             this.getSelectedValue()
         );

lib/content-services/search/components/search-slider/search-slider.component.html

@@ -7,7 +7,7 @@
     (change)="onChangedHandler($event)">
 </mat-slider>
 
-<div>
+<div class="facet-buttons">
     <button mat-button color="primary" (click)="reset()">
         {{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
     </button>

lib/content-services/search/response-facet-field.interface.ts

@@ -16,15 +16,12 @@
  */
 
 import { FacetFieldBucket } from './facet-field-bucket.interface';
+import { SearchFilterList } from './components/search-filter/models/search-filter-list.model';
 
 export interface ResponseFacetField {
     label: string;
-    buckets: Array<FacetFieldBucket>;
+    buckets: SearchFilterList<FacetFieldBucket>;
     pageSize?: number;
     currentPageSize?: number;
     expanded?: boolean;
-
-    hasMoreItems(): boolean;
-    showMoreItems(): void;
-    getVisibleBuckets(): Array<FacetFieldBucket>;
 }

lib/core/app-config/schema.json

@@ -519,7 +519,7 @@
                     "description": "This specifies the facet field."
                   },
                   "mincount": {
-                    "type": "integer",
+                    "type": "number",
                     "description": "This specifies the minimum count required for a facet field to be included in the response. The default value is 1."
                   },
                   "label": {
@@ -531,9 +531,13 @@
                     "description": "This restricts the possible constraints to only indexed values with a specified prefix."
                   },
                   "limit": {
-                    "type": "integer",
+                    "type": "number",
                     "description": "Maximum number of results"
                   },
+                  "pageSize": {
+                    "type": "number",
+                    "description": "Display page size"
+                  },
                   "offset": { "type": "integer" }
                 }
               }
@@ -583,8 +587,14 @@
                     "type": "object",
                     "required": [ "selector", "settings" ],
                     "properties": {
-                      "selector": { "type": "string" },
+                      "selector": {
-                      "settings": { "type": "object" }
+                        "description": "Unique component runtime identifier",
+                        "type": "string"
+                      },
+                      "settings": {
+                        "description": "Component-specific settings",
+                        "type": "object"
+                      }
                     }
                   }
                 }

package-lock.json

@@ -5,11 +5,11 @@
   "requires": true,
   "dependencies": {
     "@alfresco/adf-content-services": {
-      "version": "2.4.0-beta2",
+      "version": "2.4.0-beta3",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-2.4.0-beta2.tgz",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-2.4.0-beta3.tgz",
-      "integrity": "sha512-9EjOBhYLvASu2VszoDB211hISig47c6/cgBYdl9ccW2R4b0a5KkzHRnSg8ojUB9icdJfB8q7pkonHIrhKXJSdA==",
+      "integrity": "sha512-6HjqlV439BSkZacPEYP7iXDoWW10SUmEJrrvRLjvqzE+F++ok4SkiYbeexbeoG5xqbDzzPEHDfk+wZtCIpyWyw==",
       "requires": {
-        "@alfresco/adf-core": "2.4.0-beta2",
+        "@alfresco/adf-core": "2.4.0-beta3",
         "@angular/animations": "5.1.1",
         "@angular/cdk": "5.0.1",
         "@angular/common": "5.1.1",
@@ -24,7 +24,7 @@
         "@angular/platform-browser-dynamic": "5.1.1",
         "@angular/router": "5.1.1",
         "@ngx-translate/core": "9.1.1",
-        "alfresco-js-api": "2.4.0-beta2",
+        "alfresco-js-api": "2.4.0-beta3",
         "chart.js": "2.5.0",
         "core-js": "2.4.1",
         "hammerjs": "2.0.8",
@@ -41,9 +41,9 @@
       },
       "dependencies": {
         "alfresco-js-api": {
-          "version": "2.4.0-beta2",
+          "version": "2.4.0-beta3",
-          "resolved": "https://registry.npmjs.org/alfresco-js-api/-/alfresco-js-api-2.4.0-beta2.tgz",
+          "resolved": "https://registry.npmjs.org/alfresco-js-api/-/alfresco-js-api-2.4.0-beta3.tgz",
-          "integrity": "sha512-l3hYboYyb/ibpxnXXeLBwC+Lu9SjAhwAEDkFHCzzY+XkKtraa3q2ipQbyu1isscwpeTW3BBFLhAzcBtHbW8rxQ==",
+          "integrity": "sha512-5OCIBB6zIkROaFf2/CS85i/SNYkiu10wNnm0JbEe+d1oEG+WjMhBneBn2GDvFctFTlVa5h62hNDsGxknHcuhLw==",
           "requires": {
             "event-emitter": "0.3.4",
             "superagent": "3.8.2"
@@ -65,9 +65,9 @@
       }
     },
     "@alfresco/adf-core": {
-      "version": "2.4.0-beta2",
+      "version": "2.4.0-beta3",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-2.4.0-beta2.tgz",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-2.4.0-beta3.tgz",
-      "integrity": "sha512-bJcr/nopxgmUz4PHtfEDqGq1DkuJKikweTRe8osh5h7i4hUMy+tB6LN5nBrZULYHR3qbc+vE+9S4NG3KaOb3cQ==",
+      "integrity": "sha512-Njpv/vF+7Dj1FQTbp0oFduV5mEOkLym6uzekQ0OmxWss6q2U/a/c1TIHCsVaMU0fIREaX7wZPbfmKsOW5sFnlA==",
       "requires": {
         "@angular/animations": "5.1.1",
         "@angular/cdk": "5.0.1",
@@ -83,7 +83,7 @@
         "@angular/platform-browser-dynamic": "5.1.1",
         "@angular/router": "5.1.1",
         "@ngx-translate/core": "9.1.1",
-        "alfresco-js-api": "2.4.0-beta2",
+        "alfresco-js-api": "2.4.0-beta3",
         "chart.js": "2.5.0",
         "core-js": "2.4.1",
         "hammerjs": "2.0.8",
@@ -100,9 +100,9 @@
       },
       "dependencies": {
         "alfresco-js-api": {
-          "version": "2.4.0-beta2",
+          "version": "2.4.0-beta3",
-          "resolved": "https://registry.npmjs.org/alfresco-js-api/-/alfresco-js-api-2.4.0-beta2.tgz",
+          "resolved": "https://registry.npmjs.org/alfresco-js-api/-/alfresco-js-api-2.4.0-beta3.tgz",
-          "integrity": "sha512-l3hYboYyb/ibpxnXXeLBwC+Lu9SjAhwAEDkFHCzzY+XkKtraa3q2ipQbyu1isscwpeTW3BBFLhAzcBtHbW8rxQ==",
+          "integrity": "sha512-5OCIBB6zIkROaFf2/CS85i/SNYkiu10wNnm0JbEe+d1oEG+WjMhBneBn2GDvFctFTlVa5h62hNDsGxknHcuhLw==",
           "requires": {
             "event-emitter": "0.3.4",
             "superagent": "3.8.2"
@@ -124,11 +124,11 @@
       }
     },
     "@alfresco/adf-insights": {
-      "version": "2.4.0-beta2",
+      "version": "2.4.0-beta3",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-insights/-/adf-insights-2.4.0-beta2.tgz",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-insights/-/adf-insights-2.4.0-beta3.tgz",
-      "integrity": "sha512-y/IMKygizkiqeF8kWRw0VWBJmoSvwIKxitBDU/dgtypcNor4GMFS36okrKYlz9tqtnP/uyoLNmwAG0qYFRU0OQ==",
+      "integrity": "sha512-gYcIG3TsGxmcLZIfpmh+MpJURY/vuEf1OGP/OVbj8F+/WlfdLB0pWJqDVd4Hxh3uOkTv1k8FYhFyRmIsVuJj2w==",
       "requires": {
-        "@alfresco/adf-core": "2.4.0-beta2",
+        "@alfresco/adf-core": "2.4.0-beta3",
         "@angular/animations": "5.1.1",
         "@angular/cdk": "5.0.1",
         "@angular/common": "5.1.1",
@@ -143,7 +143,7 @@
         "@angular/platform-browser-dynamic": "5.1.1",
         "@angular/router": "5.1.1",
         "@ngx-translate/core": "9.1.1",
-        "alfresco-js-api": "2.4.0-beta2",
+        "alfresco-js-api": "2.4.0-beta3",
         "chart.js": "2.5.0",
         "core-js": "2.4.1",
         "hammerjs": "2.0.8",
@@ -160,9 +160,9 @@
       },
       "dependencies": {
         "alfresco-js-api": {
-          "version": "2.4.0-beta2",
+          "version": "2.4.0-beta3",
-          "resolved": "https://registry.npmjs.org/alfresco-js-api/-/alfresco-js-api-2.4.0-beta2.tgz",
+          "resolved": "https://registry.npmjs.org/alfresco-js-api/-/alfresco-js-api-2.4.0-beta3.tgz",
-          "integrity": "sha512-l3hYboYyb/ibpxnXXeLBwC+Lu9SjAhwAEDkFHCzzY+XkKtraa3q2ipQbyu1isscwpeTW3BBFLhAzcBtHbW8rxQ==",
+          "integrity": "sha512-5OCIBB6zIkROaFf2/CS85i/SNYkiu10wNnm0JbEe+d1oEG+WjMhBneBn2GDvFctFTlVa5h62hNDsGxknHcuhLw==",
           "requires": {
             "event-emitter": "0.3.4",
             "superagent": "3.8.2"
@@ -184,12 +184,12 @@
       }
     },
     "@alfresco/adf-process-services": {
-      "version": "2.4.0-beta2",
+      "version": "2.4.0-beta3",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-process-services/-/adf-process-services-2.4.0-beta2.tgz",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-process-services/-/adf-process-services-2.4.0-beta3.tgz",
-      "integrity": "sha512-dHAUzfpSzUyNG7sznPEA4s5ug55AfWjbZO++vQQ/pRgx1Dzr6CjNWV5Fuxlpx+CRpDVpfCsVpRqCdM8uOMLV0Q==",
+      "integrity": "sha512-WTnXT2qqfuKF+I/N2XSkMXCtpdTj5S/0zlsdI0fF2fYRwprp/8SuF+n9bQwQqXVjdUzfQB0EXT6B7Ik+VlyTXw==",
       "requires": {
-        "@alfresco/adf-content-services": "2.4.0-beta2",
+        "@alfresco/adf-content-services": "2.4.0-beta3",
-        "@alfresco/adf-core": "2.4.0-beta2",
+        "@alfresco/adf-core": "2.4.0-beta3",
         "@angular/animations": "5.1.1",
         "@angular/cdk": "5.0.1",
         "@angular/common": "5.1.1",
@@ -204,7 +204,7 @@
         "@angular/platform-browser-dynamic": "5.1.1",
         "@angular/router": "5.1.1",
         "@ngx-translate/core": "9.1.1",
-        "alfresco-js-api": "2.4.0-beta2",
+        "alfresco-js-api": "2.4.0-beta3",
         "chart.js": "2.5.0",
         "core-js": "2.4.1",
         "hammerjs": "2.0.8",
@@ -221,9 +221,9 @@
       },
       "dependencies": {
         "alfresco-js-api": {
-          "version": "2.4.0-beta2",
+          "version": "2.4.0-beta3",
-          "resolved": "https://registry.npmjs.org/alfresco-js-api/-/alfresco-js-api-2.4.0-beta2.tgz",
+          "resolved": "https://registry.npmjs.org/alfresco-js-api/-/alfresco-js-api-2.4.0-beta3.tgz",
-          "integrity": "sha512-l3hYboYyb/ibpxnXXeLBwC+Lu9SjAhwAEDkFHCzzY+XkKtraa3q2ipQbyu1isscwpeTW3BBFLhAzcBtHbW8rxQ==",
+          "integrity": "sha512-5OCIBB6zIkROaFf2/CS85i/SNYkiu10wNnm0JbEe+d1oEG+WjMhBneBn2GDvFctFTlVa5h62hNDsGxknHcuhLw==",
           "requires": {
             "event-emitter": "0.3.4",
             "superagent": "3.8.2"
@@ -1400,9 +1400,9 @@
       }
     },
     "alfresco-js-api": {
-      "version": "2.4.0-fe62e582941fe26a93267fef9d2ef0f1048d96fc",
+      "version": "2.4.0-31a7fc6e5d58dc8bf202ef9a80bc993c9f48fe18",
-      "resolved": "https://registry.npmjs.org/alfresco-js-api/-/alfresco-js-api-2.4.0-fe62e582941fe26a93267fef9d2ef0f1048d96fc.tgz",
+      "resolved": "https://registry.npmjs.org/alfresco-js-api/-/alfresco-js-api-2.4.0-31a7fc6e5d58dc8bf202ef9a80bc993c9f48fe18.tgz",
-      "integrity": "sha512-2sv3ktEJs+WX7YzN7pifUOsL0A9+j5uek066YO9fc7XidWhpNDwR0OEgdQqseuLmE4gjZVnKaYKNtQI2i0CQ4g==",
+      "integrity": "sha512-Ty3QQdvP+6/Fqe4CUuV6fYqkYG9xYvshnrHEzsFju36FSgNkWxZcOmwAAGVIWeNnCA7DuQqE7D+Vp7pgnPNTxQ==",
       "requires": {
         "event-emitter": "0.3.4",
         "superagent": "3.8.2"
@@ -6012,24 +6012,28 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "dev": true,
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "dev": true
         },
         "aproba": {
           "version": "1.2.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "dev": true,
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
+          "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6039,12 +6043,14 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
           "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
           "requires": {
             "balanced-match": "1.0.0",
@@ -6053,34 +6059,40 @@
         },
         "chownr": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.0.1.tgz",
+          "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=",
           "dev": true,
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
           "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
           "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
           "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "dev": true,
           "optional": true
         },
         "debug": {
           "version": "2.6.9",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6089,25 +6101,29 @@
         },
         "deep-extend": {
           "version": "0.4.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
+          "integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=",
           "dev": true,
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "dev": true,
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "dev": true,
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
+          "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6116,13 +6132,15 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "dev": true,
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6138,7 +6156,8 @@
         },
         "glob": {
           "version": "7.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6152,13 +6171,15 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "dev": true,
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.21",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.21.tgz",
+          "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6167,7 +6188,8 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
+          "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6176,7 +6198,8 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6186,18 +6209,21 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
           "dev": true
         },
         "ini": {
           "version": "1.3.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "dev": true,
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
           "requires": {
             "number-is-nan": "1.0.1"
@@ -6205,13 +6231,15 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "dev": true,
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
           "requires": {
             "brace-expansion": "1.1.11"
@@ -6219,12 +6247,14 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         },
         "minipass": {
           "version": "2.2.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz",
+          "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
           "dev": true,
           "requires": {
             "safe-buffer": "5.1.1",
@@ -6233,7 +6263,8 @@
         },
         "minizlib": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.1.0.tgz",
+          "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6242,7 +6273,8 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "requires": {
             "minimist": "0.0.8"
@@ -6250,13 +6282,15 @@
         },
         "ms": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true,
           "optional": true
         },
         "needle": {
           "version": "2.2.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/needle/-/needle-2.2.0.tgz",
+          "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6267,7 +6301,8 @@
         },
         "node-pre-gyp": {
           "version": "0.9.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.9.1.tgz",
+          "integrity": "sha1-8RwHUW3ZL4cZnbx+GDjqt81WyeA=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6285,7 +6320,8 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6295,13 +6331,15 @@
         },
         "npm-bundled": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.3.tgz",
+          "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==",
           "dev": true,
           "optional": true
         },
         "npm-packlist": {
           "version": "1.1.10",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.1.10.tgz",
+          "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6311,7 +6349,8 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6323,18 +6362,21 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
           "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "dev": true,
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
           "requires": {
             "wrappy": "1.0.2"
@@ -6342,19 +6384,22 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "dev": true,
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "dev": true,
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6364,19 +6409,22 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "dev": true,
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "dev": true,
           "optional": true
         },
         "rc": {
           "version": "1.2.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.6.tgz",
+          "integrity": "sha1-6xiYnG1PTxYsOZ953dKfODVWgJI=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6388,7 +6436,8 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "dev": true,
               "optional": true
             }
@@ -6396,7 +6445,8 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6411,7 +6461,8 @@
         },
         "rimraf": {
           "version": "2.6.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
+          "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6420,42 +6471,49 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
           "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "dev": true,
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "dev": true,
           "optional": true
         },
         "semver": {
           "version": "5.5.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
+          "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
           "dev": true,
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "dev": true,
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "dev": true,
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
           "requires": {
             "code-point-at": "1.1.0",
@@ -6465,7 +6523,8 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6474,7 +6533,8 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
             "ansi-regex": "2.1.1"
@@ -6482,13 +6542,15 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "dev": true,
           "optional": true
         },
         "tar": {
           "version": "4.4.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.1.tgz",
+          "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6503,13 +6565,15 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "dev": true,
           "optional": true
         },
         "wide-align": {
           "version": "1.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
+          "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6518,12 +6582,14 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "dev": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
+          "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
           "dev": true
         }
       }

package.json

@@ -50,10 +50,10 @@
     "process services"
   ],
   "dependencies": {
-    "@alfresco/adf-content-services": "2.4.0-beta2",
+    "@alfresco/adf-content-services": "2.4.0-beta3",
-    "@alfresco/adf-core": "2.4.0-beta2",
+    "@alfresco/adf-core": "2.4.0-beta3",
-    "@alfresco/adf-insights": "2.4.0-beta2",
+    "@alfresco/adf-insights": "2.4.0-beta3",
-    "@alfresco/adf-process-services": "2.4.0-beta2",
+    "@alfresco/adf-process-services": "2.4.0-beta3",
     "@angular/animations": "5.1.1",
     "@angular/cdk": "5.0.1",
     "@angular/common": "5.1.1",
@@ -71,7 +71,7 @@
     "@mat-datetimepicker/moment": "1.0.4",
     "@ngx-translate/core": "9.1.1",
     "@nrwl/schematics": "^1.0.3",
-    "alfresco-js-api": "^2.4.0-31a7fc6e5d58dc8bf202ef9a80bc993c9f48fe18",
+    "alfresco-js-api": "2.4.0-31a7fc6e5d58dc8bf202ef9a80bc993c9f48fe18",
     "chart.js": "2.5.0",
     "classlist.js": "1.1.20150312",
     "core-js": "2.4.1",